# 프론트엔드 취준생 설문조사 By.Bunnies Dev
> 프론트엔드 취업 준비 생들을 위한 Survey
> Mobile Web Application

## 🔎 구경하기
> [설문조사 하러가기](배포URL)

## 🧑🏻‍💻팀원 소개

<table>

<tr align="center">
<td><a href="https://github.com/12Ahn22">안아영</a></td>
<td><a href="https://github.com/rockbell89">김보라</a></td>
<td><a href="https://github.com/codnr98">이채욱</a></td>
</tr>

<tr align="center">
<td><img src="https://avatars.githubusercontent.com/u/44540726?v=4" width="150px"/></td>
<td><img src="https://avatars.githubusercontent.com/u/52031484?v=4https://user-images.githubusercontent.com/77623643/147047809-36e1d41d-42af-4953-b8a7-3619c88d5491.png" width="150px"/></td>
<td><img src="https://avatars.githubusercontent.com/u/97998938?v=4" width="150px"/></td>
</tr>

<tr>
<td><ul><li>토이 프로젝트 기획</li><li>설문결과 페이지</li></ul></td>
<td><ul><li>공통 UI 컴포넌트</li><li>공통 레이아웃</li></ul></td>
<td><ul><li>라우터 기능</li><li>인트로 페이지</li></ul></td>
</tr>

</table>

<table>
<tr align="center">
<td><a href="https://github.com/hanseungwan1">한승완</a></td>
<td><a href="https://github.com/jia222">김지아</a></td>
<td><a href="https://github.com/wjdwjdtn92">정정수</a></td>
</tr>

<tr align="center">
<td><img src="https://avatars.githubusercontent.com/u/115906460?v=4" width="150px"/></td>
<td><img src=" https://blog.kakaocdn.net/dn/bHNYl6/btrYjmdBGzV/wKPn4JkBg7VknLGjLdlmj1/img.png
" width="150px"/></td>
<td><img src="https://avatars.githubusercontent.com/u/19286161?v=4" width="150px"/></td>
</tr>

<tr>
<td><ul><li>설문조사 페이지</li></ul></td>
<td><ul><li>파이어 베이스</li></ul></td>
<td><ul><li>설문결과 페이지</li></ul></td>
</tr>

</table>

<br>

## 기술 스택

### 💄 Front-end
| React | React Router | React Icons | Styled-<br>Components | Chart.JS |
| :---: | :---: | :---: | :---: | :---: |
| <img height="65" width="65" src="https://cdn.simpleicons.org/react/#61DAFB" /> | <img height="65" width="65" src="https://cdn.simpleicons.org/reactrouter" /> | <img height="65" width="65" src="https://camo.githubusercontent.com/48d099290b4cb2d7937bcd96e8497cf1845b54a810a6432c70cf944b60b40c77/68747470733a2f2f7261776769742e636f6d2f676f72616e67616a69632f72656163742d69636f6e732f6d61737465722f72656163742d69636f6e732e737667" /> | <img height="65" width="65" src="https://cdn.simpleicons.org/styledComponents" /> | <img height="65" width="65" src="https://cdn.simpleicons.org/Chart.js" />

### 🔧 Deplay & Back-end
| GitPage | Firebase |
| :---: | :---: |
| <img height="65" width="65" src="https://cdn.simpleicons.org/github" /> | <img height="65" width="65" src="https://cdn.simpleicons.org/firebase" />

### 🚀 Tools & Dev Enviroment
| VSCode | Git | ESLint | Prettier | Discord | Notion |
| :---: | :---: | :---: | :---: | :---: | :---: |
| <img height="65" width="65" src="https://cdn.simpleicons.org/visualstudiocode" />| <img height="65" width="65" src="https://cdn.simpleicons.org/git" /> | <div style="display: flex; align-items: flex-start;"><img src="https://techstack-generator.vercel.app/eslint-icon.svg" alt="icon" width="65" height="65" /></div> | <div style="display: flex; align-items: flex-start;"><img src="https://techstack-generator.vercel.app/prettier-icon.svg" alt="icon" width="65" height="65" /></div> | <img height="65" width="65" src="https://cdn.simpleicons.org/discord" /> | <img height="65" width="65" src="https://cdn.simpleicons.org/notion" />

<br>

## 📅 개발 기간 & 일정

> 2023/01/04 ~ 2023/02/xx
> 주 1회 `2시간`씩

<table>

<tr align="center">
<td>주차</td>
<td>주요 일정</td>
</tr>

<tr align="center">
<td>1주차</td>
<td>아이디어 선정 및 요구 사항 정리, 유저플로우 작성</td>
</tr>
<tr align="center">
<td>2주차</td>
<td>프로젝트 rule(컨벤션, 기술스택 등) 결정 및 역할 분담 </td>
</tr>
<tr align="center">
<td>3주차</td>
<td>프로젝트 셋팅 및 기능 개발</td>
</tr>
<tr align="center">
<td>4주차</td>
<td>Firebase 연동 및 기능 개발</td>

</tr>
<tr align="center">
<td>5주차</td>
<td>개발 완료 및 배포</td>

</tr>

</table>

<br>

## 핵심 기능
### 설문 조사
- 프론트엔드 취업준비생들을 위한 설문 조사 페이지입니다.

### 설문 조사 결과
- Chart.js를 사용해 설문조사 데이터를 시각화합니다

---
## :pencil2: 유저 플로우

## 주요 화면
### 메인 페이지
### 설문 조사 페이지
|설문 조사 화면|설문 제출 화면|
|--- |---|
| | |

### 설문 조사 결과 페이지
|바 차트|도넛 차트|vs 차트|
|---|---|---|
||||

---

## 📌 Commit 컨벤션 (Gitmoji)
|아이콘|<center>코드</center>|<center>설명</center>|
|:---:|:---|:---|
|🎨 |\:art:|코드의 구조/형태 개선
|⚡️| \:zap:| 성능 개선
|🔥| \:fire:| 코드/파일 삭제
|🐛| \:bug:| 버그 수정
|✨| \:sparkles:| 새 기능
|📝| \:memo:| 문서 추가/수정
|💄| \:lipstick:| UI/스타일 파일 추가/수정
|🎉| \:tada:| 프로젝트 시작
|♻️| \:recycle:| 코드 리팩토링
|➕| \:heavy_plus_sign:| 의존성 추가
|➖| \:heavy_minus_sign:| 의존성 제거
|🔧| \:wrench:| 구성 파일 추가/삭제
|🔨| \:hammer:| 개발 스크립트 추가/수정
|🔀| \:twisted_rightwards_arrows:| 브랜치 합병
|📦| \:package:| 컴파일된 파일 추가/수정
|🚚| \:truck:| 리소스 이동, 이름 변경
|📄| \:page_facing_up:| 라이센스 추가/수정
|💡| \:bulb:| 주석 추가/수정