← 기능명세서 아카이브
목차
공통 (헤더 · 푸터 · 전역 UI) 메인 페이지 소식 페이지 인증 (로그인 · 회원가입) 자유게시판 굿즈샵 장바구니 · 주문서 결제 마이페이지 접근 제어 정책 요약 부록 (데이터 · 저장소 · 알려진 한계)
1. 공통 (헤더 · 푸터 · 전역 UI)
모든 화면에 공통 적용되는 레이아웃과 전역 동작.
1-1. 헤더 (데스크톱)
ID 기능명 상세 설명 처리 기준 · 예외 권한 COM-01 로고 / 홈 이동 좌측 로고 클릭 시 메인(/)으로 이동. 메인 상단(미스크롤)에서는 흰색 로고, 그 외에는 검정 로고 표시. 전체 COM-02 스크롤 반응 헤더 메인 페이지에서는 투명 배경으로 고정(fixed)되며, 앨범 섹션에 도달하면 흰 배경 + 그림자 스타일로 전환. 스크롤 감지는 100ms 스로틀. 메인 외 페이지는 항상 흰 배경(relative). 전체 COM-03 GNB 메뉴 소식(/news) · 굿즈샵(/shop) · 자유게시판(/board) 3개 메뉴. 데스크톱(lg 이상)에서만 노출. 현재 경로가 해당 메뉴로 시작하면(하위 경로 포함) 굵은 글씨로 활성 표시. 전체 COM-04 장바구니 아이콘 · 뱃지 장바구니(/cart) 이동 아이콘. 담긴 상품 종류 수 를 빨간 원형 뱃지로 표시. 수량 합계가 아닌 고유 품목 수. 0개면 뱃지 숨김. 하이드레이션 전에는 미표시. 전체 COM-05 유저 메뉴 분기 비로그인: “로그인/회원가입” 텍스트 → 로그인 모달 오픈. 로그인: 아바타 → 드롭다운(닉네임 표시, 마이페이지, 로그아웃). 세션 상태(zustand)에 따라 실시간 전환. 전체
1-2. 헤더 (모바일)
ID 기능명 상세 설명 처리 기준 · 예외 권한 COM-06 햄버거 사이드 메뉴 햄버거 버튼 → 좌측 슬라이드 시트 오픈. 로고 클릭 시 홈 이동과 함께 시트 닫힘. lg 미만 화면 전용. 전체 COM-07 시트 내 프로필 로그인 시 아바타 + 닉네임 + 로그아웃 버튼 노출. 로그아웃 성공 시 시트 자동 닫힘. 비로그인 시 프로필 영역 미노출. 로그인 COM-08 3분할 퀵 메뉴 ① 장바구니 ② 로그인(모달) 또는 마이페이지 ③ 회원가입 링크. 회원가입 링크는 비로그인 시에만 노출. 전체 COM-09 모바일 GNB GNB 3개 메뉴를 세로 리스트로 제공. 항목 이동 시 시트 닫힘. — 전체
1-3. 푸터 · 404 · 전역 UI
ID 기능명 상세 설명 처리 기준 · 예외 권한 COM-10 푸터 로고, 사업자 정보 4항목(회사명·대표·사업자등록번호·주소), GitHub / 블로그 외부 링크(새 창). 로그인 상태와 무관하게 항상 동일한 정적 콘텐츠. 전체 COM-11 404 페이지 존재하지 않는 경로 접근 시 안내 이미지 + “죄송합니다. 잘못된 경로로 들어오셨습니다.” · “잠시 후 다시 접속해 주세요.” 문구 + “메인으로 이동하기” 링크 표시. 자동 리다이렉트 없음. 헤더/푸터는 함께 표시. 전체 COM-12 최상단 이동 버튼 페이지 우하단 고정 버튼. 클릭 시 최상단으로 부드럽게 스크롤. 스크롤 200px 이상일 때만 노출. 메인·소식·게시판 상세·마이페이지 등에 배치. 전체 COM-13 토스트 알림 동작 결과(성공/실패)를 화면 토스트로 안내. 실패는 붉은(destructive) 스타일. 동시 1개만 표시(신규 발생 시 교체). 전체 COM-14 확인 모달 파괴적 동작(게시글/댓글 삭제, 장바구니 비우기, 구매확정 등) 전 공통 확인 다이얼로그 표시. 바깥 영역 클릭으로도 닫힘(취소 처리). 전체 COM-15 테마 라이트 테마 고정. 시스템 다크모드 미연동, 테마 전환 UI 없음. 전체
2. 메인 페이지
서비스 첫 화면. 24시간 주기 ISR로 재생성되며 앨범 데이터는 서버에서 미리 조회(prefetch)된다.
v1 PC메인 — 데스크톱 전체 화면
v1 Mobile메인 — 모바일(햄버거 사이드바 포함)
실제 v1 운영 화면 기록 — 이미지를 누르면 원본으로 열린다. (2026 리뉴얼 이후 화면은 디자인 시스템 · 화면 시안 과 기능명세서 v2 참고)
2-1. 메인 /
ID 기능명 상세 설명 처리 기준 · 예외 권한 MAIN-01 비주얼 히어로 전체 화면 높이의 배경 영상(자동재생·음소거·반복)과 카피(“DIVE INTO IVE”), 하단 스크롤 유도 인디케이터 표시. 스크롤로 앨범 섹션 도달 시 배경 영상 숨김 처리. 전체 MAIN-02 앨범 캐러셀 앨범 목록을 커버플로우(coverflow) 캐러셀로 표시. 카드에는 앨범 이미지·제목·발매 정보(구분 · 발매일 · 장르 · 수록곡 수) 노출. 현재/전체 위치를 분수(fraction)로 표시. 발매일 내림차순. 드래그로 탐색. 전체 MAIN-03 음원 플랫폼 링크 앨범 카드에서 Apple Music · Melon · FLO · Bugs · Genie 아이콘으로 각 스트리밍 페이지 이동(새 창). 링크가 없거나 #인 플랫폼 아이콘은 미노출. 전체 MAIN-04 최신 게시글 (FREE BOARD) 자유게시판 최신 글 6개를 카드로 표시(썸네일·제목·작성자·댓글 수). 항목 클릭 시 게시글 상세로 이동. “더보기” → 게시판 목록. 작성일 내림차순 6건 고정. 썸네일 없으면 기본 이미지. 전체 MAIN-05 굿즈샵 프로모 배너 “굿즈샵 오픈!” 홍보 문구와 이미지를 표시하는 정적 배너. 링크/버튼 없음(안내 전용). 전체 MAIN-06 상품 캐러셀 (SHOP) 인기 상품 12개를 좌우 화살표 캐러셀로 표시. 카드에 썸네일·배지·상품명·할인율·할인가·평균 별점 노출, 찜(하트) 토글 가능. 클릭 시 상품 상세 이동. “더보기” → 굿즈샵. 리뷰 수 기준 상위 12개. 찜 동작은 SHOP-04와 동일. 전체 MAIN-07 로딩 · 오류 처리 각 섹션은 로딩 중 스켈레톤 표시, 조회 실패 시 오류 안내(“Oops! 잠시 후 다시 확인해주세요...” )로 대체. 재시도 버튼 없음. 상품 캐러셀은 오류 시 별도 안내 없이 미표시. 전체
3. 소식 페이지
아티스트 최신 소식과 사진 갤러리를 제공. 24시간 주기 ISR.
v1 소식카테고리 필터 · 갤러리 · 상세 모달
실제 v1 운영 화면 기록 — 이미지를 누르면 원본으로 열린다. (2026 리뉴얼 이후 화면은 디자인 시스템 · 화면 시안 과 기능명세서 v2 참고)
3-1. 소식 /news
ID 기능명 상세 설명 처리 기준 · 예외 권한 NEWS-01 히어로 · 섹션 이동 전체 화면 히어로와 “Latest News” / “View Gallery” 버튼 2개. 클릭 시 해당 섹션으로 부드럽게 스크롤. — 전체 NEWS-02 소식 카테고리 필터 전체 · 음악 · 방송 · 행사 · 화보 5개 pill 필터. 선택한 카테고리의 소식만 목록에 표시. 현재 로드된 목록 내에서만 필터링(서버 재조회 없음). 기본값 “전체”. 전체 NEWS-03 최신 소식 목록 16:9 카드 그리드(기본 2열). 카드에 카테고리·날짜(YYYY-MM-DD)·제목·본문 1줄 미리보기 표시. 최초 5건, 작성일 내림차순. 총 개수가 홀수면 첫 카드만 전체 폭. 전체 NEWS-04 소식 더 보기 “더 많은 소식 보기” 버튼 클릭 시 5건씩 추가 로드. 더 불러올 데이터가 없으면 버튼 자동 숨김. 무한스크롤 아님. 전체 NEWS-05 소식 상세 모달 카드 클릭 시 모달로 상세 표시: 대표 이미지, 카테고리, 제목, 날짜, 출처, 본문. 출처는 텍스트 표기(외부 링크 아님). 전체 NEWS-06 갤러리 그리드 정사각형 사진 그리드(모바일 1열 → 3열). 호버 시 확대 아이콘 표시. 최초 6건, 작성일 내림차순. 사진이 0장이면 섹션 자체 미노출. 전체 NEWS-07 갤러리 더 보기 · 원본 보기 “더 많은 사진 보기”로 6건씩 추가 로드. 사진 클릭 시 모달에서 원본 비율로 확대 표시. 더 불러올 데이터가 없으면 버튼 자동 숨김. 전체
4. 인증 (로그인 · 회원가입)
이메일/비밀번호 및 소셜 로그인(카카오·구글·깃허브)을 지원. 로그인 UI는 전용 페이지와 모달 2가지 경로로 제공된다.
v1 로그인 모달헤더에서 여는 2단계 로그인 모달
v1 로그인 페이지기존 회원용 로그인 화면
v1 회원가입가입 후 첫 로그인 폭죽 효과
실제 v1 운영 화면 기록 — 이미지를 누르면 원본으로 열린다. (2026 리뉴얼 이후 화면은 디자인 시스템 · 화면 시안 과 기능명세서 v2 참고)
4-1. 로그인 페이지 /login
ID 기능명 상세 설명 처리 기준 · 예외 권한 AUTH-01 일반 로그인 화면 로고 + 이메일 로그인 폼 + 구분선(“또는”) + 소셜 로그인 버튼 3종(카카오·구글·깃허브)으로 구성. 로그인 상태로 접근 시 서버에서 메인으로 리다이렉트. 전체 AUTH-02 가입 축하 화면 /login?form=signup 진입 시 “회원이 되신 것을 축하드립니다!” 화면으로 전환. 최초 1회 폭죽(컨페티) 효과 + “회원가입이 완료되었습니다!” 토스트 후 이메일 로그인 폼 제공.가입 직후 발급되는 5분짜리 쿠키가 없으면 일반 로그인으로 리다이렉트(직접 접근 차단). 축하 효과는 1회만 재생. 이 화면에는 소셜 버튼 없음. 전체 AUTH-03 이메일 로그인 이메일 + 비밀번호 입력 후 로그인. 입력 즉시 실시간 검증(onChange)하며, 유효한 값 입력 전까지 로그인 버튼 비활성.
이메일: 이메일 형식 — “올바른 이메일을 입력해 주세요.”
비밀번호: 영문+숫자+특수문자 포함 8자 이상 (최대 20자 입력 제한) — “비밀번호는 영문, 숫자, 특수문자를 포함하여 8자 이상이어야 합니다.”
비밀번호 표시/숨김 토글 제공. 제출 중에는 “처리 중...” 표시. 전체 AUTH-04 로그인 성공 처리 ① 비로그인 상태에서 담아둔 로컬 찜 목록을 계정으로 자동 이관 ② “로그인 되었습니다.” 토스트 ③ 메인으로 이동. 모달에서 로그인한 경우에는 이동 없이 현재 페이지 유지. 전체 AUTH-05 로그인 실패 처리 계정 정보 불일치 시 이메일·비밀번호 두 필드에 “이메일 또는 비밀번호가 일치하지 않습니다.” 에러 표시. 그 외 오류(네트워크 등)는 별도 안내 없음. 전체 AUTH-06 소셜 로그인 카카오 · 구글 · 깃허브 버튼으로 OAuth 로그인. 완료 후 사이트 루트로 복귀하며 “로그인 되었습니다.” 토스트 표시. 로컬 찜 목록도 자동 이관. 실패 시 오류 메시지 토스트. 전체
4-2. 로그인 모달 모달
ID 기능명 상세 설명 처리 기준 · 예외 권한 AUTH-07 모달 오픈 경로 헤더 “로그인/회원가입”(PC), 모바일 메뉴 “로그인”, 회원가입 페이지 하단 “로그인하기”에서 오픈. — 전체 AUTH-08 1단계: 소셜 선택 “카카오로 3초 만에 시작하기” 대표 버튼(노란색), 구글/깃허브 아이콘 버튼, “이메일로 로그인” 전환 버튼 제공. — 전체 AUTH-09 2단계: 이메일 로그인 AUTH-03과 동일한 폼. 뒤로가기 버튼으로 1단계 복귀. 성공 시 페이지 이동 없이 현재 화면 유지(헤더가 로그인 상태로 전환). 전체 AUTH-10 회원가입 이동 “아직 계정이 없으신가요? 회원가입하기” 클릭 시 모달을 닫고 회원가입 페이지로 이동. — 전체
4-3. 회원가입 /signup
ID 기능명 상세 설명 처리 기준 · 예외 권한 AUTH-11 이메일 회원가입 폼 이메일 · 비밀번호 · 비밀번호 확인 3개 필드. 실시간 검증, 모두 유효해야 “가입하기” 활성.
이메일 형식 — “올바른 이메일을 입력해 주세요.”
비밀번호: 영문+숫자+특수문자 8자 이상 (안내문 “비밀번호 영문, 숫자, 특수문자 포함 8-20자” 상시 노출)
확인 미입력 — “비밀번호를 한번 더 입력해주세요.” / 불일치 — “비밀번호가 일치하지 않습니다.”
비밀번호·확인 각각 표시/숨김 토글. 로그인 상태로 접근 시 메인으로 리다이렉트. 전체 AUTH-12 랜덤 닉네임 자동 부여 가입 시 한국어 랜덤 닉네임을 외부 API로 발급받아 초기 닉네임으로 자동 설정. 닉네임은 마이페이지에서 변경 가능(MY-03). 전체 AUTH-13 가입 성공 처리 가입 완료 후 자동 로그인되지 않고, 가입 축하 화면(/login?form=signup, AUTH-02)으로 이동해 직접 로그인하도록 유도. 축하 화면 접근용 쿠키(5분 유효) 발급. 전체 AUTH-14 가입 실패 처리 실패 시 “회원가입에 실패했습니다. — 이미 등록된 이메일 입니다.” 토스트 표시. 실패 원인과 무관하게 동일 문구 사용(중복 이메일 외 원인 포함). 전체
4-4. 세션 · 로그아웃
ID 기능명 상세 설명 처리 기준 · 예외 권한 AUTH-15 세션 유지 · 복원 새로고침 시에도 Supabase 쿠키 세션에서 로그인 상태 자동 복원. 세션 변화는 전역 구독으로 헤더 등 UI에 즉시 반영. — 로그인 AUTH-16 로그아웃 헤더 드롭다운/모바일 시트의 “로그아웃” 클릭 시 세션 종료 후 “로그아웃 되었습니다.” 토스트. 로그아웃 시 로컬 장바구니·찜 목록 삭제 및 화면 상태 초기화. 실패 시 “로그아웃 실패, 다시 시도해 주세요.” 로그인
5. 자유게시판
회원 커뮤니티 게시판. 조회는 누구나 가능하며 작성·좋아요·댓글은 로그인이 필요하다.
v1 목록 ①표 형식 목록 · 페이지네이션
v1 목록 ②검색 디바운싱 · 하이라이트
v1 글쓰기react-quill 에디터
v1 상세좋아요 · 댓글 · 대댓글 · 수정/삭제
실제 v1 운영 화면 기록 — 이미지를 누르면 원본으로 열린다. (2026 리뉴얼 이후 화면은 디자인 시스템 · 화면 시안 과 기능명세서 v2 참고)
5-1. 게시글 목록 /board
ID 기능명 상세 설명 처리 기준 · 예외 권한 BRD-01 목록 조회 게시글을 최신순으로 표시. 데스크톱은 표 형식(번호·제목·작성자·작성일·조회·추천), 모바일은 요약 카드 형식. 제목 옆에 댓글 수 표시. 정렬 변경 기능 없음(최신순 고정). 전체 BRD-02 페이지네이션 페이지당 10건. 이전/다음 및 페이지 번호(최대 3개 노출, 말줄임 처리)로 이동. 현재 페이지는 URL 쿼리(?page=N)에 유지. 전체가 1페이지 이하이면 페이저 미노출. 전체 BRD-03 제목 검색 검색어 입력 시 0.5초 디바운스 후 제목 부분일치로 검색. 결과 목록에서 일치 구간을 노란색으로 하이라이트. 검색 대상은 제목만(본문·작성자 제외). 검색 시 1페이지로 리셋. 결과 없으면 “검색 결과가 없습니다.” 전체 BRD-04 글쓰기 진입 “글쓰기” 버튼으로 작성 화면 이동. 비로그인 시 “로그인이 필요합니다.” 토스트 후 이동 차단. 로그인 BRD-05 상세 진입 · 조회수 행 클릭 시 상세로 이동하며 이때 조회수 1 증가. 모바일 댓글 수 버튼 클릭 시 상세의 댓글 영역으로 바로 이동. 같은 글은 기기당 24시간 내 재클릭해도 조회수 중복 증가 없음. 상세 URL 직접 접근으로는 조회수가 증가하지 않음. 전체
5-2. 게시글 작성 · 수정 /board/write /board/edit/[id]
ID 기능명 상세 설명 처리 기준 · 예외 권한 BRD-06 글 작성 폼 제목(최대 100자 입력 제한) + 리치 텍스트 에디터(제목 크기 3단계 · 굵게 · 기울임 · 밑줄 · 이미지). 두 필드 모두 필수이며 유효할 때만 “등록하기” 활성. 미입력 시 “제목을 입력해 주세요.” / “내용을 입력해 주세요.” 본문 길이 상한 없음. 로그인 BRD-07 본문 이미지 업로드 에디터의 이미지 버튼으로 이미지 1장씩 선택 → 스토리지 업로드 후 커서 위치에 삽입. 실패 시 “이미지 업로드 실패” 토스트. 파일 크기·개수 제한 없음(브라우저 이미지 형식 필터만 적용). 로그인 BRD-08 썸네일 자동 지정 본문의 첫 번째 이미지를 목록 썸네일 및 공유(OG) 이미지로 자동 사용. 이미지가 없으면 기본 이미지 사용. 로그인 BRD-09 등록 · 수정 처리 등록 성공 시 “게시글 등록이 완료되었습니다.” 후 목록으로, 수정 성공 시 “게시글 수정이 완료되었습니다.” 후 상세로 이동. 수정 시 변경 사항이 없으면 저장 없이 “수정된 내용이 없습니다.” 안내 후 상세로 이동. 작성자
5-3. 게시글 상세 /board/[id]
ID 기능명 상세 설명 처리 기준 · 예외 권한 BRD-10 상세 조회 제목, 작성일, 조회수, 추천 수, 본문(서식·이미지 포함), 작성자 정보(아바타·이름) 표시. — 전체 BRD-11 게시글 좋아요 좋아요 버튼 토글. 상태에 따라 아이콘 채움/비움 및 카운트 갱신. “좋아요를 눌렀습니다.” / “좋아요가 취소되었습니다.” 토스트. 비로그인 시 로그인 안내 토스트 후 차단. 로그인 BRD-12 공유 (링크 복사) 공유 버튼 클릭 시 현재 페이지 URL을 클립보드에 복사, “링크가 복사되었습니다.” 토스트. 실패 시 “링크 복사에 실패했습니다.” 전체 BRD-13 수정 · 삭제 (작성자) 본인 글에만 수정/삭제 버튼 노출. 삭제는 확인 모달(“정말로 삭제하시겠습니까? 삭제 후 되돌릴 수 없습니다.” ) 통과 시 실행 후 목록 이동 + “게시글이 삭제 되었습니다.” 타인 글에는 버튼 자체가 미노출. 데이터 권한은 서버(RLS) 정책으로 보호. 작성자
5-4. 댓글 · 대댓글
ID 기능명 상세 설명 처리 기준 · 예외 권한 BRD-14 댓글 목록 상세 하단에 “댓글 N개” 헤딩과 전체 댓글을 작성순으로 표시. 대댓글은 들여쓰기로 원댓글 아래에 표시. 페이지네이션 없이 전체 로드. 댓글 앵커(#comments) 진입 시 자동 스크롤. 전체 BRD-15 댓글 작성 입력창에 내용 입력 후 “등록”. 성공 시 “댓글 작성에 성공했습니다.” 토스트. 빈 내용 차단(“내용을 입력해 주세요.” ). 비로그인 제출 시 로그인 안내 토스트. 로그인 BRD-16 대댓글 작성 댓글의 “답변” 버튼으로 인라인 답글 폼 토글(열림 시 “닫기”). 등록 성공 시 폼 자동 닫힘. 답글 깊이는 2단계까지(대댓글에는 답변 버튼 없음). 로그인 BRD-17 댓글 수정 · 삭제 본인 댓글에만 수정/삭제 버튼 노출. 수정은 인라인 편집(동시에 1개만), 삭제는 확인 모달 후 “댓글이 삭제 되었습니다.” 내용 변경 없이 저장 시 “수정된 내용이 없습니다.” 안내. 작성자 BRD-18 댓글 좋아요 최상위 댓글에 좋아요 토글 제공(카운트·강조 표시). 대댓글에는 좋아요 없음. 비로그인 차단. 로그인
6. 굿즈샵
굿즈 상품 탐색·찜·구매 진입. 가격은 할인율 적용 후 10원 단위 내림으로 계산해 표시한다.
v1 상품 목록정렬 · 무한 스크롤 · 찜
v1 상품 상세수량 선택 · 탭 · FAQ 아코디언
실제 v1 운영 화면 기록 — 이미지를 누르면 원본으로 열린다. (2026 리뉴얼 이후 화면은 디자인 시스템 · 화면 시안 과 기능명세서 v2 참고)
6-1. 상품 목록 /shop
ID 기능명 상세 설명 처리 기준 · 예외 권한 SHOP-01 목록 조회 · 무한 스크롤 상품 카드를 12개 단위로 표시하고, 스크롤이 하단에 도달하면 다음 12개 자동 로드. 마지막 페이지에서 “더 이상 표시할 상품이 없습니다.” 표시. 전체 SHOP-02 정렬 인기순(기본) · 최신순 · 가격 낮은 순 · 가격 높은 순 4종 셀렉트 제공. 인기순은 리뷰 수 기준, 가격 정렬은 할인 적용가 기준. 카테고리·검색 기능 없음. 전체 SHOP-03 상품 카드 썸네일 · 배지 · 상품명 · 할인율(%) · 할인가 · 평균 별점 표시. 클릭(또는 Enter/Space) 시 상세 이동. 배지 규칙: 무료배송 상품 → “무료배송”, 리뷰 10개 이상 & 평점 4.0 이상 → “Best👍”. 전체 SHOP-04 찜(위시리스트) 토글 카드의 하트 버튼으로 찜 추가/해제. “찜하기가 추가되었습니다.” / “찜하기가 취소되었습니다.” 토스트. 비로그인은 기기(로컬)에 저장되며, 로그인 시 계정으로 자동 이관. 로그인 사용자는 계정에 저장. 전체
6-2. 상품 상세 /shop/[id]
ID 기능명 상세 설명 처리 기준 · 예외 권한 SHOP-05 상품 정보 이미지, 상품명, 배송 정보, 사이즈/색상, 원가·할인율·할인가, 평균 별점 표시. 공유(링크 복사) 버튼 제공. 사이즈·색상은 정보 표시 전용(옵션 선택 기능 없음). 전체 SHOP-06 수량 선택 +/− 버튼으로 수량 조절, “총 상품금액(할인가 × 수량)” 실시간 표시. 최소 1개 ~ 최대 5개. 초과 시 “최대 5개 까지 구매 가능합니다.” 토스트. 전체 SHOP-07 장바구니 담기 선택 수량을 장바구니에 추가하고 하단 드로어로 안내(“장바구니에 상품이 담겼습니다.” + “장바구니 보기 / 계속 쇼핑하기”). 이미 담긴 수량과 합산해 상품당 5개 초과 시 차단(현재 수량 안내). 비로그인도 가능(기기 저장). 전체 SHOP-08 바로 구매 “구매하기” 클릭 시 장바구니를 거치지 않고 곧바로 토스페이먼츠 결제창 호출. 검증: ① 로그인 ② 주문자 정보 · 기본 배송지 존재(누락된 항목을 묶어 하나의 토스트로 안내). 미충족 시 중단. 로그인 SHOP-09 상세정보 · 리뷰 탭 “상세정보” 탭(상품 설명)과 “리뷰” 탭(개수 표시) 전환. 리뷰 탭은 평균 별점(소수 1자리/5.0, 현재 페이지에 로드된 리뷰 기준)과 리뷰 목록을 페이지당 5개 페이지네이션으로 제공. 리뷰 작성은 구매확정 후 마이페이지 주문 상세에서만 가능(MY-09). 전체 SHOP-10 구매 안내 아코디언 판매자 고객센터 / 배송 정보 / 교환·반품 정책 3개 접이식 안내(정적 텍스트). — 전체
7. 장바구니 · 주문서
별도 결제 페이지 없이 장바구니 화면이 곧 주문서(체크아웃) 역할을 한다. 좌측 상품 목록 + 우측 주문 요약(금액·주문자·배송지·약관·결제 버튼) 2단 구성. 장바구니 데이터는 기기(localStorage)에 저장되며 서버 동기화는 없다.
v1 장바구니 ①선택 · 삭제 · 금액 계산
v1 장바구니 ②주문자/배송지 변경 · 약관 모달
실제 v1 운영 화면 기록 — 이미지를 누르면 원본으로 열린다. (2026 리뉴얼 이후 화면은 디자인 시스템 · 화면 시안 과 기능명세서 v2 참고)
7-1. 장바구니 /cart
ID 기능명 상세 설명 처리 기준 · 예외 권한 CART-01 담긴 상품 목록 썸네일 · 상품명 · 배송 정보 · 사이즈/색상 · 수량 · 할인율 · 원가(취소선) · 할인 적용 합계 표시. 썸네일 클릭 시 상품 상세 이동. 비어 있으면 “장바구니가 비어있습니다. 원하는 상품을 담아보세요!” + 쇼핑하기 링크. 전체 CART-02 선택 관리 전체선택 체크박스와 개별 체크박스, “선택 n/전체 m” 카운트 제공. 결제·금액 계산은 선택된 상품만 대상. 진입 시 전체 자동 선택(장바구니 내용이 변경되면 전체 선택으로 재설정). 결제 실패 후 복귀 시 이전 선택 상태 복원. 전체 CART-03 수량 변경 아이템별 +/− 버튼으로 수량 조절, 합계 즉시 반영. 1~5개 제한(초과 시 토스트). 전체 CART-04 삭제 (3종) ① 개별 삭제(× 버튼) ② 선택삭제 ③ 전체삭제. 선택 0개로 선택삭제 시 “선택한 내용이 없습니다.” 전체삭제는 확인 모달(“장바구니의 모든 상품이 삭제됩니다. 정말 비우시겠습니까?” ) 필요. 전체 CART-05 결제 금액 요약 선택 상품 기준으로 총 결제 금액(상단 강조) / 상품 금액 / 총 할인 금액(− 표시) 순으로 표시. 배송비 항목 없음(전 상품 배송비 0원 정책, 부록 참고). 전체 CART-06 주문자 정보 로그인 시 [정보 입력/정보 변경] 버튼으로 인라인 폼 오픈: 이름(최대 25자) · 휴대폰(하이픈 없이 숫자 11자리 입력, 저장 시 자동 포맷) · 이메일. 계정당 1건 저장(이후 자동 표시). 비로그인 시 “주문자 정보가 없습니다. 로그인 후 정보를 입력해주세요.” 변경 없이 저장 시 “변경된 내용이 없습니다.” 로그인 CART-07 배송 정보 기본 배송지(받는 분 · 휴대폰 · 우편번호+주소 · 요청사항)를 표시. [배송지 변경] 또는 [배송지 추가] 버튼으로 마이페이지 배송지 관리로 이동. 주문서에서 배송지 직접 입력은 불가(마이페이지에서 관리). 로그인 CART-08 주문 약관 동의 “[필수] 주문 내역에 대한 필수 동의” 부모 체크 + 자식 2개(개인정보 수집·제3자 제공 / 결제 이후 환불·취소 불가). 부모 체크 시 일괄 동의, 자식 모두 체크 시 부모 자동 체크. 각 항목 상세는 모달로 열람. 자식 항목은 기본 접힘 상태(화살표로 펼침). “본인은 만 14세 이상이며 주문내용을 확인하였습니다.” 문구 상시 노출. 로그인 CART-09 주문하기 (결제 요청) 검증 통과 시 토스페이먼츠 결제창 호출. 주문명은 “{첫 상품명} 외 N건” 형식, 주문번호는 YYYYMMDD-랜덤8자리 자동 생성. 검증 순서: ① 로그인(“로그인이 필요합니다.” ) ② 결제 금액 0원(“결제할 내용이 없습니다.” ) ③ 약관 동의(“약관 동의가 필요합니다” ) ④ 주문자 정보(“주문자 정보가 없습니다.” ) ⑤ 배송 정보(“배송 정보가 없습니다.” ). 하나라도 미충족 시 토스트 후 중단. 로그인
8. 결제
PG는 토스페이먼츠 단일 연동(결제수단 “카드” 고정, 카드사 간편결제 포함). 결제 완료 후 성공 페이지에서 승인·주문 저장이 이루어진다.
v1 결제 완료주문 번호 · 결제 상세
실제 v1 운영 화면 기록 — 이미지를 누르면 원본으로 열린다. (2026 리뉴얼 이후 화면은 디자인 시스템 · 화면 시안 과 기능명세서 v2 참고)
8-1. 결제 승인 API POST /api/payment/confirm
ID 기능명 상세 설명 처리 기준 · 예외 권한 PAY-01 결제 승인 프록시 결제창에서 돌아온 paymentKey · orderId · amount를 받아 서버에서 토스페이먼츠 승인 API로 전달(시크릿 키는 서버 보관). 세 값 중 누락 시 400 “결제 승인에 필요한 항목이 누락되었습니다.” 토스 승인 실패 시 해당 상태 코드·메시지 그대로 반환. 전체
8-2. 결제 성공 /payment/success
ID 기능명 상세 설명 처리 기준 · 예외 권한 PAY-02 접근 가드 미들웨어에서 ① 비로그인이면 로그인 페이지로 ② orderId 쿼리가 없으면 메인으로 리다이렉트. 클라이언트에서도 비로그인 시 “로그인 후 이용 가능합니다.” 토스트 후 로그인 페이지로 이동(이중 가드). PG(토스) 복귀는 크로스사이트 리다이렉트라 세션 쿠키가 잡히지 않으면 실제 로그인 사용자도 로그인 페이지로 이동될 수 있음(알려진 한계, 부록 참고). 로그인 PAY-03 결제 승인 · 주문 저장 페이지 진입 시 자동으로 ① 승인 API 호출 ② 승인 완료(DONE) 확인 ③ 결제 정보(payments) + 주문 상품(order_items) 저장. 상태는 “결제 완료 / 배송전”으로 기록되고 배송지 정보는 결제 시점 스냅샷으로 함께 저장. 동일 주문번호가 이미 저장돼 있으면 승인·저장을 건너뜀(새로고침 중복 방지). 승인 결과가 DONE이 아니면 실패 페이지로 이동. 로그인 PAY-04 장바구니 정리 결제된 상품만 장바구니에서 자동 제거(미선택 상품은 유지). — 로그인 PAY-05 완료 화면 “주문이 완료되었습니다.” + 주문번호, 주문 상품 목록(총 N개), 배송 정보 / 결제 정보(총 주문 금액·배송비·총 결제 금액) / 결제 수단(방법·일시불/할부·결제 일시·주문 상태) 카드 표시. [주문상세 보기 → 마이페이지] / [쇼핑 계속하기 → 굿즈샵] 버튼. 결제 조회 실패 시 1초 간격 3회 재시도 후 오류 표시. 로그인
8-3. 결제 실패 /payment/fail
ID 기능명 상세 설명 처리 기준 · 예외 권한 PAY-06 실패 안내 “결제가 실패 되었습니다.” + PG가 전달한 실패 사유(“에러 사유 : …”) 표시. 접근 가드는 성공 페이지와 동일. 로그인 PAY-07 장바구니 복귀 [장바구니로 돌아가기] 클릭 시 결제 시도했던 상품들이 선택된 상태로 장바구니 복원. 복원 정보가 없으면 일반 장바구니로 이동. 로그인
9. 마이페이지
좌측 프로필 + 메뉴(찜 목록 · 결제 목록 · 내가 쓴 글 · 배송지 관리), 우측 콘텐츠 2단 구성. /mypage 진입 시 찜 목록으로 자동 이동. 전 영역 로그인 필수(서버·클라이언트 이중 가드).
v1 프로필아바타 크롭 · 닉네임 수정
v1 찜 목록찜한 상품 그리드
v1 결제 목록주문 상세 · 구매확정 · 리뷰
v1 내가 쓴 글작성 글 목록
v1 배송지 ①목록 · 기본 배송지 설정
v1 배송지 ②추가 · 수정 · 삭제
실제 v1 운영 화면 기록 — 이미지를 누르면 원본으로 열린다. (2026 리뉴얼 이후 화면은 디자인 시스템 · 화면 시안 과 기능명세서 v2 참고)
9-1. 프로필 (공통 사이드)
ID 기능명 상세 설명 처리 기준 · 예외 권한 MY-01 프로필 표시 프로필 이미지, 닉네임, 활동 통계(글 작성수 · 찜 수) 표시. — 로그인 MY-02 프로필 이미지 변경 아바타 클릭 → 이미지 선택 → 크롭 모달(원형, 확대/축소 슬라이더)에서 편집 후 저장. 성공 시 “프로필 이미지가 변경되었습니다.” 헤더 아바타에도 즉시 반영. 250×250 원형으로 저장. 파일 용량·형식 별도 제한 없음(이미지 파일 필터만). 로그인 MY-03 닉네임 변경 “수정” 클릭 → 인라인 편집 → “수정완료”로 저장. 성공 시 “닉네임이 변경 되었습니다.” 2글자 이상(“2글자 이상 입력해 주세요.” ), 입력창 최대 6자. 동일 닉네임 저장 시 “변경된 닉네임이 없습니다.” 로그인
9-2. 찜 목록 /mypage/wishlist
ID 기능명 상세 설명 처리 기준 · 예외 권한 MY-04 찜 목록 조회 찜한 상품을 카드 그리드(3열)로 표시: 썸네일 · 배지 · 상품명 · 할인율 · 할인가 · 평균 별점. 카드 클릭 시 상품 상세 이동. 최신 찜 순. 비어 있으면 “찜 목록이 없습니다.” 로그인 MY-05 찜 해제 카드의 하트 버튼 클릭 시 즉시 해제, “찜하기가 취소되었습니다.” 토스트. 확인 절차 없이 즉시 삭제. 로그인
9-3. 결제 목록 · 주문 상세 /mypage/orders /mypage/orders/[orderId]
ID 기능명 상세 설명 처리 기준 · 예외 권한 MY-06 결제 목록 주문 단위 카드로 표시: 주문번호, 첫 상품 썸네일, “{첫 상품명} 외 N건”, 총 수량, 주문일시, 총 결제 금액. 카드 또는 “주문상세” 버튼으로 상세 이동. 주문일 내림차순. 없으면 “결제한 목록이 없습니다.” 로그인 MY-07 주문 상세 주문일시·주문번호, 주문 상품 리스트(썸네일·상품명·색상/사이즈/수량·원가·할인가), 주문자 정보, 배송 정보, 결제 정보(총 주문 금액·배송비·총 결제 금액), 결제 수단(방법·일시불/할부·결제 일시·주문 상태) 표시. 존재하지 않는 주문번호면 “주문을 찾을 수 없습니다.” 상품 클릭 시 상품 상세 이동. 로그인 MY-08 구매확정 미확정 상품의 “구매확정” 버튼 → 확인 모달(“구매를 확정하시겠습니까? 구매 확정 후에는 취소나 변경이 불가능합니다.” ) → 확정 시 “구매가 확정되었습니다.” + 초록 “구매확정” 배지 표시. 확정 후 되돌리기 불가. 주문 취소/환불 기능은 미제공(부록 참고). 로그인 MY-09 리뷰 작성 · 수정 구매확정된 상품에 “리뷰쓰기”(작성 후엔 “리뷰수정”) 버튼 노출. 모달에서 별점(1~5) + 내용(10~200자) 작성. 작성된 리뷰는 상품 상세 리뷰 탭에 반영. 별점 미선택 시 “별점을 선택해주세요.” 내용 10자 미만/200자 초과 차단. 수정 시 변경 없으면 “변경된 내용이 없습니다.” 로그인
9-4. 내가 쓴 글 /mypage/posts
ID 기능명 상세 설명 처리 기준 · 예외 권한 MY-10 내 게시글 목록 내가 작성한 글을 최신순으로 표시: 제목 · 작성자 · 조회수 · 추천 수 · 작성일 · 댓글 수. 클릭 시 게시글 상세, 댓글 수 버튼 클릭 시 댓글 영역으로 이동. 없으면 “작성한 게시글이 없습니다.” 수정·삭제는 게시글 상세에서 수행. 로그인
9-5. 배송지 관리 /mypage/address /mypage/address/new
ID 기능명 상세 설명 처리 기준 · 예외 권한 MY-11 배송지 목록 받는 사람 · 우편번호 · 주소 · 휴대폰 · 요청사항 표시. 기본 배송지는 배지로 구분되어 항상 최상단. 없으면 “배송지가 없습니다.” + 추가 버튼. 로그인 MY-12 배송지 추가 받는 분 · 우편번호/주소(다음(Daum) 우편번호 검색 연동, 직접 입력 불가) · 나머지 주소 · 휴대폰(앞자리 셀렉트 + 숫자 3~4자리/4자리) · 배송 요청사항(선택지 5종 + 직접 입력) · 기본 배송지 여부 입력. 모두 유효해야 “저장하기” 활성. 성공 시 “배송지 정보가 저장되었습니다.” 필수 미입력 시 필드별 안내(“받는 사람을 입력해 주세요.” 등). 첫 배송지는 자동으로 기본 배송지 지정. 로그인 MY-13 배송지 수정 목록의 “수정” → 모달에서 동일 폼으로 수정. 성공 시 “배송지가 수정되었습니다.” 이미 기본 배송지면 “현재 기본 배송지로 설정되어 있습니다.” 안내로 대체. 로그인 MY-14 배송지 삭제 “삭제” → 확인 모달(“배송지를 삭제하시겠습니까?” ) → 성공 시 “배송지가 삭제 되었습니다.” 기본 배송지를 삭제하면 남은 배송지 중에서 기본 배송지가 자동 재지정. 로그인 MY-15 기본 배송지 설정 “기본 배송지로 설정” 버튼으로 변경, “기본 배송지가 변경 되었습니다.” 토스트. 기본 배송지는 주문서(CART-07)의 배송 정보로 사용. 기본 배송지는 계정당 1개. 로그인
10. 접근 제어 정책 요약
서버 가드(middleware)와 클라이언트 가드(화면/액션)의 이중 구조.
구분 대상 정책 서버 가드 /mypage/*비로그인 접근 시 로그인 페이지로 리다이렉트. /login · /signup로그인 상태로 접근 시 메인으로 리다이렉트. /login?form=signup가입 직후 발급 쿠키(5분) 없으면 일반 로그인으로 리다이렉트. /payment/success · fail비로그인이면 로그인 페이지로, 주문번호 쿼리가 없으면 메인으로 리다이렉트. 화면 가드 마이페이지 · 결제 성공/실패 세션 복원 후에도 비로그인이면 “로그인 후 이용 가능합니다.” 토스트 → 로그인 페이지 이동. 액션 가드 글쓰기 · 게시글/댓글 좋아요 · 댓글/답글 작성 · 결제하기 · 바로구매 비로그인 시 “로그인이 필요합니다.” 토스트 후 동작 차단(리다이렉트 없음). 비로그인 허용 — 메인/소식/게시판/굿즈샵 조회, 게시글 검색, 공유(링크 복사), 장바구니 담기·수량변경·삭제, 찜(기기 저장, 로그인 시 계정 이관). 데이터 권한 수정 · 삭제 UI는 본인 리소스에만 버튼 노출, 데이터 계층은 Supabase RLS 정책으로 보호.
11. 부록
11-1. 데이터 저장소 (Supabase)
구분 이름 용도 테이블
user회원 프로필(닉네임 · 아바타), Auth 계정과 연동 album메인 앨범 캐러셀(발매 정보 · 음원 플랫폼 링크) news_gallery / gallery소식 기사 / 사진 갤러리 board게시글(제목 · 본문 · 조회수 · 썸네일) board_with_meta (뷰)게시글 목록용 집계 뷰(작성자명 · 댓글 수 · 추천 수 포함) board_comments댓글 · 대댓글(자기참조 parent_id) board_likes / comment_likes게시글 / 댓글 좋아요 goods굿즈 상품(가격 · 할인율 · 사이즈/색상 · 배송 유형) goods_reviews상품 리뷰(별점 · 내용) wish_lists회원 찜 목록 customer_info주문자 정보(계정당 1건) shipping_addresses배송지(기본 배송지 플래그 포함) payments결제 레코드(주문번호 · 결제수단 · 상태 · 배송지 스냅샷) order_items주문 상품(수량 · 구매확정 여부) 스토리지 boards / avatars게시글 본문 이미지 / 프로필 이미지 DB 함수 increment_view_count 외조회수 증가, 기본 배송지 지정·재지정(set_default_address, update_default_address)
11-2. 클라이언트 저장소 키
키 저장소 용도 shopping_cartlocalStorage 장바구니(서버 미저장). 로그아웃 시 삭제 wishlistlocalStorage 비로그인 찜 목록. 로그인 시 계정으로 이관 후 삭제 checkout_items / order_namelocalStorage 결제 진행 중 주문 상품 · 주문명 임시 보관(완료 시 삭제, 실패 시 복원용 유지) viewedPostslocalStorage 게시글 조회수 24시간 중복 방지 loginEffectlocalStorage 가입 축하 연출 1회 재생 플래그 firstSignup쿠키 (5분) 가입 축하 화면 접근 허용 티켓
11-3. 미구현 · 알려진 한계
참고 — 아래는 기준 시점 코드에서 확인된 사실로, 차기 고도화 후보 목록으로 활용할 수 있다.
회원 탈퇴 미구현 — 버튼이 주석 처리된 상태로만 존재.비밀번호 찾기/재설정 없음 , 이메일 인증(확인 메일) 안내 플로우 없음.주문 취소 · 환불 기능 없음 — 약관 문구로만 안내(“결제 이후 환불·취소 불가”).배송비 로직 없음 — 주문서에 배송비 항목이 없고 주문 상세의 “총 배송비”는 0원 하드코딩.상품 옵션(사이즈/색상) 선택 불가 — 정보 표시 전용.회원가입 실패 시 원인과 무관하게 “이미 등록된 이메일 입니다.”로 표기됨.
소식 카테고리 필터는 로드된 목록 내 클라이언트 필터라, 더보기 이전에는 해당 카테고리 글이 있어도 안 보일 수 있음.
게시글 조회수는 목록 클릭 경유 시에만 증가(공유 링크 직접 진입 시 미증가).
결제 승인 API에 세션·금액 대조 검증 없음(토스 측 검증 및 클라이언트 중복 확인에 의존), 결제·주문 저장이 트랜잭션이 아님.
게시글 본문이 sanitize 없이 HTML로 렌더링됨(XSS 방어 부재).
비밀번호 20자 상한, 닉네임 6자 상한이 입력창 속성으로만 강제되고 검증 스키마에는 없음.
장바구니는 기기 저장 전용 — 로그인해도 서버 동기화되지 않고 기기 간 공유 불가.
결제 복귀 시 로그인 페이지로 이동될 수 있음 — PG(토스) 복귀는 크로스사이트 리다이렉트라 세션 쿠키가 잡히기 전이면 미들웨어·화면 가드의 로그인 검사에 걸림.상품 목록 무한 스크롤이 매 페이지 전체 상품을 조회한 뒤 잘라내는 방식(서버 페이지네이션 없음).
바로 구매로 결제하면 주문명이 기본값(“주문상품”)으로 저장될 수 있음 — 주문명 임시 저장이 장바구니 결제 경로에만 존재.