Merge pull request #53 from Leets-Official/51-feat/ChatbotFloatingButton-컴포넌트-제작

[Feat] ChatbotFloatingButton 컴포넌트 제작

Author: YeBeenChoi

src/pages/playground.tsx

@@ -1,6 +1,7 @@
 import { BannerCard } from '@shared/ui/BannerCard/BannerCard';
 import { Button } from '@shared/ui/Button/Button';
 import { Card } from '@shared/ui/Card/Card';
+import { ChatbotFloatingButton } from '@shared/ui/ChatbotFloatingButton';
 import { ChatBubble } from '@shared/ui/ChatBubble';
 import { ChatInput } from '@shared/ui/ChatInput';
 import { ChatPromptList } from '@shared/ui/ChatPromptList';
@@ -161,6 +162,11 @@ export default function Playground() {
           onSend={() => {}}
         />
       </section>
+      {/* Chatbot Floating Button */}
+      <section className="flex flex-col gap-4">
+        <h2 className="typo-body-1">ChatbotFloatingButton</h2>
+        <ChatbotFloatingButton />
+      </section>
       {/* Favorite Button */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">FavoriteButton</h2>

src/shared/assets/icons/common/chatbot.svg

@@ -7,3 +7,4 @@ export { default as HeartIcon } from './heart-outline.svg?react';
 export { default as AlertDotIcon } from './alertdot.svg?react';
 export { default as HamburgerIcon } from './hamburger-md.svg?react';
 export { default as kakaoLoginImg } from './kakao.png';
+export { default as ChatbotIcon } from './chatbot.svg?react';

src/shared/assets/icons/common/index.ts

@@ -1,12 +1,13 @@
 export {
   AlertDotIcon,
+  HamburgerIcon,
+  kakaoLoginImg,
   CaretDownMdIcon,
   CheckIcon,
   DoneIcon,
-  HamburgerIcon,
   HeartIcon,
-  kakaoLoginImg,
-  SearchMagnifyingGlassIcon,
   SendIcon,
+  SearchMagnifyingGlassIcon,
+  ChatbotIcon,
 } from './common';
 export { GearIcon, ShoppingIcon, SellIcon } from './banner';

src/shared/assets/icons/index.ts

@@ -0,0 +1,25 @@
+import { ChatbotIcon } from '@shared/assets/icons';
+import { chatbotFloatingButtonVariants } from './ChatbotFloatingButton.variants';
+import type { ComponentPropsWithoutRef } from 'react';
+
+export type ChatbotFloatingButtonProps = ComponentPropsWithoutRef<'button'> & {
+  label?: string;
+};
+
+export const ChatbotFloatingButton = ({
+  label = '챗봇상담',
+  className,
+  type = 'button',
+  ...props
+}: ChatbotFloatingButtonProps) => {
+  const styles = chatbotFloatingButtonVariants();
+
+  return (
+    <button type={type} className={styles.root({ className })} aria-label={label} {...props}>
+      <span className={styles.content()}>
+        <ChatbotIcon className={styles.icon()} aria-hidden="true" />
+        <span className={styles.label()}>{label}</span>
+      </span>
+    </button>
+  );
+};

src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.tsx

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+export const chatbotFloatingButtonVariants = tv({
+  slots: {
+    root: [
+      'group flex items-center',
+      'w-[80px] h-[80px]',
+      'rounded-full',
+      'bg-[var(--color-gray-50)]',
+      'shadow-[0_4px_4px_0_var(--color-gray-100)]',
+      'p-0',
+      'overflow-hidden',
+      'transition-[width,background-color,box-shadow] duration-200 ease-out',
+      'hover:py-[9px] hover:pl-[8px] hover:pr-[19px]',
+      'focus-visible:py-[9px] focus-visible:pl-[8px] focus-visible:pr-[19px]',
+      'hover:w-[182px] hover:bg-[var(--color-gray-200)]',
+      'focus-visible:w-[182px] focus-visible:bg-[var(--color-gray-200)]',
+    ],
+    content: [
+      'flex items-center justify-center w-full h-full',
+      'gap-0 transition-[gap] duration-200 ease-out',
+      'group-hover:justify-start group-focus-visible:justify-start',
+      'group-hover:gap-0 group-focus-visible:gap-0',
+      'group-hover:w-[144px] group-hover:h-[67px] group-focus-visible:w-[144px] group-focus-visible:h-[67px]',
+      'group-hover:mx-auto group-focus-visible:mx-auto',
+    ],
+    icon: ['w-[74px] h-[67px] shrink-0'],
+    label: [
+      'typo-title-3 text-[var(--color-black)] whitespace-nowrap',
+      'opacity-0 max-w-0 translate-x-2',
+      'transition-[opacity,transform,max-width] duration-200 ease-out',
+      'group-hover:opacity-100 group-hover:max-w-[120px] group-hover:translate-x-0',
+      'group-focus-visible:opacity-100 group-focus-visible:max-w-[120px] group-focus-visible:translate-x-0',
+    ],
+  },
+});

src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.variants.ts

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