개발 기간 : 2024.07 ~ 2024.08
워케이션은 Work와 Vacation의 합성어로, 회사 직원들이 업무와 휴식을 동시에 즐길 수 있도록 돕는 복지 제도입니다. 이 서비스는 직원들에게 주어진 포인트를 활용하여 워케이션 참여 기회를 베팅하고, 랜덤 추첨을 통해 당첨자를 선정하는 시스템입니다.
배포 URL : https://dkation.com/
| 관리자 | 유저 | |
|---|---|---|
| 메인 페이지 |  |
 |
| Test ID | dkadmin123 | eunzzzzzz1 |
| Test PW | 12345 | 12345 |
| 분류 | 기술 스택 |
|---|---|
|
프론트엔드 |
|
|
협업 |
|
|
|
|
| 신은지 | 강어진 | 김가현 |
$ git clone https://github.com/TEAM-MONGDOL/dkation-fe.git
$ cd dkation-fe$ npm install
$ npm run dev로그인 권한 및 토큰 관리, 권한에 따른 라우팅 처리
- 로그인 시 토큰을 쿠키에 저장하여, 해당 토큰을 활용해 유저를 파악함
- 유저 계정과 어드민 권한을 구분하여 각 페이지별 라우팅에 사용
- 메인페이지와 로그인페이지 외의 모든 페이지는 최소 유저 권한을 필요로 하며,
/admin으로 시작하는 관리자 페이지는 관리자 권한을 필요로 함 - 권한을 지니지 않았으나 권한이 필요한 페이지에 접근하였을 경우, 로그인 페이지로 리다이렉트 처리
워케이션 장소 등록 및 조회를 위한 도로명 주소 검색, 지도 기능
- 워케이션 장소를 등록/수정할 시 도로명 주소 검색 기능을 추가하여 간편히 장소를 선택할 수 있게 함
- 선택된 장소의 위도, 경도 좌표를 이용하여 카카오맵 위에 마커 표시
- 사용자는 해당 장소의 대략적인 위치를 파악할 수 있음
필요한 정보를 효과적으로 선택하고 조회할 수 있도록 각 목록 페이지에 조건 필터링 및 정렬 기능 구현
- 각 항목에 대해 사용자의 목적에 맞게 체크박스, 라디오 버튼, 캘린더 등 다양한 형식의 필터를 제공
- 필터링을 통해 특정 조건에 맞는 항목만 표시하며, 다중 필터를 적용하여 더욱 정교한 검색 결과를 제공
- 정렬 기능을 추가하여, 사용자가 항목을 원하는 기준(예: 날짜, 별점 등)으로 정렬할 수 있게 하여 데이터 접근성과 탐색을 향상
react-query의 useInfinityQuery 훅을 사용한 무한스크롤 구현
- 유저 페이지의 내 워케이션 신청 내역, 어드민 단체 포인트 지급을 위한 대상 선택, 배너 리스트 조회 시 무한 스크롤을 적용하여 사용자 경험 향상
- initialPageParam을 설정하여 데이터를 로드할 때 기본 페이지 및 크기를 정의하고, getNextPageParam 함수를 통해 다음 페이지의 파라미터를 계산
- 다음 페이지의 데이터가 없다면 불필요한 API 요청을 하지 않음
다양한 애니메이션 효과를 활용하여 부드러운 시각적 효과를 제공하고 시뮬레이션을 구현
- 어드민 네비게이션 바, 장소 선택 드롭다운, FQA 아코디언 메뉴 등에 애니메이션을 적용해 사용자 경험을 보다 부드럽고 편리하게 개선
- 워케이션 당첨 시뮬레이션을 애니메이션을 적용하여 각 사용자의 배팅 비율과 당첨 인덱스를 공개함으로써 당첨 과정의 투명성을 증명
- app
└── (route)
│ ├── (user)
│ │ ├── (with-layout)
│ │ └── (without-layout)
│ └── admin
│ ├── (with-layout)
│ └── error
└── _assets
│ ├── icons
│ └── images
└── _components
│ ├── admin
│ ├── common
│ │ ├── atoms
│ │ ├── containers
│ │ └── modules
│ └── user
└── _constants
└── _hooks
│ ├── admin
│ ├── common
│ └── user
└── _types
└── api
└── auth
└── [...nextauth]