Skip to content

Latest commit

 

History

History
212 lines (184 loc) · 7.99 KB

README.md

File metadata and controls

212 lines (184 loc) · 7.99 KB

임시계정(ID: [email protected] / PW: 1234!Admin)

selq-logo

프로젝트 기술 스택, 인프라 구성도, 버전 설명 보러가기!

📌 목차

1. 서비스 소개
2. 기술 스택
3. 아키텍쳐
4. 폴더 구조
5. 주요 기능 및 페이지 소개
6. 커밋 컨벤션
7. 관련 포스팅

🔎 서비스 소개

신입 개발자라면 꼭 알아야 할 내용들을 일문일답 형식으로 문제은행화 하였습니다.
Sel-Q에서 제공하는 다양한 기능을 활용하여 사용자가 스스로 학습을 진행할 수 있도록 도와주는 서비스입니다.
질문과 답변 형식으로 프론트엔드 개발자가 갖춰야 할 개발 지식, 상식의 내용을 문제 은행 방식으로 스스로에게 질의응답하여 학습한 내용을 더욱 효과적으로 정리하고 상기되도록 설계하였습니다.

🛠️ 기술 스택

프론트엔드

fronted

인프라

infra

🏛️ 아키텍쳐

architecture

🌳 폴더 구조

📦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 폰트 사이즈 설정 기능
- 모든 페이지 반응형 UI 지원 - 글자 크기 설정 기능(축소, 기본, 확대)
질문 검색 기능
질문 검색 기능
- 질문 검색 기능

⚙️ 커밋 컨벤션

개발은 혼자 진행했지만, 통일성과 체계적인 관리를 위해 커밋 컨벤션을 적용

  • feat : 새로운 기능 추가
  • fix : 새로운 기능 추가
  • docs : 문서 수정
  • style : 코드 포맷팅, 필요 없는 주석 제거
  • refactor : 코드 리팩토링
  • test : 테스트
  • chore : 빌드 수정, 패키지 매니저 수정
  • rename : 파일 혹은 폴더명 수정, 옮기는 작업
  • remove : 파일 삭제

📚 관련 포스팅