급하게 일손이 필요한 자리에 더 많은 시급을 제공해서 아르바이트생을 구할 수 있는 서비스입니다.
 |
 |
 |
|---|---|---|
| 황지홍 @ClownNero API 활용한 데이터(GET,POST,PUT) 적용 내 프로필 등록/편집 페이지(데이터 변경 쿼리 자동 업데이트 적용) 내 프로필 정보 상세 페이지(SSR적용) 공통 컴포넌트(테이블 상태, 최근 본 공고) 새로고침 후 정보 유지를 위한 Zustand persist 상태관리 기존 token 저장 방식을 쿠키로 변경 및 적용 middleware.ts로 리다이렉션 리팩토링 레이아웃 쉬프트 개선 |
박기범 @gibeom0218 레이아웃 적용 (NavBar, Footer) 공고 컴포넌트 가게 등록/편집 페이지 공고 등록/편집 페이지 가게 정보 상세 페이지 공고리스트 페이지(디자인, 검색, 상세 필터) 이미지 최적화 및 성능 개선 가게,공고 등록/편집 로직 효율성 개선 Readme 작성 |
최희문 @ChoiHeeMoon99 공통 Input,Button,Dropdown 컴포넌트 로그인, 회원가입 페이지 공고 상세 페이지(table 컴포넌트, 공고 상세 내용, 페이지네이션) 공고 리스트 페이지( 페이지네이션, 공고 정렬 ) NavBar ( 알림 기능 ) 404페이지 작성 |
-
가게 관리
- 가게를 등록/편집을 할 수 있고 가게 정보를 확인할 수 있습니다.
-
공고 관리
- 가게에 대한 공고를 등록/편집할 수 있고 등록한 공고들을 확인할 수 있습니다.
- 공고를 신청한 신청자 목록을 확인할 수 있습니다.
- 공고 신청을 거절 혹은 승인할 수 있습니다.
-
프로필 관리
- 내 프로필 정보를 등록/편집할 수 있고 프로필 정보를 확인할 수 있습니다.
-
공고 관리
- 선택한 공고에 대한 신청을 할 수 있습니다.
- 신청한 공고에 대해 취소를 할 수 있습니다.
- 자신의 공고 신청 내역 상태를 확인할 수 있습니다.
- 신청한 공고에 대한 거절/승인 알림을 확인할 수 있습니다.
- 최근에 본 공고 내역을 확인 할 수 있습니다.
-
공고 확인
- 주소를 기준으로 맞춤 공고를 확인 할 수 있습니다.
- 전체 공고를 확인할 수 있습니다.
-
공고 검색
- 마감임박순, 시급많은 순, 시간적은 순, 가나다 순으로 공고를 정렬할 수 있습니다.
- 상세 필터에서 위치, 시작일, 금액 기준으로 공고를 검색을 할 수 있습니다.
📦src
┣ 📂apis
┃ ┣ 📂alert
┃ ┣ 📂assignNoticeInfo
┃ ┣ 📂assignShopInfo
┃ ┣ 📂auth
┃ ┣ 📂editNoticeInfo
┃ ┣ 📂editProfileInfo
┃ ┣ 📂editShopInfo
┃ ┣ 📂imageUpload
┃ ┣ 📂notice
┃ ┣ 📂profile
┃ ┣ 📂shop
┃ ┣ 📂user
┣ 📂components
┃ ┣ 📂authComponents
┃ ┣ 📂commonComponents
┃ ┃ ┣ 📂button
┃ ┃ ┣ 📂dropdown
┃ ┃ ┣ 📂footer
┃ ┃ ┣ 📂navigationBar
┃ ┃ ┣ 📂pagination
┃ ┃ ┣ 📂input
┃ ┃ ┣ 📂status
┃ ┃ ┣ 📂applicationList
┃ ┃ ┗ 📂hourlypayCalc
┃ ┣ 📂editComponents
┃ ┣ 📂homeComponents
┃ ┣ 📂myInfoComponents
┃ ┗ 📂noticeComponents
┣ 📂constant
┣ 📂hooks
┣ 📂provider
┣ 📂stores
┣ 📂styles
┣ 📂utils
┗ 📂app
┃ ┣ 📂(auth)
┃ ┃ ┣ 📂signin
┃ ┃ ┣ 📂signup
┃ ┃ ┗ 📜loading.tsx
┃ ┣ 📂(contents)
┃ ┃ ┣ 📂assignmyshop
┃ ┃ ┣ 📂assignnotice
┃ ┃ ┣ 📂editmyshop
┃ ┃ ┣ ┗ 📂[shopId]
┃ ┃ ┣ 📂editnotice
┃ ┃ ┣ ┗ 📂[shopId]
┃ ┃ ┣ ┗ ┗ 📂[noticeId]
┃ ┃ ┣ 📂myprofile
┃ ┃ ┣ ┗ 📂[userId]
┃ ┃ ┣ ┗ ┗ 📂assignmyprofile
┃ ┃ ┣ 📂myshop
┃ ┃ ┣ ┗ 📂[shopId]
┃ ┃ ┣ ┗ ┗ 📂notices
┃ ┃ ┣ ┗ ┗ ┗ 📂[noticesId]
┃ ┃ ┣ 📂noticelist
┃ ┃ ┣ 📂shop
┃ ┃ ┣ ┗ 📂[shopId]
┃ ┃ ┣ ┗ ┗ 📂notice
┃ ┃ ┣ ┗ ┗ ┗ 📂[noticeId]
┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┗ 📜page.tsx
 |
 |
로그인 |
회원가입 |
 |
 |
메인화면 (공고 리스트) |
공고 상세 |
 |
 |
가게 정보 등록 |
가게 정보 편집 |
 |
 |
공고 등록 |
공고 편집 |
 |
 |
가게 정보 상세 |
공고 상세 |
 |
 |
내 프로필 등록 |
내 프로필 편집 |
 |
 |
내 프로필 상세 |
공고 상세 |
✅ 페이지를 이동하기 전 컴포넌트에서 가게 데이터를 사용하고 있어 Link태그에 query로 데이터들을 전달해줌.
✅ querykey를 특정하지 않아 기존의 캐싱된 데이터가 참조하게 됨. -> 고유한 querykey를 만들기 위해 userId를 추가함.
✅ 쿠키로 로그인하거나 가게를 등록했을 때 shopId를 저장해주고 (/myshop) 페이지에서 쿠키 값을 가져와서 만약 있다면 (/myshop/{shopId})로 리다이렉션 되게끔 해줌.
✅ prefetchQuery는 단일 페이지의 데이터를 로드할때 사용하는 것이고 페이지네이션이나 무한스크롤에 특화된 prefetchInfiniteQuery을 사용하여 useInfiniteQuery와 함께 사용함으로써 여러 페이지의 데이터를 미리 로드하였음.
✅ 이 오류는 SSR 환경에서 CSR이 일어날 경우에 발생하는 오류로써 Suspense 컴포넌트를 사용하여 CSR과 SSR 사이의 경계를 만듦으로써 감싸진 컴포넌트가 렌더링되기 전에 필요한 데이터를 비동기적으로 로드할 수 있는 시간을 제공하도록 함.