[FE] 디테일 페이지 내 정보없음 처리 안된 벨류 처리 (#549)

woowacourse-teams · Aug 22, 2024 · 94bddfe · 94bddfe
1 parent 57f3e84
commit 94bddfe
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx b/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
@@ -80,12 +80,12 @@ const RoomInfoSection = ({ room, options, checklistId, isLiked }: Props) => {
         </S.Row>
       </S.GapBox>
       <S.Row>
-        <Utils />
+        <Utils /> 관리비 포함 항목 :
         {includedMaintenances
           ?.map(id => IncludedMaintenancesData.find(item => item.id === id)?.displayName)
           .filter(Boolean)
-          .join(', ')}{' '}
-        관리비 포함
+          .join(', ')}
+        {!includedMaintenances?.length && formattedUndefined(includedMaintenances?.length, 'string', '')}
       </S.Row>
       <S.Row>
         <Calendar />
@@ -108,11 +108,13 @@ const RoomInfoSection = ({ room, options, checklistId, isLiked }: Props) => {
       </S.GapBox>
       <S.Row>
         <Options />
-        {options.map(option => `${option.optionName},`)}
+        {options.length
+          ? options.map(option => option.optionName).join(', ')
+          : formattedUndefined(options.length, 'string', '옵션')}
       </S.Row>
       <S.Row>
         <Summary />
-        {summary}
+        {formattedUndefined(summary, 'string', '한줄평')}
       </S.Row>
       <S.Row>
         <LocationLineIcon height={20} width={20} />

diff --git a/frontend/src/pages/ChecklistDetailPage.tsx b/frontend/src/pages/ChecklistDetailPage.tsx
@@ -67,6 +67,7 @@ const ChecklistDetailPage = () => {
         <ChecklistAnswerSection categories={checklist?.categories} />
         <MemoSection memo={checklist?.room?.memo} />
       </Layout>
+
       {isModalOpen && (
         <AlertModal
           title={