feat: 템플릿 리스트 페이지 컴포넌트 구현 (#293)

* feat: 템플릿 리스트 아이템 컴포넌트 구현

* feat: 템플릿 메인 리스트 아이템 컴포넌트 구현

* refactor: 테믈릿 리스트 아이템 컴포넌트 파일 경로 수정

* feat: 템플릿 삭제 리스트 아이템 구현

* feat: checkbox 커스텀 컴포넌트 구현

* feat: 템플릿 삭제 리스트 아이템 구현

* refactor: 불필요한 참조 제거

* fix: 스토리북 배포 오류 해결

- 누락된 props 전달

* refactor: 스토리북 배포 페이지 링크 업데이트

README.md

@@ -4,7 +4,7 @@
 
 ### [배포 페이지 바로가기](https://d2vl90cpkqpz2m.cloudfront.net/)
 
-#### [Storybook](https://645bb0d7fab3ee51343325b9-ruajjuukoj.chromatic.com/)
+#### [Storybook](https://645bb0d7fab3ee51343325b9-wyhcnfgmuj.chromatic.com/)
 
 [서버 설치하기](https://github.com/eomheeseung/fin-the-pen)
 

src/components/TemplateDrawer/TemplateDrawer.tsx

@@ -0,0 +1,5 @@
+function TemplateDrawer() {
+  return <></>;
+}
+
+export default TemplateDrawer;

src/components/TemplateDrawer/components/ListItem/ListItem.stories.tsx

@@ -0,0 +1,18 @@
+import ListItem, {
+  ListItemProps,
+} from "@components/TemplateDrawer/components/ListItem/ListItem.tsx";
+import { Meta } from "@storybook/react";
+
+const meta = {
+  title: "ui/TemplateDrawer/ListItem",
+  component: ListItem,
+  tags: ["autodocs"],
+  args: { category: "급여", title: "ABC회사 월급", amount: 100000 },
+  argTypes: {},
+} satisfies Meta<typeof ListItem>;
+
+export default meta;
+
+export const Default = (args: ListItemProps) => {
+  return <ListItem {...args} />;
+};

src/components/TemplateDrawer/components/ListItem/ListItem.style.ts

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+
+export const CategoryLabel = styled.div`
+  color: #5b5f67;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: 0.4px;
+`;
+
+export const TitleLabel = styled.div`
+  color: #131416;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+  padding-bottom: 3px;
+`;
+
+export const AmountLabel = styled.div`
+  color: #8c919c;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px; /* 133.333% */
+`;

src/components/TemplateDrawer/components/ListItem/ListItem.tsx

@@ -0,0 +1,30 @@
+import { Stack } from "@mui/material";
+import { CATEGORY_ICONS } from "@components/ScheduleList/constants.ts";
+import CategoryIconSVG from "@components/common/CategoryIconSVG";
+import {
+  AmountLabel,
+  CategoryLabel,
+  TitleLabel,
+} from "@components/TemplateDrawer/components/ListItem/ListItem.style.ts";
+
+export interface ListItemProps {
+  category: string;
+  title: string;
+  amount: number;
+}
+
+function ListItem({ category, amount, title }: ListItemProps) {
+  return (
+    <Stack direction="row" spacing={2} alignItems="center" flexGrow={1}>
+      <CategoryIconSVG id={CATEGORY_ICONS[category]} size={40} />
+
+      <Stack>
+        <CategoryLabel>{category}</CategoryLabel>
+        <TitleLabel>{title}</TitleLabel>
+        <AmountLabel>{amount.toLocaleString()}원</AmountLabel>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default ListItem;

src/components/TemplateDrawer/components/ListItem/index.ts

@@ -0,0 +1,3 @@
+import ListItem from "@components/TemplateDrawer/components/ListItem/ListItem.tsx";
+
+export default ListItem;

src/components/TemplateDrawer/index.ts

@@ -0,0 +1,3 @@
+import TemplateDrawer from "@components/TemplateDrawer/TemplateDrawer.tsx";
+
+export default TemplateDrawer;

src/components/TemplateDrawer/pages/TemplateList/components/TemplateListItem/TemplateListItem.stories.tsx

@@ -0,0 +1,44 @@
+import TemplateListItem, {
+  TemplateListItemProps,
+} from "@components/TemplateDrawer/pages/TemplateList/components/TemplateListItem/TemplateListItem.tsx";
+import { Meta } from "@storybook/react";
+import { SchedulePeriod } from "@app/types/schedule.ts";
+
+const meta = {
+  title: "ui/TemplateDrawer/TemplateList/TemplateListItem",
+  component: TemplateListItem,
+  tags: ["autodocs"],
+  args: {
+    schedule: {
+      event_name: "ABC회사 월급",
+      category: "급여",
+      start_date: "2024-01-01",
+      end_date: "2024-01-01",
+      start_time: "08:00",
+      end_time: "08:00",
+      period: {
+        is_repeat_again: true,
+        repeat_number_time: "1",
+        repeat_end_line: "2025-01-01",
+      },
+      price_type: "+",
+      payment_type: "card",
+      fix_amount: false,
+      amount: "1000000",
+      all_day: true,
+      exclude: false,
+      repeat_kind: "MONTH",
+      repeat_options: {
+        term: "1",
+        options: "1",
+      },
+    },
+  },
+  argTypes: {},
+} satisfies Meta<typeof TemplateListItem>;
+
+export default meta;
+
+export const Default = (args: TemplateListItemProps) => {
+  return <TemplateListItem {...args} />;
+};

src/components/TemplateDrawer/pages/TemplateList/components/TemplateListItem/TemplateListItem.style.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+
+export const RepeatBadge = styled.div`
+  display: flex;
+  padding: 4px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 30px;
+  border: 1px solid #dee0e3;
+  background: #f7f7f8;
+
+  color: #5b5f67;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 22px; /* 146.667% */
+  letter-spacing: -0.1px;
+`;

src/components/TemplateDrawer/pages/TemplateList/components/TemplateListItem/TemplateListItem.tsx

@@ -0,0 +1,24 @@
+import { Stack } from "@mui/material";
+import { RepeatBadge } from "@components/TemplateDrawer/pages/TemplateList/components/TemplateListItem/TemplateListItem.style.ts";
+import { Schedule } from "@app/types/schedule.ts";
+import { getTitle } from "@pages/AssetManagement/pages/RegularAsset/components/RegularScheduleList/utils.ts";
+import ListItem from "@components/TemplateDrawer/components/ListItem";
+
+export interface TemplateListItemProps {
+  schedule: Schedule;
+}
+
+function TemplateListItem({ schedule }: TemplateListItemProps) {
+  return (
+    <Stack direction="row" justifyContent="space-between" alignItems="center">
+      <ListItem
+        category={schedule.category}
+        title={schedule.event_name}
+        amount={Number(schedule.amount)}
+      />
+      <RepeatBadge>{getTitle(schedule)}</RepeatBadge>
+    </Stack>
+  );
+}
+
+export default TemplateListItem;

src/components/TemplateDrawer/pages/TemplateList/components/TemplateListItem/index.ts

@@ -0,0 +1,3 @@
+import TemplateListItem from "@components/TemplateDrawer/pages/TemplateList/components/TemplateListItem/TemplateListItem.tsx";
+
+export default TemplateListItem;

src/components/TemplateDrawer/pages/TemplateModifyList/components/TemplateModifyListItem/TemplateModifyListItem.stories.tsx

@@ -0,0 +1,161 @@
+import { Meta } from "@storybook/react";
+import TemplateModifyListItem, {
+  TemplateModifyListItemProps,
+} from "@components/TemplateDrawer/pages/TemplateModifyList/components/TemplateModifyListItem/TemplateModifyListItem.tsx";
+import { useState } from "react";
+import { FormControlLabel, FormGroup } from "@mui/material";
+import CheckBox from "@components/common/CheckBox";
+import { Schedule } from "@app/types/schedule.ts";
+
+const meta = {
+  title: "ui/TemplateDrawer/TemplateList/TemplateModifyListItem",
+  component: TemplateModifyListItem,
+  tags: ["autodocs"],
+  args: {
+    schedule: {
+      event_name: "ABC회사 월급",
+      category: "급여",
+      start_date: "2024-01-01",
+      end_date: "2024-01-01",
+      start_time: "08:00",
+      end_time: "08:00",
+      period: {
+        is_repeat_again: true,
+        repeat_number_time: "1",
+        repeat_end_line: "2025-01-01",
+      },
+      price_type: "+",
+      payment_type: "card",
+      fix_amount: false,
+      amount: "1000000",
+      all_day: true,
+      exclude: false,
+      repeat_kind: "MONTH",
+      repeat_options: {
+        term: "1",
+        options: "1",
+      },
+    },
+  },
+  argTypes: {},
+} satisfies Meta<typeof TemplateModifyListItem>;
+
+export default meta;
+
+export const Default = (args: TemplateModifyListItemProps) => {
+  return <TemplateModifyListItem {...args} />;
+};
+
+export const Example = () => {
+  const schedules: Schedule[] = [
+    {
+      schedule_id: "0",
+      event_name: "아름다운 클리닉",
+      category: "뷰티/미용",
+      start_date: "2024-01-01",
+      end_date: "2024-01-01",
+      start_time: "08:00",
+      end_time: "08:00",
+      period: {
+        is_repeat_again: true,
+        repeat_number_time: "1",
+        repeat_end_line: "2025-01-01",
+      },
+      price_type: "-",
+      payment_type: "card",
+      fix_amount: false,
+      amount: "20000",
+      all_day: true,
+      exclude: false,
+      repeat_kind: "MONTH",
+      repeat_options: {
+        term: "5",
+        options: "1",
+      },
+    },
+    {
+      schedule_id: "1",
+      event_name: "ABC회사 월급",
+      category: "급여",
+      start_date: "2024-01-01",
+      end_date: "2024-01-01",
+      start_time: "08:00",
+      end_time: "08:00",
+      period: {
+        is_repeat_again: true,
+        repeat_number_time: "1",
+        repeat_end_line: "2025-01-01",
+      },
+      price_type: "-",
+      payment_type: "card",
+      fix_amount: false,
+      amount: "1000000",
+      all_day: true,
+      exclude: false,
+      repeat_kind: "MONTH",
+      repeat_options: {
+        term: "14",
+        options: "1",
+      },
+    },
+    {
+      schedule_id: "2",
+      event_name: "KB 손해보험",
+      category: "금융수입",
+      start_date: "2024-01-01",
+      end_date: "2024-01-01",
+      start_time: "08:00",
+      end_time: "08:00",
+      period: {
+        is_repeat_again: true,
+        repeat_number_time: "1",
+        repeat_end_line: "2025-01-01",
+      },
+      price_type: "-",
+      payment_type: "card",
+      fix_amount: false,
+      amount: "140000",
+      all_day: true,
+      exclude: false,
+      repeat_kind: "MONTH",
+      repeat_options: {
+        term: "24",
+        options: "1",
+      },
+    },
+  ];
+
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const handleChange = (id: string) => {
+    if (selected.includes(id)) {
+      setSelected(selected.filter((s) => s !== id));
+    } else {
+      setSelected(selected.concat(id));
+    }
+  };
+
+  return (
+    <FormGroup>
+      {schedules.map(
+        (schedule) =>
+          schedule.schedule_id && (
+            <FormControlLabel
+              control={
+                <CheckBox
+                  checked={selected.includes(schedule.schedule_id)}
+                  handleChange={() => handleChange(schedule.schedule_id ?? "0")}
+                />
+              }
+              label={<TemplateModifyListItem schedule={schedule} />}
+              slotProps={{
+                typography: {
+                  flexGrow: 1,
+                },
+              }}
+            />
+          )
+      )}
+    </FormGroup>
+  );
+};

src/components/TemplateDrawer/pages/TemplateModifyList/components/TemplateModifyListItem/TemplateModifyListItem.tsx

@@ -0,0 +1,24 @@
+import ListItem from "@components/TemplateDrawer/components/ListItem";
+import { Stack } from "@mui/material";
+import { Schedule } from "@app/types/schedule.ts";
+import MenuIcon from "@assets/icons/menu.svg";
+
+export interface TemplateModifyListItemProps {
+  schedule: Schedule;
+}
+
+function TemplateModifyListItem({ schedule }: TemplateModifyListItemProps) {
+  return (
+    <Stack direction="row" justifyContent="space-between" alignItems="center">
+      <ListItem
+        category={schedule.category}
+        title={schedule.event_name}
+        amount={Number(schedule.amount)}
+      />
+
+      <img src={MenuIcon} alt="Menu icon" />
+    </Stack>
+  );
+}
+
+export default TemplateModifyListItem;

src/components/TemplateDrawer/pages/TemplateModifyList/components/TemplateModifyListItem/index.ts

@@ -0,0 +1,3 @@
+import TemplateModifyListItem from "@components/TemplateDrawer/pages/TemplateModifyList/components/TemplateModifyListItem/TemplateModifyListItem.tsx";
+
+export default TemplateModifyListItem;