# 💬 우리는 이런 서비스에요
<center>

### 면접 스터디는 하고 싶은데...
사람을 찾기 힘들고, 스터디 이후 제대로 피드백을 받았으면 좋겠고,
두고두고 피드백을 볼 수 있고, 내 약점을 딱 찾아낼 수 있었으면 좋겠고,
물론 사용하기 편해야 하고,
면접마다 상황이 다르니까 고려할 수 있었으면 좋겠고,
각 상황마다 다양한 사람이랑 만날 수 있는...
그런 스터디가 있으면 면접 연습하기 엄청 편할텐데....

### 그런 면접 스터디 없나...?

그런 당신을 위한 단 하나의 화상 면접 스터디 서비스,
<h2>PICHIT을 소개합니다!</h2>
</center>

<br />

# 🥰 멤버 소개
|이희수|임수민|김민지|김지현|김지훈|이효진|
|:---:|:---:|:---:|:---:|:---:|:---:|
|팀장|팀원|팀원|팀원|팀원|팀원|
|BE, DevOps|BE, DevOps|FE|FE|FE|FE, Design|

<br />
<br />

# 🌈 기술 스택

<br />
<center>

<h1>⚙ 프론트엔드</h1>
<img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=black"/>
<img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black"/> <img src="https://img.shields.io/badge/styledComponent-DB7093?style=flat-square&logo=styled-components&logoColor=black"/>
<img src="https://img.shields.io/badge/router-CA4245?style=flat-square&logo=react-router&logoColor=white"/> <img src="https://img.shields.io/badge/axios-5A29E4?style=flat-square&logo=axios&logoColor=white"/>
<img src="https://img.shields.io/badge/OpenVidu-05d261?style=flat-square&Color=black"/>

<br />
<br />

<strong>Language</strong> | Javascript

<strong>Framework</strong> | React

<strong>Library</strong> | React Router, Axios, Styled Components

<strong>OpenAPI</strong> | OpenVidu

<br />
<h1>⚙ 백엔드</h1>
<img src="https://img.shields.io/badge/Java-5382a1?style=flat-square&logo=Java&logoColor=white"/>
<img src="https://img.shields.io/badge/Spring-6DB33F?style=flat-square&logo=Spring&logoColor=white"/>
<img src="https://img.shields.io/badge/SpringBoot-6DB33F?style=flat-square&logo=SpringBoot&logoColor=white"/>
<img src="https://img.shields.io/badge/SpringSecurity-6DB33F?style=flat-square&logo=SpringSecurity&logoColor=white"/>
<img src="https://img.shields.io/badge/JPA-6DB33F?style=flat-square&logo=jpa&logoColor=white"/>
<br />
<img src="https://img.shields.io/badge/MariaDB-003545?style=flat-square&logo=MariaDB&logoColor=white"/>
<img src="https://img.shields.io/badge/Redis-DC382D?style=flat-square&logo=Redis&logoColor=white"/>
<img src="https://img.shields.io/badge/OAuth2-EB5424?style=flat-square&logo=O&logoColor=white"/>
<img src="https://img.shields.io/badge/OpenVidu-05d261?style=flat-square&Color=black"/>

<br />
<br />

<strong>Language</strong> | Java

<strong>Framework</strong> | SpringBoot

<strong>Database</strong> | MariaDB, Redis

<strong>Library</strong> | Spring Data JPA, Spring Security, OAuth2

<strong>OpenAPI</strong> | OpenVidu

<br />
<h1>⚙ 인프라</h1>

<img src="https://img.shields.io/badge/Docker-2496ED?style=flat-square&logo=Docker&logoColor=white"/>
<img src="https://img.shields.io/badge/Jenkins-D24939?style=flat-square&logo=Jenkins&logoColor=white"/>
<img src="https://img.shields.io/badge/Nginx-009639?style=flat-square&logo=Nginx&logoColor=white"/>

<br />
<br />

<strong>Tools</strong> | Docker, Jenkins, Nginx

<br />
<h1>⚙ 협업툴</h1>
<img src="https://img.shields.io/badge/Git-F05032?style=flat-square&logo=Git&logoColor=white"/>
<img src="https://img.shields.io/badge/Notion-000000?style=flat-square&logo=Notion&logoColor=white"/>
<img src="https://img.shields.io/badge/Figma-F24E1E?style=flat-square&logo=Figma&logoColor=white"/>

<br />
<br />

<strong>Record/IssueSharing</strong> | Notion, Figjam

<strong>Design</strong> | Figma

<strong>Storage</strong> | Git
</center>

<br />
<br />

# ✨ 핵심 기능
## 1. 면접 스터디 구인 게시판
비밀방도 가능! 스터디 일시, 연락 방식, 최소 2명 최대 4명 인원 수까지 선택할 수 있어요
<br />
## 2. 상세 페이지에서 서로 자소서 pdf를 공유하고 스터디 당시 사용할 질문을 저장
1. 사용자에게는 자신이 받을 질문이 보이지 않아요!
2. 방을 나간 이후 다른 사람의 자소서는 보이지 않아요!
<br />
## 3. 세션 별로 면접자와 면접관을 지정하여 화상 채팅을 통해 스터디 진행
1. 면접자와 면접관 화면이 분리되어 있어요.
2. 면접관의 경우 피드백을 할 수 있는 공간, 사용자의 자소서를 볼 수 있는 버튼,
3. 화상채팅 접속 시 마이크, 카메라 둘 중 하나 또는 둘 모두 없을 때를 감지합니다. 그 때 알림창을 띄워 예외 처리를 했어요.
4. 클라이언트에 의지해서 면접 스터디를 진행 하는것이 아니라, 서버에 의존하여 팀원 모두 동일하게 스터디를 진행합니다.
5. 서버에 의존 하기 때문에 재접속, 새로고침 등 예상치 못한 상황에서도 데이터를 유지 하여 문제 없이 스터디를 진행 할 수 있습니다.
**Ex)** 최초 접속시 서버에서 받은 현재 방의 상태 데이터를 통해 진행 상황과 동기화 하여 복귀 할 수 있음.
4. 면접자가 면접과 동시에 녹음이 진행 되며, 질문 시작 시간을 기록합니다. 이를 통해 추후 리뷰 페이지에서 타임 스탬프를 통해 빠르게 피드백이 가능합니다.
5. 질문을 선택하면 면접관 모두가 선택된 질문을 볼 수 있으며 피드백을 적을 수 있습니다.
6. 질문 선택 시 동시에 눌러 발생할 오류에 대해서는 서버에서 먼저 요청이 온 질문을 선택하여 해결하여 혼란이 없습니다.
7. 예상치 못한 상황으로 소통이 안될경우를 대비한 채팅이 구비되어 있어요
8. 질문을 시작하고 종료 하는 등, 유저들의 실수에 대해 알림창을 띄워 편의성을 극대화했습니다!
<br />
## 4. 리뷰 페이지
1. 지금까지 참여한 방을 모아볼 수 있어요
2. 스터디 당시의 녹음본이 있어요. 그 위에 질문 별 타임스탬프가 찍혀있습니다. 다시 들어보면서 취약점을 찾아볼 수 있어요.
3. 당시 어떤 자소서를 썼는지 팝업창을 통해 확인할 수 있어요.
4. 면접관들의 이름과 해당 면접관이 남긴 점수, 피드백을 한 눈에 볼 수 있습니다.
<br />
<br />

# 🎞 참고
<strong>[Figjam](https://www.figma.com/file/TwDSwE8tTB3V0b6RpMcLSy/D107?node-id=0%3A1&t=X9vquMUU97ijzjum-0)</strong> |