KDT5_ToyProject Team5 과제 제출 #12
Conversation
| "singleAttributePerLine": true, | ||
| "bracketSameLine": true, | ||
| "trailingComma": "none", | ||
| "arrowParens": "avoid" |
There was a problem hiding this comment.
prettier의 규칙 여러가지를 사용하셨는데, 해당 규칙으로도 충분히 코드 스타일을 맞출 수 있었는지 궁금합니다:)
| 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) |
There was a problem hiding this comment.
해당 index.html은 빌드하는 과정에서 자동으로 생성된 것인가요? 해당 즉시 실행 함수의 의미가 궁금합니다🤔
| request: VercelRequest, | ||
| response: VercelResponse | ||
| ) { | ||
| const search = request.query.s |
There was a problem hiding this comment.
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는 다양한 기능을 제공하니 사용을 고려해보시는 것을 추천드립니다.
| if (loginToken) { // check if loginToken is not null | ||
| try { | ||
| const data = await accountCheckAPI(loginToken) | ||
| if (data && data.accounts) { |
There was a problem hiding this comment.
data && data.accounts 의 경우 data?.accounts를 통해 간단하게 표현할 수 있습니다.
| const [toDeleteAccountId, setToDeleteAccountId] = useState<string>('') | ||
| const { loginToken } = useAccountTokenStore() | ||
| const { Option } = Select | ||
| const [form] = Form.useForm<{ bankCode: string; accountNumber: string; phoneNumber: string; agreement: boolean }>(); |
There was a problem hiding this comment.
antd가 제공하는 컴포넌트의 기능을 활용하여 간단하게 구현하신점 칭찬드립니다.👍🏻
| nickname | ||
| } | ||
|
|
||
| const res = await fetch( |
| setSuccessModalVisible(true) | ||
| setError('') | ||
|
|
||
| setTimeout(() => { |
There was a problem hiding this comment.
로그아웃 이후에 상태가 반영되기 까지의 시간을 1.5초로 고려하신 것으로 보이는데 setTimeout을 두신 이유가 궁금합니다.
|
|
||
| useEffect(() => { | ||
| setLoading(true); | ||
| fetch().then(() => { |
There was a problem hiding this comment.
ListApi 보다는 bookListApi가 더 명확한 hook명으로 보입니다. 단순히 ListApi를 사용하게 되면 어떠한 데이터의 배열을 들고오는지 모호하기 때문입니다. 마찬가지로 fetch의 경우에도 어떠한 데이터를 fetch할 것인가를 명시적으로 드러내는 함수명이면 좋을 것 같아요.
| } | ||
|
|
||
| const useQuery = () => { | ||
| return new URLSearchParams(useLocation().search) |
There was a problem hiding this comment.
여기는 URLSearchParams를 사용하셨네요. 웹 API를 활용하신 부분 칭찬드립니다.👍🏻
| import react from '@vitejs/plugin-react-swc' | ||
|
|
||
| // https://vitejs.dev/config/ | ||
| export default defineConfig({ |
There was a problem hiding this comment.
vite를 통해서 proxy설정을 하여 cors를 해결하신 것으로 알고 있는데, 어떤 방식으로 우회하였는지 궁금합니다. 해당 부분을 트러블슈팅 사례로 정리해서 남겨두면 추후에 면접이나 자소서에 사용할 수 있을 것 같아요!
KDT_TEAM5 E-Book 쇼핑몰 팀 프로젝트
오북오북 🐤
저희 5조는 카카오 페이지를 벤치마킹한 팀프로젝트입니다.
알라딘 공용 book-API를 사용하여 실시간으로 데이터를 불러와서 판매하도록 구현하였습니다.
더미 데이터로는 구현하기 힘든, 실시간으로 업데이트 되는 현실적인 사이트 제작을 목표로 작업하였습니다. ☘️
배포 주소: https://team5-toy-project-5n2h-b5un8w6mb-fronttemp.vercel.app/
팀원 소개 👤
사용 기술
페이지 기능 🔎
< 메인 페이지 >
< 로그인 페이지 >
< 회원가입 페이지 >
< 마이 페이지 >
< 장바구니 페이지 >
< 베스트 셀러 페이지 >
< 새로나온 책 페이지 >
< 검색 결과 페이지 >
페이지 소개 📑
메인페이지
|
|
베스트 셀러 페이지
|
|
새로 나온 책
|
|
검색 기능
|
|
구매 상세 페이지
|
|
장바구니 페이지
|
|
결제 페이지
|
|
로그인 페이지
|
|
내 계정 페이지 - 주문내역
|
|
내 계정 페이지 - 개인정보 수정
|
|
내 계정 페이지 - 계좌 관리
|
|
관리자 페이지 - 유저 리스트
|
|
관리자 페이지 - 전체 거래 내역
|
|
폴더 구조 📁
저희 5조는 카카오 페이지를 벤치마킹한 팀프로젝트입니다.
알라딘 공용 book-API를 사용하여 실시간으로 데이터를 불러와서 판매하도록 구현하였습니다.
더미 데이터로는 구현하기 힘든, 실시간으로 업데이트 되는 현실적인 사이트 제작을 목표로 작업하였습니다. ☘️
배포 주소: https://team5-toy-project-5n2h-b5un8w6mb-fronttemp.vercel.app/
팀원 소개 👤
팀원 안태욱 임승이 정재현 이정환 백지욱
깃허브 @dotory0829 @doitidey @iskra17 @fronttemp @beakjiuk
담당 - 회원가입
사용 기술
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