AI Interview Frontend

AI 면접 준비를 위한 통합 플랫폼의 프론트엔드 레포지토리입니다. React를 기반으로 사용자 친화적인 UI/UX를 구현하며, 자기소개서 작성부터 AI 면접 시뮬레이션까지 면접 준비의 모든 과정을 지원합니다.

---

주요 기능

1. 메인 페이지

• UX/UI 리디자인: 직관적인 히어로 섹션, 자기소개서, 인적성 섹션으로 구성된 새로운 레이아웃
• 반응형 디자인: 다양한 기기 환경에서 최적화된 경험 제공

2. 자기소개서 (Self-Intro)

• 보드형 관리 페이지: 5열 레이아웃으로 자기소개서를 한눈에 관리하고, 검색, 정렬, 기간 필터링 기능 제공
• AI 첨삭 페이지: 직접 입력, 파일 업로드, 저장된 자기소개서 불러오기 등 다양한 방법으로 첨삭을 요청
• 고도화된 기능: 업종·직무 선택, 단계별 필터링, 글자 수 카운트, 경고 메시지 등

3. 마이페이지 (MyPage)

• 개인 정보 관리: ID, 이름, 닉네임 수정 및 중복 확인 기능
• 스펙 관리: 학력, 자격증, 경력, 기술 스택을 체계적으로 입력 및 저장
• 내 활동 기록: 작성한 자기소개서, 스크랩한 채용 정보, 면접 기록을 한곳에서 확인

4. 면접 준비 (Interview Prep)

• 질문 가이드: 예상 질문 리스트와 관련 가이드 영상을 제공
• 개인화: 관심 있는 질문을 즐겨찾기하거나 카테고리별로 필터링하는 기능 구현 예정

5. AI 면접 (Interview Session)

• 사전 점검 (Precheck): 카메라 및 마이크 권한 요청, 환경 체크
• 실시간 세션: 타이머, 질문 카테고리 선택 기능
• 시선 분석 기능: 눈, 코, 입 기준점을 오버레이하는 얼굴 마스크와 시선 가이드라인을 제공하여 실제 면접 환경을 재현

---

📂 폴더 구조

src/
├── components/          # 재사용 가능한 컴포넌트
│    └── Common/         # 공통 컴포넌트 (Header, Button 등)
├── pages/               # 각 페이지 컴포넌트
│    ├── MainPage/
│    ├── MyPage/
│    ├── SelfIntro/
│    ├── InterviewPrep/
│    └── Interview/
├── styles/              # 전역 스타일
└── App.js               # 애플리케이션의 메인 라우터

---

시작하는 방법

프로젝트를 로컬 환경에서 실행하려면 아래 단계를 따라 주세요.

1. 레포지토리 클론:

   git clone https://github.com/24-AI-Interview/frontend.git
   cd frontend

2. 의존성 설치:

   npm install

3. 애플리케이션 실행:

   npm start

   이 명령어를 실행하면 localhost:3000에서 개발 서버가 시작됩니다.

---

🤝 기여 방법

1. 이슈 등록: 해결하고자 하는 문제나 추가하고 싶은 기능에 대해 이슈를 먼저 생성합니다.
2. 브랜치 생성: feat/기능-설명, fix/버그-설명, refactor/리팩토링-내용과 같은 네이밍 규칙을 사용하여 작업 브랜치를 생성합니다.
3. 코드 작성 및 PR: 작업 완료 후, main 브랜치로 Pull Request를 보냅니다.
4. 코드 리뷰: 팀원들의 코드 리뷰를 거친 후 main 브랜치에 병합됩니다.

참고: main 브랜치에 직접 커밋하는 것은 금지되어 있으며, 모든 변경 사항은 PR을 통해 병합됩니다.