DKation - 디케이테크인 워케이션 추첨 시스템

개발 기간 : 2024.07 ~ 2024.08

✍🏻 프로젝트 개요

워케이션은 Work와 Vacation의 합성어로, 회사 직원들이 업무와 휴식을 동시에 즐길 수 있도록 돕는 복지 제도입니다. 이 서비스는 직원들에게 주어진 포인트를 활용하여 워케이션 참여 기회를 베팅하고, 랜덤 추첨을 통해 당첨자를 선정하는 시스템입니다.

🧑🏻‍💻 배포 정보

배포 URL : https://dkation.com/

	관리자	유저
메인 페이지
Test ID	dkadmin123	eunzzzzzz1
Test PW	12345	12345

⚙️ 기술 스택

분류	기술 스택
프론트엔드
협업

🧡 FE 팀원 소개

신은지	강어진	김가현

🎮 프로젝트 설치 및 실행 방법

1. 설치

$ git clone https://github.com/TEAM-MONGDOL/dkation-fe.git
$ cd dkation-fe

2. .env.local 추가

NEXT_PUBLIC_SERVER_URL=http://210.109.53.168:8080
NEXTAUTH_SECRET=kUp1byNb0kKEXOiTgT7Sw0DlT0toOykEt1u/vgwxAWg=
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_KAKAO_API_KEY=ce3f0cff684353522017918a797cdbf3
SENTRY_AUTH_TOKEN=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

2. 실행

$ npm install
$ npm run dev

🚀 핵심 기능 및 FE 기술적 도전

NextAuth & Middleware

로그인 권한 및 토큰 관리, 권한에 따른 라우팅 처리

• 로그인 시 토큰을 쿠키에 저장하여, 해당 토큰을 활용해 유저를 파악함
• 유저 계정과 어드민 권한을 구분하여 각 페이지별 라우팅에 사용
• 메인페이지와 로그인페이지 외의 모든 페이지는 최소 유저 권한을 필요로 하며, /admin 으로 시작하는 관리자 페이지는 관리자 권한을 필요로 함
• 권한을 지니지 않았으나 권한이 필요한 페이지에 접근하였을 경우, 로그인 페이지로 리다이렉트 처리

Daum Postcode & KakaoMap

워케이션 장소 등록 및 조회를 위한 도로명 주소 검색, 지도 기능

• 워케이션 장소를 등록/수정할 시 도로명 주소 검색 기능을 추가하여 간편히 장소를 선택할 수 있게 함
• 선택된 장소의 위도, 경도 좌표를 이용하여 카카오맵 위에 마커 표시
• 사용자는 해당 장소의 대략적인 위치를 파악할 수 있음

필터링 및 정렬

필요한 정보를 효과적으로 선택하고 조회할 수 있도록 각 목록 페이지에 조건 필터링 및 정렬 기능 구현

• 각 항목에 대해 사용자의 목적에 맞게 체크박스, 라디오 버튼, 캘린더 등 다양한 형식의 필터를 제공
• 필터링을 통해 특정 조건에 맞는 항목만 표시하며, 다중 필터를 적용하여 더욱 정교한 검색 결과를 제공
• 정렬 기능을 추가하여, 사용자가 항목을 원하는 기준(예: 날짜, 별점 등)으로 정렬할 수 있게 하여 데이터 접근성과 탐색을 향상

무한스크롤

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]