From d9aa6a69220a84819b37dae382ce7d877f4e01f3 Mon Sep 17 00:00:00 2001 From: zenn Date: Tue, 7 Apr 2026 14:06:51 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=8D=B8=EB=84=A4?= =?UTF-8?q?=EC=9D=BC=20=EB=B9=84=EC=9C=A8=20=EA=B3=A0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/history.md | 3 +++ docs/todo.md | 1 + docs/update.md | 4 ++++ frontend/src/views/CommentInboxView.vue | 4 +++- 4 files changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/history.md b/docs/history.md index 28e1830..8a9fbf5 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,8 @@ # 의사결정 이력 +## 2026-04-07 v1.1.7 +- 카드 내부 그리드에서 썸네일 비율을 맞출 때는 `aspect-ratio`만 두지 않고, 부모 그리드의 `stretch` 영향을 함께 차단해야 한다고 정리했다. 댓글 관리 카드 썸네일은 16:9 규칙을 CSS 정렬까지 포함해 고정한다. + ## 2026-04-07 v1.1.6 - 댓글 영역은 과하게 화려한 새로운 카드보다, 우측 뷰어 카드와 통일되는 단정한 서비스 톤이 더 적합하다고 판단했다. 같은 화면 안에서 카드 문법이 지나치게 갈라지면 오히려 UI 완성도가 떨어지므로 댓글 카드도 공통 서비스 톤에 맞춘다. - 댓글 정렬은 `루트 최신순 / 답글 오래된순`으로 고정한다. 최신 댓글을 먼저 보는 편이 전체 참여 흐름엔 유리하고, 답글은 작성 순서가 유지되어야 문맥 이해가 쉽다. diff --git a/docs/todo.md b/docs/todo.md index 0ef65e5..872ec13 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -1,6 +1,7 @@ # 할 일 및 이슈 ## 단기 확인 +- `v1.1.7` 이후 댓글 관리 카드 썸네일이 실제로 모든 카드에서 16:9로 유지되는지 데스크톱/모바일에서 다시 확인한다. - `v1.1.6` 이후 루트 댓글이 최신순으로, 답글은 오래된순으로 정확히 보이는지 실제 댓글 데이터를 여러 개 넣어 확인한다. - 뷰어 모드에서 댓글이 길어져도 우측 `공유 티어표 보기` 카드가 스폰서 카드 바로 아래에서 유지되고, 더 이상 하단으로 밀려 보이지 않는지 확인한다. - `v1.1.5` 이후 댓글 카드/댓글 관리 카드에서 보더가 과해 보이지 않고, surface/shadow 중심 레이어가 다크/라이트 모드 모두에서 자연스러운지 확인한다. diff --git a/docs/update.md b/docs/update.md index 1dba22b..37502b5 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,9 @@ # 업데이트 로그 +## 2026-04-07 v1.1.7 +- 댓글 관리 카드 썸네일이 CSS grid의 세로 stretch 영향으로 16:9로 보이지 않을 수 있어, 썸네일 셀을 `align-self: start`로 고정하고 카드 본문 정렬도 `align-items: start`로 바꿨다. 이제 댓글 관리 썸네일은 항상 16:9 비율로 표시된다. +- 확인: `npm run build` + ## 2026-04-07 v1.1.6 - 댓글 영역 스타일을 다시 전면 정리했다. 과한 장식/그림자 중심 디자인 대신 `viewerSidebar__section` 계열과 같은 단정한 카드 문법으로 맞추고, 댓글/답글은 배경과 간격 위주로 읽히게 재구성했다. - 댓글 등록/답글 등록 버튼은 불필요한 shadow 없이 에디터 저장 계열과 같은 `btn--save` 톤으로 다시 맞췄다. diff --git a/frontend/src/views/CommentInboxView.vue b/frontend/src/views/CommentInboxView.vue index d2b7641..1ba2d65 100644 --- a/frontend/src/views/CommentInboxView.vue +++ b/frontend/src/views/CommentInboxView.vue @@ -270,12 +270,14 @@ watch(unreadOnly, loadInbox) display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; - align-items: stretch; + align-items: start; } .commentInboxCard__thumbWrap { width: 100%; aspect-ratio: 16 / 9; + align-self: start; + flex: 0 0 auto; border-radius: 18px; overflow: hidden; background: var(--theme-thumb-fallback-bg);