더 줄게 웹사이트 만들기

📚목차

• 팀원 소개

• 사용한 기술 스택

• 작업 과정

• 서비스 구성

팀원 소개

@suzinxix - 길수진 팀원: button, filter 공고 리스트 페이지 - 로그인, 로그아웃 구분

@bokeeeey - 김보경 조장: 컬러, 폰트, 폴더 구조, input 로그인, 회원가입 페이지

@changmin6362 - 김창민 팀원: GNB, Notification Modal, API 커스텀 훅 제작, zustand 커스텀훅 제작, 무한스크롤 구현 내 프로필 등록 , 공고 등록 페이지

@smb0123 - 심민보 팀원: post, Modal, toast-라이브러리 사용 가게 정보 상세, 내 프로필 상세 페이지

@smimdla0205 - 이상민 팀원: table, pagination, 공고 상세 공고 상세 페이지 - 로그아웃, 로그인, 사장님, 알바 구분

🏝 사용한 기술 스택

기술 스택

• react
• typescript
• Next.js
• tanstack-query
• scss
• className

라이브러리

• react-hook-form

  • 폼을 편하게 다루기 위해 사용

• zodResolver:

  • 훅폼에 조드를 적용하기 위해 사용

• date-fns:

  • 날짜 인풋을 편하게 구현하기 위해 사용

• react-toastify:

  • 토스트 구현을 편하게 하기 위해 사용

• react-intersection-observer: -무한 스크롤 구현을 위해 사용

• zustand:

  • state의 전역 관리를 위해 사용

작업 과정

로딩 처리

• 공고 리스트 페이지 (주소: /)

GNB 조건부 렌더링

• 로그인 페이지 (주소: /login)

• 회원가입 페이지 (주소: /sign-up)

• 가게 정보 상세 페이지 (주소: /shops)

무한 스크롤

• 가게 정보 등록 페이지 (주소: /registor-my-shop)

• 가게 정보 변경 페이지 (주소: /edit-my-shop)

• 프로필 정보 상세 페이지 (주소: /users)

• 프로필 정보 등록 페이지 (주소: /users/post-profile)

• 프로필 정보 변경 페이지 (주소: /users/{userId}/edit)

• 공고 정보 상세 페이지 (주소: /shops/{shopId}/notices/{noticeId})

• 공고 정보 등록 페이지 (주소: /shops/post-notice)

• 공고 정보 변경 페이지 (주소: /shops/{shopId}/notices/{noticeId}edit)