Skip to content

JunJongHun/AROOO

Repository files navigation

[아루] AROOO WEB 프론트엔드 과제

image

AROOO는 여성을 위한 웰니스 플랫폼 '자기만의방'을 만들고 있습니다.

배포 환경 접속 방법

https://arooo.org

개발 환경

  • node.js v18.19.1

설치 및 실행

레파지토리 클론

$ git clone https://github.com/JunJongHun/AROOO.git

의존성 패키지 설치

npm install

개발 환경 실행

npm run dev

개발 환경 접속 방법

http://localhost:5173

기술 스택

  • React
  • Typescript
  • Vite
  • React Query
  • Axios
  • React Router Dom
  • MSW
  • Chakra UI
  • S3
  • CloudFront
  • Api Gateway
  • Lambda
  • DynamoDB

디렉토리 구조

📦 AROOO 프로젝트 구조
📦AROOO
 ┣ 📂.github
 ┃ ┗ 📂workflows
 ┃ ┃ ┗ 📜main.yaml
 ┣ 📂public
 ┃ ┣ 📜arooo_favicon.png
 ┃ ┗ 📜mockServiceWorker.js
 ┣ 📂src
 ┃ ┣ 📂apis
 ┃ ┃ ┣ 📜config.ts
 ┃ ┃ ┗ 📜contents.ts
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜arooo.png
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📜ContentItem.tsx
 ┃ ┃ ┣ 📜ContentList.tsx
 ┃ ┃ ┣ 📜Fallback.tsx
 ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┣ 📜HitAreaWrapper.tsx
 ┃ ┃ ┣ 📜QueryErrorBoundary.tsx
 ┃ ┃ ┗ 📜SkeletonContentList.tsx
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📜useInfiniteScroll.tsx
 ┃ ┃ ┗ 📜useOptimisticLikeUpdate.tsx
 ┃ ┣ 📂mocks
 ┃ ┃ ┣ 📜browsers.ts
 ┃ ┃ ┣ 📜data.ts
 ┃ ┃ ┗ 📜handlers.ts
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜ContentDetailPage.tsx
 ┃ ┃ ┣ 📜ContentListPage.tsx
 ┃ ┃ ┗ 📜RootLayout.tsx
 ┃ ┣ 📂styles
 ┃ ┃ ┗ 📜theme.ts
 ┃ ┣ 📜main.tsx
 ┃ ┣ 📜queryClient.ts
 ┃ ┣ 📜router.tsx
 ┃ ┣ 📜types.ts
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.eslintrc.cjs
 ┣ 📜.gitignore
 ┣ 📜.gitmessage.txt
 ┣ 📜README.md
 ┣ 📜buildspec.yaml
 ┣ 📜index.html
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┣ 📜tsconfig.node.json
 ┗ 📜vite.config.ts

요구사항 체크 리스트

  • Api 서버로부터 콘텐츠 목록을 불러와 화면에 표시합니다.
    • 목록 아이템 항목: 콘텐츠 타이틀, 좋아요 버튼, 좋아요 수
  • 목록 내 아이템을 선택하면 콘텐츠 상세 페이지로 이동합니다.
    • 콘텐츠 상세 페이지 항목: 콘텐츠 타이틀, 콘텐츠 본문, 좋아요 버튼, 좋아요 수
  • 좋아요 버튼 클릭 시 API를 통해 서버에 값을 업데이트 합니다.
    • 좋아요 버튼은 누를 때마다 좋아요 수의 카운트가 올라갑니다.
  • 상세 페이지 내에서의 좋아요 버튼 클릭 시 목록 내 아이템에도 좋아요 수 값이 업데이트가 되어야 합니다.

우대사항

  • 콘텐츠 목록의 무한 스크롤 구현
  • 비지니스 로직 추상화 처리
  • 비지니스 로직 테스트

구현 내용

  • 컴포넌트 내 비지니스 로직을 Custom Hook으로 추상화 하여 재사용성과 UI에 집중 할 수 있도록 분리

    • useDataFetching : 컴포넌트 내 API 요청 코드 작성 시, 중복 작성되는 state, useEffect를 줄이고 데이터 요청에 상태에 따른 state를 쉽게 관리 -> useQuery로 대체
    • useContentList : 콘텐츠 목록 무한스크롤을 구현하기 위해 다음 목록을 불러올 수 있는지 판단 가능한 hasNext를 포함한 필요한 상태 관리 -> useInfinitiQuery로 대체
    • useInfiniteScroll : Intersection Observer API를 활용하여 특정 요소를 관찰 할 수 있고, 옵저버가 관찰하는 요소의 가시성 여부에 따라 callbalck 함수 실행 ( 무한스크롤 구현에 활용 )
    • 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를 구현

  • CloudFront + S3 이용한 배포

  • Github Actions 이용해 CD 적용

  • API 서버 Api Gateway + Lambda + DynamoDB 활용해 Serverless 아키텍처 구현


구현 화면

Api 서버로부터 콘텐츠 목록을 불러오기 ( 무한스크롤 적용 )

아루1

목록 내 아이템을 선택하면 콘텐츠 상세 페이지로 이동

아루2

좋아요 버튼 클릭 시 API를 통해 서버에 값을 업데이트

상세 페이지 내에서의 좋아요 버튼 클릭 시 목록 내 아이템에도 좋아요 수 값이 업데이트

아루17

Suspense 적용 ( 지연로딩 발생 시 )

아루5

ErrorBoundary 적용

아루4

좋아요 터치 범위 확장

적용 전

아루8

적용 후

아루7

About

AROOO 기업 과제

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published