KDT5_ToyProject Team5 과제 제출 by fronttemp · Pull Request #12 · KDT1-FE/KDT5-M5

fronttemp · 2023-07-03T08:48:16Z

KDT_TEAM5 E-Book 쇼핑몰 팀 프로젝트

오북오북 🐤

저희 5조는 카카오 페이지를 벤치마킹한 팀프로젝트입니다.
알라딘 공용 book-API를 사용하여 실시간으로 데이터를 불러와서 판매하도록 구현하였습니다.
더미 데이터로는 구현하기 힘든, 실시간으로 업데이트 되는 현실적인 사이트 제작을 목표로 작업하였습니다. ☘️

배포 주소: https://team5-toy-project-5n2h-b5un8w6mb-fronttemp.vercel.app/

팀원 소개 👤

팀원	안태욱	임승이	정재현	이정환	백지욱
깃허브	@dotory0829	@doitidey	@iskra17	@fronttemp	@beakjiuk
담당	- 회원가입- 로그인- 마이 페이지	- 레이아웃 및 UI- 상품리스트	- 카트페이지- 결제 및 계좌 기능	- 깃 팀장- API수정- 상품 검색	- 메인 페이지

사용 기술

페이지 기능 🔎

< 메인 페이지 >

[헤더]
- 로고
- 검색 기능
- 로그인, 회원가입 페이지 이동
- 로그인시 로그아웃 기능으로 변화 및 프로필 이미지
- 장바구니 페이지
[배너]
- 베스트 셀러 및 신규 도서 (실시간) 슬라이드 구성
[푸터]
- 푸터

< 로그인 페이지 >

[로그인 기능]
- 비회원일 경우 회원가입 페이지 이동 기능

< 회원가입 페이지 >

[회원가입 기능]
- 회원가입 기능

< 마이 페이지 >

[내정보 수정기능]
- 프로필 이미지, 비밀번호 및 닉네임 변경 기능
[주문 내역기능]
- 주문 내역 확인, 주문 확정 및 취소 기능
[계좌 기능]
- 계좌 설정 기능
- 계좌 해지 기능
- 잔액 확인 기능

< 장바구니 페이지 >

원하는 도서를 단권뿐만아니라 카트에 담아두고 묶음으로 구매가능

< 베스트 셀러 페이지 >

알라딘 api를 사용하여 실시간 베스트 셀러 확인 가능
단, 몇몇 부적절한 검색결과는 자체 필터링 처리

< 새로나온 책 페이지 >

알라딘 api를 사용하여 신규 도서 실시간 확인 가능
단, 몇몇 부적절한 검색결과는 자체 필터링 처리
< 검색 결과 페이지 >
원하는 도서 검색 기능 구현
검색 후 나오는 도서에 따라 정렬 기능 구현
페이지 소개 📑
메인페이지
|  |
베스트 셀러 페이지
|  |
새로 나온 책
|  |
검색 기능
|  |
구매 상세 페이지
|  |
장바구니 페이지
|  |
결제 페이지
|  |
로그인 페이지
|  |
내 계정 페이지 - 주문내역
|  |
내 계정 페이지 - 개인정보 수정
|  |
내 계정 페이지 - 계좌 관리
|  |
관리자 페이지 - 유저 리스트
|  |
관리자 페이지 - 전체 거래 내역
|  |
폴더 구조 📁
/TEAM5_TOYPROJECT ┣ vercel ┣ api ┃┗ aladinItemSearch.ts ┃┗ heropy.ts ┣ node_modules ┣ public ┣ src ┃┣ api ┃┃┗ accountApi.tsx ┃┃┗ productApi.tsx ┃┃┗ usersApi.tsx ┃┣ comopnents ┃┃┗ AddBookCart.tsx ┃┃┗ AddBookPurchase.tsx ┃┃┗ BanksInfo.css ┃┃┗ BanksInfo.tsx ┃┃┗ ConfirmModal.tsx ┃┃┗ ItemListInfo.tsx ┃┃┗ ItemSortMenu.tsx ┃┃┗ TagSearchMenu.tsx ┃┃┗ TheFooter.tsx ┃┃┗ TheHeader.tsx ┃┃┣ pages ┃┃┃┗ AccountPage ┃┃┃┗ AdminPage ┃┃┃┗ BestsellerPage ┃┃┃┗ CartPage ┃┃┃┗ CheckoutPage ┃┃┃┗ DetailPage ┃┃┃┗ EditBankInfoPage ┃┃┃┗ EditUserInfoPage ┃┃┃┗ MainPage ┃┃┃┗ NewBookPage ┃┃┃┗ OrderHistoryPage ┃┃┃┗ SearchPage ┃┃┃┗ SigninPage ┃┃┃┗ SignupPage ┃┃┣ Store ┃┃┃┗ buttonStore.tsx ┃┃┃┗ useAccountTokenStore.tsx ┃┃┃┗ useCartStore.tsx ┃┃┃┗ useItemApi.tsx ┃┃┣ App.scss ┃┃┣ App.tsx ┃┃┣ hooks.tsx ┃┃┣ main.tsx ┃┃┣ vite-env.d.ts ┣ .eslintrc.cjs ┣ .eslintrc.json ┣ .gitignore ┣ .prettierrc ┣ icon.png ┣ index.html ┣ package-lock.json ┣ package.json ┣ README.md ┣ tsconfig.json ┣ tsconfig.node.json ┣ user.png ┗ vite.config.ts
KDT_TEAM5 E-Book 쇼핑몰 팀 프로젝트 오북오북 🐤 logo

저희 5조는 카카오 페이지를 벤치마킹한 팀프로젝트입니다.
알라딘 공용 book-API를 사용하여 실시간으로 데이터를 불러와서 판매하도록 구현하였습니다.
더미 데이터로는 구현하기 힘든, 실시간으로 업데이트 되는 현실적인 사이트 제작을 목표로 작업하였습니다. ☘️

배포 주소: https://team5-toy-project-5n2h-b5un8w6mb-fronttemp.vercel.app/

팀원 소개 👤
팀원 안태욱 임승이 정재현 이정환 백지욱
깃허브 @dotory0829 @doitidey @iskra17 @fronttemp @beakjiuk
담당 - 회원가입

로그인
마이 페이지 - 레이아웃 및 UI
상품리스트 - 카트페이지
결제 및 계좌 기능 - 깃 팀장
API수정
상품 검색 - 메인 페이지
사용 기술
React TypeScript SCSS Vite Vercel Figma Zustand

페이지 기능 🔎
< 메인 페이지 >

[헤더]
로고
검색 기능
로그인, 회원가입 페이지 이동
로그인시 로그아웃 기능으로 변화 및 프로필 이미지
장바구니 페이지
[배너]
베스트 셀러 및 신규 도서 (실시간) 슬라이드 구성
[푸터]
푸터
< 로그인 페이지 >

[로그인 기능]
비회원일 경우 회원가입 페이지 이동 기능
< 회원가입 페이지 >

[회원가입 기능]
회원가입 기능
< 마이 페이지 >

[내정보 수정기능]
프로필 이미지, 비밀번호 및 닉네임 변경 기능
[주문 내역기능]
주문 내역 확인, 주문 확정 및 취소 기능
[계좌 기능]
계좌 설정 기능
계좌 해지 기능
잔액 확인 기능
< 장바구니 페이지 >

원하는 도서를 단권뿐만아니라 카트에 담아두고 묶음으로 구매가능
< 베스트 셀러 페이지 >

알라딘 api를 사용하여 실시간 베스트 셀러 확인 가능
단, 몇몇 부적절한 검색결과는 자체 필터링 처리
< 새로나온 책 페이지 >

알라딘 api를 사용하여 신규 도서 실시간 확인 가능
단, 몇몇 부적절한 검색결과는 자체 필터링 처리
< 검색 결과 페이지 >

원하는 도서 검색 기능 구현
검색 후 나오는 도서에 따라 정렬 기능 구현
페이지 소개 📑
메인페이지
| |

베스트 셀러 페이지
| |

새로 나온 책
| |

검색 기능
| |

구매 상세 페이지
| |

장바구니 페이지
| |

결제 페이지
| |

로그인 페이지
| |

내 계정 페이지 - 주문내역
| |

내 계정 페이지 - 개인정보 수정
| |

내 계정 페이지 - 계좌 관리
| |

관리자 페이지 - 유저 리스트
| |

관리자 페이지 - 전체 거래 내역
| |

폴더 구조 📁
/TEAM5_TOYPROJECT
┣ vercel
┣ api
┃┗ aladinItemSearch.ts
┃┗ heropy.ts
┣ node_modules
┣ public
┣ src
┃┣ api
┃┃┗ accountApi.tsx
┃┃┗ productApi.tsx
┃┃┗ usersApi.tsx
┃┣ comopnents
┃┃┗ AddBookCart.tsx
┃┃┗ AddBookPurchase.tsx
┃┃┗ BanksInfo.css
┃┃┗ BanksInfo.tsx
┃┃┗ ConfirmModal.tsx
┃┃┗ ItemListInfo.tsx
┃┃┗ ItemSortMenu.tsx
┃┃┗ TagSearchMenu.tsx
┃┃┗ TheFooter.tsx
┃┃┗ TheHeader.tsx
┃┃┣ pages
┃┃┃┗ AccountPage
┃┃┃┗ AdminPage
┃┃┃┗ BestsellerPage
┃┃┃┗ CartPage
┃┃┃┗ CheckoutPage
┃┃┃┗ DetailPage
┃┃┃┗ EditBankInfoPage
┃┃┃┗ EditUserInfoPage
┃┃┃┗ MainPage
┃┃┃┗ NewBookPage
┃┃┃┗ OrderHistoryPage
┃┃┃┗ SearchPage
┃┃┃┗ SigninPage
┃┃┃┗ SignupPage
┃┃┣ Store
┃┃┃┗ buttonStore.tsx
┃┃┃┗ useAccountTokenStore.tsx
┃┃┃┗ useCartStore.tsx
┃┃┃┗ useItemApi.tsx
┃┃┣ App.scss
┃┃┣ App.tsx
┃┃┣ hooks.tsx
┃┃┣ main.tsx
┃┃┣ vite-env.d.ts
┣ .eslintrc.cjs
┣ .eslintrc.json
┣ .gitignore
┣ .prettierrc
┣ icon.png
┣ index.html
┣ package-lock.json
┣ package.json
┣ README.md
┣ tsconfig.json
┣ tsconfig.node.json
┣ user.png
┗ vite.config.ts

chanuuuuu

UI 프레임워크와 상태관리 라이브러리를 적절하게 사용하여 훌륭한 퀄리티의 서비스를 만드셨네요..👍🏻
최대한 비지니스 로직에 집중하여 제 기간 안에 필요한 기능을 구현하신 것 같습니다. 고생하셨습니다.🙇🏻‍♂️

생각해볼만한 부분 코멘트 드렸는데요. 해당 프로젝트에 리팩토링 하지 않더라도 다음 토이프로젝트에 반영해보시면 좋을 것 같아요.

chanuuuuu · 2023-07-12T15:35:43Z

+  "singleAttributePerLine": true,
+  "bracketSameLine": true,
+	"trailingComma": "none",
+  "arrowParens": "avoid"


prettier의 규칙 여러가지를 사용하셨는데, 해당 규칙으로도 충분히 코드 스타일을 맞출 수 있었는지 궁금합니다:)

chanuuuuu · 2023-07-12T15:36:52Z

+          scriptTimeout: 3000,
+          async: true
+        },
+        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)


해당 index.html은 빌드하는 과정에서 자동으로 생성된 것인가요? 해당 즉시 실행 함수의 의미가 궁금합니다🤔

chanuuuuu · 2023-07-12T15:44:24Z

+  request: VercelRequest,
+  response: VercelResponse
+) {
+  const search = request.query.s


WebAPI인 URLSearchParams를 사용하여 구현해보시는 것은 어떨까요?

const urlSearchParams = new URLSearchParams(); urlSearchParams.append('Query', request.query.q); urlSearchParams.append('QueryType', request.query.qt); urlSearchParams.append('OptResult', request.query.opt); urlSearchParams.append('CategoryId', request.query.t); // ... const queryString = urlSearchParams.toString();

와 같이 setter를 사용하여 자동으로 param 포맷팅을 제공하여줍니다. (이렇게 반복적인 setter의 사용은 for loop로 대체할 수 있겠습니다.) 이외에도 URLSearchParams는 다양한 기능을 제공하니 사용을 고려해보시는 것을 추천드립니다.

chanuuuuu · 2023-07-12T16:04:21Z

+    if (loginToken) {  // check if loginToken is not null
+      try {
+        const data = await accountCheckAPI(loginToken)
+        if (data && data.accounts) {


data && data.accounts 의 경우 data?.accounts를 통해 간단하게 표현할 수 있습니다.

chanuuuuu · 2023-07-12T16:06:06Z

+  const [toDeleteAccountId, setToDeleteAccountId] = useState<string>('')
+  const { loginToken } = useAccountTokenStore()
+  const { Option } = Select
+  const [form] = Form.useForm<{ bankCode: string; accountNumber: string; phoneNumber: string; agreement: boolean }>();


antd가 제공하는 컴포넌트의 기능을 활용하여 간단하게 구현하신점 칭찬드립니다.👍🏻

chanuuuuu · 2023-07-12T17:15:40Z

+        nickname
+      }
+
+      const res = await fetch(


분리해둔 API를 활용해야할 것으로 보입니다.

chanuuuuu · 2023-07-12T17:16:44Z

+        setSuccessModalVisible(true)
+        setError('')
+
+        setTimeout(() => {


로그아웃 이후에 상태가 반영되기 까지의 시간을 1.5초로 고려하신 것으로 보이는데 setTimeout을 두신 이유가 궁금합니다.

chanuuuuu · 2023-07-12T17:19:49Z

+
+  useEffect(() => {
+    setLoading(true);
+    fetch().then(() => {


ListApi 보다는 bookListApi가 더 명확한 hook명으로 보입니다. 단순히 ListApi를 사용하게 되면 어떠한 데이터의 배열을 들고오는지 모호하기 때문입니다. 마찬가지로 fetch의 경우에도 어떠한 데이터를 fetch할 것인가를 명시적으로 드러내는 함수명이면 좋을 것 같아요.

chanuuuuu · 2023-07-12T17:40:39Z

+  }
+
+  const useQuery = () => {
+    return new URLSearchParams(useLocation().search)


여기는 URLSearchParams를 사용하셨네요. 웹 API를 활용하신 부분 칭찬드립니다.👍🏻

chanuuuuu · 2023-07-12T17:43:44Z

+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({


vite를 통해서 proxy설정을 하여 cors를 해결하신 것으로 알고 있는데, 어떤 방식으로 우회하였는지 궁금합니다. 해당 부분을 트러블슈팅 사례로 정리해서 남겨두면 추후에 면접이나 자소서에 사용할 수 있을 것 같아요!

KDT5_ToyProject Team5 과제 제출

b397fcf

chanuuuuu approved these changes Jul 12, 2023

View reviewed changes

Navigation Menu

Uh oh!

KDT5_ToyProject Team5 과제 제출 - #12

KDT5_ToyProject Team5 과제 제출#12
fronttemp wants to merge 1 commit into
KDT1-FE:mainfrom
fronttemp:main

fronttemp commented Jul 3, 2023 •

edited

Loading

Uh oh!

chanuuuuu left a comment

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

chanuuuuu Jul 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

fronttemp commented Jul 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

KDT_TEAM5 E-Book 쇼핑몰 팀 프로젝트

오북오북 🐤

팀원 소개 👤

사용 기술

페이지 기능 🔎

페이지 소개 📑

메인페이지

베스트 셀러 페이지

새로 나온 책

검색 기능

구매 상세 페이지

장바구니 페이지

결제 페이지

로그인 페이지

내 계정 페이지 - 주문내역

내 계정 페이지 - 개인정보 수정

내 계정 페이지 - 계좌 관리

관리자 페이지 - 유저 리스트

관리자 페이지 - 전체 거래 내역

폴더 구조 📁

Uh oh!

chanuuuuu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fronttemp commented Jul 3, 2023 •

edited

Loading