diff --git a/README.md b/README.md index d1173df..fa17b07 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,13 @@ -# AROOO 프론트엔드 과제 +# [아루] AROOO WEB 프론트엔드 과제 ![image](https://github.com/JunJongHun/AROOO/assets/90402926/3930a48d-f3bf-4b26-aacb-e9a901fcb1a5) -AROOO WEB 프론트엔드 과제 프로젝트 입니다. +#### AROOO는 여성을 위한 웰니스 플랫폼 '자기만의방'을 만들고 있습니다. + + + +## 배포 환경 접속 방법 +URL : [배포 주소](https://d33bvz1hdswgqw.cloudfront.net) + ## 개발 환경 @@ -26,7 +32,8 @@ npm install npm run dev ``` -기본 로 접속 +### 개발 환경 접속 방법 +URL : ## 기술 스택 @@ -38,41 +45,71 @@ npm run dev - React Router Dom - MSW - Chakra UI +- S3 +- CloudFront +- Api Gateway +- Lambda +- DynamoDB ### 디렉토리 구조 +
+📦 AROOO 프로젝트 구조 ```bash -📦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 - ┣ 📜main.tsx - ┣ 📜queryClient.ts - ┣ 📜router.tsx - ┣ 📜types.ts - ┗ 📜vite-env.d.ts +📦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 ``` + +
+ --- ### 요구사항 체크 리스트 @@ -112,6 +149,12 @@ npm run dev - MSW를 활용하여 Mock Sever를 구현 +- CloudFront + S3 이용한 배포 + +- Github Actions 이용해 CD 적용 + +- API 서버 Api Gateway + Lambda + DynamoDB 활용해 Serverless 아키텍처 구현 + --- ### 구현 화면