---
# System prepended metadata

title: 프론트엔드 취준생 설문조사 By.Bunnies Dev

---

# 프론트엔드 취준생 설문조사 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: 유저 플로우
![](https://i.imgur.com/mBtnMjt.png)





## 주요 화면
### 메인 페이지
![메인 페이지](https://i.imgur.com/8FgNdgy.png)
### 설문 조사 페이지
|설문 조사 화면|설문 제출 화면|
|--- |---|
|![설문 조사 페이지](https://i.imgur.com/HRr94mN.png) |![설문 조사 제출 페이지](https://i.imgur.com/GipOMMW.png) |

### 설문 조사 결과 페이지
|바 차트|도넛 차트|vs 차트|
|---|---|---|
|![바 차트](https://i.imgur.com/7iBCyPy.png)|![도넛 차트](https://i.imgur.com/CHthV4s.png)|![vs 차트](https://i.imgur.com/mXUNTwy.png)|


---

## 📌 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:|	주석 추가/수정
