Admin

어드민을 구성하는 핵심 컴포넌트를 조합하여 표준 화면 레이아웃을 정의하였습니다.
실제 서비스 환경을 고려한 구성으로, 목적에 맞는 컴포넌트를 유연하게 구성하고 확장할 수 있습니다.

Main Screen

Main Screen은 어드민 서비스의 핵심 정보를 한눈에 확인하고, 주요 작업으로 빠르게 진입할 수 있도록 구성된 기본 화면입니다.
좌측 Navigation 영역과 우측 Contents Area로 구성되며, 사용자의 역할과 권한에 따라 노출되는 메뉴와 콘텐츠가 달라질 수 있습니다.

1. Navigation: 서비스 전반의 메뉴 구조를 제공하며, 현재 위치를 명확하게 인지할 수 있도록 상태를 표시합니다.
2. Contents Area: 선택한 메뉴에 따라 주요 데이터와 인터랙션 가능한 컴포넌트를 제공합니다.

Related Components

Main Screen을 구성하는 주요 컴포넌트들입니다.
각 컴포넌트는 독립적으로도 사용 가능하며, 화면 맥락에 따라 조합하여 활용할 수 있습니다.

Navigation

Navigation은 어드민 서비스의 전체 구조를 안내하는 핵심 컴포넌트입니다.
브랜드나 서비스 로고, 메뉴, 사용자 정보로 구성되며, 서비스의 특성에 따라 다양하게 구성하여 사용할 수 있습니다.

1. Default: 기본 상태로 메뉴 구조를 제공합니다.
2. Hover: 마우스 오버 시 선택 가능 여부를 명확히 표시합니다.
3. Selected: 현재 선택된 메뉴를 강조하여 위치 인지를 돕습니다.

Basic Table

Basic Table은 다수의 데이터를 행과 열 구조로 정리하여 보여주는 컴포넌트입니다.
정렬, 필터링, 선택 등 다양한 데이터 조작 기능을 지원합니다.
필터나 검색 등 기능과 데이터의 조합이 필요한 경우 아래의 예시처럼 구성하여 사용할 수 있습니다.

1. Filter: 데이터 조건을 설정하여 원하는 정보만 확인할 수 있습니다.
2. Search: 키워드를 입력하여 테이블 내 데이터를 빠르게 탐색할 수 있습니다.
3. Sort: 컬럼 기준으로 데이터를 정렬할 수 있습니다.
4. Action Button: 행 단위 또는 테이블 단위의 작업을 수행합니다.
5. Table: 데이터 목록을 표시합니다. 필요 시 가로형 내부 스크롤을 제공합니다.
6. Pagination: 대량의 데이터를 페이지 단위로 분리하여 제공합니다.

Table States

Table은 사용 상황에 따라 다양한 상태를 가집니다.

1. Default: 기본 데이터가 표시되는 상태입니다.
2. Hover: 특정 행에 마우스 포인터가 올라간 상태입니다.
3. Selected / Disabled: 선택되었거나 비활성화된 행을 구분하여 표시합니다. 특정 행 선택 시, 액션 버튼이 추가될 수 있습니다.
4. No Data: 표시할 데이터가 없는 경우 안내 메시지를 제공합니다.

Filter

Filter는 데이터 범위를 좁혀 원하는 결과를 빠르게 찾을 수 있도록 돕는 컴포넌트입니다.

1. Filter 설정 전: 다중 조건 설정이 가능합니다.
2. Filter 설정 후: 선택된 조건은 명확하게 표시되어 현재 상태를 쉽게 파악할 수 있습니다.