[#459] [유저 로그인] 로그인 BottomSheet 컴포넌트 작성 (#460)

* feat: LoginBottomSheet 컴포넌트 작성

* feat: BottomNavigation에 BottomSheet 이벤트 등록

* fix: SVG stroke-width 파라미터명 수정

* fix: 좋아요 갯수 뱃지 아이콘 스타일링 방식을 className 인라인으로 수정

* fix: BottomNavigation 롤백 및 시맨틱 태그 적용

* chore: 주석 제거

* chore: 불필요한 Fragment 제거

src/v1/base/BottomNavigation.tsx

@@ -41,20 +41,20 @@ const iconColor = {
 
 const BottomNavigation = ({ pathname }: BottomNavigationProps) => {
   return (
-    <div className="absolute bottom-0 left-0 flex h-[6.4rem] w-full max-w-[43rem] justify-between border-t-[0.05rem] border-black-200 bg-white px-[2.6rem] pb-[1.2rem] pt-[0.8rem]">
+    <nav className="absolute bottom-0 left-0 flex h-[6.4rem] w-full max-w-[43rem] justify-between border-t-[0.05rem] border-black-200 bg-white px-[2.6rem] pb-[1.2rem] pt-[0.8rem]">
       {icons.map(({ icon, label, href }) => (
         <Link key={label} type="button" href={href}>
-          <div
-            className={`flex h-[4.4rem] w-[4.6rem] flex-col items-center justify-center text-xs font-bold ${
+          <button
+            className={`flex h-[4.4rem] w-[4.6rem] flex-col items-center justify-center ${
               href === pathname ? iconColor.active : iconColor.inactive
             }`}
           >
             <div className="h-[2.6rem] w-[2.6rem] text-placeholder">{icon}</div>
-            {label}
-          </div>
+            <p className="text-xs font-bold">{label}</p>
+          </button>
         </Link>
       ))}
-    </div>
+    </nav>
   );
 };
 

src/v1/bookShelf/BookShelf.tsx

@@ -33,13 +33,7 @@ const Info = ({ bookshelfName, bookshelfId, likeCount }: InfoProps) => {
       </div>
       <Badge colorScheme="red" fontWeight="bold" size="small">
         <div className="flex items-center gap-[0.4rem]">
-          <IconHeart
-            fill="#F56565"
-            stroke="white"
-            stroke-width={1.5}
-            height="1.3rem"
-            w="1.3rem"
-          />
+          <IconHeart className="h-[1.3rem] w-[1.3rem] fill-warning-800 stroke-white stroke-[0.15rem]" />
           <div className="bold text-xs">{likeCount}</div>
         </div>
       </Badge>

src/v1/profile/LoginBottomSheet.tsx

@@ -0,0 +1,44 @@
+import { IconClose, IconKakao, LogoWithText } from '@public/icons';
+
+import Button from '@/v1/base/Button';
+import BottomSheet from '@/v1/base/BottomSheet';
+
+type LoginBottomSheetProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const LoginBottomSheet = ({ isOpen, onClose }: LoginBottomSheetProps) => {
+  const handleClickKakaoLogin = () => {
+    return (location.href = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_REDIRECT_URI}`);
+  };
+
+  return (
+    <BottomSheet isShow={isOpen} onClose={onClose}>
+      <IconClose
+        className="absolute right-0 top-0 mr-[2rem] mt-[2rem] h-[2rem] w-[2rem] cursor-pointer fill-black-900"
+        onClick={onClose}
+      />
+      <div className="m-auto flex w-full max-w-[38rem] flex-col items-center gap-[2.5rem] px-[2rem] pt-[5rem]">
+        <LogoWithText className="h-auto w-[6rem]" />
+        <p className="text-lg font-bold text-black-700">
+          로그인이 필요한 서비스에요!
+        </p>
+        <p className="whitespace-pre-line text-center text-sm font-normal text-placeholder">
+          간편하게 카카오로 로그인을 하고,
+          <br />
+          <span className="text-main-900">다독다독</span>의 다양한 기능을
+          이용해보세요.
+        </p>
+        <Button onClick={handleClickKakaoLogin} colorScheme="kakao" size="full">
+          <div className="flex w-full items-center justify-center gap-[1rem]">
+            <IconKakao className="h-auto w-[1.6rem]" />
+            <p className="text-md font-normal">카카오 로그인</p>
+          </div>
+        </Button>
+      </div>
+    </BottomSheet>
+  );
+};
+
+export default LoginBottomSheet;