Skip to content

FrontEnd‐Components

Jump to bottom
LeeSongMi edited this page Oct 9, 2026 · 3 revisions

🧩 Components

본 프로젝트의 UI 컴포넌트는 Figma 컴포넌트와 코드 컴포넌트를 1:1로 대응시킨다.

Figma에서 먼저 컴포넌트를 만들고, 모든 화면은 그 컴포넌트의 인스턴스로 조합했다. 코드에서도 같은 이름 · 같은 속성(텍스트, 상태)으로 구현해 디자인과 구현이 어긋나지 않게 한다.

설계 목적

  • 디자인 수정이 컴포넌트 한 곳에서 모든 화면으로 전파되도록 한다.
  • 색 · 모서리 · 그림자 값은 하드코딩하지 않고 디자인 토큰에 연결한다.
  • 반복 UI(Dialog, Select, Table 등)는 shadcn/ui를 바탕으로 만들고 스타일만 토큰으로 맞춘다.

구조 개요

  • 공통
    • 데스크톱 · 모바일에서 함께 쓰는 컴포넌트
  • 데스크톱 전용 / 모바일 전용
    • 같은 역할이라도 화면 크기에 맞게 구조가 다른 컴포넌트 (예: Header ↔ MobileHeader + BottomTabBar)

🧩 공통

Component 속성 Description
Button Type = Primary · Secondary · Inverse · Disabled Primary는 주요 행동(장바구니 담기, 주문하기), Inverse는 어두운 배너 위, Disabled는 준비 중 기능(카카오 로그인)
Badge Label 장바구니 개수, 주문 상태, 신상품 표시
Chip State = Default · Selected 카테고리 필터, 결제 수단 선택. 선택 상태는 primary-600
Input Label, Placeholder 주문서 · 주문조회 입력
SearchBar Placeholder 검색 모달 · 검색 페이지
QuantityStepper Quantity 상품 상세 · 장바구니 수량 조절
ProductCard Name, Subtitle, Price 상품 목록 카드. 이미지는 카드 폭을 따라가며 정사각형 유지
OrderSummary Subtotal, Shipping, Total 장바구니 · 주문서 금액 요약
OrderCard Date, Items, OrderNo, Amount 주문 내역(회원) 목록 카드
OrderItemRow Name, Detail, LineTotal 주문 상세의 상품 행
Icon bag, search, arrow-right, minus, plus, x, lock, check, user, grid, menu, more, pencil, trash, chevron-down, arrow-left, image, inbox 24px, 선 1.5px. 색은 토큰에 연결 (more부터는 관리자에서 추가)

🧩 데스크톱 전용

Component 속성 Description
Header — 로고 · 카테고리 메뉴(All, Bread, Cake, Cookie, Beverage) · 검색 · 장바구니 · 마이페이지 · 관리자 페이지 버튼
Footer — 3단 구성 (쇼핑 · 고객 안내 · 연락처)
CategoryCard Title, Description 홈 카테고리 카드. 카테고리 색 배경 + 배경 없는 오브젝트 + 한 줄 설명 + 화살표
CartItem Name, Subtitle, UnitPrice, LineTotal 장바구니 상품 행

🧩 모바일 전용

Component 속성 Description
MobileHeader — 로고만 표시
BottomTabBar Active = None · Search · Cart · MyPage · Admin · Products-Open 하단 고정 탭 바. 가운데 상품 버튼을 누르면 Products-Open 상태
CategoryTab State = Default · Selected, Label 원형 카테고리 아이콘 탭. 상품 버블 메뉴의 버블로도 사용
MobileCartItem Name, UnitPrice, LineTotal 장바구니 상품 행 (이름 · 삭제 / 수량 · 합계 2줄)
MobileFooter — 1단 구성

🧩 관리자 (공통)

관리자 전용 컴포넌트는 Components 페이지의 Admin Components 보드에 모았다. 쇼핑몰과 공유하는 컴포넌트(Button, Chip, Input, SearchBar)는 수정하지 않고 그대로 쓴다.

Component 속성 Description
CategoryBadge Category = Bread · Cake · Cookie · Beverage 상품 테이블의 카테고리 표시. 배경은 카테고리 색 토큰
StatusBadge Status = 주문 접수 · 배송 준비중 · 배송중 · 배송 완료 · 주문 취소 주문 상태. 취소는 배경 없이 테두리만
Checkbox State = Unchecked · Checked · Indeterminate 일괄 선택. 선택 색은 primary
AdminSelect · AdminTextarea Label, Placeholder Input과 같은 모양의 선택 · 여러 줄 입력
ImageOption State = Default · Selected 상품 이미지 선택지. 고정 이미지 12장 중 하나를 고름
PasswordDialog Title, Description 데이터 변경 전 관리자 비밀번호 확인

🧩 관리자 데스크톱

Component 속성 Description
AdminSidebar Active = Products · Orders 사이드바(상품 · 주문). 하단에 쇼핑몰로 돌아가기
AdminNavItem State = Default · Active, Label 사이드바 메뉴 항목. Active는 primary-200 배경
AdminHeader Title 경로 + 오른쪽에 "조회는 누구나 가능 · 변경은 비밀번호 확인 후 실행" 안내
ProductTableHeader · ProductRow Name, Subtitle, Price 상품 테이블. 썸네일(사각), 카테고리 배지, 행 끝 … 버튼
OrderTableHeader · OrderRow OrderNo, Date, Name, Phone, Address, Items, Amount 주문 테이블. 체크박스 열 + 마스킹된 이름 · 연락처 · 주소 + 상태 배지 ▾
RowActionMenu — 상품 행 … 메뉴(수정 · 삭제)
StatusMenu — 주문 1건의 상태 변경 메뉴. 현재 상태에 체크
BulkActionBar Count 주문을 선택하면 화면 하단에 뜨는 바 (n건 선택됨 · 상태 일괄 변경 · 선택 해제)
BulkStatusMenu Caption 선택한 주문들을 맞출 상태 메뉴

🧩 관리자 모바일

Component 속성 Description
AdminMobileHeader — 로고 + ADMIN 태그
AdminTabBar Active = Products · Orders · Received 하단 고정 탭 바(상품 · 주문 · 접수 · 쇼핑몰). 접수 탭에 새 주문 건수 배지
MobileProductItem Name, Price 원형 썸네일 + 이름 + 카테고리 배지 + 가격, 끝에 … 버튼
MobileOrderCard State = Default · Unselected · Selected, OrderNo, Date, Customer, Address, Items, Amount 주문 카드. 선택 모드에서는 체크박스가 붙고 상태 ▾는 숨김
MobileStatusTabs Active = 전체 · 접수 주문 상태 필터. 화면 폭을 나눈 밑줄 탭
MobileActionSheet Name, Meta 상품 … 버튼의 하단 액션 시트(수정 · 삭제)
MobileStatusSheet OrderNo 주문 1건의 상태 변경 시트
MobileBulkBar — 선택 모드의 하단 바(전체 선택 · n건 상태 변경). 탭 바 자리를 대신함
MobileBulkStatusSheet — 일괄 상태 변경 시트. 상태 하나를 고르고 버튼으로 확정
MobilePasswordSheet Title, Description 비밀번호 확인 하단 시트
💻 Code
📎 Reference

🖥️ FrontEnd

⚙️ BackEnd

📏 Project

Clone this wiki locally