Flex 컴포넌트 버그 수정과 프로필 컴포넌트 추가, 그리고 supabase 연결

.github/workflows/prod-ci-cd.yml

@@ -48,6 +48,7 @@ jobs:
         env:
           VITE_SERVER_URL: ${{ secrets.VITE_SERVER_URL }}
           VITE_KAKAO_JAVASCRIPT_KEY: ${{ secrets.VITE_KAKAO_JAVASCRIPT_KEY }}
+          VITE_SUPABASE_PUBLIC_KEY: ${{ secrets.VITE_SUPABASE_PUBLIC_KEY }}
         run: yarn build
 
       # Step 7: 빌드 결과물 저장
@@ -58,7 +59,7 @@ jobs:
 
   cd:
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'  # push일 때만 실행
+    if: github.event_name == 'push' # push일 때만 실행
     needs: ci
     steps:
       # Step 1: AWS 인증

.github/workflows/publish-storybook.yml

@@ -38,7 +38,23 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: true # Only run Chromatic on changed stories
 
-      - name: Comment on PR
+      - name: Comment on PR (with snapshot changes)
+        if: steps.chromatic.outputs.changeCount != '0'
         uses: thollander/actions-comment-pull-request@v3
         with:
-          message: '✨ **Storybook preview** : ${{ steps.chromatic.outputs.storybookUrl }}'
+          message: |
+            ✨ Storybook
+            👉 ${{ steps.chromatic.outputs.storybookUrl }}
+
+            📸 변경된 스냅샷
+            👉 ${{ steps.chromatic.outputs.buildUrl }}
+
+      - name: Comment on PR (no snapshot changes)
+        if: steps.chromatic.outputs.changeCount == '0'
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          message: |
+            ✨ Storybook
+            👉 ${{ steps.chromatic.outputs.storybookUrl }}
+
+            ✅ 스냅샷 변경 없음

.storybook/preview.ts

@@ -1,12 +1,16 @@
 import type { Preview } from '@storybook/react';
-
+import { initialize, mswLoader } from 'msw-storybook-addon';
 import { ThemeProvider } from 'styled-components';
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import theme from '../src/shared/styles/theme';
 import GlobalStyles from '../src/shared/styles/globalStyles';
 
+// Initialize MSW
+initialize();
+
 const preview: Preview = {
   parameters: {
+    chromatic: { disableSnapshot: true }, // 기본적으로 Chromatic 스냅샷 비활성화 (필요한 스토리에서만 활성화한다)
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -25,6 +29,9 @@ const preview: Preview = {
       GlobalStyles,
     }),
   ],
+
+  // Provide the MSW addon loader globally
+  loaders: [mswLoader],
 };
 
 export default preview;

package.json

@@ -55,7 +55,7 @@
     "@storybook/addon-onboarding": "^8.5.0",
     "@storybook/addon-themes": "^8.5.2",
     "@storybook/blocks": "^8.5.0",
-    "@storybook/react": "^8.5.0",
+    "@storybook/react": "^8.6.12",
     "@storybook/react-vite": "^8.5.0",
     "@storybook/test": "^8.5.0",
     "@tanstack/eslint-plugin-query": "^5.68.0",
@@ -84,8 +84,9 @@
     "eslint-plugin-storybook": "^0.11.2",
     "globals": "^15.14.0",
     "msw": "^2.7.0",
+    "msw-storybook-addon": "^2.0.6",
     "prettier": "^3.4.2",
-    "storybook": "^8.5.0",
+    "storybook": "^8.6.12",
     "storybook-addon-pseudo-states": "^4.0.2",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.18.2",

src/features/expense-management/ui/MemberExpenses/index.styles.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import Text from '@/shared/ui/Text';
 
 export const MemberExpensesContainer = styled.div`
   display: flex;
@@ -28,28 +27,3 @@ export const ProfileContainer = styled.div`
   gap: ${({ theme }) => theme.unit[4]};
   flex-shrink: 0;
 `;
-
-export const ProfileImg = styled.img`
-  width: ${({ theme }) => theme.unit[36]};
-  height: ${({ theme }) => theme.unit[36]};
-  object-fit: contain;
-  border-radius: 50%;
-`;
-
-export const ProfileWrapper = styled.div`
-  position: relative; // 부모 요소
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
-`;
-
-export const DeleteButtonWrapper = styled.div`
-  position: absolute; // 자식 요소
-  width: fit-content;
-  height: fit-content;
-`;
-
-/* 이름 */
-export const NameText = styled(Text)`
-  white-space: nowrap;
-`;

src/features/expense-management/ui/MemberExpenses/index.tsx

@@ -1,6 +1,6 @@
-import { SystemDanger } from '@/shared/assets/svgs/icon';
 import NumberInput from '@/features/expense-management/ui/NumberInput';
 import { ExpenseFormMember } from '@/entities/expense/model/expense.type';
+import MemberProfile from '@/shared/ui/MemberProfile';
 import * as S from './index.styles';
 
 interface MemberExpensesProps {
@@ -14,18 +14,13 @@ function MemberExpenses({ members, onDelete }: MemberExpensesProps) {
       {members.map((member) => (
         <S.MemberContainer key={member.id}>
           <S.ProfileContainer>
-            <S.ProfileWrapper>
-              <S.ProfileImg
-                src={member.profile}
-                alt={`${member.name} 프로필 이미지`}
-              />
-              {members.length > 1 ? (
-                <S.DeleteButtonWrapper onClick={() => onDelete(member.name)}>
-                  <SystemDanger width="0.83331rem" />
-                </S.DeleteButtonWrapper>
-              ) : null}
-            </S.ProfileWrapper>
-            <S.NameText variant="caption">{member.name}</S.NameText>
+            <MemberProfile
+              id={member.id}
+              name={member.name}
+              profile={member.profile}
+              canDelete
+              handleDeleteButtonClick={() => onDelete(member.name)}
+            />
           </S.ProfileContainer>
           <NumberInput
             value={member.amount ? member.amount.toLocaleString() : ''}

src/pages/addAccountStep/ui/BankNameDrawer/index.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BankNameDrawer from './index';
+
+const meta: Meta<typeof BankNameDrawer> = {
+  title: 'ui/BankNameDrawer',
+  component: BankNameDrawer,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BankNameDrawer>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    setBankName: () => {},
+  },
+};

src/pages/addAccountStep/ui/BankNameDrawer/index.tsx

@@ -24,7 +24,7 @@ function BankNameDrawer({ open, onClose, setBankName }: BankNameDrawerProps) {
       <Flex
         direction="column"
         pt={32}
-        px={5}
+        px={20}
         height="70dvh"
         borderRadius={12}
         width="100%"

src/pages/billDetail/ui/CurvedProgressBar/index.style.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
+  margin-top: ${({ theme }) => theme.unit[20]};
   display: flex;
   justify-content: center;
   align-items: center;

src/pages/billDetail/ui/ExpenseMemberItem/index.style.ts

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import Accordion from '@/shared/ui/Accordion';
-import { ProfileImg as MemberProfileImg } from '@/shared/ui/MemberProfile/index.style';
 
 export const Container = styled(Accordion)<{ isPaid: boolean }>`
   padding: ${({ theme }) => theme.unit[20]};
@@ -30,11 +29,6 @@ export const LeftWrapper = styled.div`
   gap: ${({ theme }) => theme.unit[8]};
 `;
 
-export const ProfileImg = styled(MemberProfileImg)`
-  width: ${({ theme }) => theme.unit[48]};
-  height: ${({ theme }) => theme.unit[48]};
-`;
-
 export const SubProfileWrapper = styled.div`
   display: flex;
   flex-direction: column;

src/pages/billDetail/ui/ExpenseMemberItem/index.tsx

@@ -8,6 +8,7 @@ import { Close, Confirm, Receipt } from '@/shared/assets/svgs/icon';
 import BottomSheet from '@/shared/ui/BottomSheet';
 import { MemberSettlement } from '@/entities/settlement/model/settlement.type';
 import useUpdatePaymentStatus from '@/features/settlement-details/api/useUpdatePaymentStatus';
+import MemberProfileImage from '@/shared/ui/MemberProfileImage';
 import * as S from './index.style';
 import StatusChip from './ui/StatusChip';
 
@@ -64,7 +65,7 @@ function ExpenseMemberItem({
       <S.HeaderContainer iconSize={32}>
         <S.HeaderContent>
           <S.LeftWrapper>
-            <S.ProfileImg src={member.profile} alt="profile" />
+            <MemberProfileImage src={member.profile} size="md" />
             <S.SubProfileWrapper>
               <Text variant="body1Sb">
                 <span style={{ color: theme.color.primitive.gray[500] }}>

src/pages/billDetail/ui/ExpenseTimeHeader/index.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { waitFor, within } from '@storybook/test';
+import { createMemoryRouter, RouterProvider } from 'react-router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
+import ExpenseTimeHeader from './index';
+
+/**
+ * NOTE
+ * Flex 컴포넌트의 gap / padding 관련 변경에 대비해서
+ * 스냅샷 기준을 만들기 위해 추가한 스토리입니다.
+ *
+ * 나중에 유지보수가 과도해질 경우 삭제해도 괜찮습니다.
+ */
+
+const queryClient = new QueryClient();
+
+const meta: Meta<typeof ExpenseTimeHeader> = {
+  title: 'ui/ExpenseTimeHeader',
+  component: ExpenseTimeHeader,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+    msw: {
+      handlers: [
+        http.get('http://localhost:3000/api/v1/group/header', () => {
+          return HttpResponse.json({
+            groupName: '모또 정기모임',
+            totalAmount: 150000,
+            deadline: '2025-12-26T23:59:59Z',
+            bank: '국민은행',
+            accountNumber: '123456-78-910111',
+          });
+        }),
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      const mockRouter = createMemoryRouter([
+        {
+          path: '/*',
+          element: <Story />,
+          loader: () => ({ groupToken: 'mock-group-token' }),
+        },
+      ]);
+      return (
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={mockRouter} />
+        </QueryClientProvider>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ExpenseTimeHeader>;
+
+export const Default: Story = {
+  args: {
+    totalMember: 6,
+    paidMember: 3,
+    status: 'success',
+    isChecked: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => {
+      canvas.getByText('정산을 완료해주세요');
+    });
+  },
+};

src/pages/billDetail/ui/ExpenseTimeHeader/index.style.ts

@@ -29,10 +29,8 @@ export const ModdoImage = styled.img`
 export const ExpenseChip = styled.div`
   display: flex;
   background: ${({ theme }) => theme.color.semantic.primary.default};
-  color: ${({ theme }) => theme.color.semantic.text.inverse};
   border-radius: ${({ theme }) => theme.radius.circle};
   padding: ${({ theme }) => `${theme.unit[12]} ${theme.unit[20]}`};
-  font-size: ${TextVariant('body1Sb')};
 `;
 
 export const TotalMoney = styled.span`
@@ -56,6 +54,13 @@ export const TimeBox = styled.div`
   align-items: center;
 `;
 
+export const Timer = styled.div`
+  display: grid;
+  width: 174px;
+  grid-template-columns: repeat(5, auto);
+  place-items: center;
+`;
+
 export const TimeSep = styled.span`
   color: ${({ theme }) => theme.color.semantic.secondary.strong};
   font-size: 1.75rem;