Refactor: 스타일 리팩토링

eunji-0623 · Jul 17, 2024 · 5382ada · 5382ada
1 parent 32d3b9e
commit 5382ada
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 44 deletions.
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
@@ -203,7 +203,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
               {paginatedReviews?.map((review, i) => (
                 <div
                   key={review.id}
-                  className={`flex gap-4 py-6 items-start ${i === paginatedReviews.length - 1 ? '' : 'border-b-2 border-var-gray3 border-solid'}`}
+                  className={`flex gap-4 m:gap-3 py-6 items-start ${i === paginatedReviews.length - 1 ? '' : 'border-b-2 border-var-gray3 border-solid'}`}
                 >
                   <div className="flex-shrink-0">
                     <Image
@@ -215,7 +215,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
                     />
                   </div>
                   <div>
-                    <div className="flex mb-2">
+                    <div className="flex mb-2 items-center">
                       <p className="font-bold max-w-[300px] m:max-w-[160px] overflow-hidden whitespace-nowrap text-ellipsis">
                         {review.user.nickname}
                       </p>
@@ -224,7 +224,9 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
                         {new Date(review.createdAt).toLocaleDateString()}
                       </p>
                     </div>
-                    <p className="text-nomad-black">{review.content}</p>
+                    <p className="text-nomad-black tracking-tight">
+                      {review.content}
+                    </p>
                   </div>
                 </div>
               ))}

diff --git a/components/ActivityDetails/ImageContainer/ImageContainer.tsx b/components/ActivityDetails/ImageContainer/ImageContainer.tsx
@@ -33,15 +33,20 @@ export default function ImageContainer({
     ...subImages,
   ].filter((image) => image.imageUrl !== defaultImage);
 
+  // 모바일에서 SubImage가 없으면 Slider 사용 안 함
+  const shouldUseSlider = subImages.length > 0;
+
   return (
     <div className="flex max-w-[1200px] h-[500px] gap-2 my-10 t:w-full t:h-[310px] m:w-full m:h-[300px] m:my-6 m:justify-center m:relative m:left-0 m:right-0">
-      <div className="relative w-1/2 h-full m:hidden">
+      <div
+        className={`relative w-1/2 h-full ${shouldUseSlider ? 'm:hidden' : 'm:block m:w-full'}`}
+      >
         <Image
           src={bannerImageUrl}
           alt="Banner Image"
           layout="fill"
           objectFit="cover"
-          className="object-cover rounded-l-lg"
+          className="object-cover rounded-l-lg m:rounded-none"
         />
       </div>
       <div className="w-1/2 grid grid-cols-2 grid-rows-2 gap-2 rounded-r-lg overflow-hidden m:hidden">
@@ -60,24 +65,26 @@ export default function ImageContainer({
           </div>
         ))}
       </div>
-      <div className="hidden m:block m:w-screen m:h-full">
-        <Slider {...settings}>
-          {mobileImages.map((image) => (
-            <div
-              key={image.id}
-              className="m:relative m:w-full m:h-[300px] outline-none"
-            >
-              <Image
-                src={image.imageUrl}
-                alt={`Image ${image.id}`}
-                layout="fill"
-                objectFit="cover"
-                className="object-cover"
-              />
-            </div>
-          ))}
-        </Slider>
-      </div>
+      {shouldUseSlider && (
+        <div className="hidden m:block m:w-screen m:h-full">
+          <Slider {...settings}>
+            {mobileImages.map((image) => (
+              <div
+                key={image.id}
+                className="m:relative m:w-full m:h-[300px] outline-none"
+              >
+                <Image
+                  src={image.imageUrl}
+                  alt={`Image ${image.id}`}
+                  layout="fill"
+                  objectFit="cover"
+                  className="object-cover"
+                />
+              </div>
+            ))}
+          </Slider>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/components/ActivityDetails/Reservation/Reservation.tsx b/components/ActivityDetails/Reservation/Reservation.tsx
@@ -189,7 +189,7 @@ export default function Reservation({ activity }: ReservationProps) {
   }, [participants, setModal]);
 
   return (
-    <div className="w-[384px] h-auto p-4 border border-solid border-var-gray3 rounded-xl shadow-sm bg-white t:w-[250px] t:min-h-[423px] m:w-full m:h-[83px] m:rounded-none m:fixed m:bottom-0 m:z-10 m:border-b-0 m:border-x-0 m:p-0 m:flex m:justify-between m:items-center">
+    <div className="w-[384px] h-auto p-4 p:mb-[50px] border border-solid border-var-gray3 rounded-xl shadow-sm bg-white t:w-[250px] t:min-h-[423px] m:w-full m:h-[83px] m:rounded-none m:fixed m:bottom-0 m:z-10 m:border-b-0 m:border-x-0 m:p-0 m:flex m:justify-between m:items-center">
       <div className="m:hidden">
         <div className="flex items-center gap-2">
           <p className="text-[28px] font-bold">
@@ -235,12 +235,12 @@ export default function Reservation({ activity }: ReservationProps) {
         </p>
         <div className="t:hidden">
           {getAvailableTimes(selectedDate).length > 0 ? (
-            <div className="flex flex-wrap gap-2 mb-6">
+            <div className="flex flex-wrap gap-2 mb-6 justify-center">
               {getAvailableTimes(selectedDate).map((time, index) => (
                 <button
                   key={index}
                   onClick={() => handleTimeChange(time)}
-                  className={`w-[117px] h-[46px] flex items-center justify-center border border-nomad-black rounded-lg ${
+                  className={`w-[130px] h-[46px] flex items-center justify-center border border-nomad-black rounded-lg ${
                     selectedTime === time
                       ? 'bg-nomad-black text-white'
                       : 'bg-white'
@@ -335,12 +335,12 @@ export default function Reservation({ activity }: ReservationProps) {
                       예약 가능한 시간
                     </p>
                     {getAvailableTimes(selectedDate).length > 0 ? (
-                      <div className="flex flex-wrap gap-2 mb-6">
+                      <div className="flex flex-wrap gap-2 mb-20 justify-center">
                         {getAvailableTimes(selectedDate).map((time, index) => (
                           <button
                             key={index}
                             onClick={() => handleTimeChange(time)}
-                            className={`w-[117px] h-[46px] flex items-center justify-center border border-nomad-black rounded-lg ${
+                            className={`w-[130px] h-[46px] flex items-center justify-center border border-nomad-black rounded-lg ${
                               selectedTime === time
                                 ? 'bg-nomad-black text-white'
                                 : 'bg-white'

diff --git a/components/ActivityDetails/Reservation/ReservationModal.tsx b/components/ActivityDetails/Reservation/ReservationModal.tsx
@@ -22,12 +22,12 @@ export default function ReservationModal({
           예약 가능한 시간
         </p>
         {getAvailableTimes(selectedDate).length > 0 ? (
-          <div className="flex flex-wrap gap-2 mb-6">
+          <div className="flex flex-wrap gap-2 mb-20 justify-center t:max-h-[100px] t:overflow-auto">
             {getAvailableTimes(selectedDate).map((time, index) => (
               <button
                 key={index}
                 onClick={() => handleTimeChange(time)}
-                className={`w-[117px] h-[46px] flex items-center justify-center border border-nomad-black rounded-lg ${
+                className={`w-[130px] h-[46px] flex items-center justify-center border border-nomad-black rounded-lg ${
                   selectedTime === time
                     ? 'bg-nomad-black text-white'
                     : 'bg-white'

diff --git a/components/ReservationListCard/ReservationListCard.tsx b/components/ReservationListCard/ReservationListCard.tsx
@@ -53,7 +53,7 @@ const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
 
   return (
     <div className="h-[204px] relative flex rounded-3xl shadow-card overflow-hidden t:h-[156px] m:h-[128px]">
-      <div className="min-w-[204px] h-[204px] relative t:min-w-[156px] t:h-[156px] m:min-w-[128px] m:h-[128px]">
+      <div className="min-w-[204px] h-[204px] relative t:min-w-[156px] t:h-[156px] m:min-w-[110px] m:h-[128px]">
         <Link
           href={`/activity-details/${reservationData.activity.id}`}
           className="text-[20px] font-bold mt-[8px] hover:underline"
@@ -74,7 +74,7 @@ const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
           {statusTitles[reservationData.status]}
         </p>
         <Link href={`/activity-details/${reservationData.activity.id}`}>
-          <p className="text-[20px] mt-[8px] font-bold hover:underline t:text-[18px] t:mt-[0] m:text-[14px] m:mt-[0] m:py-[2px]">
+          <p className="text-[20px] mt-[8px] font-bold tracking-tight hover:underline t:text-[18px] t:mt-[0] m:text-[14px] m:mt-[0] m:py-[2px] m:w-[200px] m:overflow-hidden m:whitespace-nowrap m:text-ellipsis">
             {reservationData.activity.title}
           </p>
         </Link>

diff --git a/components/Review/Review.tsx b/components/Review/Review.tsx
@@ -46,20 +46,22 @@ export default function Review({ reservation, closeModal }: ReviewProps) {
           width={125}
           height={125}
           alt="체험 사진"
-          className="object-cover rounded-xl m:w-[100px] m:h-[100px]"
+          className="object-cover rounded-xl m:w-[100px] m:h-[125px]"
         />
         <div className="text-nomad-black flex flex-col justify-between">
-          <p className="font-bold text-xl m:text-base max-w-[290px] m:max-w-[220px] overflow-hidden whitespace-nowrap text-ellipsis">
-            {reservation.activity.title}
-          </p>
-          <div className="flex gap-2 m:text-sm m:gap-1">
-            <p>{reservation.date}</p>
-            <p>·</p>
-            <p>
-              {reservation.startTime} - {reservation.endTime}
+          <div>
+            <p className="font-bold text-xl max-w-[290px] m:max-w-[220px] tracking-tight overflow-hidden whitespace-nowrap text-ellipsis">
+              {reservation.activity.title}
             </p>
-            <p>·</p>
-            <p>{reservation.headCount}명</p>
+            <div className="flex gap-2 m:text-sm m:gap-1">
+              <p>{reservation.date}</p>
+              <p>·</p>
+              <p>
+                {reservation.startTime} - {reservation.endTime}
+              </p>
+              <p>·</p>
+              <p>{reservation.headCount}명</p>
+            </div>
           </div>
           <div className="border border-solid border-var-gray2" />
           <p className="font-bold text-[32px] m:text-xl">

diff --git a/pages/reservation.tsx b/pages/reservation.tsx
@@ -65,7 +65,7 @@ export default function MyReservationPage() {
           )}
         </div>
         {reservationListByFilter.length > 0 ? (
-          <div className="flex flex-col animate-slideDown gap-[24px] overflow-auto scrollbar-hide pb-[20px] h-[calc(100vh-220px)] pr-[10px] t:h-[calc(100vh-160px)] t:gap-[16px] m:h-[calc(100vh-100px)]">
+          <div className="flex flex-col animate-slideDown gap-[24px] overflow-auto scrollbar-hide pb-[20px] h-[calc(100vh-220px)] t:h-[calc(100vh-160px)] t:gap-[16px] m:h-[calc(100vh-100px)]">
             {reservationListByFilter.map(
               (reservationData: MyReservationProps) => {
                 return (