detail update
This commit is contained in:
@@ -183,13 +183,23 @@ Read files from `docs/`:
|
||||
|
||||
**출력 디렉토리**: `docs/ui/`
|
||||
|
||||
#### 4-1. router.md (라우터 & UI 목록)
|
||||
**파일 구조**:
|
||||
```
|
||||
docs/ui/
|
||||
├── router.md # 라우터 구조 정의
|
||||
├── main.md # 메인 구조 개요
|
||||
├── [screen1].md # 화면1 상세 문서
|
||||
├── [screen2].md # 화면2 상세 문서
|
||||
└── ... # 각 화면별 상세 문서
|
||||
```
|
||||
|
||||
#### 4-1. router.md (라우터 구조)
|
||||
|
||||
**File**: `docs/ui/router.md`
|
||||
|
||||
**템플릿**: `.specify/templates/ui-router.md` 참조
|
||||
|
||||
플랫폼에 따라 다른 섹션 포함:
|
||||
라우터 구조와 화면 목록만 간결하게 정의:
|
||||
- **웹**: 헤더 네비게이션, 사이드바, 반응형 레이아웃
|
||||
- **모바일**: 탭바, 스택 네비게이션, 모달
|
||||
|
||||
@@ -265,43 +275,19 @@ Read files from `docs/`:
|
||||
|
||||
## 화면 목록
|
||||
|
||||
### 1. [탭명] 탭
|
||||
### 탭/메인 화면
|
||||
|
||||
| 항목 | 내용 |
|
||||
|-----|------|
|
||||
| 경로 | `/[경로]` |
|
||||
| 탭바 | [탭] (활성) |
|
||||
| 역할 | [역할 설명] |
|
||||
| # | 화면명 | 경로 | 파일 | 설명 |
|
||||
|---|-------|-----|------|------|
|
||||
| 1 | [화면1] | `/[경로]` | `[screen1].md` | [설명] |
|
||||
| 2 | [화면2] | `/[경로]` | `[screen2].md` | [설명] |
|
||||
|
||||
#### 컴포넌트
|
||||
### 상세 화면
|
||||
|
||||
| ID | 유형 | 이름 | 설명 |
|
||||
|----|-----|-----|------|
|
||||
| `[id]-header` | Header | 상단 헤더 | [설명] |
|
||||
| `[id]-list` | List | 목록 | [설명] |
|
||||
| `[id]-item` | Card | 아이템 | [설명] |
|
||||
|
||||
#### 팝업/모달
|
||||
|
||||
| ID | 유형 | 트리거 | 설명 |
|
||||
|----|-----|-------|------|
|
||||
| `popup-[name]` | Modal | [트리거] | [설명] |
|
||||
|
||||
---
|
||||
|
||||
### 2. [화면명] 상세
|
||||
|
||||
| 항목 | 내용 |
|
||||
|-----|------|
|
||||
| 경로 | `/[경로]/:id` |
|
||||
| 진입 | [어디서] (Push) |
|
||||
|
||||
#### 컴포넌트
|
||||
|
||||
| ID | 유형 | 이름 | 설명 |
|
||||
|----|-----|-----|------|
|
||||
| `detail-header` | Header | 헤더 | [설명] |
|
||||
| `detail-content` | Display | 컨텐츠 | [설명] |
|
||||
| # | 화면명 | 경로 | 파일 | 진입점 |
|
||||
|---|-------|-----|------|-------|
|
||||
| 1 | [화면1 상세] | `/[경로]/:id` | `[screen1-detail].md` | [진입점] |
|
||||
| 2 | [화면2 상세] | `/[경로]/:id` | `[screen2-detail].md` | [진입점] |
|
||||
|
||||
---
|
||||
|
||||
@@ -533,30 +519,183 @@ interface [Response] {
|
||||
- [ ] [항목 2]
|
||||
```
|
||||
|
||||
#### 4-3. [화면별 상세 문서] (예: friends.md, chat.md 등)
|
||||
|
||||
**File**: `docs/ui/[screen].md`
|
||||
|
||||
각 화면별로 독립적인 상세 문서를 생성합니다.
|
||||
|
||||
**템플릿**:
|
||||
|
||||
```markdown
|
||||
# [서비스명] - [화면명]
|
||||
|
||||
## 화면 개요
|
||||
|
||||
| 항목 | 내용 |
|
||||
|-----|------|
|
||||
| 경로 | `/[경로]` |
|
||||
| 탭/섹션 | [탭/섹션명] |
|
||||
| 목적 | [화면의 목적] |
|
||||
| 핵심 액션 | [주요 사용자 액션] |
|
||||
| UI 컨셉 | [UI 스타일 및 레퍼런스] |
|
||||
|
||||
---
|
||||
|
||||
### 5. 완료 리포트
|
||||
## 레이아웃 구조
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ [상단 영역] │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ [메인 컨텐츠 영역] │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ [하단 영역] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 컴포넌트 구성
|
||||
|
||||
### 헤더 영역
|
||||
|
||||
| ID | 유형 | 이름 | 설명 | 액션 |
|
||||
|----|-----|-----|------|-----|
|
||||
| `[screen]-header` | Header | 헤더 | [설명] | [액션] |
|
||||
|
||||
### 메인 컨텐츠
|
||||
|
||||
| ID | 유형 | 이름 | 설명 | 상태 |
|
||||
|----|-----|-----|------|------|
|
||||
| `[screen]-list` | List | 목록 | [설명] | Empty/Loading/Error |
|
||||
| `[screen]-item` | Card | 아이템 | [설명] | - |
|
||||
|
||||
### 인터랙션 요소
|
||||
|
||||
| ID | 유형 | 트리거 | 액션 | 결과 |
|
||||
|----|-----|-------|-----|------|
|
||||
| `btn-[action]` | Button | 클릭 | [액션] | [결과] |
|
||||
|
||||
### 팝업/모달
|
||||
|
||||
| ID | 유형 | 트리거 | 설명 |
|
||||
|----|-----|-------|------|
|
||||
| `popup-[name]` | Modal | [트리거] | [설명] |
|
||||
|
||||
---
|
||||
|
||||
## 상태별 UI
|
||||
|
||||
### Empty State
|
||||
[아이템이 없을 때]
|
||||
|
||||
### Loading State
|
||||
[로딩 중일 때]
|
||||
|
||||
### Error State
|
||||
[에러 발생 시]
|
||||
|
||||
---
|
||||
|
||||
## 데이터 요구사항
|
||||
|
||||
### API 엔드포인트
|
||||
|
||||
```
|
||||
GET /api/[endpoint]
|
||||
POST /api/[endpoint]
|
||||
```
|
||||
|
||||
### 데이터 모델
|
||||
|
||||
```typescript
|
||||
interface [Model] {
|
||||
[field]: [type];
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 네비게이션
|
||||
|
||||
### 진입 경로
|
||||
- [어디서] → [이 화면]
|
||||
|
||||
### 이동 경로
|
||||
- [액션] → [다른 화면]
|
||||
|
||||
---
|
||||
|
||||
## 정책 연결
|
||||
|
||||
| 정책 ID | 정책명 | 적용 위치 |
|
||||
|--------|-------|---------|
|
||||
| [POL-001] | [정책명] | [컴포넌트 ID] |
|
||||
|
||||
---
|
||||
|
||||
## 구현 노트
|
||||
|
||||
### Phase 1 (필수)
|
||||
- [ ] [기본 기능]
|
||||
|
||||
### Phase 2 (선택)
|
||||
- [ ] [추가 기능]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. 화면별 상세 문서 생성 프로세스
|
||||
|
||||
**사용자 입력에 따라**:
|
||||
|
||||
1. **입력 없음 또는 "all"**:
|
||||
- `router.md` 생성
|
||||
- `main.md` 생성
|
||||
- 모든 주요 화면별 상세 문서 생성 (예: `friends.md`, `chat.md`, `progress.md` 등)
|
||||
|
||||
2. **특정 화면명 입력 (예: "친구", "채팅")**:
|
||||
- 해당 화면의 상세 문서만 생성/업데이트
|
||||
- 기존 `router.md`의 해당 화면 정보와 일관성 유지
|
||||
|
||||
**생성할 화면 문서 예시**:
|
||||
- `friends.md` - 친구 탭
|
||||
- `chat-list.md` - 채팅 목록
|
||||
- `chat.md` - 채팅방 상세
|
||||
- `progress.md` - 진행 탭
|
||||
- `shop.md` - 쇼핑 탭
|
||||
- `more.md` - 더보기 탭
|
||||
- `settings.md` - 설정 화면
|
||||
|
||||
---
|
||||
|
||||
### 6. 완료 리포트
|
||||
|
||||
```
|
||||
✅ 화면설계서 작성 완료!
|
||||
|
||||
📁 생성된 파일:
|
||||
- docs/ui/router.md
|
||||
- docs/ui/main.md
|
||||
- docs/ui/router.md (라우터 구조)
|
||||
- docs/ui/main.md (메인 구조)
|
||||
- docs/ui/[screen1].md (화면1 상세)
|
||||
- docs/ui/[screen2].md (화면2 상세)
|
||||
- ... (총 N개 화면 문서)
|
||||
|
||||
📊 요약:
|
||||
- 플랫폼: [Web / Mobile App]
|
||||
- 화면/섹션: N개
|
||||
- 컴포넌트: N개
|
||||
- 화면 문서: N개
|
||||
- 전체 컴포넌트: N개
|
||||
|
||||
📝 다음 단계:
|
||||
|
||||
**Step 4 - 정책설계서 (/appkit.policy)**
|
||||
/appkit.policy
|
||||
|
||||
**Step 5 - HTML 목업 (/appkit.visualize)**
|
||||
/appkit.visualize home
|
||||
/appkit.visualize all
|
||||
**Step 5 - HTML 목업 + 통합 뷰어 (/appkit.visualize)**
|
||||
/appkit.visualize # 통합 뷰어(index.html) + 모든 화면 목업 자동 생성
|
||||
|
||||
📍 현재 위치: Step 3/5 완료
|
||||
```
|
||||
|
||||
@@ -8,7 +8,13 @@ description: 목업 생성 - HTML 기반 라이브 프로토타입 UI 생성
|
||||
$ARGUMENTS
|
||||
```
|
||||
|
||||
User input should be a screen name (e.g., "home", "chat", "booking") or "all" for all screens.
|
||||
**이 명령어는 인자를 받지 않습니다.**
|
||||
사용자가 `/appkit.visualize`를 실행하면 자동으로:
|
||||
- `index.html` (통합 뷰어)
|
||||
- 모든 화면 목업 (`.html` 파일들)
|
||||
- 공통 스타일/스크립트 파일
|
||||
|
||||
모두 생성합니다.
|
||||
|
||||
## Overview
|
||||
|
||||
@@ -26,7 +32,10 @@ User input should be a screen name (e.g., "home", "chat", "booking") or "all" fo
|
||||
|
||||
## Purpose
|
||||
|
||||
router.md와 policy 문서를 기반으로 실제 동작하는 HTML 목업을 생성합니다.
|
||||
UI 설계서(`docs/ui/*.md`)와 정책 설계서(`docs/policies/*.md`)를 기반으로:
|
||||
1. 실제 동작하는 HTML 목업을 생성합니다
|
||||
2. **통합 뷰어(index.html)**: UI 설계서, 정책 설계서, 목업을 한 곳에서 볼 수 있는 인터랙티브 문서 생성
|
||||
|
||||
브라우저에서 바로 확인할 수 있는 라이브 프로토타입입니다.
|
||||
|
||||
---
|
||||
@@ -34,19 +43,24 @@ router.md와 policy 문서를 기반으로 실제 동작하는 HTML 목업을
|
||||
## Pre-requisite
|
||||
|
||||
- `/appkit.ui`로 화면설계가 되어 있어야 함
|
||||
- `router.md` 파일이 존재해야 함
|
||||
- `docs/ui/router.md` 파일이 존재해야 함
|
||||
- `docs/ui/main.md` 파일이 존재해야 함
|
||||
- `docs/ui/[screen].md` 화면별 상세 문서가 존재해야 함
|
||||
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
/appkit.visualize home # 홈 화면 목업
|
||||
/appkit.visualize chat # 채팅 화면 목업
|
||||
/appkit.visualize all # 전체 화면 목업
|
||||
/appkit.visualize "예약 상세" # 특정 화면 목업
|
||||
/appkit.visualize # 통합 뷰어(index.html) + 모든 화면 목업 생성
|
||||
```
|
||||
|
||||
**자동 생성 항목:**
|
||||
1. `docs/mockup/index.html` - 통합 뷰어 (UI 설계서 + 정책 설계서 + 목업 링크)
|
||||
2. `docs/mockup/[screen].html` - 모든 화면 목업
|
||||
3. `docs/mockup/styles.css` - 공통 스타일
|
||||
4. `docs/mockup/scripts.js` - 공통 스크립트
|
||||
|
||||
---
|
||||
|
||||
## Execution Flow
|
||||
@@ -54,37 +68,99 @@ router.md와 policy 문서를 기반으로 실제 동작하는 HTML 목업을
|
||||
### 1. 기존 기획 읽기
|
||||
|
||||
Read files from `docs/`:
|
||||
- `router.md` - 라우터 및 UI 목록
|
||||
- `main.md` - 메인 구조
|
||||
- `ui/router.md` - 라우터 및 화면 목록
|
||||
- `ui/main.md` - 메인 구조
|
||||
- `ui/*.md` - 각 화면별 상세 문서
|
||||
- `policies/*.md` - 정책 문서
|
||||
|
||||
### 2. 목업 생성 대화
|
||||
### 2. 통합 뷰어 (index.html) 생성
|
||||
|
||||
**Step 1: 화면 확인**
|
||||
**최우선 작업**: `docs/mockup/index.html` 생성/업데이트
|
||||
|
||||
```markdown
|
||||
## 목업 생성
|
||||
통합 뷰어는 다음을 포함:
|
||||
1. **UI 설계서 뷰어**: `docs/ui/*.md` 파일들을 읽어서 화면별 탭으로 표시
|
||||
2. **정책 설계서 뷰어**: `docs/policies/*.md` 파일들을 읽어서 정책별 탭으로 표시
|
||||
3. **목업 링크**: 생성된 HTML 목업으로 바로 이동할 수 있는 네비게이션
|
||||
|
||||
router.md에서 확인된 화면 목록:
|
||||
**index.html 구조**:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<title>[서비스명] - 통합 문서 뷰어</title>
|
||||
<!-- 스타일 -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- 상단 네비게이션 -->
|
||||
<nav>
|
||||
<button data-tab="ui">UI 설계서</button>
|
||||
<button data-tab="policies">정책 설계서</button>
|
||||
<button data-tab="mockups">목업</button>
|
||||
</nav>
|
||||
|
||||
| 화면 | 경로 | 생성 여부 |
|
||||
|-----|------|----------|
|
||||
| home | `/` | ⬜ |
|
||||
| chat-list | `/chat` | ⬜ |
|
||||
| chat-room | `/chat/:id` | ⬜ |
|
||||
| shop | `/shop` | ⬜ |
|
||||
<!-- UI 설계서 탭 -->
|
||||
<section id="ui-tab">
|
||||
<aside>
|
||||
<!-- docs/ui/*.md 파일 목록 -->
|
||||
</aside>
|
||||
<main>
|
||||
<!-- 선택된 MD 파일 내용 (HTML 변환) -->
|
||||
</main>
|
||||
</section>
|
||||
|
||||
어떤 화면을 생성할까요?
|
||||
<!-- 정책 설계서 탭 -->
|
||||
<section id="policies-tab">
|
||||
<aside>
|
||||
<!-- docs/policies/*.md 파일 목록 -->
|
||||
</aside>
|
||||
<main>
|
||||
<!-- 선택된 정책 MD 파일 내용 (HTML 변환) -->
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<!-- 목업 탭 -->
|
||||
<section id="mockups-tab">
|
||||
<div class="mockup-grid">
|
||||
<!-- 각 화면 목업으로 가는 카드 링크 -->
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Step 2: 사용자 선택**
|
||||
**구현 방식**:
|
||||
- Markdown 파일을 JavaScript로 읽어서 HTML로 변환
|
||||
- 또는 빌드 시점에 모든 MD를 HTML로 변환하여 포함
|
||||
|
||||
- 특정 화면명 → 해당 화면만 생성
|
||||
- "all", "전체" → 모든 화면 생성
|
||||
---
|
||||
|
||||
### 3. HTML 목업 파일 생성
|
||||
### 3. 자동 화면 목업 생성
|
||||
|
||||
#### 3-1. 기본 구조
|
||||
**자동으로 수행:**
|
||||
|
||||
1. `docs/ui/` 디렉토리에서 모든 `.md` 파일 스캔
|
||||
2. `router.md`, `main.md`를 제외한 모든 화면 문서 감지
|
||||
3. 각 화면별 HTML 목업 자동 생성
|
||||
|
||||
```markdown
|
||||
## 목업 생성 시작
|
||||
|
||||
docs/ui/에서 확인된 화면 문서:
|
||||
|
||||
| 화면 | 파일 | 목업 |
|
||||
|-----|------|-----|
|
||||
| 친구 | `friends.md` | `friends.html` |
|
||||
| 채팅 목록 | `chat-list.md` | `chat-list.html` |
|
||||
| 채팅방 | `chat.md` | `chat.html` |
|
||||
| 진행 | `progress.md` | `progress.html` |
|
||||
| 쇼핑 | `shop.md` | `shop.html` |
|
||||
|
||||
모든 화면 목업을 생성합니다...
|
||||
```
|
||||
|
||||
### 4. 화면별 HTML 목업 파일 생성
|
||||
|
||||
#### 4-1. 기본 구조
|
||||
|
||||
**File**: `docs/mockup/[screen].html`
|
||||
|
||||
@@ -132,7 +208,7 @@ router.md에서 확인된 화면 목록:
|
||||
</html>
|
||||
```
|
||||
|
||||
#### 3-2. 공통 스타일시트 (styles.css)
|
||||
#### 4-2. 공통 스타일시트 (styles.css)
|
||||
|
||||
```css
|
||||
/* Reset & Base */
|
||||
@@ -346,7 +422,7 @@ body {
|
||||
}
|
||||
```
|
||||
|
||||
#### 3-3. 공통 스크립트 (scripts.js)
|
||||
#### 4-3. 공통 스크립트 (scripts.js)
|
||||
|
||||
```javascript
|
||||
// Modal Functions
|
||||
@@ -386,40 +462,51 @@ function updateBadge(tabId, count) {
|
||||
|
||||
---
|
||||
|
||||
### 4. 화면별 목업 생성
|
||||
### 5. 화면별 목업 생성 규칙
|
||||
|
||||
각 화면에 대해 router.md의 컴포넌트 정보를 기반으로 HTML 생성:
|
||||
각 화면에 대해 `docs/ui/[screen].md`의 컴포넌트 정보를 기반으로 HTML 생성:
|
||||
|
||||
1. **헤더 영역**: `[screen]-header` 컴포넌트들
|
||||
2. **메인 콘텐츠**: `[screen]-content` 내 컴포넌트들
|
||||
3. **탭바**: 전역 탭바 (현재 탭 active 표시)
|
||||
4. **팝업/모달**: `popup-*`, `bs-*` 컴포넌트들
|
||||
|
||||
### 5. 완료 리포트
|
||||
### 6. 완료 리포트
|
||||
|
||||
```
|
||||
✅ 목업 생성 완료!
|
||||
|
||||
📁 생성된 파일:
|
||||
- mockup/home.html
|
||||
- mockup/index.html (통합 뷰어 - UI 설계서 + 정책 + 목업 링크) ⭐
|
||||
- mockup/friends.html
|
||||
- mockup/chat-list.html
|
||||
- mockup/chat.html
|
||||
- mockup/progress.html
|
||||
- mockup/shop.html
|
||||
- ... (총 N개 화면)
|
||||
- mockup/styles.css
|
||||
- mockup/scripts.js
|
||||
|
||||
🌐 브라우저에서 확인:
|
||||
file:///Users/.../ui/works/mockup/home.html
|
||||
|
||||
**📚 통합 뷰어 (여기서 시작하세요!)**
|
||||
file:///Users/.../docs/mockup/index.html
|
||||
|
||||
📊 생성 요약:
|
||||
- HTML 파일: N개
|
||||
- 컴포넌트: N개
|
||||
- 모달/팝업: N개
|
||||
- 통합 뷰어: 1개 (index.html)
|
||||
- 화면 목업: N개
|
||||
- UI 설계서: N개 문서 포함
|
||||
- 정책 설계서: N개 문서 포함
|
||||
- 전체 컴포넌트: N개
|
||||
|
||||
📝 참고:
|
||||
- 각 화면은 상호 링크되어 있습니다
|
||||
- 팝업은 JavaScript로 동작합니다
|
||||
- **index.html**에서 모든 설계 문서와 목업을 한 곳에서 확인할 수 있습니다
|
||||
- 각 화면 목업은 상호 링크되어 네비게이션 테스트가 가능합니다
|
||||
- 정책 문서와 연결된 UI 요소에는 정책 ID 주석이 포함되어 있습니다
|
||||
|
||||
📍 현재 위치: Step 5/5 완료!
|
||||
|
||||
🎉 이제 프로젝트 전체 문서를 index.html에서 확인하세요!
|
||||
```
|
||||
|
||||
---
|
||||
@@ -427,7 +514,7 @@ file:///Users/.../ui/works/mockup/home.html
|
||||
## 목업 생성 원칙
|
||||
|
||||
### Do's
|
||||
- ✅ **router.md 기반**: 모든 컴포넌트 ID와 구조 준수
|
||||
- ✅ **docs/ui/router.md 기반**: 모든 컴포넌트 ID와 구조 준수
|
||||
- ✅ **정책 연결**: UI에 적용되는 정책 ID 주석 추가
|
||||
- ✅ **상호 링크**: 화면 간 네비게이션 동작
|
||||
- ✅ **상태 표시**: Empty, Loading, Error 상태 시뮬레이션
|
||||
@@ -436,7 +523,7 @@ file:///Users/.../ui/works/mockup/home.html
|
||||
### Don'ts
|
||||
- ❌ **과도한 디자인**: 와이어프레임 수준 유지
|
||||
- ❌ **하드코딩**: 데이터는 의미있는 샘플로
|
||||
- ❌ **누락**: router.md에 정의된 컴포넌트 누락 금지
|
||||
- ❌ **누락**: docs/ui/router.md에 정의된 컴포넌트 누락 금지
|
||||
|
||||
---
|
||||
|
||||
@@ -460,25 +547,43 @@ file:///Users/.../ui/works/mockup/home.html
|
||||
## Example
|
||||
|
||||
```
|
||||
$ /appkit.visualize home
|
||||
$ /appkit.visualize
|
||||
|
||||
🎨 목업 생성: home
|
||||
🎨 통합 뷰어 + 전체 목업 생성
|
||||
|
||||
router.md에서 컴포넌트 확인:
|
||||
- home-header (Header)
|
||||
- home-stats (Card)
|
||||
- home-quick-status (Display)
|
||||
- tab-bar (TabBar)
|
||||
- popup-new-message (Modal)
|
||||
- popup-life-stage (Modal)
|
||||
📚 UI 설계서 읽기:
|
||||
- docs/ui/router.md
|
||||
- docs/ui/main.md
|
||||
- docs/ui/friends.md
|
||||
- docs/ui/chat-list.md
|
||||
- docs/ui/chat.md
|
||||
- docs/ui/progress.md
|
||||
- docs/ui/shop.md
|
||||
|
||||
정책 적용:
|
||||
- [MN-001] 채팅권 잔액 표시 → header
|
||||
- [GM-001] 모드 전환 → header
|
||||
📋 정책 설계서 읽기:
|
||||
- docs/policies/01-monetization.md
|
||||
- docs/policies/02-gameplay.md
|
||||
- docs/policies/03-dating.md
|
||||
|
||||
✅ home.html 생성 완료
|
||||
✅ styles.css 업데이트
|
||||
✅ scripts.js 업데이트
|
||||
🌐 통합 뷰어 생성:
|
||||
✅ mockup/index.html 생성
|
||||
- UI 설계서 뷰어 (7개 문서)
|
||||
- 정책 설계서 뷰어 (3개 문서)
|
||||
- 목업 네비게이션
|
||||
|
||||
🌐 file:///Users/.../ui/works/mockup/home.html
|
||||
📱 화면 목업 생성:
|
||||
✅ mockup/friends.html
|
||||
✅ mockup/chat-list.html
|
||||
✅ mockup/chat.html
|
||||
✅ mockup/progress.html
|
||||
✅ mockup/shop.html
|
||||
✅ mockup/styles.css
|
||||
✅ mockup/scripts.js
|
||||
|
||||
🌐 브라우저에서 확인:
|
||||
📚 file:///Users/.../docs/mockup/index.html
|
||||
|
||||
💡 Tip:
|
||||
- index.html을 열면 모든 UI 설계서, 정책, 목업을 한 곳에서 볼 수 있습니다
|
||||
- 각 화면 목업은 상호 링크되어 있어 네비게이션 테스트가 가능합니다
|
||||
```
|
||||
|
||||
1
.serena/.gitignore
vendored
Normal file
1
.serena/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/cache
|
||||
84
.serena/project.yml
Normal file
84
.serena/project.yml
Normal file
@@ -0,0 +1,84 @@
|
||||
# list of languages for which language servers are started; choose from:
|
||||
# al bash clojure cpp csharp csharp_omnisharp
|
||||
# dart elixir elm erlang fortran go
|
||||
# haskell java julia kotlin lua markdown
|
||||
# nix perl php python python_jedi r
|
||||
# rego ruby ruby_solargraph rust scala swift
|
||||
# terraform typescript typescript_vts yaml zig
|
||||
# Note:
|
||||
# - For C, use cpp
|
||||
# - For JavaScript, use typescript
|
||||
# Special requirements:
|
||||
# - csharp: Requires the presence of a .sln file in the project folder.
|
||||
# When using multiple languages, the first language server that supports a given file will be used for that file.
|
||||
# The first language is the default language and the respective language server will be used as a fallback.
|
||||
# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
|
||||
languages:
|
||||
- typescript
|
||||
|
||||
# the encoding used by text files in the project
|
||||
# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
|
||||
encoding: "utf-8"
|
||||
|
||||
# whether to use the project's gitignore file to ignore files
|
||||
# Added on 2025-04-07
|
||||
ignore_all_files_in_gitignore: true
|
||||
|
||||
# list of additional paths to ignore
|
||||
# same syntax as gitignore, so you can use * and **
|
||||
# Was previously called `ignored_dirs`, please update your config if you are using that.
|
||||
# Added (renamed) on 2025-04-07
|
||||
ignored_paths: []
|
||||
|
||||
# whether the project is in read-only mode
|
||||
# If set to true, all editing tools will be disabled and attempts to use them will result in an error
|
||||
# Added on 2025-04-18
|
||||
read_only: false
|
||||
|
||||
# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
|
||||
# Below is the complete list of tools for convenience.
|
||||
# To make sure you have the latest list of tools, and to view their descriptions,
|
||||
# execute `uv run scripts/print_tool_overview.py`.
|
||||
#
|
||||
# * `activate_project`: Activates a project by name.
|
||||
# * `check_onboarding_performed`: Checks whether project onboarding was already performed.
|
||||
# * `create_text_file`: Creates/overwrites a file in the project directory.
|
||||
# * `delete_lines`: Deletes a range of lines within a file.
|
||||
# * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
|
||||
# * `execute_shell_command`: Executes a shell command.
|
||||
# * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
|
||||
# * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
|
||||
# * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
|
||||
# * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
|
||||
# * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
|
||||
# * `initial_instructions`: Gets the initial instructions for the current project.
|
||||
# Should only be used in settings where the system prompt cannot be set,
|
||||
# e.g. in clients you have no control over, like Claude Desktop.
|
||||
# * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
|
||||
# * `insert_at_line`: Inserts content at a given line in a file.
|
||||
# * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
|
||||
# * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
|
||||
# * `list_memories`: Lists memories in Serena's project-specific memory store.
|
||||
# * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
|
||||
# * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
|
||||
# * `read_file`: Reads a file within the project directory.
|
||||
# * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
|
||||
# * `remove_project`: Removes a project from the Serena configuration.
|
||||
# * `replace_lines`: Replaces a range of lines within a file with new content.
|
||||
# * `replace_symbol_body`: Replaces the full definition of a symbol.
|
||||
# * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
|
||||
# * `search_for_pattern`: Performs a search for a pattern in the project.
|
||||
# * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
|
||||
# * `switch_modes`: Activates modes by providing a list of their names
|
||||
# * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
|
||||
# * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
|
||||
# * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
|
||||
# * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
|
||||
excluded_tools: []
|
||||
|
||||
# initial prompt for the project. It will always be given to the LLM upon activating the project
|
||||
# (contrary to the memories, which are loaded on demand).
|
||||
initial_prompt: ""
|
||||
|
||||
project_name: "appkit"
|
||||
included_optional_tools: []
|
||||
Reference in New Issue
Block a user