From 31c978a1fe9be468329dc4a89b56145e66f8440a Mon Sep 17 00:00:00 2001 From: choiyuyeon Date: Thu, 20 Aug 2026 16:18:43 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=8D=B0=EC=9D=BC=EB=A6=AC=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EC=B2=B4=ED=81=AC=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=82=A0=EC=A7=9C=EB=A5=BC=20=EC=9D=BC=EC=A0=95=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=EA=B3=BC=20=EA=B0=99=EC=9D=80=20=EC=84=A0=EC=97=90=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 데일리 카드에서 항목 날짜("8월 1일")가 카드 오른쪽 끝이 아니라 중간에 떠 보였습니다. 위쪽 일정 시간(17:00)과 오른쪽 끝이 맞지 않았습니다. daily 레이아웃 두 곳에 폭이 299px로 고정돼 있었습니다. - Checklist의 바깥 컨테이너 (getVariantChecklistLayout) - ChecklistItem의 행 (VARIANT_ITEM_LAYOUT) 날짜는 ml-auto로 오른쪽에 붙는데, 기준이 되는 상자가 카드보다 좁다 보니 카드 오른쪽 끝에 못 미치는 자리에서 멈췄습니다. 둘 다 w-full로 바꿔 카드 폭을 그대로 쓰게 했습니다. 카드 쪽 CSS(.schedule-card-checklist-wrap)가 왼쪽으로 4.5px 당기면서 너비를 같은 값만큼 늘려 오른쪽 끝을 카드 여백선에 맞춰두고 있어서, 이제 날짜 오른쪽 끝이 일정 시간과 같은 선에 놓입니다. daily variant는 ScheduleCard 한 곳에서만 쓰므로 영향 범위는 데일리 카드로 한정됩니다. create/event의 고정폭은 건드리지 않았습니다. Co-Authored-By: Claude Opus 5 (1M context) --- src/components/common/Checklist/Checklist.tsx | 4 +++- src/components/common/Checklist/ChecklistItem.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/common/Checklist/Checklist.tsx b/src/components/common/Checklist/Checklist.tsx index 5eb2ed5..d813832 100644 --- a/src/components/common/Checklist/Checklist.tsx +++ b/src/components/common/Checklist/Checklist.tsx @@ -85,9 +85,11 @@ function getVariantChecklistLayout(radioVariant: ChecklistRadioVariant): Variant }; } + // daily는 폭을 고정하지 않는다. 카드(ScheduleCard) 안에서 쓰는데 폭을 묶어두면 + // 항목 날짜가 카드 오른쪽 끝(일정 시간이 붙는 선)까지 가지 못하고 중간에 멈춘다. if (radioVariant === 'daily') { return { - container: 'flex w-[299px] flex-col', + container: 'flex w-full flex-col', item: 'flex w-full items-center', }; } diff --git a/src/components/common/Checklist/ChecklistItem.tsx b/src/components/common/Checklist/ChecklistItem.tsx index 2474d18..e481a49 100644 --- a/src/components/common/Checklist/ChecklistItem.tsx +++ b/src/components/common/Checklist/ChecklistItem.tsx @@ -164,10 +164,12 @@ const ITEM_STYLE = { } as const; // 새 화면별 ChecklistItem 내부 크기 +// daily는 폭을 고정하지 않는다. 날짜를 ml-auto로 오른쪽에 붙이는데, 폭이 고정돼 있으면 +// 카드 오른쪽 끝이 아니라 그 상자의 끝에 맞아서 날짜만 중간에 떠 보인다. const VARIANT_ITEM_LAYOUT: Record = { create: 'h-[21px] w-full', event: 'w-full', - daily: 'h-[21px] w-[299px]', + daily: 'h-[21px] w-full', }; // 아이콘 크기를 기준으로 텍스트와 간격에 사용할 ChecklistItem 스타일 크기를 결정