Clauders/appkit
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

detail update

Browse Source
This commit is contained in:
rupy1014
2025-12-15 08:00:30 +09:00
parent 2e6c5b7924
commit 3cee45b6c0
5 changed files with 373 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
.specify/templates/ui-main.md
View File

@@ -5,29 +5,70 @@
| 항목 | 내용 |
|-----|------|
| 서비스명 | [서비스명] |
| UI 컨셉 | [UI 컨셉 - 예: 카카오톡 스타일 메신저] |
| 탭 수 | N개 ([탭1] - [탭2] - [탭3] - [탭4] - [탭5]) |
| 메인 액션 | N번 탭 ([탭명]) - [메인 액션 설명] |
| 플랫폼 | [Web / Mobile App / PWA / Cross-platform] |
| UI 컨셉 | [UI 컨셉 - 예: Notion 스타일 워크스페이스 / 카카오톡 스타일 메신저] |
| 레퍼런스 | [유사 서비스명] |
| 메인 액션 | [메인 액션 설명] |
---
## 탭 구조
## 레이아웃 구조
### 레퍼런스 비교
| 위치 | [레퍼런스 앱] | [우리 앱] | 역할 |
|-----|--------------|---------|------|
| 1 | [레퍼런스 탭] | [우리 탭] | [역할] |
| 2 | [레퍼런스 탭] | [우리 탭] | [역할] |
| 3 | [레퍼런스 탭] | **[우리 탭]** | [핵심 역할] |
| 4 | [레퍼런스 탭] | [우리 탭] | [역할] |
| 5 | [레퍼런스 탭] | [우리 탭] | [역할] |
### 탭바 레이아웃
### 웹 애플리케이션 (해당 시)
**데스크톱 (1024px+)**
```
┌─────────────────────────────────────────────────┐
│ Logo [메뉴1] [메뉴2] [메뉴3] 👤 Profile │
├──────┬──────────────────────────────────────────┤
│ │ │
│ 사이드│ 메인 컨텐츠 영역 │
│ 메뉴 │ │
│ │ │
└──────┴──────────────────────────────────────────┘
```
**태블릿 (768px~1023px)**
```
┌─────────────────────────────────────────────────┐
│ ☰ Logo [메뉴1] [메뉴2] 👤 │
├─────────────────────────────────────────────────┤
│ │
│ 메인 컨텐츠 영역 (전체 너비) │
│ │
└─────────────────────────────────────────────────┘
```
**모바일 (< 768px)**
```
┌─────────────────────────────────────┐
│ ☰ Logo 👤 │
├─────────────────────────────────────┤
│ │
│ 메인 컨텐츠 │
│ (전체 너비) │
│ │
└─────────────────────────────────────┘
```
### 모바일 앱 (해당 시)
**기본 레이아웃**
```
┌─────────────────────────────────────┐
│ [상단 헤더] │
├─────────────────────────────────────┤
│ │
│ 메인 컨텐츠 영역 │
│ │
├─────────────────────────────────────┤
│ [하단 탭바] │
└─────────────────────────────────────┘
```
**탭바 레이아웃**
```
┌─────────────────────────────────────────────────┐
│ [아이콘] [아이콘] [센터] [아이콘] [아이콘] │
│ 탭1 탭2 탭3 탭4 탭5 │
│ ^^^^ │
@@ -35,7 +76,7 @@
└─────────────────────────────────────────────────┘
```
### 센터 탭 강조
**센터 탭 강조 (해당 시)**
| 요소 | 일반 탭 | 센터 탭 |
|-----|--------|--------|
@@ -46,9 +87,29 @@
---
## 상단 헤더
## 레퍼런스 비교 (모바일 앱만 해당)
### 기본 구조
| 위치 | [레퍼런스 앱] | [우리 앱] | 역할 |
|-----|--------------|---------|------|
| 1 | [레퍼런스 탭] | [우리 탭] | [역할] |
| 2 | [레퍼런스 탭] | [우리 탭] | [역할] |
| 3 | [레퍼런스 탭] | **[우리 탭]** | [핵심 역할] |
---
## 헤더 구조
### 웹 - 글로벌 헤더 (해당 시)
```
┌─────────────────────────────────────────────────┐
│ Logo [메뉴1] [메뉴2] [메뉴3] 🔔 👤 │
│ ^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^ │
│ 로고 네비게이션 알림 프로필 │
└─────────────────────────────────────────────────┘
```
### 모바일 앱 - 상단 헤더 (해당 시)
```
┌─────────────────────────────────────────────────┐

82
.specify/templates/ui-router.md
View File

@@ -1,24 +1,78 @@
# [서비스명] - Router & UI 목록
## 플랫폼 정보
| 항목 | 내용 |
|-----|------|
| 플랫폼 타입 | [Web / Mobile App / PWA / Cross-platform] |
| 네비게이션 패턴 | [Header+Sidebar / Bottom Tab / Top Tab] |
| 반응형 지원 | [Yes / No] |
| 반응형 브레이크포인트 | Desktop: 1024px+, Tablet: 768px~1023px, Mobile: <768px |
---
## 라우터 구조
```
/ # 기본 = [메인탭]
├── /[tab1] # 탭1 (목록)
/ # 기본 경로
├── /[section1] # 섹션1
│ └── /:id # 상세
├── /[tab2] # 탭2 (목록)
├── /[section2] # 섹션2
│ └── /:id # 상세
├── /[tab3] # 탭3 (메인 액션)
├── /[tab4] # 탭4
├── /[tab5] # 탭5
└── /settings # 설정
```
---
## 탭 구조
## 네비게이션 구조
### 하단 탭바 (Bottom Tab)
### 웹 (Header + Sidebar) - 해당 시
**데스크톱 레이아웃 (1024px+)**
```
┌─────────────────────────────────────────────────┐
│ Logo [메뉴1] [메뉴2] [메뉴3] 👤 Profile │
├──────┬──────────────────────────────────────────┤
│ │ │
│ 사이드│ 메인 컨텐츠 영역 │
│ 메뉴 │ │
│ │ │
└──────┴──────────────────────────────────────────┘
```
**헤더 네비게이션**
| # | 메뉴 | 아이콘 | 경로 | 설명 |
|---|-----|------|-----|------|
| 1 | [메뉴1] | [아이콘] | `/[경로]` | [설명] |
| 2 | [메뉴2] | [아이콘] | `/[경로]` | [설명] |
**사이드바 메뉴**
| # | 메뉴 | 아이콘 | 경로 | 뱃지 |
|---|-----|------|-----|------|
| 1 | [메뉴1] | [아이콘] | `/[경로]` | [조건] |
| 2 | [메뉴2] | [아이콘] | `/[경로]` | [조건] |
### 모바일 앱 (Bottom Tab) - 해당 시
**모바일 레이아웃**
```
┌─────────────────────────────────────────────────┐
│ [상단 헤더] │
├─────────────────────────────────────────────────┤
│ │
│ 메인 컨텐츠 영역 │
│ │
├─────────────────────────────────────────────────┤
│ [아이콘] [아이콘] [센터] [아이콘] [아이콘] │
│ 탭1 탭2 탭3 탭4 탭5 │
│ ^^^^ │
│ (크게, 강조 배경) │
└─────────────────────────────────────────────────┘
```
**하단 탭바**
| # | 탭 | 아이콘 | 경로 | 뱃지 |
|---|-----|------|-----|------|
@@ -28,18 +82,6 @@
| 4 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
| 5 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
### 탭바 레이아웃
```
┌─────────────────────────────────────────────────┐
│ │
│ [아이콘] [아이콘] [센터] [아이콘] [아이콘] │
│ 탭1 탭2 탭3 탭4 탭5 │
│ ^^^^ │
│ (크게, 강조 배경) │
└─────────────────────────────────────────────────┘
```
---
## 화면 목록