Style: 상세 장소 추천 박스 조절 (#98)

* 모바일 뷰 작업 1차(/user, /participant, /vote/detail) * fix: prettier error * Fix: document is undefined error * Style: 출발 위치 깃발 아이콘 크기 조정 * Style: 장소 추천 높이 통일
moidot · Jun 6, 2024 · 11daa89 · 11daa89
1 parent b8f24b9
commit 11daa89
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/src/components/place/PlaceItem.tsx b/src/components/place/PlaceItem.tsx
@@ -33,20 +33,27 @@ const PlaceItem = ({ title, thumUrl, distance, openTime, tel, category }: PlaceI
 
   return (
     <>
-      <div className="bg-white w-[585px] rounded-2xl flex-row flex  gap-5 shadow-card_shadow ">
+      <div className="bg-white w-[30rem] xl:w-[38rem] h-[228px] rounded-2xl flex-row flex gap-5 shadow-card_shadow  over">
         {thumUrl ? (
-          <div style={{ overflow: 'hidden' }} className="rounded-l-lg flex justify-start relative">
-            <Image src={thumUrl} width={175} height={185} objectFit="cover" alt="placeImg" priority />
+          <div style={{ overflow: 'hidden' }} className="rounded-l-2xl flex justify-start relative">
+            <Image src={thumUrl} width={175} height={185} alt="placeImg" priority style={{ objectFit: 'cover' }} />
           </div>
         ) : (
-          <div style={{ overflow: 'hidden' }} className="rounded-l-lg flex justify-start relative">
-            <Image src={renderCategoryImage()} width={175} height={185} objectFit="cover" alt="placeImg" priority />
+          <div style={{ overflow: 'hidden' }} className="rounded-l-2xl flex justify-start relative">
+            <Image
+              src={renderCategoryImage()}
+              width={175}
+              height={185}
+              alt="placeImg"
+              priority
+              style={{ objectFit: 'cover' }}
+            />
           </div>
         )}
 
         <div className=" flex flex-col gap-[64px]">
           <div>
-            <div className="font-Pretendard text-black text-b1 font-bold pt-4">{title}</div>
+            <div className="font-Pretendard text-black text-b3 xl:text-b1 font-bold pt-4">{title}</div>
             <div className="font-Pretendard text-main_orange text-b4 font-regular">{distance}</div>
           </div>
           <div className="flex flex-col gap-[12px]">

diff --git a/src/components/place/index.tsx b/src/components/place/index.tsx
@@ -92,11 +92,9 @@ const Place = ({ lng, lat, local }: PlaceProps) => {
   };
   return (
     <div>
-      <div className="flex flex-col overflow-auto scrollbar-hide">
-        <div className="font-Pretendard text-black text-h3 font-bold pt-[44px] desktop:w-[1200px] mx-auto">
-          모여서 여기로 가는거 어때요?
-        </div>
-        <div className="flex flex-row gap-4 desktop:gap-12 pt-[12px] desktop:w-[1200px] mx-auto">
+      <div className="flex flex-col justify-start xl:w-[80rem] mx-auto">
+        <div className="font-Pretendard text-black text-h3 font-bold pt-[44px]">모여서 여기로 가는거 어때요?</div>
+        <div className="flex flex-row gap-4 desktop:gap-12 pt-[12px]">
           {chip == ChipList.CAFE ? (
             <div>
               <ChipCafeOn />
@@ -161,9 +159,9 @@ const Place = ({ lng, lat, local }: PlaceProps) => {
             />
           </div>
         ) : (
-          <div className=" flex flex-col justify-center items-center ">
+          <div className=" flex flex-col justify-start items-center">
             <div className="pt-[44px]"></div>
-            <div className="flex w-1/2 justify-center items-center gap-[30px]">
+            <div className="flex justify-start items-center gap-[30px]">
               {bestPlaceData ? (
                 bestPlaceData.data.slice(0, 2).map((item) => (
                   <div
@@ -185,7 +183,7 @@ const Place = ({ lng, lat, local }: PlaceProps) => {
               )}
             </div>
             <div className="pt-[30px]"></div>
-            <div className="flex w-1/2 justify-center items-center gap-[30px]">
+            <div className="flex justify-start items-center gap-[30px]">
               {bestPlaceData ? (
                 bestPlaceData.data.slice(2, 4).map((item) => (
                   <div key={item.title} className="flex-1" onClick={() => onModalClick(item)}>
@@ -206,7 +204,7 @@ const Place = ({ lng, lat, local }: PlaceProps) => {
           </div>
         )}
 
-        <div className="flex justify-center items-center pt-[140px]">{/* <More /> */}</div>
+        <div className="flex justify-start items-center pt-[140px]">{/* <More /> */}</div>
       </div>
     </div>
   );