객체분류 인공지능을 이용한 쓰레기 분류 서비스
배포 주소 ➡️ 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. 명시적인 타입 지정으로 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅이 쉽다. |
- 와이어프레임 제작
- UI / UX 설계
- 메인 페이지 제작
- 분리수거 정보 페이지 제작
- 로그인 및 회원가입 구현, 마이 페이지 제작
- 퀴즈 페이지 제작
- 게임 페이지 제작
- 404 페이지 제작
- 와이어프레임 작성
- UI / UX 설계
- 프롤로그 페이지 제작
- AI 분석 페이지 제작
- 서울시 공공 쓰레기통 페이지 제작
- Q&A 페이지 제작