Merge pull request #706 from codefug/React-이승현-Sprint8

[이승현] Sprint 11
codeit-bootcamp-frontend · Jun 17, 2024 · ff7f23b · ff7f23b
2 parents 273a74c + fe1e2ea
commit ff7f23b
Show file tree

Hide file tree

Showing 98 changed files with 1,845 additions and 932 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -2,6 +2,7 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
+    "eslint-plugin-lodash-fp",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",

diff --git a/.github/delete-merged-branch-config.yml b/.github/delete-merged-branch-config.yml
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,10 @@ dist
 dist-ssr
 *.local
 
+# env
+.env.local*
+.env
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

diff --git a/README.md b/README.md
@@ -1,55 +1,40 @@
-# sprint 7
+## Sprint 11
 
-![alt text](./exampleImage/sprint7.png)
-![alt text](./exampleImage/sprint7-1.png)
-![alt text](./exampleImage/sprint7-2.png)
-![alt text](./exampleImage/sprint7-3.png)
+****
+### 기본 사항
+- 유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로  POST 요청해서  성공 응답을 받으면 회원가입이 완료됩니다.
+- 회원가입이 완료되면 “/login”로 이동합니다.
+- 회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
+- 회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIp”으로  POST 요청을 하면 로그인이 완료됩니다.
+- 로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
+- 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
+- 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.
 
-## 체크리스트 [기본]
+### 심화
+- 로그인, 회원가입 기능에 react-hook-form을 활용해봅니다.
 
-## 상품 상세
+### 백엔드 API 주소
 
-"/products/{productId}" GET method 활용
-
-상품 상세 페이지 주소는 “/items/{productId}” 입니다.
-
-response 로 받은 아래의 데이터로 화면을 구현합니다.
-
-=>  favoriteCount : 하트 개수
-
-=>  images : 상품 이미지
-
-=>  tags : 상품태그
-
-=>  name : 상품 이름
-
-=>  description : 상품 설명
-
-목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다
-
-## 상품 문의 댓글
-
-"/products/{productId}/comments" GET method 활용
-
-문의하기에 내용을 입력하면 등록 버튼의 색상은 “3692FF”로 변합니다.
-
-response 로 받은 아래의 데이터로 화면을 구현합니다.
-
-=>  image : 작성자 이미지
-
-=>  nickname : 작성자 닉네임
-
-=>  content : 작성자가 남긴 문구
-
-=>  description : 상품 설명
+https://panda-market-api.vercel.app/docs/#/
 
-=>  updatedAt : 문의글 마지막 업데이트 시간
+### 피드백
 
-## 백엔드 API 주소
+1. 로그인 provider 컴포넌트로 구현
+2. axios 반영 (interceptor 구현)
+3. URLSearchParams
+4. id쪽 type assertion 제거
+5. 요청을 보내는 부분은 try ... catch를 사용하고 error 띄우는 부분을 console.error와 alert를 이용해서 표현
+6. 이미지 등록쪽 p 태그 수정 (다른 태그들도 수정)
+7. api 함수 로직 정리 
 
-https://panda-market-api.vercel.app/docs/#/
+### 구현 전에 해야 되는 것
+1. 이전에 못한 ts 마이그레이션 진행
+2. 전체 코드 리팩토링
 
-## 피드백
-## 개인적으로 적용해볼 것
+### 개인적으로 도전할 것
 
-Styled Component
+1. 에러 바운더리
+2. zustand를 이용한 로그인 구현
+3. github action을 이용해서 vercel에 자동 배포
+4. premier-motion을 사용해서 랜딩 페이지에 애니메이션 추가
+5. lodash 사용
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Panda Market</title>
     <link
@@ -12,6 +11,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>