test: CardBox 스토리 작성

frontend/src/components/Reminder/CardBox/CardBox.stories.tsx

@@ -0,0 +1,45 @@
+import { ReminderExtendType } from 'types/api/reminder';
+import type { Meta, StoryObj } from '@storybook/react';
+import CardBox from '.';
+
+const meta: Meta<typeof CardBox> = {
+  component: CardBox,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardBox>;
+
+export const NotHasDate: Story = {
+  render: () => {
+    const mockData: ReminderExtendType = {
+      petPlantId: 1,
+      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      nickName: '참새나무',
+      dictionaryPlantName: '알로카시아',
+      dDay: 0,
+      nextWaterDate: '2023-07-26',
+      date: '26',
+      status: 'exist',
+    };
+
+    return <CardBox data={mockData} notDate={true} />;
+  },
+};
+
+export const HasDate: Story = {
+  render: () => {
+    const mockData: ReminderExtendType = {
+      petPlantId: 1,
+      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      nickName: '참새나무',
+      dictionaryPlantName: '알로카시아',
+      dDay: 0,
+      nextWaterDate: '2023-07-26',
+      date: '26',
+      status: 'exist',
+    };
+
+    return <CardBox data={mockData} notDate={false} />;
+  },
+};

frontend/src/components/Reminder/CardBox/index.tsx

@@ -7,10 +7,10 @@ import ReminderCard from '../Card';
 
 interface CardBoxProps {
   data: ReminderExtendType;
-  hasDate: boolean;
+  notDate: boolean;
 }
 
-const CardBox = ({ data, hasDate }: CardBoxProps) => {
+const CardBox = ({ data, notDate }: CardBoxProps) => {
   const context = useContext(ReminderContext);
 
   const waterHandler = () => {
@@ -27,7 +27,7 @@ const CardBox = ({ data, hasDate }: CardBoxProps) => {
   return (
     <ReminderCardBox key={data.petPlantId}>
       <InfoBox>
-        {!hasDate && <DateLabel>{data.date}</DateLabel>}
+        {!notDate && <DateLabel>{data.date}</DateLabel>}
         <CheckButton type="button" onClick={waterHandler} />
       </InfoBox>
       <ReminderCard data={data} />