From 831f726a393dd985a875c83e76ce28edd371f803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EB=B3=91=EC=9A=B1?=
 <103362820+wookki@users.noreply.github.com>
Date: Fri, 19 Jan 2024 01:24:15 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20READ.ME=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 6f7b35fb..dbc9157c 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,11 @@
 # 🚗 안전한 세차용품 정보 제공 플랫폼
 
-- 배포 URL: https://f1-wash-pedia-fe.vercel.app
-- 스토리북 URL: https://www.chromatic.com/library?appId=659a0cf1b613430cc09b3672
-- 피그마 URL: https://www.figma.com/file/B4wGiQ4M4k3mtcSyyK0ATf/washpedia?type=design&node-id=241-4547&mode=design&t=IuuBM2gGXeTFVTIW-0
+## 🔗 프로젝트 링크
 
+- [배포 URL](https://f1-wash-pedia-fe.vercel.app)
+- [스토리북 URL](https://www.chromatic.com/library?appId=659a0cf1b613430cc09b3672)
+- [피그마 URL](https://www.figma.com/file/B4wGiQ4M4k3mtcSyyK0ATf/washpedia?type=design&node-id=241-4547&mode=design&t=IuuBM2gGXeTFVTIW-0)
+- [노션 URL](https://www.notion.so/Wash-pedia-0d4a31ff248349b3a3ea202e048303d5)
 
 <br />
 
@@ -17,8 +19,10 @@
 <br />
 
 ## 🕹️ 기술적 성취
+
 - 백엔드 팀과 비동기적 소통 및 협업 경험
 - 기획부터 디자인까지 참여한 경험
+- storybook을 이용한 시각적 회귀 테스트 및 vitest, msw를 이용한 테스트 코드 작성
 
 <br />
 
@@ -77,3 +81,46 @@
 **그 외**<br />
 ![Eslint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)
 
+<br />
+
+## 👍 성능 최적화
+- 웹 폰트 다운로드 시간을 줄이기 위해 woff2 확장자 추가 및 3초 이상 폰트가 다운로드 되지 못한 경우, 기존 폰트를 사용하도록 fallback 설정
+- 필요한 시점에 이미지를 불러오도록 lazy loading을 적용 및 layout shift를 방지하기 위한 Next.js image 태그 적용
+- 렌더링 시 불필요한 연산을 줄이기 위해 useCallback, useMemo 사용
+- dynamic import를 사용하여 빌드 타임이 아닌 런타임에서 컴포넌트를 랜더링 하도록 코드 스플리팅 적용
+- react-hook-form을 사용하여 불필요한 리랜더링 방지 및 마운팅 속도 증가
+- 불필요한 api 요청을 방지하기 위해 tanstack-query를 활용한 데이터 캐싱
+
+<br />
+
+## ✈️ 진행 사항
+- 초기 환경 설정
+  - 린트 및 스타일 린트 설정
+  - tanstack-query 보일러 플레이트 제작
+  - redux-toolkit 보일러 플레이트 제작
+  - storybook 보일러 플레이트 제작
+  - vitest 보일러 플레이트 제작
+  - msw 보일러 플레이트 제작
+  - pretandard 폰트 설정
+  - 컬러 팔레트 제작
+  - ci / cd workflow 작성
+  - vercel 배포
+    
+- 20개 공통 컴포넌트 제작
+  - [스토리북 URL](https://www.chromatic.com/library?appId=659a0cf1b613430cc09b3672) <- 참고해주세요!
+    
+- 페이지 <- 모바일 환경에서 봐주세요!
+  - 메인 페이지 UI 제작 [홈 페이지](https://f1-wash-pedia-fe.vercel.app)
+  - 회원 가입 페이지 UI 및 테스트 코드 작성 [회원가입 페이지](https://f1-wash-pedia-fe.vercel.app/signup)
+  - 로그인 페이지 UI 제작 [로그인 페이지](https://f1-wash-pedia-fe.vercel.app/login)
+
+## 🖐️ 질문 사항
+1. 스토리북을 사용하고 있지만 단순히 props만 바꿔가며 변경된 UI만 볼 수 있도록 테스팅을 하고 있는데 현업에선 어떤 식으로 스토리북을 사용하나요?
+2. next.js에서 private router 구현하려면 HOC를 이용하여 컴포넌트를 감싸 유저가 가진 token을 이용하여 유효한 회원인지 판단하는 로직 일반적인가요? 그게 아니라면
+어떤 식으로 구현하는 게 좋을까요?
+3. swiper.js를 사용하여 캐러셀을 제작했는데 초기 랜더링 시 layout shift가 발생하는 문제점이 있어요. 이 문제점을 해결할 수 있는 좋은 방법이 있을까요?
+   
+<img src="https://github.com/Kernel360/F1-WashPedia-FE/assets/103362820/db7a22ee-b51a-45f9-8ec4-52e7d4e515d6" width="300" height="400"/>
+
+
+