feat: 로그인 유도 BottomSheet 추가 (#104)

* feat: ToolTip 컴포넌트 추가

* feat: LoginIconSet 컴포넌트 추가

* chore: 스타일 일부 수정

* feat: LoginBottomSheet 컴포넌트 추가

* chore: 이미지 변경

src/components/atoms/index.ts

@@ -6,4 +6,5 @@ export { Span } from './span';
 export { Star } from './star';
 export { Tag } from './tag';
 export { Textarea } from './textarea';
+export { ToolTip } from './toolTip';
 export { Typography } from './typography';

src/components/atoms/toolTip/ToolTip.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ToolTip } from './ToolTip';
+
+const meta: Meta<typeof ToolTip> = {
+  title: 'components/atoms/toolTip',
+  component: ToolTip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToolTip>;
+
+export const Basic: Story = {
+  args: {
+    title: '3초만에 시작하기',
+  },
+};

src/components/atoms/toolTip/ToolTip.tsx

@@ -0,0 +1,19 @@
+import { colors } from '@/../styles/theme';
+import ReverseTriangleIcon from '@/assets/icons/reverse-triangle.svg';
+
+import { Typography } from '../typography';
+
+interface ToolTipProps {
+  title: string;
+}
+
+export const ToolTip = ({ title }: ToolTipProps) => {
+  return (
+    <div className="w-fit px-3xs py-5xs flex items-center justify-center bg-blue-30 rounded-[12px] relative">
+      <Typography type="title5" className="text-white">
+        {title}
+      </Typography>
+      <ReverseTriangleIcon width={14} height={10} fill={colors.blue[30]} className="absolute bottom-[-9px]" />
+    </div>
+  );
+};

src/components/atoms/toolTip/index.ts

@@ -0,0 +1 @@
+export { ToolTip } from './ToolTip';

src/components/molecules/index.ts

@@ -1,5 +1,6 @@
 export { ContentWrapper } from './contentWrapper';
 export { GoalDetail } from './goalDetail';
 export { LimitedLengthInput } from './limitedLengthInput';
+export { LoginIconSet } from './loginIconSet';
 export { SelectableCardList } from './selectableCardList';
 export { Tabs } from './tabs';

src/components/molecules/loginIconSet/LoginIconSet.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LoginIconSet } from './LoginIconSet';
+
+const meta: Meta<typeof LoginIconSet> = {
+  title: 'components/molecules/loginIconSet',
+  component: LoginIconSet,
+  decorators: [
+    (Story) => (
+      <div className="w-[240px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoginIconSet>;
+
+export const Basic: Story = {
+  render: () => <LoginIconSet naver google kakao />,
+};

src/components/molecules/loginIconSet/LoginIconSet.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+
+import GoogleIcon from '@/assets/icons/google.svg';
+import KakaoIcon from '@/assets/icons/kakao.svg';
+import NaverIcon from '@/assets/icons/naver.svg';
+
+interface LoginIconSetProps {
+  google?: boolean;
+  naver?: boolean;
+  kakao?: boolean;
+}
+
+const loginPath = {
+  google: `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/google`,
+  naver: `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/naver`,
+  kakao: '', // TODO: 개발 후 추가
+};
+
+export const LoginIconSet = ({ google = false, naver = false, kakao = false }: LoginIconSetProps) => {
+  return (
+    <div className="w-fit flex justify-between items-center">
+      {kakao && (
+        <Link href={{ pathname: loginPath.kakao }}>
+          <KakaoIcon />
+        </Link>
+      )}
+      {google && (
+        <Link href={{ pathname: loginPath.google }}>
+          <GoogleIcon />
+        </Link>
+      )}
+      {naver && (
+        <Link href={{ pathname: loginPath.naver }}>
+          <NaverIcon />
+        </Link>
+      )}
+    </div>
+  );
+};

src/components/molecules/loginIconSet/index.ts

@@ -0,0 +1 @@
+export { LoginIconSet } from './LoginIconSet';

src/features/home/components/loginBottomSheet/LoginBottomSheet.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LoginBottomSheet } from './LoginBottomSheet';
+
+import './LoginBottomSheet.styles.css';
+
+const meta: Meta<typeof LoginBottomSheet> = {
+  title: 'features/home/loginBottomSheet',
+  component: LoginBottomSheet,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoginBottomSheet>;
+
+export const Basic: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+  },
+};

src/features/home/components/loginBottomSheet/LoginBottomSheet.styles.css

@@ -0,0 +1,7 @@
+[data-rsbs-header] {
+  @apply bg-gradient6 h-full rounded-[15px];
+}
+
+[data-rsbs-content] {
+  @apply absolute w-full top-[15px] z-10;
+}

src/features/home/components/loginBottomSheet/LoginBottomSheet.tsx

@@ -0,0 +1,33 @@
+import Image from 'next/image';
+
+import BandiBoodi3DImage from '@/assets/images/bandiboodi-3d.png';
+import LogoImage from '@/assets/images/logo.png';
+import { BottomSheet, LoginIconSet, ToolTip, Typography } from '@/components';
+
+import { StarBg } from './StarBg';
+
+interface LoginBottomSheetProps {
+  open: boolean;
+  onClose: VoidFunction;
+}
+
+export const LoginBottomSheet = ({ open, onClose }: LoginBottomSheetProps) => {
+  return (
+    <BottomSheet open={open} onDismiss={onClose} fixedMaxHeight={504}>
+      <div className="relative w-full h-[490px] flex flex-col items-center pt-sm">
+        <StarBg />
+        <div className="flex flex-col gap-4xs px-[49px] items-center">
+          <Image src={LogoImage} width={133} alt="logo" />
+          <Typography className="text-blue-50 font-insungit font-medium">내가 직접 그리는 나의 인생 지도</Typography>
+        </div>
+        <div className="absolute bottom-0 w-full h-[237px] pt-[100px] bg-gradient7 flex flex-col gap-4xs items-center">
+          <ToolTip title="3초만에 시작하기" />
+          <LoginIconSet google />
+        </div>
+        <div className="absolute top-[127px]">
+          <Image src={BandiBoodi3DImage} width={220} alt="bandiboodi" />
+        </div>
+      </div>
+    </BottomSheet>
+  );
+};

src/features/home/components/loginBottomSheet/StarBg.tsx

@@ -0,0 +1,12 @@
+import { Star } from '@/components';
+
+export const StarBg = () => {
+  return (
+    <>
+      <Star size={24} position={{ x: 'left-[69px]', y: 'top-[12px]' }} />
+      <Star size={24} position={{ x: 'right-[69px]', y: 'top-[86px]' }} />
+      <Star size={19} position={{ x: 'left-[41px]', y: 'top-[164px]' }} />
+      <Star size={19} position={{ x: 'right-[31px]', y: 'top-[202px]' }} />
+    </>
+  );
+};

src/features/home/components/loginBottomSheet/index.ts

@@ -0,0 +1 @@
+export { LoginBottomSheet } from './LoginBottomSheet';

styles/theme/backgroundImage.ts

@@ -4,4 +4,7 @@ export const backgroundImage = {
   gradient3: 'linear-gradient(90deg, rgba(140,104,255,1) 0%, rgba(113,203,255,1) 100%)',
   gradient4: 'linear-gradient(90deg, rgba(64,94,206,1) 0%, rgba(95,121,214,1) 50%, rgba(127,108,244,1) 100%)',
   gradient5: 'linear-gradient(295deg, rgba(252, 243, 255, 1) -2.54%, rgba(234, 241, 255, 1) 100.8%)',
+  gradient6: 'linear-gradient(233deg, rgba(200, 180, 255, 1) -50.9%, rgba(255, 255, 255, 0) 87.98%)',
+  gradient7:
+    'linear-gradient(180deg, rgba(169, 194, 220, 1) 0%, rgba(207, 223, 242, 1) 17.71%, rgba(203, 211, 221, 1) 54.17%, rgba(210, 216, 222, 1) 68.69%)',
 };