문서만 남은 서비스를, 실제로 탐색하고 팀을 구하고 제출하고 결과까지 확인할 수 있는 흐름으로 복원합니다.
Now Your Thon은
문서만 남은 해커톤 서비스를 우리 손으로 다시 완성하겠다는 의미와,
사용자가 자신의 해커톤 흐름을 끊기지 않고 이어갈 수 있게 만들겠다는 의미를 담은 서비스입니다.
제공된 JSON 예시자료, UI 흐름도, 메모를 함께 분석해
단순 소개 페이지가 아니라 아래 흐름이 실제로 이어지는 구조를 목표로 했습니다.
- 해커톤 목록 탐색
- 해커톤 상세 확인
- 팀 모집 및 팀 빌딩
- 제출 저장 및 최종 제출
- 리더보드 확인
- 전체 랭킹 확인
한부각감자부각은 전원 백엔드 팀원으로 구성된 팀입니다.
이번 해커톤에서는 사용자에게 실제로 보이는 화면과 사용 흐름까지 직접 고민하며
프론트엔드 영역으로 시야를 확장하는 것을 목표로 합니다.
|
|
|
어떤 해커톤에 참여할지 탐색하고 팀까지 구해야 하는 사용자 |
특정 해커톤과 연결해 팀을 모집하고 제출을 준비하는 사용자 |
배포된 URL에서 서비스 구조와 동작을 빠르게 검토해야 하는 사용자 |
-
사용자는 흩어진 정보를 한곳에서 이해하고
해커톤 탐색부터 팀 찾기, 제출 준비, 결과 확인까지 끊기지 않는 흐름으로 서비스를 이용할 수 있습니다. -
단계형 진행 안내, 제출 준비도 확인, 해커톤별 팀 연결, 점수 상세 구조가 보이는 리더보드를 통해
실제 사용 중 혼동되기 쉬운 지점을 줄일 수 있습니다. -
단순히 화면만 만드는 것이 아니라,
사용자가 서비스를 어떻게 읽고 어떻게 행동으로 이어지는지까지 책임지는 결과물을 목표로 합니다.
|
메인 페이지
해커톤 목록
해커톤 상세
|
팀원 모집
랭킹 페이지
|
JSON Seed Data
↓
Slug 기준 데이터 정리
↓
React Router 기반 페이지 연결
↓
React 컴포넌트 UI 구성
↓
localStorage 상태 유지
↓
Vercel 배포
- 동적 필터링 시스템
slug기준 데이터 통합 상세 페이지- 탭 기반 섹션 전환
- 저장 / 제출을 분리한 제출 폼 처리
- localStorage 기반 팀 생성 / 수정 / 모집 상태 변경
- 해커톤 연동 팀 필터링
- 팀 지원 / 초대 / 수락 / 거절 UI 흐름 구현
- 제출 결과 기준 자동 정렬
- 참가자 점수 + 심사위원 점수 기반 최종 점수 계산
- 기간별 랭킹 시스템
- 상위 랭커 강조 UI
- 로딩 / 데이터 없음 / 오류 상태 안내
- 필수 입력 검증 및 오류 방지
- 공통 네비게이션 구조 제공
메인 페이지 진입
↓
해커톤 목록 탐색
↓
특정 해커톤 상세 확인
↓
팀 탐색 또는 팀 생성
↓
제출 저장 / 최종 제출
↓
리더보드 확인
↓
전체 랭킹 확인
배포 URL 접속
↓
메인 페이지에서 서비스 구조 확인
↓
해커톤 목록 → 상세 페이지 진입
↓
개요 / 일정 / 팀 / 제출 / 리더보드 검토
↓
팀 모집 페이지 / 랭킹 페이지 확인
↓
전체 서비스 흐름과 완성도 확인
|
|
| Vercel 배포 링크 | GitHub 저장소 |
