README.md

YUMU - 라이브 커머스 웹 사이트

👨🏻‍💻 소개 및 사이트 링크

아마추어 예술가들은 처리가 곤란한 자신의 작품을 경매로 선보여 뒷처리와 금전,
자기 어필의 기회를 얻고 일반 사용자들은 마음에 드는 작품을 비교적 저렴한 가격에 구매할 수 있는 기회를 얻는 웹 서비스입니다.

🔗 YUMU Demo Site Link

🔗 YUMU Figma Link

🔗 YUMU Swagger

📆 프로젝트 기간

2024/02/29 ~ 2024/04/05

🛠️ 기술 스택

⚙️ Front-End

FrameWorks

Libraries

Lints

style

env

OAuth 2.0

⚙️ Back-End

DB

DevOps

🖼️ Designer

🏁 설치 및 시작하기

$npm i && npm run dev 이 후 http://localhost:3000/ 접속

---

🎯 담당 페이지 - 내정보(/mypage) 및 기여 부분

• 디렉토리 구조 및 axios/API 통합을 포함한 초기 프로젝트 설정 확립
• CORS 정책 우회 및 토큰관리
• React-hook-form을 활용한 Input 및 zod를 활용한 정규식 적용 에러메세지 공통 컴포넌트 생성
• YUMU 마이페이지 UI/UX 구현
• 사용자 경험 최적화를 위한 마이페이지 및 헤더 컴포넌트에 tanstack-query 적용
  • 마이페이지 수정 시 헤더의 닉네임 및 프로필 이미지가 즉시 업데이트되도록 설정
  • 낙찰/판매/관심 목록 query를 활용한 무한스크롤 구현 - 데이터패칭 중 일때shadcn/uispinner 컴포넌트활용
• 팀 프로젝트 작업 진행 중 공통적인 tailwind className을 위한 prettier,eslint rule 적용
  • 위의 rule 지키지 않을 시 pre-commit 방지하기 위해 husky 도입

협업관련

• 디자이너/백엔드와 지속적인 소통을 통한 의사소통 경험 역량 향상
• 프로젝트 진행 중 깔끔한 branch 관리를 위한 squash&merge 활용

📦 Directory 구조

📦src
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┣ 📂domain
 ┃ ┃ ┣ 📂landing
 ┃ ┃ ┣ 📂myPage
 ┃ ┃ ┃ ┗ 📂Tabs
 ┃ ┃ ┃ ┃ ┣ 📂Edit
 ┃ ┃ ┗ 📂search
 ┃ ┣ 📂svgs
 ┃ ┗ 📂ui
 ┣ 📂contexts
 ┣ 📂lib
 ┣ 📂pages
 ┃ ┣ 📂auction
 ┃ ┃ ┗ 📂[auctionid]
 ┃ ┃ ┃ ┣ 📂detail
 ┃ ┃ ┃ ┣ 📂live
 ┃ ┃ ┃ ┗ 📂streaming
 ┃ ┣ 📂callback
 ┃ ┣ 📂chatting
 ┃ ┣ 📂detail
 ┃ ┣ 📂landing
 ┃ ┣ 📂mypage
 ┃ ┣ 📂registration
 ┃ ┣ 📂search
 ┃ ┣ 📂signin
 ┃ ┣ 📂signup
 ┣ 📂services
 ┣ 📂styles
 ┣ 📂types
 ┃ ┣ 📂validator