🎉 구글, 카카오 로그인 버튼 생성

.env.example

@@ -1 +1,2 @@
-NEXT_PUBLIC_API_MOCKING=enabled # or disabled
+NEXT_PUBLIC_API_MOCKING=enabled # or disabled
+CHROMATIC_TOKEN=your-token

src/components/domain/buttons/LoginButtons/LoginButtons.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { KakaoLoginButton, GoogleLoginButton } from './LoginButtons'
+
+const meta = {
+  title: 'DOMAIN/LoginButtons',
+  component: KakaoLoginButton,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof KakaoLoginButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+  render: () => (
+    <section className="flex flex-col gap-3">
+      <KakaoLoginButton onClickButton={() => alert('카카오 버튼')} />
+      <GoogleLoginButton onClickButton={() => alert('구글 버튼')} />
+    </section>
+  ),
+}
+
+export const Kakao: Story = {
+  render: () => <KakaoLoginButton onClickButton={() => alert('카카오 버튼')} />,
+}
+
+export const Google: Story = {
+  render: () => <GoogleLoginButton onClickButton={() => alert('구글 버튼')} />,
+}

src/components/domain/buttons/LoginButtons/LoginButtons.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import Assets from '@/config/assets'
+
+const KakaoLoginButton = ({ onClickButton }: { onClickButton: () => void }) => {
+  return (
+    <Button
+      onClick={onClickButton}
+      className="relative h-10 text-black transition-all bg-kakao-color hover:brightness-90 w-80 hover:bg-kakao-color"
+    >
+      <Image
+        className="absolute flex-shrink-0 left-3"
+        src={Assets.kakaoIcon}
+        alt="카카오 로그인"
+      />
+      카카오 계정으로 시작하기
+    </Button>
+  )
+}
+
+const GoogleLoginButton = ({
+  onClickButton,
+}: {
+  onClickButton: () => void
+}) => {
+  return (
+    <Button
+      onClick={onClickButton}
+      className="relative h-10 text-black transition-all bg-white border border-gray hover:brightness-90 w-80 hover:bg-white"
+    >
+      <Image
+        className="absolute flex-shrink-0 left-3"
+        src={Assets.googleIcon}
+        alt="구글 로그인"
+      />
+      구글 계정으로 시작하기
+    </Button>
+  )
+}
+
+export { KakaoLoginButton, GoogleLoginButton }

src/components/domain/buttons/LoginButtons/index.tsx

@@ -0,0 +1,3 @@
+import { KakaoLoginButton, GoogleLoginButton } from './LoginButtons'
+
+export { KakaoLoginButton, GoogleLoginButton }

src/config/assets.ts

@@ -1,9 +1,13 @@
 import AlarmIcon from '/public/images/bell.svg'
+import GoogleIcon from '/public/images/google.png'
+import KakaoIcon from '/public/images/kakao.png'
 import MenuIcon from '/public/images/menu-icon.svg'
 
 const Assets = {
   menuIcon: MenuIcon,
   alarmIcon: AlarmIcon,
+  googleIcon: GoogleIcon,
+  kakaoIcon: KakaoIcon,
 } as const
 
 export default Assets

src/styles/colors.ts

@@ -8,6 +8,7 @@ const COLORS = {
   gray: '#BFBFBF',
   black: '#000000',
   white: '#FFFFFF',
+  kakao: '#FEE103',
 
   //   dark: {
   //     primary_300: '#534CD0',
@@ -30,6 +31,7 @@ const LIGHT_THEMES = {
   'text-color': COLORS.black,
   'background-secondary-color': COLORS.gray,
   'dialog-background-color': COLORS.black,
+  'kakao-color': COLORS.kakao,
 } as const
 
 const DARK_THEMES = {
@@ -41,6 +43,7 @@ const DARK_THEMES = {
   'text-color': COLORS.white,
   'background-secondary-color': COLORS.gray,
   'dialog-background-color': COLORS.black,
+  'kakao-color': COLORS.kakao,
 } as const
 
 export default COLORS