Community UI 현대화 후속 개선 및 모바일 UX 완성

[dhslove]

목표

Issue #73에서 승인된 Community UI 현대화 결과를 운영 검토 의견에 맞게 보완하고,
데스크톱·모바일의 목록·상세·검색·태그·설정·작성 흐름을 일관된 상태로 완성합니다.

Related to #73

최종 변경

• Reddit형 평면 토론 목록과 이미지 썸네일·자동 다음 페이지 로딩
• 시작·상세·태그·프로필·설정·보안 화면의 1,165px 공통 셸
• 상세 토론 읽기 흐름, 세로 탐색, 좌측 토론 목록 가독성 개선
• 하단 Footer 제거와 콘텐츠 옆 고정 퀵 링크
• 검색 결과 세로 정보 구조와 SVG 검색·비우기 아이콘
• 한글 공통 이모지 선택기와 새 토론 중앙 대화상자
• 모바일 270px Drawer와 언어·계정 하위 메뉴 정렬
• 터치 전용 Dropdown Backdrop이 Drawer를 덮는 문제 수정
• 새 토론·댓글 작성기의 공통 44×44px 닫기 버튼
• 모바일 댓글 작성기의 최소화·전체 화면 버튼 제거
• 공통 Modal 닫기·포커스·스크롤 인터페이스 정리

브라우저 검증

항목	WSL	운영
Viewport	390×844	390×844
언어 전환	ko → en → ko	ko → en → ko
Locale 하위 메뉴	정상	정상
새 토론 닫기	44×44px·Hit 정상	44×44px·Hit 정상
댓글 닫기	44×44px·Hit 정상	44×44px·Hit 정상
댓글 최소화·전체 화면	숨김	숨김
닫기 후 Composer	없음	없음

배포와 검증

• 최종 커밋: a7b7f88 Community 모바일 메뉴와 작성기 UX 완성
• 테마 계약 테스트: 15/15 PASS
• git diff --check: PASS
• WSL 전체 주기: issue73-mobile-submenu-reply-final-20260820 PASS
• WSL 데이터 무결성: 39 users / 117 discussions / 305 posts, 콘텐츠·업로드 해시 동일
• 운영 외부 HTTPS: 200
• Nginx·PHP-FPM·MariaDB: 모두 active
• 운영 백업: /var/backups/techflow-flarum/theme-mobile-submenu-reply-20260820T151526KST
• LESS SHA-256: 1424f73c1a8b4416e569d7bb32d6fa29a9694fcb9013c2f672030e8138915ca6
• JS SHA-256: 5ad7bb5e00dda6c36c5e97c194d09aefc137c9834cdf9059916f5f0bf956e8cb

검증 자산

• docs/evidence/issue-73/community-mobile-navigation-dialog-validation.json
• docs/evidence/issue-73/community-shared-shell-width-validation.json
• docs/reports/issue-73-community-ui-validation.md
• docs/runbooks/community-theme-rollout-rollback.md

DB Schema, 게시물, 첨부, Activepieces, TechFlow AI 및 GitHub→Chat Webhook은
변경하지 않았습니다.

[dhslove]

후속 반영: 좁은 토론 목록과 작성기 아이콘

사용자 검토에 따라 상세 화면 왼쪽의 400px 토론 목록 폭은 유지하면서 내부 정보
배열을 개선했습니다.

• 메타 정보, 두 줄 제목, 두 줄 요약을 세로 순서로 분리
• 아바타는 왼쪽 고정, 댓글 수는 오른쪽 아래 배치
• 이미지 썸네일은 72×54px 오른쪽 전용 열 사용
• 제목·요약·썸네일이 한 가로 Flex 행을 공유하지 않도록 변경
• 본문 오른쪽 예약 여백을 104px에서 12px로 축소

토론 작성기의 Font Awesome 대체 문자 문제도 함께 수정했습니다.

• 미리보기·굵게·기울임·코드·인용·링크·이미지·글머리/번호 목록
• 취소선·아래/위 첨자·스포일러·코드 블록 등 추가 서식
• 총 16종을 내장 SVG Mask로 제공

WSL과 운영 작성기 브라우저에서 표시 아이콘 폭 15~16px, 깨진 글리프 0건을
확인했습니다. 테마 계약 테스트 13건과 WSL 적용·비활성화·재적용 주기가
통과했습니다.

• 운영 백업: /var/backups/techflow-flarum/theme-drawer-readability-icons-20260820T1045KST
• LESS SHA-256: 6bcbbebba32f0ad2a49f30c66820c8891a93491d25a4e389242aaa10f2025551
• 커밋: dca3809

DB Schema, 게시물, 첨부, Activepieces, TechFlow AI 및 GitHub→Chat Webhook은
변경하지 않았습니다.

[dhslove]

토론 작성기와 왼쪽 토론 목록의 후속 UI 보완을 운영까지 완료했습니다.

• 원인: 상세를 맨 위에서 열기 위해 사용한 window.location.assign()이 Flarum의
  메모리 내 토론 목록 상태를 끊어 왼쪽 Hover 목록이 생성되지 않았습니다.
• 수정: Flarum SPA 이동을 유지하면서 화면 위치만 0으로 맞추고, 상세 새로고침에는
  직전에 렌더링한 목록 Snapshot을 복원합니다.
• 작성기: 활성 높이 336px, 게시 버튼 하단 여백 22px을 확보했습니다.
• 충돌 방지: 작성 중에는 목록 레이어를 숨기고 작성기를 닫으면 자동 복원합니다.
• WSL·운영: 400px 목록 20건, 활성 항목 1건, 작성기-목록 겹침 0건을 브라우저에서
  확인했습니다.
• WSL issue-73-composer-pane-v8, 계약 테스트 13건, 외부 HTTPS 200, 운영 서비스
  4종 active를 확인했습니다.
• 운영 백업:
  /var/backups/techflow-flarum/theme-composer-pane-final-20260820T112831KST
• 커밋: 5ce0940

PR #82와 Issue #73 검증 문서·Runbook에 같은 결과를 반영했습니다.

[dhslove]

추가 UI 검토 사항을 운영과 WSL에 반영했습니다.

• 좁은 토론 목록의 더보기 메뉴를 32×32px, 카드 상단 기준 11px 안쪽으로 정렬
• 토론 생성 작성기의 본문과 하단 도구막대를 독립 행으로 재배치해 겹침 제거
• 작성기 활성 상태를 명시적으로 동기화하고 목록 Pane을 즉시 닫도록 보완
• 작성 중 배경 토론 행의 Hover Z-index를 0으로 제한
• WSL·운영 브라우저에서 목록을 먼저 연 뒤 작성기를 실행하는 순서까지 검증

운영에서 편집 영역/도구막대 겹침 false, 도구막대 외부 이탈 false, 목록 Pane과
작성기 교차 false를 확인했습니다. 최신 운영 백업은
/var/backups/techflow-flarum/theme-composer-pane-layer-final-20260820T122747KST입니다.

최신 커밋: 40ef0e1

[dhslove]

검색 UI 가독성 보완 완료

• v2k 검색에서 해결된 토론의 태그·제목·질문 요약·선택 답변 요약이 가로 열로 압축되던 문제를 단일 세로 흐름으로 교정했습니다.
• 검색 결과 패널은 데스크톱 최대 560px, 모바일은 좌우 12px 여백을 사용합니다.
• 검색 접두 아이콘과 fa-times-circle 비우기 아이콘을 내장 SVG Mask로 변경했습니다.
• WSL search-ui-20260820-r3 설치·비활성화·재설치 예행연습과 계약 테스트 14건을 통과했습니다.
• 운영 브라우저에서 v2k 해결 결과 2건, 전체 토론 결과 4건, 영역 겹침 0건과 두 아이콘의 Mask 렌더링을 확인했습니다.
• 운영 백업: /var/backups/techflow-flarum/theme-search-ui-20260820
• 운영 LESS SHA-256: 61598a1d4be2c48b21cf839546546f5c036c545c580b8d54f763f17127b662b5
• Nginx·PHP-FPM·MariaDB active, 서버 로컬 HTTP 200입니다.

DB Schema, 게시물, 첨부, TechFlow AI, GitHub→Chat Webhook은 변경하지 않았습니다.