🌸 Scent of Yonsei
연세대학교 개교 140주년 무악 대동제 공식 웹사이트
🌐 웹사이트 바로가기 | 📱 주요 기능 | 🛠️ 기술 스택 | 👥 개발 팀
Scent of Yonsei는 연세대학교 개교 140주년을 기념하는 무악 대동제의 공식 웹사이트입니다. 모바일 최적화된 반응형 웹 애플리케이션으로, 축제 참가자들에게 종합적인 정보를 제공합니다.
- 축제 참가자들에게 실시간 정보 제공
- 직관적이고 사용하기 쉬운 모바일 인터페이스
- 부스, 공연, 시설 정보의 통합 관리
- 축제 현장에서의 편리한 정보 접근성
- 총 방문자: 10,772명에게 실시간 정보 제공
- 사용자 참여도: 방문자당 평균 13.5페이지 조회
- 사용자 경험: 16% 이탈률로 높은 사용자 경험 입증
- 모바일 최적화: 93% 모바일 사용률로 현장 활용도 극대화
- 성능 최적화: RSC와 ISR로 초기 로딩 시간 단축 및 실시간 유저 폭증으로 인한 서버 부하 개선
- 모바일 UX 최적화: 320px~500px 반응형 디자인으로 현장 사용성 강화
- 정보 전달 효과성: 부스 정보 페이지 70% 방문률로 핵심 기능 활용도 입증
- 연세대 재학생 약 25% 커버리지: 전체 재학생 대비 높은 서비스 활용률
- 축제 운영 효율성 향상: 실시간 부스/공연 정보 제공으로 현장 혼잡도 감소
- 사용자 만족도: 낮은 이탈률과 높은 재방문률 달성 및 다수의 긍정적 피드백 수집
- 축제 일정 안내: 4일간의 축제 일정을 카드 형태로 제공
- 주요 기능 바로가기: 부스 정보, 공연 정보로 빠른 접근
- 실시간 공지: 축제 관련 중요 공지사항 및 업데이트
- 카테고리별 분류: 캠퍼스별, 중요도별 공지사항 필터링
- 검색 기능: 키워드 기반 공지사항 검색
- 부스 상세 정보: 위치, 운영 시간, 메뉴, 가격 정보
- 푸드트럭 정보: 음식 종류별 푸드트럭 리스트
- 실시간 검색: 부스명, 단체명 기반 검색
- 일자별/구역별 필터: 날짜와 구역을 기준으로 한 필터링
- 이미지 갤러리: 부스 사진 및 메뉴 이미지 제공
- 실시간 공연 현황: 현재 진행 중인 공연 표시
- 공연 스케줄: 일정별 공연 타임테이블
- 아티스트 정보: 공연팀 상세 정보 및 인스타그램 연결
- 장소별 분류: 노천극장, 동문광장, 언기도별 공연 정보
- 캠퍼스 지도: 축제 시설 위치 안내
- 편의시설 정보: 화장실, 휠체어 접근 가능 시설 표시
- 쓰레기통 위치: 구역별 쓰레기통 위치 안내
- 개발팀 소개: 프로젝트 참여 개발진 정보
- 역할별 구분: PM/디자인, 프론트엔드, 백엔드 팀 구성
- Next.js 15: React 기반 풀스택 프레임워크
- React 19: 최신 React 기능 활용
- TypeScript: 타입 안정성 및 개발 효율성
- TailwindCSS: 유틸리티 퍼스트 CSS 프레임워크
- ShadcnUI: Radix UI 기반 컴포넌트 라이브러리
- TanStack Query (React Query): 서버 상태 관리 및 캐싱
- Nuqs: URL 상태 관리
- Stackflow: 모바일 최적화 라우팅
- Framer Motion: 애니메이션 라이브러리
- Embla Carousel: 이미지 캐러셀
- Lucide React: 아이콘 라이브러리
- Sonner: 토스트 알림
- ESLint + Prettier: 코드 품질 관리
- PostCSS: CSS 후처리
- Turbopack: 빠른 개발 서버
- Vercel: 배포 플랫폼
- AWS S3: 이미지 호스팅
- Google Analytics: 사용자 분석
src/
├── app/
│ ├── (pages)/ # 페이지 라우팅
│ │ ├── (mainpage)/ # 메인 페이지
│ │ ├── booth/ # 부스 정보
│ │ ├── festival/ # 공연 정보
│ │ ├── location/ # 시설 위치
│ │ ├── notice/ # 공지사항
│ │ └── makers/ # 만든이들
│ ├── _common/ # 공통 컴포넌트 & 유틸리티
│ │ ├── apis/ # API 연결
│ │ ├── components/ # 공통 컴포넌트
│ │ ├── interfaces/ # 타입 정의
│ │ └── providers/ # 전역 프로바이더
│ └── _core/ # 핵심 UI 컴포넌트
├── styles/ # 전역 스타일
└── public/ # 정적 자원
- Node.js 18.0.0 이상
- npm 또는 yarn
# 저장소 클론
git clone https://github.com/Likelion-Yonsei-13th/SCENT-YONSEI-WEB.git
# 프로젝트 디렉토리 이동
cd SCENT-YONSEI-WEB
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev
# 빌드
npm run build
# 프로덕션 서버 실행
npm start# .env.local 파일 생성
NEXT_PUBLIC_API_URL=your_api_url
GOOGLE_ANALYTICS_ID=your_google_analytics_id- 축제 일정 및 주요 기능 안내
- 애니메이션 효과가 적용된 카드 형태 UI
- 부스 리스트 및 상세 정보
- 검색, 필터링 기능
- 이미지 갤러리 및 메뉴 정보
- 실시간 공연 현황
- 일정별 공연 타임테이블
- 아티스트 상세 정보
- 축제 관련 공지사항
- 카테고리별 필터링 및 검색
- 캠퍼스 지도 및 편의시설 정보
- 쓰레기통 위치 안내
- 구서영 (문헌정보 23)
- 조윤희 (문헌정보 22)
- 윤영준 (컴퓨터과학 20)
- 박준열 (컴퓨터과학 20)
- 여민서 (문헌정보 19)
- 김나연 (의류환경 23)
- 이지호 (기계공학 23)
- 조민 (수학 23)
- 변호영 (컴퓨터과학 21)
- 이준영 (컴퓨터과학 21)
- 고선태 (컴퓨터과학 21)
- 이수정 (건설환경 24)
- Primary:
#44BDF5(연세 블루) - Background: 그라데이션 배경 적용
- Typography: Pretendard 웹폰트 사용
- 모바일 우선: 320px ~ 500px 최적화
- 터치 인터페이스: 모바일 사용성 고려
- 접근성: 웹 접근성 가이드라인 준수
- ESLint + Prettier: 일관된 코드 스타일
- TypeScript: 엄격한 타입 체크
- 컴포넌트 네이밍: PascalCase 사용
- 파일 구조: 기능별 모듈화
feat: 새로운 기능 추가
fix: 버그 수정
docs: 문서 업데이트
style: 코드 스타일 수정
refactor: 코드 리팩토링
test: 테스트 추가/수정
- Next.js Image: 자동 이미지 최적화
- AWS S3: 이미지 CDN 활용
- Lazy Loading: 필요시 로딩
- Turbopack: 빠른 빌드 시간
- Code Splitting: 페이지별 코드 분리
- Tree Shaking: 불필요한 코드 제거
# Vercel CLI 설치
npm i -g vercel
# 배포
vercel --prod멋쟁이사자처럼 연세대 13기
- 🌐 웹사이트: scent-yonsei.com
- 📱 인스타그램: @likelion_yonsei
연세대학교 개교 140주년 무악 대동제를 함께 만들어갑니다 🦁
Made with ❤️ by 멋쟁이사자처럼 연세대 13기