docs : 7주차 README.md 작성

README.md

@@ -2,6 +2,55 @@
 
 **코드잇 12기 스프린트 내용입니다.**
 
+## 디렉토리 구조(7주차)
+
+```
+📂src
+ ┣ 📂api
+ ┣ 📂assets
+ ┃ ┣ 📂images
+ ┃ ┗ 📂styles
+ ┃   ┣ 📜Global.css
+ ┃   ┗ 📜Index.scss
+ ┣ 📂components
+ ┃ ┣ 📂layouts
+ ┃ ┃ ┣ 📂AddItemPageLayout
+ ┃ ┃ ┣ 📂HomePageLayout
+ ┃ ┃ ┣ 📂ItemsDetailPageLayout
+ ┃ ┃ ┣ 📂ItemsPageLayout
+ ┃ ┃ ┣ 📂UI
+ ┃ ┗ 📜App.jsx
+ ┣ 📂pages
+ ┣ 📂routes
+ ┣ 📂utils
+ ┗ 📜index.jsx
+```
+
+## 7주차 스프린트
+
+### 어떻게 스타일링 할 것인가?
+
+- 지난 주차때는 styled components를 사용했기 때문에 이번 주차도 새롭게 배운 css 스타일링을 하는 것이 좋겠다고 생각했다.
+- tailwind를 사용하여 스타일링하였고, 기존 스타일은 유지하되, 이번에 새롭게 구현한 페이지만 우선 tailwind를 적용했다.
+
+### 댓글의 개수를 정확히 알 수 없는데, 어떻게 화면에 렌더링 할 것인가?
+
+- 댓글이 아예 없을 경우에는 아직 댓글이 달리지 않은 상품이라는 걸 알려주기 위해 조건부 렌더링하였다.
+- 초기 params에 limit를 3개로 주었고, 스웨거를 확인해보니 cursor방식으로 페이지가 구현되어 있어서, nextCursor가 값이 있을 때 더 보기 버튼을 생성하도록 구현하였다.
+- 더 보기 버튼을 클릭하면 nextCursor의 값을 반영한 params로 GET 리퀘스트를 받아서 기존에 있던 리스트 뒤에 추가하도록 구현했다.
+
+### 상품의 수정 삭제, 댓글의 수정, 삭제 기능을 구현해야 하는 것인가?
+
+- Figma 시안에는 수정하기 삭제하기 기능이 있는 것처럼 보였지만, 아직 로그인 기능을 개발하지 않았는데, 해당 기능이 수행된다는 것이 문제라고 생각했다.
+  - 다른 사람이 내 댓글이나 상품을 변경시키는게 말이 안된다고 생각했다.
+- 때문에, Dropdown 레이아웃을 잡되, 클릭에 따른 api 요청 및 기능 구현은 아직 완성하지 않았다.
+
+### Heart 아이콘의 Hover 효과는?
+
+- 요구사항에 모든 버튼에 대해 자유롭게 Hover 효과를 적용하라고 되어있었다.
+- Heart 아이콘에 Hover 효과를 부여해서 배경색을 변화시키고 싶었는데, 찾아보니깐 svg 파일을 리액트 컴포넌트로 변환시킬 수 있는 걸 알게 되었다.
+- 리액트 컴포넌트로 변환시킨 svg 컴포넌트가 hover 됐을 때 fill속성에 값을 줌으로써 배경색을 채웠다.
+
 ## 디렉토리 구조(6주차)
 
 ```