Merge pull request #105 from TripInfoWeb/dev_mettings

모임 페이지 퍼블리싱 작업: 배너 이미지 수정 및 애니메이션 추가, 모임 카드 간격 및 반응형 수정
TripInfoWeb · Jul 9, 2024 · 5c15569 · 5c15569
2 parents 630e60d + 27707ec
commit 5c15569
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 51 deletions.
diff --git a/public/lottie/solitour-mettings-intro-image1.json b/public/lottie/solitour-mettings-intro-image1.json
diff --git a/src/components/common/Banner.tsx b/src/components/common/Banner.tsx
@@ -1,5 +1,7 @@
+import LottieImage from "@/../public/lottie/solitour-mettings-intro-image1.json";
 import Image from "next/image";
 import Link from "next/link";
+import LottieComponent from "./lottie/LottieComponent";
 
 type MyProps = {
   content: string[];
@@ -84,14 +86,11 @@ const Banner = ({ content, buttonText, category }: MyProps) => {
               </div>
             )}
             {category === "모임" && (
-              <Image
-                src={bannerImage[category]}
-                alt={"banner-image"}
-                fill={true}
-                style={{
-                  objectFit: "contain",
-                }}
+              <LottieComponent
+                lottieFile={LottieImage}
+                className="object-contain"
               />
+              // </div>
             )}
           </div>
         </div>

diff --git a/src/components/common/MeetingItem.tsx b/src/components/common/MeetingItem.tsx
@@ -12,7 +12,7 @@ type MyProps = {
   bookmark: boolean;
   title: string;
   username: string;
-  date: Date;
+  date: Date | string;
   location: string;
   time: string;
   current: number;
@@ -51,7 +51,7 @@ const MeetingItem = ({
   }
 
   return (
-    <div className="flex h-[19rem] w-[19rem] flex-col justify-between rounded-2xl p-5 outline outline-2 outline-gray3 duration-300 hover:bg-[#F2FAF7] hover:outline-main dark:bg-slate-800 dark:outline-slate-400 dark:hover:bg-slate-600">
+    <div className="flex w-[29.375rem] flex-col gap-[1.25rem] rounded-2xl p-6 outline outline-2 outline-gray3 duration-300 hover:bg-[#F2FAF7] hover:outline-main dark:bg-slate-800 dark:outline-slate-400 dark:hover:bg-slate-600">
       <div className="flex flex-col">
         <div className="flex flex-row items-center justify-between">
           <p
@@ -82,44 +82,59 @@ const MeetingItem = ({
         </p>
       </div>
       <div className="flex flex-col gap-5">
-        <div className="flex flex-row items-center justify-between">
-          <div className="space-y-[0.375rem] text-sm font-medium">
-            <div className="flex flex-row items-center gap-3">
+        <div className="flex flex-col text-sm font-medium ">
+          <div
+            className={
+              "grid w-full grid-cols-[15rem_auto] gap-y-[.5rem] max-[520px]:flex max-[520px]:flex-col"
+            }
+          >
+            <article className="flex flex-row items-center gap-2">
               <Image
                 src="/calendar-icon.svg"
                 alt="calendar-icon"
-                width={10}
-                height={10}
+                width={14}
+                height={14}
               />
-              <p className="text-black dark:text-slate-400">
-                {date.getFullYear() +
-                  "." +
-                  (date.getMonth() + 1) +
-                  "." +
-                  date.getDate()}
-              </p>
-            </div>
-            <div className="-ml-[2px] flex flex-row items-center gap-2 text-black dark:text-slate-400">
-              <TiLocation />
+              {date instanceof Date ? (
+                <p className="text-black dark:text-slate-400">
+                  {(date as Date).getFullYear() +
+                    "." +
+                    ((date as Date).getMonth() + 1) +
+                    "." +
+                    (date as Date).getDate()}
+                </p>
+              ) : (
+                <p className="text-black dark:text-slate-400">
+                  {date as string}
+                </p>
+              )}
+            </article>
+            <article className="flex flex-row items-center gap-2 text-black dark:text-slate-400">
+              <div className={"aspect-square w-[.825rem]"}>
+                <TiLocation />
+              </div>
               <p>{location}</p>
-            </div>
-            <div className="flex flex-row items-center gap-3 text-black dark:text-slate-400">
+            </article>
+            <article className="flex flex-row items-center gap-2">
+              <div className={"aspect-square w-[.825rem]"}>
+                <BsFillPeopleFill className="text-black dark:text-slate-400" />
+              </div>
+              <p className={"w-full"}>
+                <span className="text-main">{current}</span>
+                <span className="text-black dark:text-slate-400">{` / ${total} `}</span>
+                <span className="font-medium text-gray2 dark:text-slate-400">{`${qualification}`}</span>
+              </p>
+            </article>
+            <article className="flex flex-row items-center gap-[.4375rem] text-black dark:text-slate-400">
               <Image
                 src="/clock-icon.svg"
                 alt="clock-icon"
-                width={10}
-                height={10}
+                width={14}
+                height={14}
+                className="ml-[.0625rem]"
               />
               <p>{time}</p>
-            </div>
-            <div className="flex flex-row items-center gap-2">
-              <BsFillPeopleFill className="-ml-[0.125rem] text-black dark:text-slate-400" />
-              <p>
-                <span className="text-main">{current}</span>
-                <span className="text-black dark:text-slate-400">{` / ${total} `}</span>
-                <span className="font-medium text-gray2 dark:text-slate-400">{`${qualification}`}</span>
-              </p>
-            </div>
+            </article>
           </div>
         </div>
         <div className="flex flex-row items-center justify-between">

diff --git a/src/components/meetings/MeetingsList.tsx b/src/components/meetings/MeetingsList.tsx
@@ -1,5 +1,4 @@
 import { Modal } from "@/components/common/modal/Modal";
-import Link from "next/link";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import { IoIosArrowDown } from "react-icons/io";
@@ -22,7 +21,7 @@ const MeetingsList = (props: IMeetingsList) => {
     bookmark: boolean;
     title: string;
     username: string;
-    date: Date;
+    date: Date | string;
     location: string;
     time: string;
     current: number;
@@ -36,25 +35,17 @@ const MeetingsList = (props: IMeetingsList) => {
     bookmark: true,
     title: "동해 서핑 투게더",
     username: "waver",
-    date: new Date(),
-    location: "강원, 동해시",
+    date: "2024.07.09(화) ~ 2024.07.10(수)",
+    location: "제주특별자치도, 제주시",
     time: "08:00",
     current: 1,
     total: 6,
-    qualification: "(30대, 성별 상관없음)",
+    qualification: "(20 ~ 50세, 성별 무관)",
     likes: 52,
     views: 102,
   };
   return (
     <div className="flex w-[60rem] flex-col pt-[5.5rem] max-[1024px]:w-[90%]">
-      <div className="flex w-full justify-end">
-        <Link
-          className="flex h-9 w-28 items-center justify-center rounded-full bg-main text-sm font-medium text-white hover:scale-105"
-          href="/meetings/write"
-        >
-          모임 생성하기
-        </Link>
-      </div>
       <div className="flex flex-row items-center justify-between max-[768px]:flex-col-reverse max-[768px]:items-start max-[768px]:space-y-6 max-[768px]:space-y-reverse">
         <MeetingSubCategoryList category={"모임"} subCategory={"all"} />
         <div className="flex flex-row items-center space-x-4 max-[768px]:w-full max-[768px]:justify-between">
@@ -85,7 +76,7 @@ const MeetingsList = (props: IMeetingsList) => {
           </div>
         </div>
       </div>
-      <div className="mt-6 flex flex-wrap justify-center gap-4">
+      <div className="mt-6 flex flex-wrap justify-center gap-x-5 gap-y-7">
         {[1, 2, 3, 4, 5, 6].map((_, index) => (
           <MeetingItem
             key={index}