미션 진행 방법을 꼭 읽고 진행해주세요 미션 진행 방법
- 컴포넌트를 적절한 단위로 나누어 재사용하기
- 사용자 입력값을 검증하고, 잘못된 입력에 대해 알기 쉬운 안내 메시지 보여주기
- API 요청 중 로딩 상태와 에러 상태를 사용자에게 보여주기
- 의미에 맞는 HTML 태그 사용하기 (예: 버튼은
<button>, 목록은<ul>) - 반복되는 코드를 줄이고 읽기 쉬운 코드 작성하기
- 공통 컴포넌트 / UI 컴포넌트 / 페이지 별 필요한 컴포넌트로 모듈화 하여 작업합니다.
- Error, Success 상태를 관리하고, 상태에 따른 결과를 사용자에게 UI로 보여 주셔야 합니다.
- 모든 방식에는 근거가 있어야 합니다. 왜 해당 방식을 / 기능을 선택하였는지 문서화 하여 매주 미션 PR에 남겨주세요.
백엔드 스웨거 : https://leetszero100-fe.kro.kr/api-docs
- Header는 상단에 고정되어야 하며, 좌측에 "ZERO100 Admin" 제목을 표시합니다.
- Sidebar는 좌측에 고정되며, 메뉴는 "대시보드 홈", "문의", "마이페이지"로 구성합니다.
- Sidebar는 라우터가 아닌 상태 기반 방식으로 구현합니다. 메뉴를 클릭해도 URL이 변하지 않아야 합니다.
- Footer는 최하단에 고정되며, 우측에 "ZERO100 Admin" 문구를 표시합니다.
- 헤더와 사이드바는 고정된 채, Content Area만 스크롤할 수 있어야 합니다.
- 사용자는 이메일, 비밀번호, 이름을 입력하여 회원가입을 진행할 수 있어야 합니다.
- 클라이언트 사이드에서 유효성 검사를 수행해야 합니다.
- 이메일 형식 확인
- 비밀번호 최소 8자 이상
- 비밀번호 조합 (영문, 숫자, 특수문자 포함)
- 이름 공백 여부 확인
- 이름 길이 확인 (2자 이상 8자 이하)
- 유효성 검사에 실패한 경우, 시각적 피드백을 제공해야 합니다.
- 가입이 완료되면 로그인 페이지로 이동합니다.
- 사용자는 이메일, 비밀번호를 입력하여 로그인할 수 있어야 합니다.
- 사용자는 카카오 OAuth를 통해 로그인할 수 있어야 합니다.
- 클라이언트 사이드에서 유효성 검사를 수행해야 합니다.
- 이메일 형식 확인
- 비밀번호 최소 8자 이상
- 비밀번호 조합 (영문, 숫자, 특수문자 포함)
- 유효성 검사에 실패한 경우, 시각적 피드백을 제공해야 합니다.
- 비밀번호 입력란은 입력된 글자를 숨기거나 표시할 수 있어야 합니다.
- 로그인 시 서버로부터 JWT 토큰을 발급받아 저장합니다.
- 로그인 여부에 따라 특정 페이지 접근이 제한되어야 합니다.
- 로그인 시에만 마이페이지, 문의 등록 접근이 가능합니다.
- 비로그인 사용자가 접근 시 로그인 페이지로 리다이렉션합니다.
- 로그인한 사용자의 정보(이름, 이메일, 가입일)를 표시합니다.
- 문의 현황을 요약하여 보여줍니다.
- 사용자는 문의 목록을 조회할 수 있어야 합니다.
- 문의 목록은 제목, 이름, 이메일, 내용, 작성일을 테이블 형태로 표시합니다.
- 본인이 작성한 문의에만 삭제 버튼이 표시되어야 합니다.
/api/auth/me의id와 문의의user_id를 비교하여 판별합니다.
- 사용자는 제목, 이름, 이메일, 내용을 입력하여 문의를 등록할 수 있어야 합니다.
- 클라이언트 사이드에서 유효성 검사를 수행해야 합니다.
- 제목 길이 확인 (2자 이상 50자 이하)
- 이름 길이 확인 (2자 이상 20자 이하)
- 이메일 형식 확인
- 내용 필수 입력
- 삭제 시 확인 모달을 표시한 후 삭제를 진행합니다.
- 사용자의 이메일(읽기전용), 이름을 표시하고 이름을 변경할 수 있어야 합니다.
- 사용자는 현재 비밀번호를 확인한 후 새 비밀번호로 변경할 수 있어야 합니다.
- 클라이언트 사이드에서 유효성 검사를 수행해야 합니다.
- 이름 변경: 2자 이상 8자 이하
- 비밀번호 변경: 8자 이상, 영문/숫자/특수문자 포함
- 현재 비밀번호와 새 비밀번호 불일치 확인
- 새 비밀번호와 새 비밀번호 확인 일치 확인
- 유효성 검사에 실패한 경우, 시각적 피드백을 제공해야 합니다.