홍익대학교 멋쟁이사자처럼 12기와 제58대 총학생회 개화가 함께한 대동제 사이트 프로젝트입니다. 축제를 즐기고자 하는 학우들과 외부인들이 라인업, 위치 정보 및 실시간 공연 중인 DJ 정보 등 분산된 정보들을 한번에 확인할 수 있습니다. 더하여 분실물 게시판, 상품 제공 이벤트, 실시간 주점 좋아요 기능 등을 사용하며 축제를 한층 더 재미있게 즐길 수 있게끔 하였습니다.
개발 기간 : 2024.07 ~ 2024.09
배포 링크 : https://www.2024hongikfestival.com/ (2024.9.23 ~ 2024.9.29)
사이트 소개 카드뉴스 : https://www.instagram.com/p/DAQ42o_vbWZ/?igsh=Nmlmb2d6NW95OWpp
-
한영 번역 기능
- 메뉴바 하단의 한영 변환 토글 버튼을 통해 사이트 내용을 한글 및 영어로 변환할 수 있습니다.
-
로드맵
- 축제가 진행되는 홍익대학교 내의 전반적인 지도를 제공합니다.
- 전체 지도로 홍익대학교 전체 뷰를 확인할 수 있고, 상세 지도로 확대 및 축소를 통해 주점 위치나, 학교 건물의 위치를 파악할 수 있습니다.
-
공연
- 날짜별로 연예인 라인업과, 관람 정보 및 홍익존에 대한 정보를 제공합니다.
-
편의시설
- 화장실, 의료시설, 분실물 센터의 위치 정보를 드래그가 가능한 지도를 통해 파악할 수 있습니다.
-
주점
- 학과/동아리별로 준비한 부스 이벤트와 주점 메뉴를 살펴볼 수 있습니다.
- 실시간으로 주점별 좋아요 기능을 제공합니다. 마음에 드는 주점의 좋아요 버튼을 여러 번 눌러, 실시간 인기 주점 랭킹에 올릴 수 있습니다. 하트가 떨어지는 애니메이션을 통해 자신이 누르는 하트와 다른 사람이 실시간으로 누르고 있는 하트를 구별할 수 있습니다.
- 확대 및 축소가 가능한 지도를 통해 어떤 부스가 어디에 위치하고 있는지 알 수 있습니다.
-
플리마켓
- 마켓별로 판매하는 상품의 정보를 제공합니다.
- 마켓의 위치를 확대 및 축소가 가능한 지도로 파악할 수 있습니다.
-
MD 상품
- 축제에서 판매하는 MD 상품에 대한 이미지와 가격을 제공합니다.
-
온라인 분실물 센터
- 분실물을 발견할 경우 오프라인 센터에 맡기지 않고도 사이트에 사진을 찍어 발견 위치와 분실물 보관 위치를 함께 공유할 수 있습니다.
- 분실한 학생들도 게시판에서 바로 확인하고 찾을 수 있습니다.
-
이벤트
- 축제를 즐기고 있는 누구나 응모할 수 있는 이벤트 기능입니다. 축제가 진행되는 3일간 매일 응모권 1장이 제공되며, 홍익대학교 내에 있는 사람만이 응모가 가능합니다.
-
와우 디제이 페스티벌
- 사이트맵을 통해 출입구 방향을 알 수 있고, 프로모션 부스가 어디에 위치하는 지 알 수 있습니다.
- 와디페 공연 중 사이트에 접속하면 '현재' 공연 중인 DJ가 표기되어, 따로 검색하지 않아도 해당 DJ에 대한 정보를 습득할 수 있습니다.
.
├── README.md
├── global.js
├── index.html
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│ ├── faviconBlack.svg
│ └── faviconWhite.svg
├── src
│ ├── App.jsx
│ ├── api
│ │ └── axios.js
│ ├── assets
│ │ ├── lotties
│ │ ├── svgs
│ │ ├── videos
│ │ └── webps
│ ├── auth
│ │ ├── OAuth.js
│ │ ├── RedirectEvents.jsx
│ │ └── RedirectLosts.jsx
│ ├── components
│ ├── constants
│ ├── context
│ ├── i18n
│ │ ├── resource
│ │ │ ├── en.json
│ │ │ └── ko.json
│ │ └── setting.js
│ ├── main.jsx
│ ├── outlet
│ ├── pages
│ │ ├── admin
│ │ ├── booth
│ │ ├── event
│ │ ├── facilities
│ │ ├── flame
│ │ ├── lost-and-found
│ │ ├── main
│ │ ├── makers
│ │ ├── map
│ │ ├── not-found
│ │ └── stage
│ ├── styles
│ │ ├── GlobalStyle.js
│ │ ├── map
│ │ │ └── mapStyles.js
│ │ └── theme.js
│ └── utils
├── vite.config.js
└── yarn.lock
- Node.js: v22.0.0
- Yarn: v4.5.0
$ git clone [email protected]:2024HongikFestival/Festa-Client-Application.git
$ cd Festa-Client-Application
$ yarn install
$ yarn dev
main (배포용 브랜치)developfeature/페이지 이름 및 개발 내용- 각자의 feature 브랜치에서 개발 후 로컬 환경에서 테스트를 거친 뒤, PR을 작성하여 develop에 merge합니다.
hotfix
- 커밋 메세지는
[Type] 작성 내용으로 통일합니다.
[Feat] : 새로운 기능 추가시
[Fix] : 버그 수정시
[Docs] : 문서화 작업시
[Style] : 코드 포맷 변경, 세미콜론 누락, 따로 코드 수정이 없는 경우
[Refactor] : 코드 리팩터링
[Chore] : 빌드 업무 수정, 패키지 매니저 수정 등
[Design] : CSS 등 UI 디자인을 변경한 경우
[Rename] : 파일명 또는 폴더명을 수정한 경우
[Remove] : 코드 삭제가 있을 때
[Environment] 개발 환경 세팅시
[!HOTFIX] : 급하게 치명적인 버그를 고쳐야 하는 경우
| 역할 | 종류 |
|---|---|
| Library |    |
| Styling |   |
| Formatting |    |
| Version Control |   |
| Build Tool |  |
| Package Manager |  |
| Cowork Tool |   |
 |
 |
 |
 |
|---|---|---|---|
| 서가영 @caminobelllo |
공준혁 @ocahs9 |
김동욱 @boogiewooki02 |
심수연 @letthem |
 |
 |
 |
|---|---|---|
| 원윤서 @dbstj0403 |
원채영 @chaeyoungwon |
최정인 @cuyqo |
메인
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
Title | 메인 화면 진입 시 lottie-react 라이브러리를 활용해 자연스러운 애니메이션을 구현하여 사용자 경험을 향상시켰습니다. |
 |
라인업 | 축제가 진행되는 날짜에 접속하면 해당 날짜의 연예인 라인업을 확인할 수 있습니다. |
 |
운영 시간 | 중앙 무대 일정 또한 한눈에 확인할 수 있고 플리마켓, 주점, 와디페 운영 시간을 표기합니다. |
로드맵
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
전체 지도 | 홍익대학교 전체 지도를 한 눈에 볼 수 있는 페이지입니다. 확대/축소는 불가하도록 하여 방문자들이 지도의 기본적인 레이아웃을 쉽게 파악할 수 있도록 했습니다. |
 |
상세 지도 | react-zoom-pan-pinch 라이브러리를 사용하여 지도를 핀치줌(pinch zoom)으로 확대 및 축소할 수 있는 기능을 구현했습니다. 확대를 일정 스케일 이상 했을 때, 상세정보가 보이도록 구현했습니다. 이 기능을 통해 사용자는 관심 있는 영역을 더욱 자세히 탐색할 수 있습니다. 추가로, 마우스 드래그와 터치 제스처로 지도 이동이 가능하여 직관적인 사용 경험을 제공합니다. |
공연
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
라인업 | 각 날짜별로 공연하는 아티스트의 목록을 확인할 수 있습니다. AOS(Animate On Scroll) 라이브러리를 사용해 스크롤 시 아티스트 정보가 부드럽게 나타나는 애니메이션을 구현했습니다. 또한, 날짜 선택 기능에서 오늘 날짜를 기본값으로 설정하여 사용자가 페이지에 접속하면 자동으로 당일 라인업이 표시되도록 로직을 작성했습니다. |
  |
관람 정보 | 관람객들이 알아야 할 날짜별 중앙 무대 일정, 무대 주변 지도, 출입구 정보 등을 시각적으로 제공합니다. react-zoom-pan-pinch 라이브러리를 사용하여 지도를 핀치줌(pinch zoom)으로 확대 및 축소할 수 있는 기능을 구현했습니다. 또한, 로티 애니메이션을 추가하여 관람객들이 입장과 퇴장 경로를 직관적으로 인지 가능하도록 구현했습니다. |
 |
홍익존 | 홍익대학교 학생들을 위한 특별 구역인 홍익존에 대한 정보를 제공합니다. 홍익존의 자세한 정보와 위치 지도를 확인할 수 있습니다. |
부스
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
주점 캐러셀 | 단과대학별 주점의 정보를 react-slick 라이브러리를 사용하여 한눈에 주점별 대표 메뉴 2가지와 낮 이벤트를 확인할 수 있습니다. 주점 종류가 많아 성능을 위해 사진들을 해당 사진이 화면에 보일 때 가져오는 동적 import 방식을 사용하였습니다. |
 |
주점 좋아요 기능 | 주점 카드 안의 좋아요 버튼을 눌러 자신이 가고싶거나 좋아하는 주점의 좋아요수를 늘릴 수 있습니다. Server-Sent Events(SSE) 객체를 이용하여 1초마다 좋아요 수를 서버로부터 수신하고, 1초 전 데이터와 비교하여 좋아요수 차이를 카드 뒷편에 떨어지는 하트 애니메이션으로 표시하였습니다. 자신이 누르는 좋아요의 경우에는 카드 앞으로 떨어지는 하트 애니메이션으로 표기하여, 사용자들이 실시간으로 다른 사용자들과 상호작용하는듯한 경험을 할 수 있게끔 구현하였습니다. |
 |
주점 좋아요 기능 | 배포 초반에는 하트 생성을 관리하는 배열에서 좋아요 개수 차이가 3개 이상일 경우 3개만을 추가하고 오래된 하트를 빨리 삭제하도록 구현하였는데, 사용자가 생각보다 많았고 좋아요 버튼이 눌리는 속도가 매우 빨라 하트 애니메이션이 모두 보이지 않고 하트가 삭제되어 끊기는 이슈가 발생했습니다. 따라서 개수 차이가 3개 이상일 때 하트 1개만을 추가하고, 오래된 하트를 천천히 삭제하는 로직으로 수정하였으며 과부하를 막고 UI/UX적 개선을 주기 위하여 카드 최하단까지 투명도를 높여가며 내려가던 애니메이션을 카드 중반까지만 자연스럽게 내려가도록 수정하기도 하였습니다. 더하여 프론트측에서도 간단하게 매크로 운용을 저하하기 위하여 너무 빠르게 클릭되거나 클릭 간격이 지나치게 일정할 경우 좋아요 버튼을 DISABLED 처리하는 로직을 후에 추가하였습니다. |
 |
주점 랭킹 | 실시간 좋아요수를 기반으로 5분마다 업데이트되는 주점 랭킹입니다. |
 |
주점 위치 | react-zoom-pan-pinch 라이브러리를 활용하여 지도를 드래그하거나 더블클릭, 확대 및 축소하여 원하는 주점의 위치를 확인할 수 있습니다. |
플리마켓
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
플리마켓 메인 | 플리마켓 종류를 한눈에 스크롤 애니메이션과 함께 확인이 가능합니다. 플리마켓 이름과 한줄 소개를 통해 각 플리마켓들의 특색을 보여줍니다. 플리마켓 컴포넌트를 클릭하면 상세 정보를 확인할 수 있는 화면으로 넘어갑니다. |
 |
플리마켓 상세 | 플리마켓의 물품, 그리고 이벤트 공지, 가격, 상품 사진들을 확인할 수 있습니다. 이 페이지 또한 보여줘야 할 사진이 매우 많아 동적 import 방식을 사용하여 초기 화면 렌더링 성능을 높일 수 있었습니다. |
 |
플리마켓 위치 | react-zoom-pan-pinch 라이브러리를 활용하여 지도를 드래그하거나 더블클릭, 확대 및 축소하여 원하는 플리마켓의 위치를 확인할 수 있습니다. |
MD 상품
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
MD 상품 | 다양한 MD 상품을 소개합니다. 티셔츠, 스티커, 가방 등과 같은 다양한 상품의 이미지와 가격, 구매 방법을 제공합니다. AOS 라이브러리를 활용한 스크롤 애니메이션을 적용하여 편안한 사용자 경험을 제공합니다. |
편의 정보
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
화장실 | 화장실 위치 정보를 제공하는 화면으로, 사용자가 지도를 상하좌우로 드래그하여 확인할 수 있도록 react-zoom-pan-pinch 라이브러리를 사용하여 구현하였습니다. |
 |
의료 시설 | 의료 시설 위치 정보를 제공하는 화면으로, 사용자가 지도를 상하좌우로 드래그하여 확인할 수 있도록 react-zoom-pan-pinch 라이브러리를 사용하여 구현하였습니다. |
 |
분실물 센터 | 분실물 센터 위치 정보를 제공하는 화면으로, 사용자가 지도를 상하좌우로 드래그하여 확인할 수 있도록 react-zoom-pan-pinch 라이브러리를 사용하여 구현하였습니다. 또한, '온라인 분실물 센터 바로가기' 버튼을 클릭하여 분실물 게시판으로 이동할 수 있습니다. |
| - | 분실물 게시판 | 분실물 게시글을 살펴볼 수 있는 화면입니다. 날짜 드롭다운 메뉴를 통해 필터링 된 게시글을 볼 수 있고, 페이지네이션이 구현되어 있어 최대 9개의 게시글을 볼 수 있도록 구현했습니다. |
| - | 모달, 푸터 | 분실물 게시글, 분실물 센터 위치(지도)는 모달 형식으로 구현했으며, 카카오 인증 버튼은 슬라이딩 애니메이션이 적용된 푸터로 구현했습니다. 또한 react-zoom-pan-pinch 라이브러리를 사용하여 지도를 핀치줌(pinch zoom)으로 확대 및 축소할 수 있는 기능을 구현했습니다. |
| - | 카메라 기능 | 인증 받은 사용자가 본인 기기의 카메라를 이용하여 사진을 찍고, 이를 저장하여 분실물 등록 화면에 전달되도록 구현했습니다. |
| - | 분실물 등록 페이지 | 선택이 아닌 모든 입력 필드를 채워야만 등록 버튼이 활성화되도록 유효성 검사를 구현해놓았습니다. 또한, 글자 수를 동적으로 세는 기능과 글자 제한을 넘는 입력이 불가능하도록 구현되어 있습니다. (이모지도 입력되도록 구현했습니다.) |
이벤트
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
메인 | 진행되는 이벤트에 대한 전체적인 정보를 담고 있는 화면입니다. dayjs 라이브러리를 활용하여 실제 이벤트가 열리는 기간 내에만 이벤트 신청 페이지로 리다이렉트 되도록 설정하였고, 실제 남은 기간을 나타내는 TimeBox를 구현하여 사용자가 한 눈에 이벤트 기간을 파악할 수 있도록 하였습니다. |
 |
소셜 공유 기능 | Web Share API 중 Navigator.share 기능을 사용하여 모바일 기기에서 최적화된 소셜 공유 기능을 제공합니다. 기기 상 호환성을 고려하여 에러 처리를 통해 링크 복사도 가능하도록 하였습니다. |
   |
이벤트 응모 | 위치 인증 및 카카오 OAuth를 이용한 인증을 사용하였습니다. Geolocation API를 이용해 사용자의 현재 위치를 가져와 서버에 넘겨 주어 실제 홍익대학교 내부에서만 이벤트 신청이 가능하도록 하였습니다. 또한 카카오 인증을 통해 실제 사용자임이 인증된 사람만 이벤트에 응모할 수 있는 페이지로 리다이렉트 가능하도록 구현하였습니다. 각각의 인증 실패 경우에 해당하는 알림창을 띄워주어 사용자 경험을 향상시키고자 하였습니다. 1일 1회 응모 가능하기 때문에 중복 응모 또한 방지하였습니다. |
 |
이벤트 폼 | 앞선 인증 조건을 모두 만족하는 사용자만이 접근할 수 있는 화면입니다. 필수 입력 사항을 모두 입력해야 응모가 가능합니다. 페이지에서 뒤로 가기 등으로 중도 이탈 시에 재인증 과정을 거친 사용자만이 다시 응모 폼 페이지로 접근 가능하도록 구현하였습니다. |
 |
응모 완료 | 축제 1 & 2일차 / 3일차에 따라 (서버 응답 결과) 다른 컴포넌트가 렌더링 됩니다. 해당 페이지에서도 메인 화면에서와 동일한 소셜 공유 기능이 제공됩니다. 또한 해당 페이지에서 이탈한 경우도 응모 내역은 유지하되, 관련 토큰을 모두 지우는 것으로 응모 페이지의 접근성을 관리하고 인증된 사용자만 접근할 수 있는 특징을 살리도록 노력하였습니다. |
메인
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
메인 페이지 | WOW DJ FESTIVAL의 메인페이지로, 페스티벌의 주요 라인업과 정보를 보여주는 화면입니다. DJ 페스티벌의 분위기를 극대화하기 위해 역동적인 비디오 배경과 그래픽 요소들로 구성되어 있습니다. |
 |
라인업 | 캐러셀 라이브러리를 사용하여, 각 날짜에 해당하는 DJ 라인업을 보여줍니다. 현재 날짜에 맞춘 DJ 라인업이 자동으로 표시되어, 별도의 조작 없이 사용자는 당일의 디제이 정보를 확인할 수 있습니다. 또한 모바일 사용자 경험을 고려하여 캐러셀 좌우 스크롤 시 상하 스크롤을 방지하는 기능을 추가하여 불필요한 화면 이동을 최소화하였습니다. |
사이트맵
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
사이트맵 | WOW DJ FESTIVAL의 사이트맵페이지입니다. 사이트맵 페이지에서는 Lottie-react 라이브러리를 활용해 동적인 애니메이션을 통해 사용자에게 직관적인 이동 경로를 안내합니다. |
타임테이블
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
실시간 공연 보여주기 | WOW DJ FESTIVAL의 dj 공연 타임테이블을 보여주는 페이지입니다. react-use 라이브러리의 useInterval과 상태관리를 통해 실시간으로 업데이트되는 DJ 공연 타임테이블을 효과적으로 구현하여 사용자에게 직관적이고 최신의 공연 정보를 제공합니다. 동적인 이미지 로딩, 실시간 시간 관리, 애니메이션 효과 등을 통해 높은 사용자 경험을 제공합니다. |
예매
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
현장 예매 | 현장 예매 기간과 가격 및 관련 정보를 사용자에게 제공하는 페이지를 구현합니다. |
 |
유의 사항 | 예매와 관련한 유의 사항을 underline을 통해 한 눈에 확인 가능합니다. |
 |
사전 예매 | 현장 예매와 다르게 gray계열 색깔을 사용하여 대비되는 사전 예매 기간에 대한 정보를 확인 가능합니다. |
라인업
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
라인업 | Wow DJ Festival의 각 날짜별로 출연하는 DJ들의 목록을 제공합니다. AOS (Animate On Scroll) 라이브러리를 활용하여 스크롤할 때 DJ 목록이 부드럽게 나타나는 애니메이션을 구현했습니다. 오늘 날짜를 기본값으로 설정하여 사용자가 접속했을 때 자동으로 당일 라인업이 표시되도록 했습니다. 날짜를 변경하면 선택한 날짜의 DJ 정보와 이미지를 동적으로 업데이트하여 직관적인 탐색이 가능합니다. |
MD 상품
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
MD 상품 | 다양한 MD 상품을 소개합니다. 티셔츠, 스티커, 가방 등과 같은 다양한 상품의 이미지와 가격, 구매 방법을 제공합니다. AOS 라이브러리를 활용한 스크롤 애니메이션을 적용하여 편안한 사용자 경험을 제공합니다. 또한, 사용되는 카드는 컴포넌트화하여 다른 페이지나 기능, 특히 프로모션 부스 페이지에서도 재사용이 가능하도록 설계해 유지보수성과 확장성을 높였습니다. |
프로모션 부스
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
프로모션 부스 | Wow DJ Festival에서 즐길 수 있는 다양한 부스 정보를 제공합니다. AOS 라이브러리를 활용한 스크롤 애니메이션을 적용하여 편안한 사용자 경험을 제공합니다. |
분실물 게시판 관리
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
게시글 목록 조회 | 어드민 계정으로 접근 가능한 페이지로, 유저들이 작성한 분실물 게시글 목록을 조회할 수 있습니다. 해당 화면에서는 어드민이 선택한 게시글에 대해 삭제, 삭제된 게시글의 복구, 그리고 게시글 작성자의 차단 기능을 제공합니다. 어드민은 분실물 게시글 관리 및 사용자 관리 작업을 효과적으로 수행하며 부적절한 게시물이나 사용자를 관리할 수 있도록 구현되었습니다. |
 |
게시글 상세 조회 | 게시글 목록에서 한 게시글을 선택할 경우 접근 가능한 페이지로, 분실물에 대한 자세한 정보가 제공됩니다. 해당 페이지에서는 분실물의 상세 내용뿐만 아니라, 게시글 삭제, 삭제된 게시글의 복구, 사용자 차단 및 차단 해제 등의 관리 기능을 직접 수행할 수 있습니다. 이를 통해 어드민은 개별 게시글에 대한 세부적인 조치와 사용자의 활동 관리까지 원활하게 할 수 있습니다. |
 |
차단 목록 조회 | 부적절한 게시글을 작성하여 차단된 사용자는 해당 페이지의 목록에 표시되고, 차단된 사용자의 아이디 및 차단 일시, 작성 게시글을 조회할 수 있습니다. 작성 게시글을 클릭할 경우 사용자가 작성한 게시글의 상세 조회 페이지로 리다이렉트됩니다. 어드민은 사용자 차단 관리와 게시글 모니터링을 효율적으로 수행할 수 있습니다. |
이벤트 관리
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
응모 목록 조회 | 어드민 계정으로 접근 가능한 페이지로, 홍익대학교 대동제에서 진행되는 이벤트의 경품 내역을 조회할 수 있습니다. 경품별로 추첨 완료 여부, 수량, 그리고 응모 인원 등을 확인할 수 있으며, 각 경품 컴포넌트를 클릭하면 해당 경품의 응모 상세 정보 및 추첨을 진행할 수 있는 페이지로 이동합니다. 이를 통해 어드민은 경품 관리와 응모 상태를 직관적으로 파악하고 효율적으로 처리할 수 있습니다. |
 |
응모 목록 상세 조회 및 추첨 | 선택한 경품의 응모 상세 목록을 확인할 수 있습니다. 응모자의 이름, 전화번호, 그리고 당첨 여부가 표시되며, 경품 수량에 맞춰 1인 추가 추첨과 전체 추첨 기능이 구현되어 있습니다. 당첨된 응모자는 목록 상단에 자동으로 배치되며, 어드민은 당첨 취소 버튼을 통해 응모자의 당첨을 취소할 수 있습니다. |
 |
당첨자 조회 및 출력 기능 | 경품에 당첨된 응모자들의 정보를 조회할 수 있으며, 어드민은 취소 버튼을 통해 해당 당첨자의 당첨을 취소할 수 있습니다. 중복 당첨된 응모자는 별도로 표시되어, 어드민이 중복 당첨자를 파악하고 관리할 수 있도록 구성되어 있습니다. 또한, 하단의 출력 버튼을 클릭할 경우 경품별 당첨자들의 정보가 담긴 엑셀 파일이 다운로드됩니다. 이 기능을 통해 어드민은 당첨자 정보를 효과적으로 관리하고 필요한 경우 쉽게 공유할 수 있습니다. |
레이아웃
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
레이아웃, 배경 | 모든 페이지의 공통 레이아웃을 설정하고, 이를 react-router-dom의 Outlet을 통해 관리하였습니다. 또한, 페이지별 배경은 경로에 따라 props로 받아 공통 스타일로 관리하였습니다. |
    |
헤더 | 각 페이지마다 다른 헤더를 공통 컴포넌트로 구현하고, 페이지별로 필요한 헤더 UI는 constants로 관리하였습니다. 대동제 페이지에서는 햄버거 메뉴 클릭 시 헤더의 색상이 대동제 메뉴바와 유사한 색상으로 변경되도록 UI를 구성하였습니다. 분실물 등록 시 카메라가 켜질 경우, 헤더 UI는 context를 활용한 카메라 상태 관리로 구분하여 구현하였습니다. |
    |
푸터 | 대동제, 와디페, 와디페 메인, 만든이들 별로 각기 다른 UI를 공통 컴포넌트로 구현하였습니다. 와디페 메인 페이지에서는 video와 그라데이션을 적절히 배치해 푸터를 구현하였습니다. 푸터에서는 멋쟁이사자처럼 페이지와 개화 페이지로 이동할 수 있고, 축제 관련 인스타그램 링크로 접속할 수 있습니다. 또한, 개인정보 처리방침을 열람할 수 있습니다. |
  |
메뉴바 | 헤더의 햄버거 메뉴 클릭 시 메뉴바가 애니메이션 효과와 함께 자연스럽게 펼쳐지며, 메뉴바가 열렸을 때는 외부 스크롤을 비활성화하여 사용자 경험을 개선하였습니다. 메뉴바에서 각 메뉴를 클릭하면 해당 페이지로 이동합니다. 대동제와 와디페의 메뉴바 UI는 공통 컴포넌트로 관리되며, 대동제 메뉴바에서는 아코디언 기능을 통해 세부 메뉴를 여닫을 수 있습니다. 또한 KOR/ENG 토글을 통해 i18next를 이용한 언어 변환이 지원됩니다. |
 |
플로팅 버튼 | 일정 높이 이상 스크롤 시 '⬆️' 버튼이 활성화되며, 해당 페이지의 상단으로 자연스럽게 스크롤됩니다. 멋쟁이사자처럼 페이지와 개화 페이지에서는 '이전 화면으로' 버튼이, 대동제 메인 페이지에서는 '와디페로 이동', 와디페 메인 페이지에서는 '대동제로 이동' 버튼이 활성화됩니다. 모든 플로팅 버튼은 하단에서 떠다니다가 푸터에 도달하면 멈추며, 버튼의 블러 배경과 그라데이션 테두리는 가상 요소인 ::before를 활용해 mask를 적용하여 구현하였습니다. |
만든이들
| 스크린샷 | 기능 | 설명 |
|---|---|---|
 |
멋쟁이사자처럼 | 홍익대학교 가을 대동제 '화양연화; 만개' 사이트를 제작한 멋쟁이사자처럼 팀원들을 소개하는 페이지입니다. 총괄, 기획, 디자인, 프론트엔드, 백엔드 각 파트의 팀원 정보를 컴포넌트로 분리하여, 재사용성과 유지보수성을 높였습니다. 각 팀원의 인스타그램과 깃허브 아이콘을 클릭하면 해당 인스타그램 계정 또는 깃허브 레포지토리로 이동할 수 있습니다. |
 |
개화 | 홍익대학교 가을 대동제 '화양연화; 만개'를 운영한 총학생회 임원들을 소개하는 페이지입니다. 각 부서의 국장 및 국원 정보를 컴포넌트로 분리하여, 재사용성과 유지보수성을 높였습니다. |