효율적인 일정 조율을 위한 통합 스케줄링 플랫폼 개인과 그룹의 일정 조율 과정에서 발생하는 비효율성을 해결하고 모든 구성원이 참여하지 못하는 현실적인 상황을 고려하여 유연한 일정 관리 서비스를 제공합니다.
- 바쁜 현대인들의 일정 잡기를 클릭 몇번으로 쉽고 간편하게 해주는 서비스입니다.
- 나의 가능한 시간을 등록하고 다른 모임원들의 시간을 취합하여 가장 빠른 일정, 긴 시간 볼 수 있는 일정을 확인하고 정할 수 있습니다.
- (1회성 모임) 1번만 만나는 모임 일정을 조율할 수 있습니다.
- (그룹 모임) 자주 만나는 모임을 그룹으로 설정하고 해당 그룹원끼리 일정을 계속 생성할 수 있습니다.
- (오프라인 모임) 모임원들의 출발역 등록 후 모두의 출발지에서 가장 중간 지점을 계산하여 추천 목록을 보여주고 투표하여 중간 지점을 정할 수 있습니다.
- (온라인 모임) 온라인 미팅 플랫폼을 정하지 못했다면 줌 회의장을 생성해 줍니다.
- 정해진 일정에서는 다양한 워크스페이스 링크를 등록하여 사용할 수 있습니다.
- 마이페이지에서 내가 자주 등록하는 역, 기본 정해진 시간을 등록하여 불러오기를 통해 더 쉽게 일정 등록에 사용할 수 있습니다.
| 박상윤 | 박은서 | 박준규 | 현혜주 | 황수지 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| @ygvbhy | @snowari | @parkjungyuxx | @hxezu | @ssujissuji |
- Next.js v15 (App Router)
- TailwindCSS
- TanStack Query
- Zustand
src
├── app
│ ├── auth
│ ├── favicon.ico
│ ├── globals.css
│ ├── group
│ ├── layout.tsx
│ ├── loading.tsx
│ ├── meeting
│ ├── mypage
│ ├── not-found.tsx
│ ├── page.tsx
│ ├── README.md
│ ├── schedule
│ └── utils
├── assets
│ ├── icon
│ ├── images
│ └── README.md
├── components
│ ├── auth
│ ├── dashboard
│ ├── election
│ ├── feature
│ ├── home
│ ├── landing
│ ├── layout
│ ├── mypage
│ └── ui
├── lib
│ ├── api
│ ├── profileImages.ts
│ └── utils.ts
├── middleware.ts
├── providers
│ └── TanstackProvider.tsx
├── stores
│ └── authStores.ts
├── svg.d.ts
└── types
├── group.d.ts
├── kakao.d.ts
├── kakaoSearch.ts
├── README.md
├── schedule.d.ts
└── station.d.ts- 드래그 기반 시간대 선택 및 해제
- 기존 클릭 방식의 비효율성을 개선하기 위해 드래그 이벤트 기반의 시간대 선택 기능 설계
- 최대 7개의 선택 라인 중 1개 라인 드래그 시, 다른 라인은 드래그 불가하도록 제약 처리
- 이미 선택된 영역 재선택 시 해제되도록 XOR 연산 로직 적용
- 백엔드와 협의하여 시간 데이터를 TimeBit(16진수) 형식으로 변환·전송하도록 설계 (["09:00", "09:30"] → TimeBit 변환 후 API 송신)
- 즐겨찾는 시간대 불러오기 및 적용
- 마이페이지에 저장된 즐겨찾기 시간대를 불러와 이벤트 시간표에 즉시 적용
- 기존 데이터와 병합 시에도 XOR 로직 유지로 중복·겹침 문제 방지
- 상태 관리 구조 최적화로 UI 즉시 반영 구현
- 모든 참여자 시간표 통합 시각화
- 참여자 전체의 시간 데이터를 집계 후, 겹치는 정도를 색상 농도로 표현
- 인원이 많을수록 진하게, 적을수록 연하게 표시하는 시각화 구현
- Tailwind CSS로 반응형 UI 구현 및 렌더링 최적화
- TanStack Query의 interval 기능으로 5초 주기 API 호출, 실시간 갱신 효과 제공
- 일정 조율 결과 산출 및 추천
- 전체 참여자의 가능 시간대를 분석하여
- ‘가장 오래 만날 수 있는 시간’
- ‘가장 빨리 만날 수 있는 시간’ 두 기준으로 각 3개의 추천 시간대 도출
- 전체 참여자의 가능 시간대를 분석하여
- 일정 확정 기능
- 조율 결과 중 선택된 시간대를 이벤트의 최종 일정으로 확정
- 다른 참여자가 재확정 시도 시, 경고 메시지 출력 후 홈 화면으로 이동 처리
- 카카오 Open API를 활용하여 초대 링크를 카카오톡으로 공유
- 초대 링크에 포함된 eventId, groupId를 파싱하여 자동 참여 처리
- 그룹 일정(group=true)일 경우, 해당 그룹 가입과 이벤트 참여를 동시에 처리
- 비로그인 사용자는 localStorage에 리다이렉트 경로 저장 후, 로그인 완료 시 해당 URL로 복귀
- "when2meet 의 핵심 기능인 모임 시간 조율 서비스 + 흩어져 있는 워크스페이스 통합 관리, 모임 참여자 출발지를 기반으로 최적 중간 지점을 찾아주는 서비스 컨셉 발안
- 사용자 시나리오 설계 및 기능 범위 제안
- 초기 와이어 프레임 및 일정 상세 페이지, 투표 페이지 레이아웃 설계
- 출발지 지정하기
- 카카오 장소 검색 API를 이용해 역/장소 검색
- 키워드 검색 결과에서 검색 키워드와 일치하는 부분 강조
- 사용자가 선택한 장소 좌표를 API 로 제출해 내 출발지 등록
- 출발지 등록 완료 및 대기 단계
- 일정 멤버 여부 검증 (비멤버 접근 시 토스트 알림 & 홈으로 리다이렉트)
- 일정 멤버 중 출발지 미등록 인원 수를 Axios + TanStack Query 기반 API 연동으로 실시간(5초 폴링)으로 반영
- 카카오톡 공유 기능 제공
- 미등 록 인원 있을 경우 투표 링크 공유, 전원 등록 완료시 중간 장소 투표 분기
- Kakao Map 연동으로 등록한 위치 표시
- 중간 지점 투표 단계
- 일정에 포함된 멤버 여부 검증
- 지정한 출발 장소의 좌표와 중간 지점의 좌표를 Odsay API를 통해 예상 소요 시간 계산
- 투표 진행 상태 표시
- 투표 전 : 투표 가능, 선택된 후보가 없으면 투표 버튼 비활성화
- 투표 후 : 재투표 불가
- 아직 투표하지 않은 멤버가 있는 경우 인원 수를 Axios + TanStack Query 기반 API 연동으로 실시간(5초 풀링)으로 반영
- 모든 멤버가 투표를 완료하면 투표 결과 보기 버튼 활성화
- 출발 위치와 중간 위치가 같은 경우 예외 처리 (0분)
- 중간 지점 투표 결과
- 일정에 포함된 멤버 여부 검증
- 투표에서 가장 표를 많이 받은 역( WINNER) 표시
- 내 위치 기준, 해당 역 까지 예상 소요 시간 계산
- Kakao Map에 해당 장소 표시
- 카카오톡 공유 API 연동으로 손쉬운 초대 흐름 제공
- 초대 링크에
fromInvite=true쿼리 파라미터 포함 → 자동으로 그룹 멤버로 등록 - 비로그인 사용자는 redirect URL을 localStorage에 저장 → 로그인 후 원래 위치로 자동 복귀
- 초대 여부 및 로그인 상태를 기준으로 4가지 상황(초대/비초대 , 로그인/비로그인)을 분기 처리
- 초대 흐름을 직관적으로 구성해 사용자 혼란을 줄이고 진입 경험을 자연스럽게 연결
- 그룹 일정 불러오기 기능 구현
- 불러온 일정 데이터를 지나간 일정과 다가올 일정으로 분리
- UX 개선을 위해 다가올 일정은 가장 가까운 미래부터 오름차순 정렬, 지난 일정은 가장 최근 지난 것부터 내림차순 정렬
- 시각적으로 UI를 다르게 표현해 사용자가 구분하기 쉽게 설계
- 그룹 페이지에서 각 일정 링크 복사 기능 구현으로 초대 공유 편의성 향상.
- 그룹 통계 페이지
- 그룹 통계 시각화 (Chart.js 활용)
- 통계 데이터가 없는 경우 빈 상태 UI 구성 및 신규 일정 생성 유도
- 그룹 멤버 페이지
- 그룹 멤버 목록 및 권한 관리 기능
- 방장 임명 / 회수
- 멤버 강제 내보내기
- 그룹 멤버가 아닌 사용자는 대시보드 페이지로 리다이렉트 처리
- 그룹 멤버 목록 및 권한 관리 기능
- 그룹 페이지 프리패칭 최적화
- 통계, 그룹원, 그룹 일정 데이터를 페이지 진입 전에 프리패칭
- 일정은 scheduleId별로 쿼리 키 분리 → 부분 캐싱 및 리패칭 용이
- 로딩 최소화로 빠른 초기 렌더링과 사용자 경험 개선
- 온라인 회의장 관리 기능 구현
- 사용자가 기존에 보유한 회의 링크가 없는 경우 → 버튼 클릭 한 번으로 Zoom 회의 링크 자동 생성 및 등록 → 복잡한 절차 없이 즉시 회의장 생성 가능, 사용자 편의성 향상
- 기존 회의 링크가 있는 경우 → 직접 입력하여 등록 가능
- 일정 수정 및 삭제 기능 구현
- 일정 상세 정보 수정 및 삭제 처리 UI 구현
- 플랫폼별 URL 유효성 검사 적용
- Zoom, Google Meet 등 주요 플랫폼 형식의 URL만 등록 가능하도록 제한
- 잘못된 URL 입력 방지 → 실수로 인한 오류 최소화
- 워크스페이스 등록 / 수정 / 삭제 기능 구현
- 이름, 플랫폼, 회의 링크 등 워크스페이스 정보 입력 및 관리
- URL 유효성 검사 적용
- 잘못된 회의 플랫폼 링크 등록 방지
- 사용자 경험 개선 및 안정적인 사용 유도
- 주간 → 월간 확장 지원 가능한 일정 캘린더 컴포넌트 개발
- Props 기반 단일/다중 날짜 선택 기능 제공 → 다양한 일정 선택 케이스에 대응 가능
- 재사용성과 확장성을 고려한 컴포넌트 설계로 다른 페이지에서도 활용 가능
- Axios + TanStack Query 조합으로 group, schedule 관련 API 연동
- 쿼리 키 기반 캐싱 →
invalidateQueries를 통한 최신 데이터 유지 (새로고침 없이 상태 동기화) - 인증 구조상
fetch를 사용할 수 없는 환경에서 효율적인 API 관리와 비동기 흐름 제어 구현
- 그룹, 일정 등 주요 페이지에 비로그인 사용자 접근 제한
- 로그인 여부 확인 후 미인증 사용자는 로그인 페이지로 리디렉션
- 보안 강화 및 사용자 흐름 제어
- GSAP(ScrollTrigger 포함)를 활용해 스크롤 기반 인터랙션 및 애니메이션 구현
- 섹션별 콘텐츠 등장, 요소 강조, 자연스러운 사용자 흐름 유도
- 시선 흐름을 고려한 동적 UI 구성으로 사용자의 관심을 끌고 서비스 메시지를 효과적으로 전달
- 반응형 레이아웃 및 텍스트/이미지 애니메이션 최적화 → 다양한 디바이스에서도 일관된 사용자 경험 제공
- 글로벌 로딩 컴포넌트 구현
- 대시보드 및 일정 페이지
- 그룹 메인/생성/수정/통계/구성원 관리/안내 페이지
- 일정 상세/수정 페이지
- 공통 UI 컴포넌트(Button, Calendar, ScheduleCard 등) 퍼블리싱
- 서비스 아이덴티티 및 브랜드 톤앤매너 정의
- 컬러 시스템 및 폰트 가이드 구축
- UI/UX 전체 설계 및 구조 기획 (반응형)
- 컴포넌트 기반 디자인 시스템 제작
- 3D 비주얼 요소 제작 및 적용
- UI 일관성 확보를 위한 디자인 QA 수행
- 로그인 페이지 UI 구현
- 소셜 로그인 플로우 설계(Google / Kakao)
- 콜백 처리 및 사용자 인증 상태 연동 흐름 설계
- TanStack Query를 활용한 사용자 정보 패칭 로직 구축
- Axios Instance를 활용한 쿠키 기반 인증 구현과 인터셉터 처리 설계
- 비로그인 접근 제어 함수 구현
- 선택된 날짜 기준으로 개인화된 일정 및 그룹 정보 조회
- TanStack Query를 활용해 데이터 페칭 및 캐싱 최적화로 성능 및 UX 향상
- 월 단위 일정 데이터를 캐싱하여 동일 월 내 재요청 방지
- 쿼리의 select 옵션 활용으로 필요한 데이터만 추출, 불필요한 렌더링 최소화
- 로딩 시 스켈레톤 UI 제공으로 부드러운 화면 전환 구현
- 일정 미존재 시 빈 상태 UI 구성 및 신규 일정/그룹 생성 유도
- 일정 삭제 시 invalidateQueries를 활용해 실시간 데이터 동기화 처리
- 모임 장소 유무에 따른 UI 분기 처리
- 카카오맵 API 연동, 지정된 위도·경도 기반 위치 표시
- 모임 장소 편집 기능 구현
- 검색 기반 모임 장소 설정
- 카카오 장소 검색 API를 통해 실시간 장소 목록 제공 및 선택 처리
- 사용자 입력에 debounce 기법을 적용해 불필요한 API 호출 방지
- 그룹 생성/수정/삭제 기능 구현
- 각 작업 성공 시 TanStack Query로 관련 데이터 캐시를 실시간으로 무효화하여 최신 상태 유지
- 그룹 ID에 따른 기존 그룹 이름 및 설명 데이터를 불러와 초기 렌더 시 폼에 자동 반영
- next/navigation을 활용하여 선택된 유형에 따라 적절한 페이지로 라우팅 처리
- framer-motion을 통한 전환 애니메이션 및 Tip 컴포넌트 사용으로 UX 향상
- 기존 개인 일정을 그룹 일정으로 이관하는 비즈니스 로직 구현
- 개인 일정 리스트 조회 및 선택이 가능한 직관적인 UI 설계
- TanStack Query의 useMutation을 활용하여 API 호출 후 invalidateQueries로 실시간 데이터 동기화 처리
- 데이터가 많은 경우에도 원활한 UX 제공을 위한 스켈레톤 로딩 UI 적용
- 서비스 메인 캐릭터 기획 및 디자인
- 공통 컴포넌트 제작(alertBox, Header, Tip 등)
- 마이페이지 퍼블리싱
- 유저 정보 조회 - 프로필 수정 후에도 refetch를 통해 최신 상태로 동기화
- 유저 프로필 이미지, 유저 이름 수정 - PATCH API와 연결하고 수정 성공시 UI에 실시간으로 반영되도록 처리
- 근처역 등록 수정 및 저장
- 구글 캘린더 등록 및 삭제 - 구글 계정 및 구글 캘린더 ID 유효성 검사를 한 후 등록할 수 있도록 처리
- 로그아웃 및 탈퇴 API 연결 - 로그아웃 및 탈퇴 후 로그인 페이지로 리다이렉트
- 전체 개발 기간 : 2025. 06. 26 ~ 2025. 07. 31
- 디자인 및 퍼블리싱 : 2025. 06. 26 ~ 2025. 07. 09
- 기능구현 : 2025. 07. 10 ~ 2025. 07. 31
npm install
npm run dev