From eaae375b94ea4a94f8fe341213652440452af95f Mon Sep 17 00:00:00 2001
From: Jonghoon <minn4072@gmail.com>
Date: Sun, 14 Apr 2024 23:01:07 +0900
Subject: [PATCH] Update README.md

---
 README.md | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index f947a45..d1173df 100644
--- a/README.md
+++ b/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,8 +67,6 @@ npm run dev
  ┃ ┣ 📜ContentDetailPage.tsx
  ┃ ┣ 📜ContentListPage.tsx
  ┃ ┗ 📜RootLayout.tsx
- ┣ 📂styles
- ┃ ┗ 📜index.css
  ┣ 📜main.tsx
  ┣ 📜queryClient.ts
  ┣ 📜router.tsx
@@ -97,9 +94,8 @@ npm run dev
   - `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 적용**하여 사용자 경험 개선 고려
@@ -110,10 +106,16 @@ npm run dev
   - 무조건 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)
 ---
@@ -127,10 +129,10 @@ npm run dev
 #### 좋아요 버튼 클릭 시 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)
 ---
@@ -140,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)
+---