🗑️ 분리수ZIP

객체분류 인공지능을 이용한 쓰레기 분류 서비스

배포 주소 ➡️ https://kdt-ai4-team10.elicecoding.com/

📜 프로젝트 구성 안내

• assets : 프로젝트에서 사용한 이미지, 오디오 파일
• components : 공통 컴포넌트 파일 모음
• pages : 각 컴포넌트 파일 모음
• stores : 상태관리 파일
• styles : 스타일링 파일 모음
• types : 타입 파일 모음

▶️ 프로젝트 실행

1️⃣ git clone https://kdt-gitlab.elice.io/ai_track/class_04/ai_project/team10/front.git
2️⃣ npm install
3️⃣ npm start

🛠 프로젝트 기술 스택

기술	선택 이유
React	1. 프론트엔드 팀원 모두 사용 가능한 라이브러리 2. 컴포넌트화를 통해 재사용성이 높음
Recoil	다른 상태관리 라이브러리에 비해 사용 방법이 쉽고 간단
styled-component	1. 각자 다른 부분을 개발하기 때문에 class/id가 겹치는 문제를 최소화 2. 상속과 확장을 통해 재사용 용이
TypeScript	1. 정적 타입을 지원하므로 컴파일 단계에서 오류 포착 가능 2. 명시적인 타입 지정으로 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅이 쉽다.

👥 FE 팀원 역할 분담

강미선

• 와이어프레임 제작
• UI / UX 설계
• 메인 페이지 제작
• 분리수거 정보 페이지 제작
• 로그인 및 회원가입 구현, 마이 페이지 제작
• 퀴즈 페이지 제작
• 게임 페이지 제작
• 404 페이지 제작

임경민

• 와이어프레임 작성
• UI / UX 설계
• 프롤로그 페이지 제작
• AI 분석 페이지 제작
• 서울시 공공 쓰레기통 페이지 제작
• Q&A 페이지 제작