임시계정(ID: [email protected] / PW: 1234!Admin)
프로젝트 기술 스택, 인프라 구성도, 버전 설명 보러가기!
1. 서비스 소개
2. 기술 스택
3. 아키텍쳐
4. 폴더 구조
5. 주요 기능 및 페이지 소개
6. 커밋 컨벤션
7. 관련 포스팅
신입 개발자라면 꼭 알아야 할 내용들을 일문일답 형식으로 문제은행화 하였습니다.
Sel-Q에서 제공하는 다양한 기능을 활용하여 사용자가 스스로 학습을 진행할 수 있도록 도와주는 서비스입니다.
질문과 답변 형식으로 프론트엔드 개발자가 갖춰야 할 개발 지식, 상식의 내용을 문제 은행 방식으로 스스로에게 질의응답하여 학습한 내용을 더욱 효과적으로 정리하고 상기되도록 설계하였습니다.
📦src
┃
┣ 📂assets : 폰트 및 아이콘
┃
┣ 📂components : 공통 컴포넌트 및 페이지 컴포넌트
┃
┣ 📂config : 쿠키 설정
┃
┣ 📂constant : 상수 데이터
┃
┣ 📂context : 폰트 설정 Context API
┃
┣ 📂hooks : React Custom Hooks 및 React Query Hooks
┃
┣ 📂pages : 페이지 모음
┃
┣ 📂routes : 라우팅 설정
┃
┣ 📂services : API 호출 함수
┃
┣ 📂store : Redux Store 및 Slices
┃
┣ 📂styles : styled-Components 및 Global Styles
┃
┗ 📂utils : 유틸 함수
페이지 클릭 시 큰 화면에서 보실 수 있습니다.
| [ Common ] | |
|---|---|
| 메인 페이지 | 질문 목록 / 상세 페이지 |
 |
 |
| - 랜덤 질문 돌리기를 통해 스스로 학습하는 페이지 - 힌트, 답변 제공 - 카테고리 필터링 기능 |
- 전체 질문 모아보기 - 카테고리 캐러셀 기능 - 질문에 대한 힌트와 답변 기능을 통해 스스로 학습하는 기능(상세페이지) |
| 중요 질문 페이지 | 로그인 페이지 |
 |
 |
| - 중요도 확인 후 학습하는 기능 - 페이지네이션 기능 - 중요도 선택 기능 (필터링) |
- 일반 / 소셜 로그인 기능 - 유효성 검사 기능 |
| 비밀번호 재설정 페이지 | 회원가입 페이지 |
 |
 |
| - 이메일 인증(가입 유저 확인) - 비밀번호 재설정 기능 |
- 일반 / 소셜 회원가입 - 이메일 인증 - 유효성 검사 |
| [ User Side (Logged In) ] | |
| 북마크 페이지 | 마이페이지 |
 |
 |
| - 유저 인증 기능 - 북마크 기능 - 북마크한 질문 모아보기 |
- 개인 프로필 관리 - 계정 탈퇴 기능 |
| [ Admin Side ] | |
| 질문 등록 페이지 | 유저 관리 페이지 |
 |
 |
| - 단계별 질문 등록 기능 - 등록 진행 상태 표시 Progress Bar 구현 - 유효성 검사 - 작성 중 임시 저장 / 불러오기 |
- 전체 유저 관리 - 유저 프로필 조회 / (닉네임, 등급)수정 / 삭제 - 닉네임 / 날짜 / 권한 필터링 기능 - 페이지네이션 기능 |
| 질문 관리 페이지 | 질문 관리 페이지 (필터링) |
 |
 |
| - 전체 질문 관리 - 질문 수정 / 삭제 기능 |
- 전체 질문 관리 - 카테고리 / 중요도 / 날짜 필터링 기능 - 페이지네이션 기능 |
| [ 그 외 기능들 ] | |
| 반응형 UI 기능 | 글자 크기 설정 기능 |
 |
 |
| - 모든 페이지 반응형 UI 지원 | - 글자 크기 설정 기능(축소, 기본, 확대) |
| 질문 검색 기능 | |
 |
|
| - 질문 검색 기능 | |
개발은 혼자 진행했지만, 통일성과 체계적인 관리를 위해 커밋 컨벤션을 적용
feat: 새로운 기능 추가fix: 새로운 기능 추가docs: 문서 수정style: 코드 포맷팅, 필요 없는 주석 제거refactor: 코드 리팩토링test: 테스트chore: 빌드 수정, 패키지 매니저 수정rename: 파일 혹은 폴더명 수정, 옮기는 작업remove: 파일 삭제