Description

꾹(KUUK) 서비스의 프론트엔드 개발을 위한 프로젝트입니다.

꾹은 고려대학교 학생들을 위한 식당 투표 서비스로, 고려대학교 인근 식당들을 대상으로 간편하게 투표를 만들고 링크 공유를 통해 손쉽게 투표에 참여할 수 있습니다.

Technologies Used

TypeScript

JavaScript에 정적 타이핑 시스템을 추가한 언어입니다. TypeScript를 사용함으로써 예상치 못한 오류를 줄이고 유지보수성을 높일 수 있습니다.

React

편리한 프론트엔드 개발을 위한 라이브러리입니다. 동적인 사용자 인터페이스(UI)를 쉽게 구축할 수 있습니다.

MUI

React 애플리케이션을 위한 디자인 및 컴포넌트 라이브러리입니다. MUI를 사용하여 버튼, 알림, 입력창과 같은 컴포넌트를 손쉽게 사용하고 수정할 수 있습니다.

Prerequisite

환경변수

프로젝트 폴더 하위에 다음과 같은 .env.dev 파일을 생성합니다.

REACT_APP_API_URL=http://localhost:3000
PORT=4000

패키지 다운로드 및 실행

npm install : 패키지를 다운로드합니다.

npm start : http://localhost:4000 에서 프로젝트를 실행합니다.

Structure

src/components : 웹페이지에서 사용되는 컴포넌트들입니다. Header, Footer, 커스텀 버튼 등을 포함하며, 각 컴포넌트를 import하여 재사용할 수 있습니다.

src/models : 자주 사용되는 인터페이스(데이터 타입)들을 모아두었습니다.

src/pages : 사이트의 각 페이지들입니다. 특정 url에 따라 적절한 페이지가 연결됩니다.

src/route : 어느 url에 어떤 페이지를 보여줄지 정해주는 컴포넌트입니다.

Usage

/ : 메인 페이지 - 로그인, 투표 생성, 이전 투표 둘러보기 페이지로 이동할 수 있습니다.

/login : 로그인 페이지 - 로그인 및 회원가입을 진행할 수 있습니다. 로그인 된 사용자만 투표를 생성할 수 있습니다.

/join : 회원가입 페이지 - 아이디, 비밀번호, 닉네임, 생년월일을 입력하여 회원가입을 진행할 수 있습니다.

/poll : 투표 생성 페이지 - 투표 이름을 입력하고 후보 식당들을 선택할 수 있습니다. 위치(참살이, 정후 등) 및 카테고리(한식, 양식 등)를 통한 필터링 기능을 제공합니다.

/poll/:pollId : 투표 페이지 - 투표를 진행하고 실시간 득표 현황을 확인할 수 있습니다. 투표 url을 복사하여 링크 공유를 통해 타 사용자들을 투표에 참여시킬 수 있습니다.

/poll/result/:pollId : 투표 결과 페이지 - 최다 득표 식당을 확인할 수 있습니다.

/history : 히스토리 페이지 - 현재 사용자가 과거에 생성했던 투표 목록을 확인할 수 있습니다. 선택 삭제가 가능합니다.

/guest/login/:url : 게스트 로그인 페이지 - 타 사용자가 생성한 투표에 참여할 때, 게스트 로그인을 위한 페이지입니다. 회원가입 없이 닉네임만 입력하여 게스트 로그인을 진행할 수 있습니다.

Member

김수현

문정민

박보건

정연승

정혜민