From 4707cb68a5132e766d247845729226e9fa9a420c Mon Sep 17 00:00:00 2001
From: yeoeun-ex <yeoeun.sim@ex-em.com>
Date: Sun, 7 Jun 2026 21:28:26 +0900
Subject: [PATCH 1/2] feat: add EmptySettlementCard component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

지출이 없는 빈 정산을 표시하는 카드 컴포넌트 추가.
클릭 시 지출 생성 페이지(/create-expense/{groupCode})로 이동.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../EmptySettlementCard.styles.ts             | 70 +++++++++++++++++++
 .../EmptySettlementCard.tsx                   | 38 ++++++++++
 .../home/ui/EmptySettlementCard/index.ts      |  2 +
 3 files changed, 110 insertions(+)
 create mode 100644 src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.styles.ts
 create mode 100644 src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.tsx
 create mode 100644 src/pages/home/ui/EmptySettlementCard/index.ts

diff --git a/src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.styles.ts b/src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.styles.ts
new file mode 100644
index 00000000..e3d37988
--- /dev/null
+++ b/src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.styles.ts
@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+import { Link } from 'react-router';
+import SvgSystemWarning from '@/shared/assets/svgs/icon/SystemWarning';
+import { getToken, applyTypography } from '@/shared/design-system';
+
+export const Container = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  /* HACK: Figma gap 14px, 가장 가까운 gap.5(12px) 사용 */
+  gap: ${getToken('gap.5')};
+  width: 100%;
+  background: ${getToken('fill.neutral')};
+  border-radius: ${getToken('radius.xl')};
+  /* HACK: Figma py 18px, 가장 가까운 padding.6(20px) 사용 */
+  padding: ${getToken('padding.6')};
+  text-decoration: none;
+  color: inherit;
+`;
+
+export const TextGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const GroupName = styled.span`
+  ${applyTypography('typography.body.medium')}
+  color: ${getToken('fg.alternative')};
+`;
+
+export const Amount = styled.span`
+  ${applyTypography('typography.heading.small')}
+  color: ${getToken('fg.normal')};
+`;
+
+export const ProgressSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${getToken('gap.4')};
+`;
+
+export const ProgressBar = styled.div`
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+`;
+
+export const ProgressTrack = styled.div`
+  position: absolute;
+  inset: 0;
+  border-radius: ${getToken('radius.full')};
+  /* 대응되는 시맨틱 토큰이 없어 Figma 지정값 사용 */
+  background: #d6d6d6;
+`;
+
+export const MessageRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${getToken('gap.2')};
+`;
+
+export const WarningIcon = styled(SvgSystemWarning)`
+  color: ${getToken('fg.accent-yellow.normal')};
+`;
+
+export const Message = styled.span`
+  ${applyTypography('typography.body.small-semibold')}
+  color: ${getToken('fg.assistive')};
+`;
diff --git a/src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.tsx b/src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.tsx
new file mode 100644
index 00000000..7160bf4e
--- /dev/null
+++ b/src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.tsx
@@ -0,0 +1,38 @@
+import * as S from './EmptySettlementCard.styles';
+
+interface EmptySettlementCardProps {
+  groupCode: string;
+  groupName: string;
+}
+
+function EmptySettlementCard({
+  groupCode,
+  groupName,
+}: EmptySettlementCardProps) {
+  return (
+    <S.Container to={`/create-expense/${groupCode}`}>
+      <S.TextGroup>
+        <S.GroupName>{groupName}</S.GroupName>
+        <S.Amount>0원</S.Amount>
+      </S.TextGroup>
+      <S.ProgressSection>
+        <S.ProgressBar
+          role="progressbar"
+          aria-label={`${groupName} 정산 진행률`}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={0}
+        >
+          <S.ProgressTrack />
+        </S.ProgressBar>
+        <S.MessageRow>
+          <S.WarningIcon width={24} height={24} />
+          <S.Message>아직 정산 내역을 입력하지 않았어요</S.Message>
+        </S.MessageRow>
+      </S.ProgressSection>
+    </S.Container>
+  );
+}
+
+export { EmptySettlementCard };
+export type { EmptySettlementCardProps };
diff --git a/src/pages/home/ui/EmptySettlementCard/index.ts b/src/pages/home/ui/EmptySettlementCard/index.ts
new file mode 100644
index 00000000..750f61d7
--- /dev/null
+++ b/src/pages/home/ui/EmptySettlementCard/index.ts
@@ -0,0 +1,2 @@
+export { EmptySettlementCard } from './EmptySettlementCard';
+export type { EmptySettlementCardProps } from './EmptySettlementCard';

From 4cfd9dd61fe4cf4b31750afccc251224f89fe8a8 Mon Sep 17 00:00:00 2001
From: yeoeun-ex <yeoeun.sim@ex-em.com>
Date: Sun, 7 Jun 2026 21:28:36 +0900
Subject: [PATCH 2/2] feat: render EmptySettlementCard for empty settlements on
 home
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

홈 정산 리스트에서 totalAmount === 0인 빈 정산은
EmptySettlementCard로, 그 외에는 기존 SettlementProgressCard로 분기 렌더링.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../SettlementDateSection.tsx                 | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/pages/home/ui/SettlementDateSection/SettlementDateSection.tsx b/src/pages/home/ui/SettlementDateSection/SettlementDateSection.tsx
index 3081ec63..74bb7f91 100644
--- a/src/pages/home/ui/SettlementDateSection/SettlementDateSection.tsx
+++ b/src/pages/home/ui/SettlementDateSection/SettlementDateSection.tsx
@@ -1,4 +1,5 @@
 import type { SettlementGroup } from '@/entities/group/model/group.type';
+import { EmptySettlementCard } from '../EmptySettlementCard';
 import { SettlementProgressCard } from '../SettlementProgressCard';
 import * as S from './SettlementDateSection.styles';
 
@@ -12,16 +13,24 @@ function SettlementDateSection({ date, items }: SettlementDateSectionProps) {
     <S.Section>
       <S.Date>{date}</S.Date>
       <S.CardList>
-        {items.map((item) => (
-          <SettlementProgressCard
-            key={item.groupId}
-            groupCode={item.groupCode}
-            groupName={item.name}
-            totalAmount={item.totalAmount}
-            paidMember={item.completedMemberCount}
-            totalMember={item.totalMemberCount}
-          />
-        ))}
+        {items.map((item) =>
+          item.totalAmount === 0 ? (
+            <EmptySettlementCard
+              key={item.groupId}
+              groupCode={item.groupCode}
+              groupName={item.name}
+            />
+          ) : (
+            <SettlementProgressCard
+              key={item.groupId}
+              groupCode={item.groupCode}
+              groupName={item.name}
+              totalAmount={item.totalAmount}
+              paidMember={item.completedMemberCount}
+              totalMember={item.totalMemberCount}
+            />
+          )
+        )}
       </S.CardList>
     </S.Section>
   );