From fbe50da180c493396b104e6cff82721f933f05e7 Mon Sep 17 00:00:00 2001
From: kyuran kim <57716832+gxxrxn@users.noreply.github.com>
Date: Wed, 12 Jun 2024 17:24:14 +0900
Subject: [PATCH] =?UTF-8?q?[#616]=20=EC=B1=85=EC=9E=A5=20=EC=A2=8B?=
 =?UTF-8?q?=EC=95=84=EC=9A=94=20=EB=B1=83=EC=A7=80=20UI=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#620)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: Badge style 수정

- 모임 목록 페이지 카드 badge size medium으로 통일

* feat: svgo removeViewBox 속성 off

* refactor: like button style 수정, heart svg 수정

* refactor: 북카이브 책장, 프로필 페이지 책장/모임 영역 ui(좋아요 개수 위치, 더보기 화살표) 수정
---
 next.config.js                                | 20 ++++++++++++-
 public/icons/heart.svg                        |  4 +--
 src/v1/base/Badge.tsx                         |  2 +-
 src/v1/base/LikeButton.tsx                    |  8 ++----
 src/v1/bookGroup/DetailBookGroupCard.tsx      |  4 +--
 src/v1/bookShelf/BookShelf.tsx                | 21 +++++++-------
 .../bookShelf/ProfileBookshelfPresenter.tsx   | 28 ++++++++-----------
 .../profile/group/ProfileGroupPresenter.tsx   | 11 ++++----
 8 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/next.config.js b/next.config.js
index f8161e3d..76f6c889 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,7 +7,25 @@ const nextConfig = {
   webpack: config => {
     config.module.rules.push({
       test: /\.svg$/,
-      use: ['@svgr/webpack'],
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'preset-default',
+                  params: {
+                    overrides: {
+                      removeViewBox: false,
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ],
     });
     return config;
   },
diff --git a/public/icons/heart.svg b/public/icons/heart.svg
index 188a9c64..18dd12e7 100644
--- a/public/icons/heart.svg
+++ b/public/icons/heart.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.33792 3.34375C3.83209 3.34375 2.54834 4.47042 2.54834 5.93292C2.54834 6.94204 3.02067 7.79138 3.64684 8.495C4.27138 9.19646 5.07684 9.78525 5.8043 10.2782L7.06042 11.1286C7.1276 11.174 7.20684 11.1983 7.28792 11.1983C7.36901 11.1983 7.44824 11.174 7.51542 11.1286L8.77155 10.2782C9.49955 9.78525 10.3045 9.19646 10.9285 8.495C11.5552 7.79138 12.0275 6.94204 12.0275 5.93292C12.0275 4.47042 10.7438 3.34375 9.23792 3.34375C8.46117 3.34375 7.77813 3.70775 7.28792 4.179C6.79772 3.70775 6.11413 3.34375 5.33792 3.34375Z" fill="none"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#F56565" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5.78833C2 4.21333 3.3825 3 5.00417 3C5.84008 3 6.57625 3.392 7.10417 3.8995C7.63208 3.392 8.36767 3 9.20417 3C10.8258 3 12.2083 4.21333 12.2083 5.78833C12.2083 6.8675 11.7481 7.816 11.1105 8.61867C10.4747 9.419 9.64167 10.0986 8.84483 10.651C8.53975 10.8622 8.23233 11.0564 7.95 11.1999C7.68517 11.3347 7.38125 11.4583 7.10417 11.4583C6.82708 11.4583 6.52317 11.3347 6.25833 11.1999C5.94863 11.0366 5.64991 10.8532 5.36408 10.651C4.56667 10.0986 3.73425 9.419 3.09783 8.61867C2.46025 7.816 2 6.8675 2 5.78833Z" stroke="#F56565" stroke-width="1.5"/>
 </svg>
diff --git a/src/v1/base/Badge.tsx b/src/v1/base/Badge.tsx
index 3330bc4f..0076bbd5 100644
--- a/src/v1/base/Badge.tsx
+++ b/src/v1/base/Badge.tsx
@@ -82,7 +82,7 @@ const Badge = ({
 
   return (
     <div
-      className={`m-0 flex w-fit items-center justify-center gap-[0.4rem] rounded-[0.5rem] border-[0.05rem] px-[0.8rem] py-[0.25rem] ${computedClasses}`}
+      className={`m-0 flex w-fit items-center justify-center gap-[0.4rem] rounded-[0.5rem] border-[0.1rem] px-[0.6rem] py-[0.25rem] ${computedClasses}`}
       {...props}
     >
       {children}
diff --git a/src/v1/base/LikeButton.tsx b/src/v1/base/LikeButton.tsx
index ee71d2cd..9b091d8a 100644
--- a/src/v1/base/LikeButton.tsx
+++ b/src/v1/base/LikeButton.tsx
@@ -15,13 +15,11 @@ const LikeButton = ({ isLiked, likeCount, onClick }: LikeButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className={`${BG_COLOR_CLASS} flex h-[2.4rem] min-w-[5.6rem] items-center gap-[0.4rem] rounded-full border-[0.1rem] border-warning-800 bg-warning-800 px-[1rem]`}
+      className={`${BG_COLOR_CLASS} flex h-[2.4rem] items-center gap-[0.4rem] rounded-full border-[0.1rem] border-warning-800 bg-warning-800`}
     >
-      <IconHeart
-        className={`${ICON_COLOR_CLASS} h-[1.5rem] w-[1.5rem] fill-white stroke-[0.15rem]`}
-      />
+      <IconHeart className={`${ICON_COLOR_CLASS} ml-[1rem]`} />
       <p
-        className={`${TEXT_COLOR_CLASS} min-w-[1.5rem] text-center font-caption1-bold`}
+        className={`${TEXT_COLOR_CLASS} mr-[1.1rem] min-w-[1.2rem] text-end font-caption1-bold`}
       >
         {likeCount}
       </p>
diff --git a/src/v1/bookGroup/DetailBookGroupCard.tsx b/src/v1/bookGroup/DetailBookGroupCard.tsx
index f0e81ca2..9951ec81 100644
--- a/src/v1/bookGroup/DetailBookGroupCard.tsx
+++ b/src/v1/bookGroup/DetailBookGroupCard.tsx
@@ -61,9 +61,7 @@ const DetailBookGroupCard = ({
 export default DetailBookGroupCard;
 
 const Public = ({ isPublic }: { isPublic: boolean }) => (
-  <Badge size="large" colorScheme="grey">
-    {isPublic ? '공개' : '비공개'}
-  </Badge>
+  <Badge colorScheme="grey">{isPublic ? '공개' : '비공개'}</Badge>
 );
 
 const Title = ({ title }: { title: string }) => {
diff --git a/src/v1/bookShelf/BookShelf.tsx b/src/v1/bookShelf/BookShelf.tsx
index 1f1bc0ff..650c98a5 100644
--- a/src/v1/bookShelf/BookShelf.tsx
+++ b/src/v1/bookShelf/BookShelf.tsx
@@ -10,8 +10,6 @@ import { APIBook } from '@/types/book';
 import { APIBookshelf } from '@/types/bookshelf';
 import { IconArrowRight, IconHeart } from '@public/icons';
 
-import Badge from '@/v1/base/Badge';
-
 const BookShelf = ({ children }: { children: ReactNode }) => {
   return <>{children}</>;
 };
@@ -31,17 +29,18 @@ const Info = ({ bookshelfName, bookshelfId, likeCount }: InfoProps) => {
   return (
     <div className="flex flex-col gap-[1rem] px-[2rem]">
       <div className="flex items-center justify-between">
-        <div className="font-body2-bold">{bookshelfName}</div>
-        <Link href={`/bookshelf/${bookshelfId}`}>
-          <IconArrowRight width="1.8rem" height="1.8rem" />
+        <Link
+          href={`/bookshelf/${bookshelfId}`}
+          className="flex select-none items-center gap-[0.5rem]"
+        >
+          <div className="font-body2-bold">{bookshelfName}</div>
+          <IconArrowRight width="1.2rem" height="1.2rem" />
         </Link>
-      </div>
-      <Badge colorScheme="red" fontWeight="bold" size="small">
-        <div className="flex items-center gap-[0.4rem]">
-          <IconHeart className="h-[1.3rem] w-[1.3rem] fill-warning-800 stroke-white stroke-[0.15rem]" />
-          <div className="font-caption1-bold">{likeCount}</div>
+        <div className="flex items-center gap-[0.3rem] px-[0.6rem] py-[0.2rem]">
+          <IconHeart className=" fill-warning-800 stroke-warning-800" />
+          <p className=" text-black-600 font-caption2-bold">{likeCount}</p>
         </div>
-      </Badge>
+      </div>
     </div>
   );
 };
diff --git a/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
index f1573d26..33b04e6e 100644
--- a/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
+++ b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
@@ -1,6 +1,5 @@
 import { APIBookshelf } from '@/types/bookshelf';
 
-import Badge from '@/v1/base/Badge';
 import BookShelf from '@/v1/bookShelf/BookShelf';
 
 import { IconArrowRight, IconHeart } from '@public/icons';
@@ -14,24 +13,19 @@ const ProfileBookshelfPresenter = ({
   return (
     <div className="flex flex-col gap-[1rem]">
       <div className="flex items-center justify-between">
-        <h3 className="font-body1-bold">책장</h3>
-        <div className="flex gap-[2rem]">
-          <Badge
-            colorScheme="red"
-            fontWeight="bold"
-            size="medium"
-            isFilled={false}
-          >
-            <div className="flex items-center gap-[0.4rem]">
-              <IconHeart className="h-[1.4rem] w-[1.4rem] fill-[#F56565]" />
-              <div className="font-caption1-bold">{likeCount}</div>
-            </div>
-          </Badge>
-          <Link href={`/bookshelf/${bookshelfId}`}>
-            <IconArrowRight height="1.8rem" width="1.8rem" />
-          </Link>
+        <Link
+          href={`/bookshelf/${bookshelfId}`}
+          className="flex items-center gap-[0.5rem]"
+        >
+          <h3 className="font-body1-bold">책장</h3>
+          <IconArrowRight height="1.3rem" width="1.3rem" />
+        </Link>
+        <div className="flex items-center gap-[0.3rem] px-[0.6rem] py-[0.2rem]">
+          <IconHeart className=" fill-warning-800 stroke-warning-800" />
+          <p className=" text-black-600 font-caption2-bold">{likeCount}</p>
         </div>
       </div>
+
       <BookShelf>
         <div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
           <BookShelf.Background />
diff --git a/src/v1/profile/group/ProfileGroupPresenter.tsx b/src/v1/profile/group/ProfileGroupPresenter.tsx
index f1347547..04db7568 100644
--- a/src/v1/profile/group/ProfileGroupPresenter.tsx
+++ b/src/v1/profile/group/ProfileGroupPresenter.tsx
@@ -17,12 +17,13 @@ const ProfileGroupPresenter = ({
 }: ProfileGroupPresenterProps) => {
   return (
     <div className="mt-[0.5rem] flex flex-col gap-[1.5rem]">
-      <div className="flex items-center justify-between">
+      <Link
+        href={`/profile/${userId}/group`}
+        className="flex w-fit items-center gap-[0.5rem]"
+      >
         <h3 className="font-body1-bold">참여한 모임</h3>
-        <Link href={`/profile/${userId}/group`}>
-          <IconArrowRight height="1.8rem" width="1.8rem" />
-        </Link>
-      </div>
+        <IconArrowRight height="1.3rem" width="1.3rem" />
+      </Link>
 
       <ul className="relative left-0 flex w-[calc(100%+2rem)] gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem] pr-[2rem]">
         {bookGroups.map(({ bookGroupId, title, owner, book: { imageUrl } }) => (