✨ 마이너 css 변경사항

team-nabi · Dec 1, 2023 · f71f895 · f71f895
1 parent c93af22
commit f71f895
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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