ai-code-app/features/layout/feature-menu/resources/feature-menu-implementation.md

기능설명 관리 패키지 개발 완료 문서

반영 내용

• 상단 description 요약 영역을 제거했다.
• 상단 필터에는 Codex 실행 아이콘 버튼만 유지했다.
• 상단 필터의 두번째 선택은 기능설명 선택으로 유지하고, 제목은 드롭다운 항목명으로만 유지하게 바꿨다.
• 본문은 기능설명 입력, Codex 설명 탭으로 구성했다.
• 후속 단순화 요청에 따라 기능설명 입력 탭의 제목 input은 제거하고 textarea 하나만 남겼다.
• 추가, 저장, 삭제 아이콘 액션은 두번째 섹션 상단으로 옮겼다.
• 편집영역 툴바에 문구 없는 입력 최대화 아이콘 토글을 추가했다.
• 기능설명 입력 textarea는 편집 영역의 남는 세로 공간을 100% 채우도록 다시 조정했다.
• 모바일에서는 편집 필드를 grid 행으로 재구성하고 툴바/탭/입력 패딩을 더 줄여 textarea가 부모 영역을 넘치지 않게 조정했다.
• 이번 수정에서는 편집 셸과 탭 본문 자체를 minmax(0, 1fr) 기반 grid로 다시 묶고, textarea를 남은 높이만 채우는 방식으로 바꿨다.
• 후속 미세조정으로 모바일 textarea는 calc(100% - 52px)까지만 차도록 다시 줄여, 하단 테두리가 화면 안에서 분명히 보이도록 맞췄다.
• 추가 미세조정으로 모바일 wrapper 자체가 덜 눌려 보이도록 페이지/편집 셸 패딩과 탭 간격을 한 번 더 줄이고, textarea는 calc(100% - 60px)까지만 차도록 낮췄다.
• 이번 후속 수정에서는 textarea 자체보다 부모 wrapper가 길게 늘어난 점을 기준으로, 모바일에서 루트/편집 셸/탭/입력 필드의 1fr 확장을 풀고 내용 기준 높이로 다시 줄였다.
• 이번 최신 수정에서는 너무 줄어든 모바일 높이를 다시 되돌려, 루트/편집 셸/탭/입력 필드를 auto + 1fr 채움 구조로 복구하고 바깥 패딩, 탭 간격, notes 하단 padding만 더 줄였다.
• 이번 최신 미세조정에서는 부모 카드가 덜 잘리고 textarea는 조금 더 다시 커지도록, 모바일 편집 셸 높이는 30px 안쪽으로만 줄이고 제목행/툴바/탭 간격을 더 압축한 뒤 textarea와 Codex 설명 패널 높이는 각각 30px 안쪽 기준으로 다시 맞췄다.
• 이번 최신 재조정에서는 부모 카드 하단선을 더 확실히 보이게 하려고 모바일 편집 셸 높이 감산을 42px로 늘리고, 대신 textarea와 Codex 설명 패널 높이 감산은 24px로만 유지해 입력 높이 손실을 최소화했다.
• 이번 최신 재조정에서는 wrapper 하단선이 실제로 보이도록 모바일 편집 셸 감산을 56px로 더 키우고, 대신 필터/툴바/탭/제목행 고정 높이를 더 줄인 뒤 textarea와 Codex 설명 패널 감산은 20px로만 유지했다.
• 이번 최신 후속 조정에서는 아이폰 12 Pro 실기기 캡처 기준으로 하단 safe-area 여유와 편집 셸 감산이 과하다고 보고, 모바일 페이지 하단 padding을 calc(4px + env(safe-area-inset-bottom))로 줄이고 편집 셸 감산도 44px로 낮췄다. 동시에 입력/설명 패널 감산은 12px로 완화해 두번째 카드가 더 아래까지 늘어나도록 다시 키웠다.
• 이번 추가 보정은 원복 요청에 따라 되돌렸고, 모바일 기준은 다시 아이폰 12 Pro 실기기 캡처를 따라 페이지 하단 padding calc(4px + env(safe-area-inset-bottom)), 편집 셸 감산 44px, 입력/설명 패널 감산 12px 조합으로 복구했다.
• 이번 최신 조정에서는 모바일 하단 여백을 더 줄여달라는 요청에 맞춰 페이지 하단 padding을 calc(2px + env(safe-area-inset-bottom))로 더 낮추고, 편집 셸 감산을 24px, 입력/설명 패널 감산을 4px로 완화해 wrapper와 textarea를 함께 다시 키웠다.
• play-saved 모바일 레이아웃도 헤더 높이를 52px 기준으로 맞춰 상단 가림을 제거했다.
• 진입 직후에는 현재 메뉴 레이아웃 ID를 먼저 선택하도록 바꿔, 이전 다른 레이아웃이 기본값으로 먼저 보이지 않게 맞췄다.
• 모바일 하단 여백처럼 보이던 현상은 페이지 루트가 height: 100% 상태에서 padding까지 바깥으로 더해지던 문제여서, 루트/편집 셸/탭 영역에 box-sizing: border-box를 맞춰 전체 레이아웃 overflow를 막았다.
• 빈 Codex 설명 탭에서는 설명성 문구를 제거했다.
• Codex Live 실패 응답 복구 로직은 src/app/main/mainChatPanel/chatUtils.ts에서 별도로 보완됐다.
• 최종 완료 기준 문서와 검증 이미지는 feature-menu 패키지 내부 resources/ 최종 경로로 이관했다.

산출물 위치

• 최종 설계 문서: resources/feature-menu-final.md
• 최종 분석 문서: resources/feature-menu-analysis.md
• 최종 preview 모바일: resources/verification/feature-menu-preview-mobile-final.png
• 최종 preview 데스크톱: resources/verification/feature-menu-preview-desktop-final.png
• test.sm-home.cloud 운영 비교 이미지: resources/verification/feature-menu-test-sm-home-mobile.png

검증 결과

• test.sm-home.cloud 모바일 재현에서는 textarea 하단이 편집 쉘 아래로 약 91px 넘치는 기존 상태를 다시 확인했다.
• 2026-05-03 로컬 preview 컨테이너(http://127.0.0.1:4173) 모바일 재검증에서는 tabs.bottom = 651, textarea.bottom = 651로 맞춰졌고, 마지막 줄까지 내부 스크롤로 확인됐다.
• 최종 반영 결과는 preview.sm-home.cloud 기준 모바일/데스크톱 캡처로 보관했다.
• 같은 날짜 후속 개선으로 루트/편집 셸/탭 본문을 다시 auto + minmax(0, 1fr) 구조로 복구하고, textarea를 autoSize 대신 탭 본문 남는 높이 전체를 채우는 방식으로 조정했다.
• 2026-05-03 로컬 preview 컨테이너(http://127.0.0.1:4173) 최종 재검증에서는 모바일 기준 bodyScrollHeight = 844, root.bottom = 844, textarea.bottom = 831, textarea.height = 487.17로 남는 공간을 채우면서도 페이지 바깥 overflow는 발생하지 않았다.
• 같은 날짜 추가 미세조정 뒤 로컬 preview 컨테이너(http://127.0.0.1:4173) 모바일 재검증에서는 bodyScrollHeight = 664, root.bottom = 664, textarea.bottom = 599, textarea.height = 255.17로 textarea 하단 여유를 더 확보했고, 페이지 바깥 overflow는 없었다.
• 같은 날짜 최신 재검증에서는 test.sm-home.cloud가 여전히 기존 번들로 textarea.bottom = 747.25인 반면, preview.sm-home.cloud 수정본은 shell.bottom = 660, tabs.bottom = 655, textarea.bottom = 595, textarea.height = 272.17로 wrapper 외곽과 하단 입력 영역이 더 안쪽에 들어오도록 정리됐다.
• 이번 후속 수정 검증은 동일한 모바일 문제 이미지 기준으로 부모 wrapper 하단의 과한 빈 영역이 사라졌는지 확인하는 것이 목적이다.
• 2026-05-03 로컬 preview 컨테이너(http://127.0.0.1:4173) 모바일 재검증에서는 shell.bottom = 547.83, tabs.bottom = 542.83, textarea.bottom = 542.83, textarea.height = 220으로 wrapper 자체가 이전보다 약 292px 짧아졌다.
• 같은 날짜 최신 재검증에서는 preview.sm-home.cloud 모바일 기준 shell.bottom = 840, tabs.bottom = 836, textarea.bottom = 836, textarea.height = 521.17로 다시 하단까지 거의 채우면서도 카드 외곽 하단 선이 캡처 안에서 유지됐다.
• 같은 날짜 최신 재검증에서는 preview.sm-home.cloud 모바일 기준 shell.bottom = 806, tabs.bottom = 801, textarea.bottom = 771, textarea.height = 455.17로 부모 카드 하단이 다시 화면 안에 들어오면서 textarea 높이도 이전 v30보다 187px 커졌다.
• 같은 날짜 최신 재검증에서는 preview.sm-home.cloud 모바일 기준 shell.bottom = 794, tabs.bottom = 789, textarea.bottom = 765, textarea.height = 449.17로 부모 카드 하단선을 v31보다 12px 더 위로 올리면서도 textarea 높이는 6px만 줄였다.
• 같은 날짜 최신 재검증에서는 preview.sm-home.cloud 모바일 기준 shell.bottom = 778, tabs.bottom = 774, textarea.bottom = 754, textarea.height = 447.17로 wrapper 하단선이 캡처 안에서 분명히 보이면서도 textarea 높이는 직전 대비 2px만 줄었다.
• 같은 날짜 원복 기준은 아이폰 12 Pro viewport에서 test.sm-home.cloud가 shell.bottom = 598, notes.bottom = 574인 반면, preview.sm-home.cloud 수정본은 shell.bottom = 616, notes.bottom = 600으로 두번째 카드가 실제로 더 아래까지 내려오던 시점의 값으로 맞춘다.
• 이번 최신 조정 검증은 모바일 wrapper와 textarea를 동시에 더 늘리는 것이 목적이며, preview.sm-home.cloud 기준으로 다시 확인한다.
• 같은 날짜 최신 v36 검증에서는 아이폰 12 Pro viewport 기준 preview.sm-home.cloud가 shell.bottom = 586, tabs.bottom = 582, textarea.bottom = 578, textarea.height = 323.17로 확인됐고, 같은 조건 test.sm-home.cloud는 shell.bottom = 564, tabs.bottom = 560, textarea.bottom = 548, textarea.height = 293.17이었다.
• 같은 날짜 데스크톱 preview.sm-home.cloud 재검증에서는 shell.bottom = 1088, tabs.bottom = 1077, textarea.bottom = 1077로 기존 데스크톱 채움 구조는 유지됐다.
• 같은 날짜 데스크톱 preview.sm-home.cloud 재검증에서는 shell.bottom = 1188, tabs.bottom = 1177, textarea.bottom = 1177로 데스크톱 채움 구조가 그대로 유지됐다.
• 같은 날짜 후속 수정으로 기능설명 입력 탭은 title input 없이 textarea 하나만 남았고, preview.sm-home.cloud 기준 titleInputCount = 0, textareaCount = 1로 확인했다.
• 이번 이관 작업은 패키지 내부 문서/리소스 구조 정리이며 동작 로직 추가 변경은 포함하지 않는다.