Devths 요구사항 정의 - 100-hours-a-week/9-team-Devths-WIKI GitHub Wiki
요구사항 정의서
1) Auth / 온보딩
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | AUT-001-01 | 랜딩 슬라이드 노출 | 비로그인 최초 진입 시 랜딩 페이지 노출 | 기획 | |
| 2 | AUT-001-02 | 슬라이드 최대 개수 | 랜딩 설명 슬라이드는 최대 5개 | 기획 | |
| 3 | AUT-001-03 | 슬라이드 스와이프 | 사용자가 스와이프로 슬라이드 이동 가능 | 기획 | 모바일 우선 |
| 4 | AUT-001-04 | 자동 슬라이드 | 동일 슬라이드 5초 머무르면 자동으로 다음 슬라이드로 이동 | 기획 | 타이머 필요 |
| 5 | AUT-001-05 | 도트 네비게이션 | 하단 도트로 현재 슬라이드 위치 표시 | 기획 | |
| 6 | AUT-001-06 | 시작하기 버튼(구글 OAuth) | 랜딩에서 구글 OAuth2 로그인/회원가입 시작 버튼 제공 | 기획 | |
| 7 | AUT-001-07 | 회원 여부 분기 | 로그인 후 회원이면 메인(캘린더) 이동 / 비회원이면 회원가입 페이지 이동 | 기획 | 리다이렉트 규칙 중요 |
2) 회원가입 (MEM-001)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | MEM-001-01 | 프로필 사진 선택 | + 버튼으로 기기에서 프로필 사진 선택(필수 아님) | 기획 | 파일 input |
| 2 | MEM-001-02 | 기본 프로필 처리 | 사진 미등록 시: 특정 색상 배경 + 닉네임 첫 글자 기본 아바타 | 기획 | 디자인 필요 |
| 3 | MEM-001-03 | 등록 시 오버레이 | 사진 등록 시: 사진으로 채움 + 검은 레이어 50% 투명도 | 기획 | UI 규칙 |
| 4 | MEM-001-04 | 프로필 사진 제한(용량) | 2MB 이하만 허용 | 기획 | 프론트 선검사 |
| 5 | MEM-001-05 | 프로필 사진 제한(확장자) | jpg/jpeg/png/webp만 허용, 그 외 선택 차단 | 기획 | accept 속성 + 검사 |
| 6 | MEM-001-06 | 이미지 첨부 실패 모달 | 2MB 초과 시 실패 모달 노출, 닫기(X) 시 닫힘, 파일 미첨부, 기존 첨부 영향 없음 | 기획 | 모달 재사용 가능 |
| 7 | MEM-001-07 | 닉네임 입력 UI | placeholder: “닉네임을 입력해주세요(2~10자)” | 기획 | |
| 8 | MEM-001-08 | 닉네임 유효성(필수/길이) | 필수값, 2~10자 | 기획 | trim 권장 |
| 9 | MEM-001-09 | 닉네임 유효성(문자) | 띄어쓰기/특수문자 불가 | 기획 | 정규식 필요 |
| 10 | MEM-001-10 | 닉네임 유효성(금칙어) | admin/운영자 관련 단어 포함 불가 | 기획 | 금칙어 리스트 |
| 11 | MEM-001-11 | 헬퍼텍스트 규칙 | 오류별 고정 위치 표시, 통과 시 헬퍼 제거 | 기획 | 레이아웃 밀림 방지 |
| 12 | MEM-001-12 | 닉네임 중복 처리 | 중복 닉네임이면 “중복된 닉네임입니다.” 표시 | 기획 | 중복 체크 API |
| 13 | MEM-001-13 | 관심 분야 선택 | 관심 분야 버튼 토글 선택(필수 아님) | 기획 | 최대 선택 수 정책 필요 시 추가 |
| 14 | MEM-001-14 | 시작하기 버튼 활성화 | 닉네임 유효성 통과 전까지 비활성화 | 기획 | |
| 15 | MEM-001-15 | 회원가입 완료 동작 | (사용 가능 닉네임) 시작하기 클릭 시 회원가입 완료 + 자동 로그인 + 메인(캘린더) 이동 | 기획 | 성공 리다이렉트 |
| 16 | MEM-001-16 | 가입 완료 토스트 | 가입 성공 시 “회원가입이 완료되었습니다.” 토스트 | 기획 |
3) 캘린더 메인 (CAL-001)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | CAL-001-01 | 월/주 토글 | ‘월간’ 선택 시 월간 뷰, ‘주간’ 선택 시 주간 뷰로 전환(현재 상태 무관) | 기획 | FullCalendar 연동 |
| 2 | CAL-001-02 | 기준 기간 초기화 | 전환 시 월=현재 월, 주=현재 주 기준으로 표시 | 기획 | 날짜 계산 |
| 3 | CAL-001-03 | 일정 추가 버튼 | 클릭 시 일정 추가 모달(CAL-M1) 오픈, 배경 비활성화 | 기획 | 모달+스크롤락 |
| 4 | CAL-001-04 | 필터 토글 | 클릭 시 필터 목록 펼침/접힘, 텍스트 “필터 닫기”로 변경 | 기획 | 적용 여부 색상 표시 |
| 5 | CAL-001-05 | 기간 표시/선택 헤더 | 월간: “년 월”, 주간: “년 월 주차” 표시, 클릭 시 선택 창 | 기획 | UI 컴포넌트 필요 |
| 6 | CAL-001-06 | 기간 이동 버튼 | 월간: 이전/다음 달, 주간: 이전/다음 주 이동 | 기획 | 주간 7일 표시 규칙 주의 |
| 7 | CAL-001-07 | 오늘 하이라이트 | 오늘 날짜 배경 강조 표시 | 기획 | |
| 8 | CAL-001-08 | 일정 유무 점 표시 | 일정 있으면 점(6px) 표기, 당일 일정은 개수 무관 1점 | 기획 | |
| 9 | CAL-001-09 | 기간 일정 선 표시 | 기간 일정은 시작~종료 연결선(두께 6px), 곡률 6px 규칙 적용 | 기획 | 겹침/hover z축 규칙 |
| 10 | CAL-001-10 | 세부 일정 헤더 상태 | 기본: “다가오는 일정”(가까운 시작일 기준 상위 5개) / 날짜 선택 시 해당일 일정 | 기획 | 빈 경우 “일정이 없습니다” |
| 11 | CAL-001-11 | 세부 일정 정렬 | 시작시간 없는 당일 일정 우선, 있으면 시작시간 기준, 동일 조건이면 ㄱㄴㄷ | 기획 | 정렬 함수 |
| 12 | CAL-001-12 | 일정 카드 표시 항목 | 태그/임박표시(D-3 이내)/남은일자/제목/알림/장소+날짜 표시 | 기획 | |
| 13 | CAL-001-13 | To-Do 표시 기준 | 기본은 당일, 캘린더에서 날짜 선택 시 해당일 To-Do로 전환 | 기획 | 상태 연동 |
| 14 | CAL-001-14 | 완료 퍼센트/바 | 전체 개수 대비 완료 개수 비율 표시, 100%면 “전체 완료”(Bold)로 변경 | 기획 | 색상 변경 규칙 |
| 15 | CAL-001-15 | To-Do 추가 UX | 빈 목록 생성+자동 focus, Enter/ESC/포커스 해제 규칙에 따라 저장/취소 | 기획 | 모바일 키보드 고려 |
| 16 | CAL-001-16 | To-Do 목록 정렬/수정 | 미완료 위/완료 아래 1차 정렬, 생성순 2차 정렬, 클릭 수정 후 Enter/ESC/blur 저장 | 기획 | 내용 삭제 시 항목 삭제 |
4) 캘린더 필터 (CAL-001-1)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | CAL-001-1-01 | 필터 초기화 | 선택된 필터 전체 해제, 기본 상태로 복귀, 목록도 전체 표시 | 기획 | |
| 2 | CAL-001-1-02 | 단계 필터(라디오) | 서류/코테/1차면접/2차면접/개인일정 중 1개만 선택 가능, 추가/삭제 불가 | 기획 | 고정 옵션 |
| 3 | CAL-001-1-03 | 태그 검색 입력 | 입력 시 자동완성 드롭다운 표시, Enter 시 입력값으로 태그 추가 | 기획 | 공통 컴포넌트 |
| 4 | CAL-001-1-04 | 태그 자동완성 | 최대 5개 표시 + 스크롤로 추가 5개, 클릭 시 태그 선택/추가 | 기획 | |
| 5 | CAL-001-1-05 | 날짜 범위 필터 | 시작일/종료일 입력(HTML date), 둘 중 하나만 입력 가능, 겹치면 표시 | 기획 | 시간 선택 없음 |
| 6 | CAL-001-1-06 | 활성 필터 목록 | 선택된 필터를 (단계/회사/날짜범위) 순으로 표시, X로 즉시 삭제/반영 | 기획 | 태그는 “태그:” 접두어 |
5) 일정 추가/AI 자동 추가 (CAL-M1 ~ M5)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | CAL-M1-01 | AI 자동 추가 입력 | 텍스트(최대 1000자) 입력 가능, 파일 첨부 가능 | 기획 | OCR/VLLM/LLM 연계 |
| 2 | CAL-M1-02 | 첨부 타입 선택 오버레이 | 파일첨부 버튼 클릭 시 이미지/파일 선택창(1-1) 오버레이 | 기획 | |
| 3 | CAL-M1-03 | 첨부 제한(이미지) | JPG/JPEG/PNG/WebP, 최대 5장, 단일 이미지 2MB | 기획 | 부분 실패 정책 필요 |
| 4 | CAL-M1-04 | 첨부 제한(파일) | PDF/doc/docx, 최대 1개, 10MB | 기획 | |
| 5 | CAL-M1-05 | 용량 초과 알림 | 제한 초과 시 우상단 알림(3초 자동 닫힘, X로 즉시 닫힘), 일부/전체 실패 규칙 적용 | 기획 | 토스트/알림 컴포넌트 |
| 6 | CAL-M1-06 | 형식 미지원 알림 | 확장자 미지원 시 우상단 알림(동작 동일) | 기획 | |
| 7 | CAL-M1-07 | AI 분석 대기 모달 | AI 분석 요청 성공 시 대기 모달(외부 상호작용 불가), 취소/실패 시 이전 상태 복귀, 성공 시 CAL-M2 이동 | 기획 | 전역 로딩/모달 |
| 8 | CAL-M1-08 | 수동 일정 입력 필드 | 단계(필수, 라디오), 제목(필수 15자 제한), 회사명(필수 15자 제한), 기간(종일/시간), 설명(100자), 태그 자동완성, 알림(분/시간/일/주 범위) | 기획 | 유효성/비활성화 |
| 9 | CAL-M1-09 | 기간 입력 UX | 종일 ON이면 날짜만, OFF면 시간 표시. 시작시간=가까운 미래 정각, 종료=+1h. 시작일 변경 시 종료일 동기화 등 규칙 적용 | 기획 | 날짜/시간 로직 |
| 10 | CAL-M1-10 | 취소 확인(CAL-M6) | 입력 내용 존재 시 취소하면 확인 모달로 한 번 더 확인 | 기획 | (스펙에 CAL-M6 언급) |
| 11 | CAL-M2-01 | AI 인식 결과 확인 | AI가 인식한 회사/일정/장소/태그/알림을 사용자 확인·수정 가능 | 기획 | 일정별 생성 단위 |
| 12 | CAL-M3-01 | 일정 수정 | 기존 일정 값을 불러와 수정 입력, 저장 시 캘린더 반영 | 기획 | 동일 컴포넌트 재사용 |
| 13 | CAL-M4-01 | 일정 상세 보기 | 유형/제목/회사/날짜/설명/알림 순으로 표시 + 생성일/마지막 수정 표시 | 기획 | |
| 14 | CAL-M5-01 | 일정 삭제 확인 | 삭제 모달에서 일정 카드 재확인, 삭제 성공 시 토스트 “${일정명}…” 3초 노출 | 기획 | 소프트/하드 정책 확인 필요 |
6) 공통 레이아웃 (Header / Footer / Error)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | HEADER-01 | 로고 표시/이동 | 텍스트 로고 Devths 표시, 클릭 시 메인(CAL-001) 이동 | 기획 | 홈에서 클릭 시 스크롤 최상단 |
| 2 | HEADER-02 | 검색 버튼 노출 조건 | 게시판/채팅 페이지에서만 검색 버튼 노출 | 기획 | 조건 렌더링 |
| 3 | FOOTER-01 | 홈 탭 이동 | 홈 클릭 시 메인 홈 이동, 홈에서 재클릭 시 최상단 스크롤 | 기획 | 활성 상태 표시 |
| 4 | FOOTER-02 | 피드 탭 이동 | 피드 클릭 시 게시판 목록 이동, 재클릭 시 최상단 스크롤 | 기획 | |
| 5 | FOOTER-03 | AI 탭 이동 | AI 클릭 시 챗봇 목록(LLM-001) 이동, 상세에서 누르면 목록으로 | 기획 | 상태 규칙 |
| 6 | FOOTER-04 | 알림 탭/뱃지 | 알림 클릭 시 알림 페이지, 읽지 않은 알림 있으면 뱃지(점) | 기획 | |
| 7 | FOOTER-05 | 채팅 탭 이동 | 채팅 목록 이동, 채팅 상세에서 누르면 목록으로 | 기획 | |
| 8 | FOOTER-06 | 프로필 탭 이동 | 마이페이지 이동, 마이페이지에서 재클릭 시 최상단 스크롤 | 기획 | |
| 9 | ERR-001-01 | 에러 페이지 분기 | 500/404 에러 시 해당 페이지로 리다이렉트 | 기획 | 라우팅 처리 |
| 10 | ERR-001-02 | 에러 문구 | 500: “일시적 오류…”, 404: “존재하지 않는 페이지…” 표시 | 기획 | |
| 11 | ERR-001-03 | 메인으로 버튼 | 클릭 시 캘린더 메인으로 이동 | 기획 |
7) 게시판 핵심 (BRD_LIST / BRD_SEARCH / BRD_DETAIL / BRD_CREATE / BRD_EDIT)
게시판은 너무 길어서 “핵심 기능만” 먼저 표로 잡았어. (세부 모달/마스킹/공유 UX도 포함)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | BRD_LIST-01 | 정렬 탭 | 최신순/인기순/팔로잉 탭 제공, 탭 변경 시 즉시 갱신 | 기획 | 무한스크롤 |
| 2 | BRD_LIST-02 | 인기순 정책 | 좋아요 500+ 대상, 좋아요 내림차순, 동률이면 작성일 내림차순 | 기획 | 서버 정렬 필요 |
| 3 | BRD_LIST-03 | 글 카드 표시 | 작성자/시간/제목(30자 말줄임)/본문 미리보기/태그 표시 | 기획 | UI 규칙 |
| 4 | BRD_LIST-04 | 글 카드 클릭 | 상세 페이지로 이동 | 기획 | |
| 5 | BRD_LIST-05 | 글 작성 FAB | 클릭 시 작성 페이지(BRD_CREATE) 이동 | 기획 | |
| 6 | BRD_SEARCH-01 | 검색 입력/실행 | 제목+본문 검색, Enter/아이콘 클릭으로 실행, 입력 중 자동요청 없음 | 기획 | trim |
| 7 | BRD_SEARCH-02 | 검색어 검증 | 빈값/공백/2자 미만/30자 초과 시 헬퍼텍스트 노출, 검색 차단 | 기획 | |
| 8 | BRD_SEARCH-03 | 최근 검색어 | 최대 10개, 클릭 시 즉시 검색, X로 삭제 | 기획 | 로컬 저장 가능 |
| 9 | BRD_SEARCH-04 | 검색 결과 페이지네이션 | 최초 20개, 페이지 UI(최대 5개 번호), 조건 변경 시 1페이지로 초기화 | 기획 | (목록은 무한/검색은 페이지네이션) |
| 10 | BRD_DETAIL-01 | 반응(좋아요) | 좋아요 토글은 낙관적 UI로 즉시 반영 후 API 결과 동기화 | 기획 | 실패 토스트 |
| 11 | BRD_DETAIL-02 | 댓글 2depth | 1depth+2depth까지만 지원, 2depth에 대댓글 작성 불가 | 기획 | 렌더 구조 |
| 12 | BRD_CREATE-01 | 작성 이탈 확인 | 제목/본문 입력 상태에서 뒤로가기/탭 이동 등 이탈 시 확인 모달 | 기획 | 입력 없으면 미노출 |
| 13 | BRD_CREATE-02 | 첨부 업로드/마스킹 대기 | 이미지/PDF 업로드 시 AI 1차 마스킹 대기 모달 → 성공 시 썸네일 표시 | 기획 | 실패 토스트 |
| 14 | BRD_CREATE-03 | 첨부 제한 | 최대 10MB, 형식 PDF/JPG/JPEG/PNG, 위반 시 모달 | 기획 | 일부 실패 모달 포함 |
| 15 | BRD_CREATE-04 | 공유 링크 접근 정책 | 공유 URL 접속 시 로그인 아니면 랜딩 → 로그인 후 원래 상세로 자동 이동 | 기획 | 리다이렉트 저장 필요 |
| 16 | BRD_EDIT-01 | 수정/삭제 권한 | 작성자 본인만 수정/삭제 메뉴 노출 | 기획 | 권한 처리 |
8) 채팅 (CHT-001~004)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | CHT-001-01 | 채팅 목록 카테고리 | 개인/그룹/인기 토글 제공, 기본=개인 | 기획 | |
| 2 | CHT-001-02 | 채팅 목록 무한스크롤 | 10개 단위 로드, 최신 메시지 온 순 정렬 | 기획 | TanStack Query |
| 3 | CHT-002-01 | 유저 검색 | 팔로잉 유저 닉네임 기반 검색, 2~10자 검증/헬퍼텍스트 | 기획 | |
| 4 | CHT-002-02 | 채팅 생성 유효성 | 개인=1명 필수, 그룹=2명 이상(또는 유저 없이 생성 모달) 등 정책 적용 | 기획 | 토스트/모달 |
| 5 | CHT-003-01 | 채팅방 진입/메시지 로드 | 채팅방 진입 시 메시지 로드 성공→렌더, 실패→토스트 | 기획 | |
| 6 | CHT-003-02 | 메시지 전송/ACK | 전송 시 낙관적 UI 반영 → ACK 성공 시 확정, 실패 시 토스트 | 기획 | 재전송 정책 포함 |
| 7 | CHT-003-03 | 읽음 기준선 | 미읽음 존재 시 “여기까지 읽었습니다” 표시 + 해당 위치로 스크롤 이동 | 기획 | 상태 저장 |
| 8 | CHT-003-04 | 첨부 제한 | 이미지 최대 9장, 파일 1개, 5MB, PDF/이미지 확장자 제한 | 기획 | |
| 9 | CHT-004-01 | 채팅방 설정 | 알림 토글(기본 ON, 서버 저장), 코드 표시/복사 모달, 참여자 조회(무한스크롤) | 기획 | |
| 10 | CHT-004-02 | 채팅방 나가기 | 나가기 확인 모달 후 퇴장, 인원 0명이면 DB에서 삭제 | 기획 | 예외: 재연락 시 새방 |
9) 알림 (NOT-001)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | NOT-001-01 | 알림 목록 로드 | 페이지 진입 시 알림 목록 로드, 실패 시 토스트 | 기획 | |
| 2 | NOT-001-02 | 카테고리 토글 | 전체/게시글/친구/활동 토글, 무한스크롤 10개 단위 | 기획 | 기본=전체 |
| 3 | NOT-001-03 | 진입 시 전체 읽음 처리 | 알림 페이지 입장 시 전체 “읽음” 처리 | 기획 | 실패해도 이동은 진행 |
| 4 | NOT-001-04 | 읽지 않음 강조 | 읽지 않은 알림은 배경 하이라이트 | 기획 | |
| 5 | NOT-001-05 | 시간 표기 규칙 | 1시간 이내=“MM분 이전”, 1 |
기획 | 포맷 함수 |
| 6 | NOT-001-06 | 알림 클릭 이동 | 알림 클릭 시 해당 이벤트 페이지로 이동(채팅/프로필/캘린더/게시판 등 타입별 분기) | 기획 | 딥링크 |
10) AI (LLM-001~003)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | LLM-001-01 | 대화 목록 조회 | 저장된 대화 목록 최신순, 무한스크롤(10개 단위) | 기획 | |
| 2 | LLM-001-02 | 새 대화 시작 | 이력서/공고 입력 후 새 채팅방 생성 흐름 | 기획 | |
| 3 | LLM-001-03 | 채팅 보관 정책 | 기본=임시보관, 임시→보관 전환 후 되돌리기 불가 | 기획 | 임시=1주, LocalStorage |
| 4 | LLM-002-01 | 입력 방식 | 이력서/공고: 파일 첨부 또는 텍스트 입력 지원(채팅 붙여넣기 방식 불가) | 기획 | UI 안내 필요 |
| 5 | LLM-002-02 | 첨부 제한 | 이미지 최대 9장/10MB, 파일 1개/10MB, PDF 지원 등 제한 적용 | 기획 | 마스킹 처리 |
| 6 | LLM-002-03 | 종합 분석 실행 | 분석 시작 시 로딩 모달, 결과 생성 후 점수/피드백 제공 | 기획 | |
| 7 | LLM-003-01 | 면접 모드 | 인성/기술 면접 모드, 꼬리질문 포함 최대 5개 후 자동 종료(또는 수동 종료) | 기획 | 프롬프트 전환 |
| 8 | LLM-003-02 | 메시지 전송 | 텍스트/이미지/파일 전송 + 대화 렌더링 | 기획 | 스트리밍 고려 |
11) 마이페이지 (MEM-002~003)
| No. | 요구사항 ID | 요구사항명 | 요구사항 상세 설명 | 요청자 | 비고 |
|---|---|---|---|---|---|
| 1 | MEM-002-01 | 프로필 표시 | 프로필사진/닉네임/관심분야 해시태그 표시 | 기획 | |
| 2 | MEM-002-02 | 회원정보 수정 모달 | 사진/닉네임/관심분야 변경, 변경하기 버튼 클릭 시 적용 | 기획 | |
| 3 | MEM-002-03 | 프로필 사진 제한 | 2MB 이하, jpg/jpeg/png | 기획 | 회원가입과 일치 여부 체크 |
| 4 | MEM-002-04 | 닉네임 유효성/헬퍼 | MEM-001과 동일 정책 + 성공 시 “회원 정보가 성공적으로 변경되었습니다.” | 기획 | 재사용 |
| 5 | MEM-002-05 | 탈퇴 플로우 | “탈퇴하겠습니다/${nickname}” 정확히 입력해야 탈퇴 버튼 활성화, Soft Delete | 기획 | 완료 모달→랜딩 |
| 6 | MEM-003-01 | 팔로워/팔로잉 목록 | 버튼으로 팔로워/팔로잉 전환, 밑줄 하이라이트, 무한스크롤(12명) | 기획 | |
| 7 | MEM-003-02 | 다른 사용자 프로필 모달 | 프로필/닉네임/관심분야 + 팔로우/언팔 + 1:1 채팅 진입 | 기획 | 모달 재사용 가능 |