Merge branch 'main' of https://github.com/JunJongHun/AROOO

README.md

@@ -1,4 +1,4 @@
-# AROO 프론트엔드 과제
+# AROOO 프론트엔드 과제
 ![image](https://github.com/JunJongHun/AROOO/assets/90402926/3930a48d-f3bf-4b26-aacb-e9a901fcb1a5)
 
 AROOO WEB 프론트엔드 과제 프로젝트 입니다.
@@ -53,13 +53,12 @@ npm run dev
  ┃ ┣ 📜ContentList.tsx
  ┃ ┣ 📜Fallback.tsx
  ┃ ┣ 📜Header.tsx
+ ┃ ┣ 📜HitAreaWrapper.tsx
  ┃ ┣ 📜QueryErrorBoundary.tsx
  ┃ ┗ 📜SkeletonContentList.tsx
  ┣ 📂hooks
- ┃ ┣ 📜useContentList.tsx
- ┃ ┣ 📜useDataFetching.tsx
  ┃ ┣ 📜useInfiniteScroll.tsx
- ┃ ┗ 📜useLikeUp.tsx
+ ┃ ┗ 📜useOptimisticLikeUpdate.tsx
  ┣ 📂mocks
  ┃ ┣ 📜browsers.ts
  ┃ ┣ 📜data.ts
@@ -68,15 +67,13 @@ npm run dev
  ┃ ┣ 📜ContentDetailPage.tsx
  ┃ ┣ 📜ContentListPage.tsx
  ┃ ┗ 📜RootLayout.tsx
- ┣ 📂styles
- ┃ ┗ 📜index.css
  ┣ 📜main.tsx
  ┣ 📜queryClient.ts
  ┣ 📜router.tsx
  ┣ 📜types.ts
  ┗ 📜vite-env.d.ts
 ```
-
+---
 ### 요구사항 체크 리스트
 
 - [x] Api 서버로부터 콘텐츠 목록을 불러와 화면에 표시합니다.
@@ -91,45 +88,51 @@ npm run dev
 - [x] 콘텐츠 목록의 무한 스크롤 구현
 - [x] 비지니스 로직 추상화 처리
 - [ ] 비지니스 로직 테스트
-
+---
 ### 구현 내용
 - 컴포넌트 내 **비지니스 로직을 Custom Hook으로 추상화** 하여 **재사용성과 UI에 집중 할 수 있도록 분리**
-  - `useDataFetching` : 컴포넌트 내 API 요청 코드 작성 시, 중복 작성되는 state, useEffect를 줄이고 데이터 요청에 상태에 따른 state를 쉽게 관리
-  - `useContentList` : 콘텐츠 목록 무한스크롤을 구현하기 위해 다음 목록을 불러올 수 있는지 판단 가능한 hasNext를 포함한 필요한 상태 관리
+  - `useDataFetching` : 컴포넌트 내 API 요청 코드 작성 시, 중복 작성되는 state, useEffect를 줄이고 데이터 요청에 상태에 따른 state를 쉽게 관리 -> `useQuery`로 대체
+  - `useContentList` : 콘텐츠 목록 무한스크롤을 구현하기 위해 다음 목록을 불러올 수 있는지 판단 가능한 hasNext를 포함한 필요한 상태 관리 -> `useInfinitiQuery`로 대체
   - `useInfiniteScroll` : Intersection Observer API를 활용하여 특정 요소를 관찰 할 수 있고, 옵저버가 관찰하는 요소의 가시성 여부에 따라 callbalck 함수 실행 ( 무한스크롤 구현에 활용 )
-
-- MSW를 활용하여 Mock Sever를 구현 
-
+  - `useOptimisticLikeUpdate` : useMutation을 사용하여 성공시 좋아요 Optimistic UI 적용 및 연관된 다른 캐시값들 동기화, 실패시 Rollback 구현
+
 - **서버 부하를 고려하고 빠른 렌더링을 위한 React-Query 캐싱 기능 적용**
 
 - 좋아요 업데이트 시, **Optimistic Update 적용**하여 사용자 경험 개선 고려
   - React-Query를 활용하여 좋아요 버튼 클릭시 캐싱된 값을 먼저 업데이트 하고 API 요청 실패 시, 이전 값으로 **Rollback** 구현
   - 콘텐츠 상세 페이지 좋아요 값 업데이트 성공 시, **콘텐츠 목록에 좋아요 값 동기화**
 
 - Suspense와 useSuspenseQuery를 사용해 사용자에게 예측 가능한 Skeleton UI를 보여줌으로써 렌더링 시간에 대한 체감 감소
+  - 무조건 Skeleton UI를 보여주는 것은 사용자 경험에 좋지 않을 수 있기에 응답 속도 0.3s 기준으로 렌더링 여부 결정
 
 - ErrorBoundary를 사용해 UI의 일부분에서 발생하는 자바스크립트 에러가 전체 애플리케이션 중지 하지 않도록 구현
 
+- 좋아요 터치 범위 확장 ( 모바일 고려 )
+  - 재사용 가능한 `<HitAreaWrapper/>` 구현
+
+- MSW를 활용하여 Mock Sever를 구현 
+
+---
 ### 구현 화면
 
-#### Api 서버로부터 콘텐츠 목록을 불러오고 무한스크롤 적용
+#### Api 서버로부터 콘텐츠 목록을 불러오기 ( 무한스크롤 적용 )
 
 ![아루1](https://github.com/JunJongHun/AROOO/assets/90402926/fd89547f-fde8-49bd-8db1-746b446ae55b)
 ---
 
 
 #### 목록 내 아이템을 선택하면 콘텐츠 상세 페이지로 이동
 
-![아루2](https://github.com/JunJongHun/AROOO/assets/90402926/47c42d2a-c6ba-49a9-888c-c91d8c4876f7)
+![아루2](https://github.com/JunJongHun/AROOO/assets/90402926/bb8c3112-0ef5-4ff7-9793-a6d49e859865)
 ---
 
 #### 좋아요 버튼 클릭 시 API를 통해 서버에 값을 업데이트
 #### 상세 페이지 내에서의 좋아요 버튼 클릭 시 목록 내 아이템에도 좋아요 수 값이 업데이트
 
-![아루3](https://github.com/JunJongHun/AROOO/assets/90402926/748faece-0751-415e-83d5-73c388e7059f)
+![아루17](https://github.com/JunJongHun/AROOO/assets/90402926/386fb2b8-2a0a-4728-bbb5-7cadee17905b)
 ---
 
-#### Suspense 적용
+#### Suspense 적용 ( 지연로딩 발생 시 )
 
 ![아루5](https://github.com/JunJongHun/AROOO/assets/90402926/d19c8856-f7ed-4b78-b9a7-a23406b1fb9a)
 ---
@@ -139,3 +142,13 @@ npm run dev
 ![아루4](https://github.com/JunJongHun/AROOO/assets/90402926/dbae83ea-df99-43f3-8c7b-adf89e97bc34)
 ---
 
+#### 좋아요 터치 범위 확장 
+
+적용 전
+
+![아루8](https://github.com/JunJongHun/AROOO/assets/90402926/ce1953f7-2951-438f-8bb5-68a750dadc24)
+
+적용 후
+
+![아루7](https://github.com/JunJongHun/AROOO/assets/90402926/4cc5ea2c-9be8-4349-9acc-86ca9f3955a5)
+---