[#27] list페이지 styled-components로 변경, 카드 arrow버튼 간단하게 구현

[nidor022]

test데이터도 아직 완벽하게 테스트용은 아니고 단지 출력이 잘 되는지만 테스트할려고 뽑은거라서 아~~~주 간단하게만 해놓았습니다.

📝 작업 내용

일단 기존에 기본적인 css스타일로 되어있던거 styled-components로 변경했고,
arrow버튼도 그냥 기능만 되는지 테스트용으로 간단하게 구현하였습니다.

📷 스크린샷 (선택)

껄껄... 😢

🧐 해결해야 하는 문제 (선택)

API명세를 읽고있긴한데 인기순, 최신순으로 가져오는 요청방식이 없는거 같더라구요.
이걸 데이터를 다 가져온다음에 프론트에서 정리하는게 맞는거겠죠 그러면?

[cskime]

API명세를 읽고있긴한데 인기순, 최신순으로 가져오는 요청방식이 없는거 같더라구요.
이걸 데이터를 다 가져온다음에 프론트에서 정리하는게 맞는거겠죠 그러면?

네. API에 정렬 옵션이 없으면 client에서 정렬해서 사용해야 할 것 같습니다.

[cskime]

지금보니까 몇 가지 문제가 있네요.

• feature/#12 branch에서 진행한 작업이지만, 이 PR에는 #27 이슈가 연결되어 있습니다.
• 최신 upstream:develop branch에서 feature/#27 branch를 만들고 작업을 시작했어야 하는데, 아마도 #12 작업이 끝나고 곧바로 #27 이슈 관련 작업을 진행하신 것 같습니다.

지금 변경사항이 너무 많고 복잡해져서 계속 수정을 이어나가는건 비효율적일것 같은데요.
일단 의도한 대로 코드가 동작하는지, 다른 error는 없는지 확인하신 다음 이 PR을 merge 하시고 더 수정해야 하는 부분이 있다면 조금씩 나눠서 작은 단위로 다른 PR을 만드시는게 좋을 것 같습니다.

이후로 PR을 만드실 때는 아래 내용을 조금 더 신경써 주시면 좋겠습니다.

1. Commit 단위를 조금 더 작게 나눠주세요.
2. Commit message만 보고 포함된 변경 사항을 대략적으로 파악할 수 있도록 간결하게 message를 작성해주세요.
   • Commit message가 너무 길어지거나, 변경사항을 간결하게 작성하기 어렵다면 너무 많은 변경사항이 포함되었다는 의미일 수 있습니다.
   • 이런 경우, 1번 처럼 commit 1개에 포함되는 변경사항을 더 독립적이고 작은 단위로 만들어보세요.
3. GitHub에서 issue를 만들고 새 작업을 시작할 때는 반드시 upstream:develop에서 feature/#issue branch를 만들어주세요. 개발을 진행하면서 수시로 지금 branch가 개발하고 있는 issue 번호에 해당하는지 확인해주세요.
4. PR 본문을 작성할 때는 bullet list로 작성해주세요. 인용(>)을 포함한 줄글은 비교적 읽기 어렵습니다.

[cskime]

@nidor022
message-list.jsx 파일에서 사용하지 않는 변수를 선언해서 ESLint error가 발생하고 있습니다.
개발하신 파일에서 한 번씩 저장을 실행해서 formatter를 실행하시고, error를 해결해주세요.

혹시 이런 error가 발생하지 않으시면 VSCode에 ESLint 확장을 설치하셨는지 확인해주세요.

가능하면 이 문제는 PR을 merge하기 전에 수정해서 이 PR에 포함시켜주세요.
그런 다음, 추가 approve는 기다리지 말고 바로 merge 하셔도 괜찮습니다.