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 스타일 크기를 결정