From f71f895bad706bcd437b7564eaa38f911f82f552 Mon Sep 17 00:00:00 2001
From: oaoong <pizzachicken@kakao.com>
Date: Fri, 1 Dec 2023 14:31:52 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=EB=A7=88=EC=9D=B4=EB=84=88=20css?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(home)/components/HistorySection.tsx         | 16 ++++++++++------
 .../(root)/(routes)/(home)/components/Slider.tsx |  6 +++---
 src/app/(root)/(routes)/(home)/page.tsx          |  2 +-
 .../card/trade-history-card/TradeHistoryCard.tsx |  4 ++--
 src/components/ui/card/Card.tsx                  |  3 ++-
 src/components/ui/divider/Divider.tsx            |  9 +++++++++
 6 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ui/divider/Divider.tsx

diff --git a/src/app/(root)/(routes)/(home)/components/HistorySection.tsx b/src/app/(root)/(routes)/(home)/components/HistorySection.tsx
index 7c07f51c..1b3c2887 100644
--- a/src/app/(root)/(routes)/(home)/components/HistorySection.tsx
+++ b/src/app/(root)/(routes)/(home)/components/HistorySection.tsx
@@ -10,12 +10,16 @@ const HistorySection = () => {
 
   return (
     historyList.length !== 0 && (
-      <section className="flex flex-col w-full px-4 gap-6">
-        <div className="text-[24px] font-bold">최근 거래성사된 물건들</div>
-        {historyList.map((data: TradeHistory) => (
-          <HistoryCard key={data.historyId} history={data} />
-        ))}
-      </section>
+      <div className="flex flex-col w-full gap-2">
+        <div className="text-[24px] w-full px-4 font-bold">
+          최근 거래성사된 물건들
+        </div>
+        <section className="flex flex-col w-full gap-6 px-4">
+          {historyList.map((data: TradeHistory) => (
+            <HistoryCard key={data.historyId} history={data} />
+          ))}
+        </section>
+      </div>
     )
   )
 }
diff --git a/src/app/(root)/(routes)/(home)/components/Slider.tsx b/src/app/(root)/(routes)/(home)/components/Slider.tsx
index 5057160a..c6ca7ec4 100644
--- a/src/app/(root)/(routes)/(home)/components/Slider.tsx
+++ b/src/app/(root)/(routes)/(home)/components/Slider.tsx
@@ -40,11 +40,11 @@ const PopularCardSlider = ({ cardData }: PopularCardSliderProps) => {
               height={0}
               alt="sliderImage"
               src={v.thumbnail}
-              sizes="100vw"
-              style={{ width: '100%' }}
+              sizes="80vw"
+              style={{ width: '80%' }}
               onClick={() => handleClick(v.cardId)}
             />
-            <div className="flex flex-col gap-1 items-center justify-center opacity-70 bg-black rounded-b-[5px] text-white w-full absolute inset-x-0 bottom-0 max-w-[240px] left-2/4 translate-x-[-50%] ">
+            <div className="flex flex-col items-start p-2 justify-center opacity-40 bg-black rounded-b-[5px] text-white w-full absolute inset-x-0 bottom-0 max-w-[240px] left-2/4 translate-x-[-50%] ">
               <p className={`${TYPOGRAPHY.title}`}>{v.itemName}</p>
               <p className={`${TYPOGRAPHY.description}`}>
                 {getValueByKey(PRICE_RANGE_OBJS, v.priceRange)}
diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx
index 8ee18f11..37ed20ac 100644
--- a/src/app/(root)/(routes)/(home)/page.tsx
+++ b/src/app/(root)/(routes)/(home)/page.tsx
@@ -5,7 +5,7 @@ import PopularCardSection from './components/PopularCardSection'
 
 function HomePage() {
   return (
-    <main className="flex flex-col items-center min-h-screen gap-12 bg-background-color pb-8">
+    <main className="flex flex-col items-center min-h-screen gap-12 pb-8 bg-background-color">
       <BannerSection />
       <CategorySection />
       <PopularCardSection />
diff --git a/src/components/domain/card/trade-history-card/TradeHistoryCard.tsx b/src/components/domain/card/trade-history-card/TradeHistoryCard.tsx
index 667b9518..49d0e34b 100644
--- a/src/components/domain/card/trade-history-card/TradeHistoryCard.tsx
+++ b/src/components/domain/card/trade-history-card/TradeHistoryCard.tsx
@@ -12,7 +12,7 @@ const SubCard = ({
   priceRange,
 }: Pick<CardInfo, 'thumbnail' | 'itemName' | 'priceRange'>) => (
   <CardFlex direction={'col'} justify={'center'} align={'center'}>
-    <div className="h-11 w-20 relative">
+    <div className="relative w-20 h-11">
       <CardImage
         alt={'물건 이미지'}
         src={thumbnail}
@@ -24,7 +24,7 @@ const SubCard = ({
     <CardText
       title={itemName}
       type={'description'}
-      className="w-20 font-bold text-center whitespace-nowrap overflow-hidden overflow-ellipsis"
+      className="w-20 overflow-hidden font-bold text-center whitespace-nowrap overflow-ellipsis"
     >
       {itemName}
     </CardText>
diff --git a/src/components/ui/card/Card.tsx b/src/components/ui/card/Card.tsx
index 83a1d4dd..9767e04a 100644
--- a/src/components/ui/card/Card.tsx
+++ b/src/components/ui/card/Card.tsx
@@ -13,7 +13,8 @@ const cardVariants = cva('p-1.5', {
       xs: 'h-card-xs',
     },
     type: {
-      default: 'rounded-card border border-background-secondary-color',
+      default:
+        'rounded-card border border-background-secondary-color border-opacity-50',
       line: 'border-b border-background-secondary-color',
     },
   },
diff --git a/src/components/ui/divider/Divider.tsx b/src/components/ui/divider/Divider.tsx
new file mode 100644
index 00000000..cf957336
--- /dev/null
+++ b/src/components/ui/divider/Divider.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Divider = () => {
+  return (
+    <div className="w-full h-0 border border-t-0 opacity-50 border-background-secondary-color" />
+  )
+}
+
+export default Divider