#45 feat: TermPage 라우터 반영

src/common/router/Router.tsx

@@ -1,4 +1,5 @@
 import App from '@/App';
+import TermPage from '@/page/signIn/index/TermPage';
 
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
@@ -11,7 +12,7 @@ const router = createBrowserRouter([
       { path: 'archiving', element: <p>archiving</p> },
       {
         path: 'signin',
-        element: <p>terms</p>,
+        element: <TermPage />,
       },
       {
         path: 'signin/info',

src/page/signIn/info/InfoFormPage.tsx

@@ -0,0 +1,12 @@
+import Flex from '@/common/component/Flex/Flex';
+import Heading from '@/common/component/Heading/Heading';
+
+const InfoFormPage = () => {
+  return (
+    <Flex>
+      <Heading>회원가입</Heading>
+    </Flex>
+  );
+};
+
+export default InfoFormPage;

src/story/page/signIn/TermArea.stories.tsx

@@ -0,0 +1,42 @@
+import TermArea from '@/page/signIn/index/component/TermArea/TermArea';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useState } from 'react';
+
+const meta = {
+  title: 'page/signIn/TermArea',
+  component: TermArea,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div css={{ width: '40rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    term: '이용 약관',
+    isChecked: false,
+  },
+} satisfies Meta<typeof TermArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [isClicked, setIsClicked] = useState(false);
+
+    const handleCheck = () => {
+      setIsClicked((prev) => !prev);
+    };
+
+    return (
+      <TermArea {...args} onClick={handleCheck} isChecked={isClicked} isRequired>
+        이용약관
+      </TermArea>
+    );
+  },
+};

src/story/page/signIn/TermPage.stories.tsx

@@ -0,0 +1,15 @@
+import TermPage from '@/page/signIn/index/TermPage';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'page/signIn/TermPage',
+  component: TermPage,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof TermPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/story/page/signIn/TermsAgreeButton.stories.tsx

@@ -0,0 +1,31 @@
+import TermsAgreeButton from '@/page/signIn/index/component/TermsAgreeButton/TermsAgreeButton';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useState } from 'react';
+
+const meta = {
+  title: 'page/signIn/TermsAgreeButton',
+  component: TermsAgreeButton,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div css={{ width: '40rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {},
+} satisfies Meta<typeof TermsAgreeButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [isClicked, setIsClicked] = useState(false);
+
+    return <TermsAgreeButton onClick={() => setIsClicked((prev) => !prev)} isClicked={isClicked} />;
+  },
+};