[markup] SelectCalendar, Persona 컴포넌트 제작

src/components/atoms/Persona/Persona.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Persona from './Persona';
+
+const meta = {
+    title: 'Components/Atoms/Persona',
+    component: Persona,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Persona>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        name: '박성문',
+        generation: '12',
+    },
+};

src/components/atoms/Persona/Persona.tsx

@@ -0,0 +1,16 @@
+interface PersonaProps {
+    name: string;
+    generation: string;
+}
+
+const Persona = ({ name, generation }: PersonaProps) => {
+    return (
+        <section className="flex gap-[0.125rem]">
+            <span className="text-gray-600">{generation}기</span>
+            <strong className="font-bold text-gray-900">{name}</strong>
+            <span className="text-gray-600">님 안녕하세요.</span>
+        </section>
+    );
+};
+
+export default Persona;

src/components/atoms/SelectCalender/SelectCalender.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SelectCalender from './SelectCalender';
+import { useEffect, useState } from 'react';
+
+const meta = {
+    title: 'Components/Atoms/SelectCalender',
+    component: SelectCalender,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof SelectCalender>;
+
+export default meta;
+
+type Story = StoryObj<typeof SelectCalenderWithHooks>;
+
+const SelectCalenderWithHooks = ({ year = 2024, month = 12 }) => {
+    const [date, setDate] = useState({
+        year: year,
+        month: month,
+    });
+
+    useEffect(() => {
+        setDate({
+            year: year,
+            month: month,
+        });
+    }, [year, month]);
+
+    const decreaseDate = () => {
+        setDate((prev) => ({
+            ...prev,
+            month: prev.month === 1 ? 12 : prev.month - 1,
+            year: prev.month === 1 ? prev.year - 1 : prev.year,
+        }));
+    };
+
+    const increaseDate = () => {
+        setDate((prev) => ({
+            ...prev,
+            month: prev.month === 12 ? 1 : prev.month + 1,
+            year: prev.month === 12 ? prev.year + 1 : prev.year,
+        }));
+    };
+
+    return (
+        <SelectCalender
+            year={date.year}
+            month={date.month}
+            onClickLeft={decreaseDate}
+            onClickRight={increaseDate}
+        />
+    );
+};
+
+export const Default: Story = {
+    args: {
+        year: 2024,
+        month: 12,
+    },
+    render: (args) => (
+        <SelectCalenderWithHooks year={args.year} month={args.month} />
+    ),
+};

src/components/atoms/SelectCalender/SelectCalender.tsx

@@ -0,0 +1,44 @@
+import Icon from '../Icon/Icon';
+
+interface SelectCalenderProps {
+    year: number;
+    month: number;
+    onClickLeft: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClickRight: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const SelectCalender = ({
+    year,
+    month,
+    onClickLeft,
+    onClickRight,
+}: SelectCalenderProps) => {
+    return (
+        <section className="flex flex-col items-center">
+            <section>
+                <span className="text-base">{year}</span>
+            </section>
+            <section className="flex gap-2">
+                <button
+                    type="button"
+                    onClick={onClickLeft}
+                    aria-label="이전 월"
+                >
+                    <Icon id="left" aria-hidden="true"></Icon>
+                </button>
+                <h4 className="w-[3.75rem] text-center text-3xl font-semibold">
+                    {month}월
+                </h4>
+                <button
+                    type="button"
+                    onClick={onClickRight}
+                    aria-label="다음 월"
+                >
+                    <Icon id="right" aria-hidden="true"></Icon>
+                </button>
+            </section>
+        </section>
+    );
+};
+
+export default SelectCalender;

src/components/atoms/index.ts

@@ -4,6 +4,8 @@ export { default as Button } from './Button/Button';
 export { default as Input } from './Input/Input';
 export { default as Label } from './Label/Label';
 export { default as Icon } from './Icon/Icon';
+export { default as SelectCalender } from "./SelectCalender/SelectCalender";
+export { default as Persona } from "./Persona/Persona";
 export { default as SelectOption } from './SelectOption/SelectOption';
 export { default as CalendarTag } from './CalendarTag/CalendarTag';
 export { default as TabButton } from './TabButton/TabButton';