/WaggleWaggle

와인이 어려운 와인 입문자들을 위한 사람들의 놀이터 와글와글

Primary LanguageTypeScript

WaggleWaggle 🍷


logo



💁 프로젝트 소개

  • 와인을 즐기고 싶지만 와인이 어려운 와인 입문자들을 위한 사람들의 놀이터 와글와글
  • 참여했던 프로젝트의 api를 활용하여 새롭게 제작된 사이트 (기존 프로젝트 repositories)

와글와글 : 사람들이 한곳에 많이 모여 잇따라 떠들거나 움직이는 소리. 또는 그 모양


✅ 프로젝트 배포

이 프로젝트는 Vercel을 사용하여 배포되었습니다.

main 브랜치에서 build 명령어 입력 후 커밋 시 자동 배포

  npm run build

🔍 개발기간

2023.12.20 ~ ing

⚙ 기술스택


🗂️ 프로젝트 구조

.
.
.
📦public
 ┣ 📂font #폰트파일
 ┣ 📂media #아이콘, 이미지파일
 ┃ ┣ 📂icon
 ┃ ┗ 📂img
 ┣ 📜index.html
 ┣ 📜manifest.json
 ┗ 📜robots.txt
📦src
┣ 📂api #각종 api요청
┣ 📂app #라우팅
┃ ┣ 📂admin
┃ ┣ 📂auth
┃ ┣ 📂community
┃ ┣ 📂product
┃ ┣ 📜favicon.ico
┃ ┣ 📜globals.css
┃ ┣ 📜layout.js
┃ ┗ 📜page.js
┣ 📂component #app폴더에서 직접적으로 라우팅 되는 컴포넌트 또는 재사용이 자주되는 컴포넌트
┣ 📂container #component폴더에서 사용되는 작은 단위의 컴포넌트
┣ 📂redux
┃ ┣ 📂features # slices
┃ ┣ 📜StoreProvider.js
┃ ┣ 📜hook.js
┃ ┗ 📜store.js
┣ 📂ui #Button, inputForm 등 자주사용 되는 ui 컴포넌트
┣ 📜App.js
┣ 📜index.css
┣ 📜index.js
┗ 📜middleware.js
.
.
.

📌 페이지별 주요기능

로그인시 이용 가능한 기능에는 👤 표시가 있습니다.
테스트 계정은 상단에서 확인이 가능합니다.

회원가입(SIGN UP) - 바로가기

  • 입력과 동시에 유효성 검증 실행 및 경고 문구 표시
  • 아이디,닉네임 중복체크
  • 간편한 주소 입력을 위한 다음 주소 api 연동
회원가입

로그인(LOGIN) - 바로가기

  • 리프레시 토큰(Refresh Token), 유저 고유 id 브라우저 쿠키(Cookie)에 저장하여 요청시 인증
  • 엑세스 토큰(Access Token) 변수 저장
로그인

상품페이지(PRODUCT) - 바로가기

  • 와인종류, 맛, 생산국가, 가격대 선택 후 검색시 상품 필터링
  • 👤 와인 좋아요 및 해제
  • 링크 공유가 편리하도록 페이지네이션(Pagination)으로 구현
상품페이지 필터 및 페이지네이션

커뮤니티 페이지(COMMUNITY) - 바로가기

  • 👤게시물 등록, 수정, 삭제
    • 필수 입력 요소를 모두 입력 후 글 발행시 게시판 등록
    • 내가 등록한 게시물에만 수정, 삭제 버튼이 보이도록 구성
  • 👤 댓글 등록, 수정
    • 게시글 댓글 등록
    • 내가 등록한 댓글에만 수정 버튼이 보이도록 구성
  • 👤 대댓글 등록, 수정
    • 특정 댓글에 답글달기 버튼 클릭 시 입력폼 보이도록 구성
    • 내가 등록한 댓글에만 수정 버튼이 보이도록 구성
  • 👤 댓글 좋아요 및 해제
  • 편리한 사용자 경험을 위하여 무한스크롤(Infinite Scroll)으로 구현
게시물 등록
게시물 수정
댓글 등록 및 수정/게시글 이미지 슬라이드
커뮤니티 페이지 무한 스크롤

스토어 페이지(STORE) - 바로가기

  • 내 주변 와인샵 리스트 조회 / 시도, 구군별 와인샵 리스트 조회

    • 내 주변 와인샵 리스트 조회(위치정보제공 동의 시)
    • 셀렉트 박스에서 지역 선택 후 검색 시 해당하는 지역의 와인샵 리스트 조회
    • kakao map api 활용

  • 지도 렌더링

    • 와인샵 리스트 클릭 시 해당하는 위치로 이동
    • 지도 위의 마커 클릭 시 해당하는 와인샵의 위치로 이동
    • 지도 위에 클릭한 와인샵의 정보 창 표출
    • naver map api 활용
내 주변 / 지역별 와인샵 검색

💡 Reference