feat: logo svgr로 import하도록 수정

prgrms-web-devcourse · Sep 9, 2023 · 12a0ab2 · 12a0ab2
1 parent 979b04f
commit 12a0ab2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 16 deletions.
diff --git a/public/icons/index.ts b/public/icons/index.ts
@@ -1,3 +1,6 @@
+// 로고
+export { default as LogoWithText } from './logo-with-text.svg';
+
 // 상단 Nav & Header
 export { default as IconArrowLeft } from './arrow-left.svg';
 export { default as IconClose } from './close.svg';

diff --git a/public/icons/logo-with-text.svg b/public/icons/logo-with-text.svg
diff --git a/src/stories/Base/BottomSheet.stories.tsx b/src/stories/Base/BottomSheet.stories.tsx
@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import Image from 'next/image';
 
-import { IconClose, IconKakao } from '@public/icons';
+import { IconClose, IconKakao, LogoWithText } from '@public/icons';
 import Button from '@/ui/Base/Button';
 import BottomSheet from '@/ui/Base/BottomSheet';
 import useDisclosure from '@/hooks/useDisclosure';
@@ -38,20 +37,17 @@ const LoginBottomSheet = () => {
         >
           <IconClose />
         </div>
-        <div className="m-auto flex w-full max-w-[38rem] flex-col items-center gap-[2.2rem] px-[2rem] pt-[5rem]">
-          <Image
-            width="60"
-            height="61"
-            src="/icons/logo-with-text.svg"
-            alt="logo"
-          />
+        <div className="m-auto flex w-full max-w-[38rem] flex-col items-center gap-[2.5rem] px-[2rem] pt-[5rem]">
+          <div className="h-auto w-[6rem]">
+            <LogoWithText />
+          </div>
           <p className="text-lg font-bold text-black-700">
             로그인이 필요한 서비스에요!
           </p>
-          <p className=" text-center text-sm font-normal text-placeholder">
+          <p className="text-center text-sm font-normal text-placeholder">
             간편하게 카카오로 로그인을 하고,
             <br />
-            <span className=" text-main-900">다독다독</span>의 다양한 기능을
+            <span className="text-main-900">다독다독</span>의 다양한 기능을
             이용해보세요.
           </p>
           <Button colorScheme="kakao" size="full">

diff --git a/src/ui/Base/BottomSheet.tsx b/src/ui/Base/BottomSheet.tsx
@@ -16,10 +16,10 @@ const BottomSheet = ({
       <Dialog as="div" className="relative z-10" onClose={onClose}>
         <Transition.Child
           as={Fragment}
-          enter="ease-in-out duration-500"
+          enter="ease-in-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
-          leave="ease-in-out duration-500"
+          leave="ease-in-out duration-300"
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
@@ -31,10 +31,10 @@ const BottomSheet = ({
             <div className="pointer-events-none fixed bottom-0 left-1/2 flex max-w-full -translate-x-1/2">
               <Transition.Child
                 as={Fragment}
-                enter="transform transition ease-in-out duration-500"
+                enter="transform transition ease-in-out duration-300"
                 enterFrom="translate-y-full"
                 enterTo="translate-y-0"
-                leave="transform transition ease-in-out duration-500"
+                leave="transform transition ease-in-out duration-300"
                 leaveFrom="translate-y-0"
                 leaveTo="translate-y-full"
               >