From 5bafb0d5676499014589c32d50027151bafaa8e2 Mon Sep 17 00:00:00 2001 From: rupy1014 Date: Mon, 15 Dec 2025 08:53:23 +0900 Subject: [PATCH] detail update --- .DS_Store | Bin 6148 -> 6148 bytes .claude/commands/appkit.ui.md | 227 +++++++++++++++++++++------ .claude/commands/appkit.visualize.md | 217 ++++++++++++++++++------- .serena/.gitignore | 1 + .serena/project.yml | 84 ++++++++++ 5 files changed, 429 insertions(+), 100 deletions(-) create mode 100644 .serena/.gitignore create mode 100644 .serena/project.yml diff --git a/.DS_Store b/.DS_Store index ca2b7874ee44cef1857d5487e8c8184223131c55..22d2e180e7d77714b6fdc5056300c90232ab736e 100644 GIT binary patch literal 6148 zcmeHKPiP!f82^5oO*_*J=A}(EO|x~&s+82=8Z0P9yCxe+%+`b^G3g(Y%Zy?0QaySoLg}F(h$q3Tm(us5NZxjG-_opC=;cwZi`L~2?GfOj~fH( z-A$820aZx+|NSl3JXeJI{2ioP(ye>;8s@$>%X%s^GCK11Sn1R}V=IE6=AIq84PLZE zF6LRgSPE80D}g^z=M9&y&Qt<#rRqyhN5%FkD>9hB>3NgxIu~c{wJE+9sEuB|}Q-R~Y=Ss`6>pN4vUFCDi zT(U(tUgJJ@ZXN77)SEeMWoH_$aLXQ_UUi*t>5MHZ+;?1maatzwHKPMBnryF*&RNeJ z%rRN3R*zbJ1{*Wk9K==pXuz?x76~U3d=tIF1t-#u!Q%#{^E}9L{47^RV$g zmQjU|8a}`}F5n_Q#K-sqpW-uojxTTtU*ao#gKzO2F5`Rrh%5LBKVt*ea2+>r6Tjkj z+{T~y8~^G(rex8Hc(W<_X2-WIyd9DhVNP}ro(94wG1Q&PZ&rT*ogu4 zeaOnDun=QYWAy2eo%(%H{U2W1vYaPg8SxDTI-QV>!U+Y9NuMx~FtC+@7OgT>|A%+J|8Gr7w1k0#fhURqq>Gcq zL3yOOwr)F|s)O8l^=_@*@z@kaP(H HkCcJ?y#CNb delta 80 zcmZoMXfc=|#>AjHu~2yO12!2!CI$##1X4gOz_9r(n-t?_1rBzWjSYQFo7p+|Ie^MH c3vzsCp3E + + + [서비스명] - 통합 문서 뷰어 + + + + + -| 화면 | 경로 | 생성 여부 | -|-----|------|----------| -| home | `/` | ⬜ | -| chat-list | `/chat` | ⬜ | -| chat-room | `/chat/:id` | ⬜ | -| shop | `/shop` | ⬜ | + +
+ +
+ +
+
-어떤 화면을 생성할까요? + +
+ +
+ +
+
+ + +
+
+ +
+
+ + ``` -**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에서 확인된 화면 목록: ``` -#### 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 설계서, 정책, 목업을 한 곳에서 볼 수 있습니다 +- 각 화면 목업은 상호 링크되어 있어 네비게이션 테스트가 가능합니다 ``` diff --git a/.serena/.gitignore b/.serena/.gitignore new file mode 100644 index 0000000..14d86ad --- /dev/null +++ b/.serena/.gitignore @@ -0,0 +1 @@ +/cache diff --git a/.serena/project.yml b/.serena/project.yml new file mode 100644 index 0000000..e30578d --- /dev/null +++ b/.serena/project.yml @@ -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: []