style: qfeed-42 로그인페이지 컴포넌트 분리 및 디자인 작업

src/pages/Login/KakaoLoginButton/KakaoLoginButton.stories.tsx

@@ -0,0 +1,46 @@
+// KakaoLoginButton.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { KakaoLoginButton } from './KakaoLoginButton';
+
+const meta = {
+  title: 'Pages/Login/KakaoLoginButton',
+  component: KakaoLoginButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '카카오 로그인을 위한 버튼 컴포넌트입니다. 왼쪽에 카카오톡 아이콘이 고정되어 있습니다.',
+      },
+    },
+  },
+  argTypes: {
+    text: {
+      description: '버튼에 표시될 텍스트입니다.',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '카카오 로그인' },
+      },
+    },
+    onClick: {
+      description: '버튼 클릭 시 실행될 콜백 함수입니다.',
+      action: 'clicked',
+      table: {
+        type: { summary: '() => void' },
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof KakaoLoginButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 기본 스토리
+export const Default: Story = {
+  args: {
+    text: '카카오 로그인',
+    onClick: () => alert('카카오 로그인 버튼 클릭'),
+  },
+};
+

src/pages/Login/KakaoLoginButton/KakaoLoginButton.tsx

@@ -0,0 +1,57 @@
+import theme from '@/styles/theme';
+import { Button } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+import { RiKakaoTalkFill } from 'react-icons/ri';
+
+const STYLES = {
+  BUTTON : {
+    MAX_WIDTH : '23.5625rem',   //377px
+    HEIGHT : '2.875rem',        //46px
+    FONT_SIZE : '1rem',
+    BORDER_RADIUS : '0.9375rem' //15px
+  }
+} as const
+
+
+
+const StyledButton = styled(Button)`
+  width: 100%;
+  max-width: ${STYLES.BUTTON.MAX_WIDTH};
+  height: ${STYLES.BUTTON.HEIGHT};
+  font: ${theme.typography.fontFamily};
+  border: none;
+  font-size: ${STYLES.BUTTON.FONT_SIZE};
+  font-weight : normal;
+  border-radius: ${STYLES.BUTTON.BORDER_RADIUS};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+type KakaoLoginButtonProps = {
+  text?: string;
+  onClick?: () => void;
+};
+
+export const KakaoLoginButton = ({ text='카카오 로그인', onClick }: KakaoLoginButtonProps) => {
+  return (
+    <StyledButton
+      leftIcon={<RiKakaoTalkFill size="20px" />}
+      backgroundColor={theme.colors.kakaoYellow}
+      _hover={{
+        backgroundColor: theme.colors.kakaoYellow,
+        opacity: 0.7,
+        color : theme.colors.black
+      }}
+      sx={{
+        '.chakra-button__icon': {
+          position: 'absolute',
+          left: '1rem'
+        }
+      }}
+      onClick={onClick}
+    >
+      {text}
+    </StyledButton>
+  );
+};

src/pages/Login/LoginButton/LoginButton.stories.tsx

@@ -0,0 +1,92 @@
+// LoginButton.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoginButton } from './LoginButton';
+const meta = {
+  title: 'Pages/Login/LoginButton',
+  component: LoginButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '로그인 페이지에서 사용되는 버튼 컴포넌트입니다.',
+      },
+    },
+  },
+  argTypes: {
+    text: {
+      description: '버튼에 표시될 텍스트입니다.',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '로그인' },
+      },
+    },
+    width: {
+      description: '버튼의 너비를 지정합니다 (CSS width 값)',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '100%' },
+      },
+    },
+    onClick: {
+      description: '버튼 클릭 시 실행될 콜백 함수입니다.',
+      action: 'clicked',
+      table: {
+        type: { summary: '() => void' },
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof LoginButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 기본 스토리
+export const Default: Story = {
+  args: {
+    text: '로그인',
+    onClick: () => alert('로그인 버튼 클릭'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '기본적인 형태의 로그인 버튼입니다. 너비가 100%인 상태로 표시됩니다.',
+      },
+    }
+  }
+};
+
+// 사이즈 지정
+export const WithFixedWidth: Story = {
+  args: {
+    text: '로그인',
+    width : '200px',
+    onClick: () => alert('로그인 버튼 클릭'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'String 형식으로 너비 값을 지정할 수 있습니다',
+      },
+    }
+  }
+};
+
+
+
+// 다른 텍스트를 가진 버튼
+export const WithDifferentText: Story = {
+  args: {
+    text: '카카오 로그인',
+    onClick: () => alert('카카오 로그인 버튼 클릭'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '버튼에 들어갈 텍스트 문구를 지정할 수 있습니다',
+      },
+    }
+  }
+};

src/pages/Login/LoginButton/LoginButton.tsx

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+import { Button } from '@chakra-ui/react';
+import theme from '@/styles/theme';
+
+const STYLES = {
+  BUTTON : {
+    HEIGHT : '2.875rem',         //46px
+    FONT_SIZE : '1rem',          //16px
+    BORDER_RADIUS : '0.9375rem', //15px
+    MARGIN_BOTTOM : '1rem',
+  }
+}
+
+
+const StyledButton = styled(Button)<{width : string}>`
+  width : ${props =>props.width};
+  height : ${STYLES.BUTTON.HEIGHT};
+  font : ${theme.typography.fontFamily};
+  font-size : ${STYLES.BUTTON.FONT_SIZE};
+  font-weight : normal;
+  color : ${theme.colors.white};
+  background : ${theme.colors.primary};
+  border-radius : ${STYLES.BUTTON.BORDER_RADIUS};
+  margin-bottom : ${STYLES.BUTTON.MARGIN_BOTTOM};
+`;
+
+type LoginButtonProps = {
+  text : string;
+  width?: string;
+  onClick?:()=>void;
+};
+
+export const LoginButton = ({ text, width="100%"  , onClick }: LoginButtonProps) => {
+  return (
+    <StyledButton
+      type="submit"
+      width={width}
+      onClick={onClick}
+      _hover={{
+        backgroundColor: theme.colors.primary,
+        opacity: 0.7,
+        color : theme.colors.black
+    }}>{text}</StyledButton>
+  );
+};
+

src/pages/Login/LoginForm/LoginForm.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoginForm } from './LoginForm';
+import { ChakraProvider } from '@chakra-ui/react';
+import theme from '@/styles/theme';
+import { action } from '@storybook/addon-actions';
+
+const meta = {
+  title: 'Pages/Login/LoginForm',
+  component: LoginForm,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '로그인 폼 컴포넌트입니다. 이메일과 비밀번호 입력, 유효성 검사 기능을 포함합니다.',
+      },
+    },
+  },
+  argTypes: {
+    onSubmit: {
+      description: '로그인 폼 제출 시 호출되는 콜백 함수입니다. 이메일과 비밀번호 데이터를 파라미터로 전달받습니다.',
+    }
+  },
+  decorators: [
+    (Story) => (
+      <ChakraProvider theme={theme}>
+        <Story />
+      </ChakraProvider>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof LoginForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 모든 스토리에서 공통으로 사용할 onSubmit 함수
+const mockSubmit = action('onSubmit');
+
+export const Default: Story = {
+  args: {
+    onSubmit: mockSubmit
+  },
+};