refactor: 테스트 로그인 버튼 컴포넌트 구현 및 로그인 페이지에 추가 (#287)

* refactor: TestSignInButton 컴포넌트

* refactor: 로그인 페이지에 테스트 버튼 추가

* refactor: 카카오 로그인 비활성화

src/components/molecules/TestSignInButton/TestSignInButton.tsx

@@ -0,0 +1,64 @@
+import { Box, Image, Text } from '@chakra-ui/react';
+import { BorderBox } from '~/components/atoms/BorderBox';
+import { assets } from '~/config/assets';
+
+type TestSignInButtonProps = {
+  logo: 'mentee' | 'mentor';
+  onClick: VoidFunction;
+};
+
+const TestSignInButton = ({ logo, onClick }: TestSignInButtonProps) => {
+  const LOGOS = {
+    mentee: {
+      svg: assets.menteeSvg,
+      text: '멘티',
+    },
+    mentor: {
+      svg: assets.mentorSvg,
+      text: '멘토',
+    },
+  };
+
+  return (
+    <button onClick={onClick}>
+      <BorderBox
+        w={'5.8rem'}
+        h={'8rem'}
+        display={'flex'}
+        flexDirection="column"
+        gap={'0.7rem'}
+        justifyContent={'center'}
+        alignItems={'center'}
+        position={'relative'}
+      >
+        <Box
+          w={'auto'}
+          h={'1.2rem'}
+          zIndex={1}
+          bgColor={'gray.900'}
+          position="absolute"
+          top={'0'}
+          right={'-3'}
+          borderLeftRadius={'0.2rem'}
+          paddingLeft={'0.4rem'}
+          paddingRight={'0.6rem'}
+        >
+          <Text
+            fontWeight={'bold'}
+            fontSize={'xs'}
+            color={'lightgreen'}
+          >
+            TEST
+          </Text>
+        </Box>
+        <Image
+          src={LOGOS[logo].svg}
+          alt={LOGOS[logo].text}
+        />
+        <Box as="span">{LOGOS[logo].text}</Box>
+      </BorderBox>
+    </button>
+  );
+};
+
+export default TestSignInButton;

src/components/molecules/TestSignInButton/index.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta } from '@storybook/react';
+import TestSignInButton from './TestSignInButton';
+
+const meta = {
+  title: 'Resumeme/Components/Molecules/TestSignInButton',
+  component: TestSignInButton,
+  tags: ['autodocs'],
+} satisfies Meta<typeof TestSignInButton>;
+
+export default meta;
+
+export const MenteeSignInButton = () => {
+  return (
+    <TestSignInButton
+      logo="mentee"
+      onClick={() => {}}
+    />
+  );
+};
+
+export const MentorSignInButton = () => {
+  return (
+    <TestSignInButton
+      logo="mentor"
+      onClick={() => {}}
+    />
+  );
+};

src/components/molecules/TestSignInButton/index.ts

@@ -0,0 +1,3 @@
+import TestSignInButton from './TestSignInButton';
+
+export { TestSignInButton };

src/components/templates/SignInTemplate/SignInTemplate.tsx

@@ -1,12 +1,13 @@
 import { ChevronRightIcon } from '@chakra-ui/icons';
-import { Image, Divider, Flex, Heading, Icon, Text } from '@chakra-ui/react';
+import { Image, Divider, Flex, Heading, Icon, Text, Box } from '@chakra-ui/react';
 import { Link } from '@chakra-ui/react';
 import { AiFillGithub } from 'react-icons/ai';
 import { RiNotionFill } from 'react-icons/ri';
 import { BorderBox } from '~/components/atoms/BorderBox';
 import { OAuthSignInButton } from '~/components/molecules/OAuthSignInButton';
+import { TestSignInButton } from '~/components/molecules/TestSignInButton';
 import { assets } from '~/config/assets';
-import CONSTANTS from '~/constants';
+// import CONSTANTS from '~/constants';
 
 const TEXT = {
   welcomeMessage: '이력, 써에 가입하고 피드백을 받아보세요.',
@@ -18,7 +19,8 @@ const TEXT = {
 
 const SignInTemplate = () => {
   const handleKakaoClick = () => {
-    window.location.href = CONSTANTS.KAKAO_SIGNIN_URL;
+    alert('현재는 테스트 계정만 로그인할 수 있습니다.');
+    // window.location.href = CONSTANTS.KAKAO_SIGNIN_URL;
   };
 
   return (
@@ -40,10 +42,27 @@ const SignInTemplate = () => {
         </Text>
         <Divider borderColor={'gray.300'} />
         <Text color={'gray.700'}>{TEXT.subMessage}</Text>
-        <OAuthSignInButton
-          oAuthPlatform="kakao"
-          onClick={handleKakaoClick}
-        />
+        <Box
+          display={'flex'}
+          gap={4}
+        >
+          <OAuthSignInButton
+            oAuthPlatform="kakao"
+            onClick={handleKakaoClick}
+          />
+          <TestSignInButton
+            logo="mentee"
+            onClick={() => {
+              alert('clicked!');
+            }}
+          />
+          <TestSignInButton
+            logo="mentor"
+            onClick={() => {
+              alert('clicked!');
+            }}
+          />
+        </Box>
         <Link href={'#'}>
           <Text
             display={'flex'}