🍶조지주(調持酒)

---

배포 URL : https://www.pickyourpotion.shop

1. 프로젝트 소개

여러분의 인생에서 가장 완벽한 술을 찾아드리는 ‘조지주’를 소개합니다. ‘조지주’는 ‘고를 조(挑)’, ‘가질 지(持)’, 그리고 ‘술 주(酒)’의 의미를 담은 주류 이커머스 플랫폼으로, 여러분의 취향을 고려한 최적의 술을 추천해드립니다. 술BTI 테스트를 통해 나만의 맞춤 주류를 발견하고, 간편하게 구매까지 할 수 있는 새로운 주류 쇼핑 경험을 지금 ‘조지주’에서 만나보세요.

2. 기술 및 개발 환경

FrontEnd	BackEnd	Design	협업방식	컨벤션
	제공된 API

3.기획

4. 폴더 구조

🍶 PickYourPotion
📦src
 ┣ 📂app
 ┃ ┣ 📂(user)
 ┃ ┃ ┣ 📂login
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┃ ┣ 📂activity
 ┃ ┃ ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┃ ┃ ┣ 📜replies.ts
 ┃ ┃ ┃ ┃ ┣ 📜ReviewList.tsx
 ┃ ┃ ┃ ┃ ┣ 📜ReviewToWrite.tsx
 ┃ ┃ ┃ ┃ ┣ 📜WrittenReviewCard.tsx
 ┃ ┃ ┃ ┃ ┣ 📜WrittenReviewDetail.tsx
 ┃ ┃ ┃ ┃ ┗ 📜WrittenReviewList.tsx
 ┃ ┃ ┃ ┣ 📜MyPageButton.tsx
 ┃ ┃ ┃ ┣ 📜MyPageList.tsx
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┗ 📂signup
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂admin
 ┃ ┃ ┣ 📜AdminInput.tsx
 ┃ ┃ ┣ 📜AdminSelect.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂adult
 ┃ ┃ ┣ 📜action.ts
 ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┗ 📜types.ts
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📂auth
 ┃ ┃ ┃ ┗ 📂[...nextauth]
 ┃ ┃ ┃ ┃ ┗ 📜route.ts
 ┃ ┃ ┗ 📂payments
 ┃ ┃ ┃ ┗ 📂[...tossPayments]
 ┃ ┃ ┃ ┃ ┗ 📜route.ts
 ┃ ┣ 📂brewery
 ┃ ┃ ┣ 📂[id]
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂cart
 ┃ ┃ ┣ 📜CartPage.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂community
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂detail
 ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┣ 📜AddCart.tsx
 ┃ ┃ ┃ ┣ 📜Buying.tsx
 ┃ ┃ ┃ ┣ 📜Detail.tsx
 ┃ ┃ ┃ ┣ 📜DetailClient.tsx
 ┃ ┃ ┃ ┣ 📜NoReply.tsx
 ┃ ┃ ┃ ┣ 📜NoReview.tsx
 ┃ ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┃ ┣ 📜Reply.tsx
 ┃ ┃ ┃ ┣ 📜ReplyForm.tsx
 ┃ ┃ ┃ ┗ 📜ReplyItem.tsx
 ┃ ┣ 📂landing
 ┃ ┃ ┣ 📂question
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂[result]
 ┃ ┃ ┃ ┣ 📜Detail.tsx
 ┃ ┃ ┃ ┣ 📜loading.tsx
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📜AnswerImage.tsx
 ┃ ┃ ┣ 📜data.ts
 ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┣ 📜setCookie.ts
 ┃ ┃ ┗ 📜Splash.tsx
 ┃ ┣ 📂market
 ┃ ┃ ┣ 📂fruit
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂liquor
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂raw
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂refined
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📜layout.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂order
 ┃ ┃ ┣ 📜Empty.tsx
 ┃ ┃ ┣ 📜order.ts
 ┃ ┃ ┣ 📜OrderList.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂pay
 ┃ ┃ ┣ 📂complete
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📜Address.tsx
 ┃ ┃ ┣ 📜OrderedCard.tsx
 ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┗ 📜ProgressBar.tsx
 ┃ ┣ 📂search
 ┃ ┃ ┣ 📜fetchAllData.ts
 ┃ ┃ ┣ 📜fetchSearch.ts
 ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┗ 📜useDebounce.ts
 ┃ ┣ 📂[id]
 ┃ ┃ ┣ 📂cart
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂edit
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂order
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂posts
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📜Banner.tsx
 ┃ ┣ 📜CardItemSmall.tsx
 ┃ ┣ 📜CardSwiper.tsx
 ┃ ┣ 📜ChannelTalkManager.tsx
 ┃ ┣ 📜error.tsx
 ┃ ┣ 📜fonts.ts
 ┃ ┣ 📜globals.css
 ┃ ┣ 📜layout.tsx
 ┃ ┣ 📜loading.tsx
 ┃ ┗ 📜page.tsx
 ┣ 📂components
 ┃ ┣ 📂icons
 ┃ ┃ ┣ 📜CartIcon.tsx
 ┃ ┃ ┣ 📜Cheers.tsx
 ┃ ┃ ┣ 📜Heart.tsx
 ┃ ┃ ┣ 📜LikeIcon.tsx
 ┃ ┃ ┣ 📜Rainy.tsx
 ┃ ┃ ┣ 📜Soju1bottle.tsx
 ┃ ┃ ┣ 📜Soju2bottle.tsx
 ┃ ┃ ┣ 📜SojuGlass.tsx
 ┃ ┃ ┣ 📜Spoon.tsx
 ┃ ┃ ┣ 📜SugarDice.tsx
 ┃ ┃ ┗ 📜Sunny.tsx
 ┃ ┣ 📂layout
 ┃ ┃ ┣ 📜Footer.tsx
 ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📜Button.tsx
 ┃ ┣ 📜Card.tsx
 ┃ ┣ 📜CartButton.tsx
 ┃ ┣ 📜CartCard.tsx
 ┃ ┣ 📜Category.tsx
 ┃ ┣ 📜DegreeBar.tsx
 ┃ ┣ 📜Input.tsx
 ┃ ┣ 📜InputError.tsx
 ┃ ┣ 📜LinkButton.tsx
 ┃ ┣ 📜MovingArrow.tsx
 ┃ ┣ 📜OrderDetail.tsx
 ┃ ┣ 📜ProductCard.tsx
 ┃ ┣ 📜ReviewCardItem.tsx
 ┃ ┣ 📜Submit.tsx
 ┃ ┗ 📜ThemeButton.tsx
 ┣ 📂model
 ┃ ┣ 📂action
 ┃ ┃ ┗ 📜userAction.ts
 ┃ ┗ 📂fetch
 ┃ ┃ ┗ 📜userFetch.ts
 ┣ 📂provider
 ┃ ┗ 📜TanstackProvider.tsx
 ┣ 📂third-party
 ┃ ┗ 📜channelTalk.ts
 ┣ 📂toast
 ┃ ┣ 📜errorToast.ts
 ┃ ┣ 📜infoToast.css
 ┃ ┗ 📜infoToast.tsx
 ┣ 📂types
 ┃ ┣ 📜file.ts
 ┃ ┣ 📜iamportExtends.ts
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜kakao.ts
 ┃ ┣ 📜post.ts
 ┃ ┣ 📜product.ts
 ┃ ┣ 📜response.ts
 ┃ ┗ 📜user.ts
 ┣ 📂zustand
 ┃ ┗ 📜Store.ts
 ┣ 📜auth.ts
 ┗ 📜middleware.ts

5. 구현 내용

술BTI

최근 유행하는 문답 테스트 방식을 구현하여 사용자의 상황에 맞는 술을 추천해줍니다.

메인페이지

Swiper.js 라이브러리를 커스텀하여 상단 상품 목록과 중간 배너에 적용하였습니다.

술창고

판매중인 전통주를 카테고리별로 나누어 확인할 수 있습니다.

대동술지도

전국의 찾아가는 양조장 정보를 카카오맵API에 표시하였습니다.

로그인

Next Auth를 이용해 디스코드와 구글 계정으로 로그인 할 수 있게 했으며, 체험용 계정으로의 로그인도 가능합니다.

장바구니

판매중인 전통주를 장바구니에 넣어 관리할 수 있습니다.

마이페이지

주문내역과 찜 한 상품을 확인할 수 있으며, 주문한 상품의 리뷰 작성이 가능합니다.