빈 정산 카드UI 추가 및 홈 노출

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')};
+`;

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 };

src/pages/home/ui/EmptySettlementCard/index.ts

@@ -0,0 +1,2 @@
+export { EmptySettlementCard } from './EmptySettlementCard';
+export type { EmptySettlementCardProps } from './EmptySettlementCard';

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>
   );