Merge pull request #83 from TripInfoWeb/dev_informations

Design: 메인 페이지 가로 스크롤 적용
TripInfoWeb · Jun 29, 2024 · 0922240 · 0922240
2 parents 573b9b1 + 2cc74c6
commit 0922240
Show file tree

Hide file tree

Showing 21 changed files with 147 additions and 95 deletions.
diff --git a/public/pencil-icon.png b/public/pencil-icon.png
diff --git a/public/pin-icon.png b/public/pin-icon.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,16 +1,16 @@
-import BestInformationList from "@/components/home/BestInformationList";
-import NewMeetingList from "@/components/home/NewMeetingList";
 import TabList from "@/components/home/TabList";
+import BestInformationListContainer from "@/containers/home/BestInformationListContainer";
 import HomeCarouselContainer from "@/containers/home/HomeCarouselContainer";
+import NewMeetingListContainer from "@/containers/home/NewMeetingListContainer";
 
 // todo
 export default function Home() {
   return (
     <div className="flex flex-col items-center">
       <HomeCarouselContainer />
       <TabList />
-      <BestInformationList />
-      <NewMeetingList />
+      <BestInformationListContainer />
+      <NewMeetingListContainer />
     </div>
   );
 }
diff --git a/src/components/common/FloatingButton.tsx b/src/components/common/FloatingButton.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { IoIosArrowUp } from "react-icons/io";
 import { MdAdd, MdClose } from "react-icons/md";
@@ -42,7 +43,13 @@ const FloatingButton = ({ visible, onClick, onScrollToTop }: MyProps) => {
           className="flex h-12 w-12 flex-row items-center justify-center rounded-full bg-black text-white shadow-md hover:scale-105"
           onClick={onClick}
         >
-          <MdAdd size={"1.5rem"} />
+          <Image
+            className="-ml-1"
+            src="/pencil-icon.png"
+            alt="pencil-icon"
+            width={24}
+            height={24}
+          />
         </button>
       )}
       <button

diff --git a/src/components/common/MeetingItem.tsx b/src/components/common/MeetingItem.tsx
@@ -13,7 +13,6 @@ type MyProps = {
   date: Date;
   location: string;
   time: string;
-  image: string;
   current: number;
   total: number;
   qualification: string;
@@ -31,7 +30,6 @@ const MeetingItem = ({
   date,
   location,
   time,
-  image,
   current,
   total,
   qualification,
@@ -72,16 +70,16 @@ const MeetingItem = ({
           )}
         </div>
         <Link
-          className="pb-3 pt-6 font-bold hover:text-main"
+          className="pb-1 pt-6 text-lg font-bold hover:text-main"
           href={`/meetings/1`}
         >
           {title}
         </Link>
         <p className="text-sm font-medium text-gray1">{username}</p>
       </div>
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-5">
         <div className="flex flex-row items-center justify-between">
-          <div className="space-y-[0.375rem] text-xs font-medium">
+          <div className="space-y-[0.375rem] text-sm font-medium">
             <div className="flex flex-row items-center gap-3">
               <Image
                 src="/calendar-icon.svg"
@@ -131,12 +129,17 @@ const MeetingItem = ({
             </div>
           </div>
         </div>
-        <div className="flex flex-row items-center justify-end">
+        <div className="flex flex-row items-center justify-between">
+          <div className="-ml-1 flex flex-row items-center gap-1">
+            <Image src="/pin-icon.png" alt="pin-icon" width={16} height={16} />
+            <p className="text-sm">모집마감일: 06.07(금)</p>
+          </div>
+
           <div className="flex flex-row justify-between">
-            <div className="flex flex-row items-center space-x-3">
+            <div className="flex flex-row items-center gap-3">
               <div className="flex flex-row items-center gap-1 text-gray2">
                 <FaRegHeart size={"0.8rem"} />
-                <p className="text-xs">{likes}</p>
+                <p className="text-sm">{likes}</p>
               </div>
               <div className="flex flex-row items-center gap-1 text-gray2">
                 <Image
@@ -145,7 +148,7 @@ const MeetingItem = ({
                   width={15}
                   height={15}
                 />
-                <p className="text-xs">{views}</p>
+                <p className="text-sm">{views}</p>
               </div>
             </div>
           </div>

diff --git a/src/components/common/TopList.tsx b/src/components/common/TopList.tsx
@@ -23,7 +23,7 @@ const titleList: { [key: string]: string[] } = {
 
 const TopList = ({ title }: MyProps) => {
   return (
-    <div className="z-10 -mt-28 flex h-fit w-[60rem] flex-col justify-center rounded-2xl bg-white px-24 py-16 shadow shadow-[#CCECE2] max-[1024px]:w-[39.75rem] max-[1024px]:px-8 max-[1024px]:py-12 max-[744px]:-mt-24 max-[744px]:w-[21.5625rem]">
+    <div className="z-10 -mt-28 flex h-fit w-[60rem] flex-col justify-center rounded-2xl bg-white px-24 py-16 shadow shadow-[#CCECE2] max-[1024px]:w-[39.75rem] max-[1024px]:px-8 max-[1024px]:py-12 max-[744px]:-mt-24 max-[744px]:w-[calc(100%_-_48px)]">
       <h2 className="mb-9 border-b-2 border-gray3 pb-3 text-2xl font-semibold text-black">
         {`${title} 정보 `}
         <span className="font-bold text-main">Top 5</span>

diff --git a/src/components/home/BestInformationList.tsx b/src/components/home/BestInformationList.tsx
@@ -1,8 +1,12 @@
-import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+import { useDragScrollType } from "@/hooks/useDragScroll";
 import InformationItem from "../common/InformationItem";
 import Link from "next/link";
 
-const BestInformationList = () => {
+type MyProps = {
+  scrollHook: useDragScrollType;
+};
+
+const BestInformationList = ({ scrollHook }: MyProps) => {
   // TODO
   const data: {
     category: string;
@@ -42,10 +46,10 @@ const BestInformationList = () => {
   ];
 
   return (
-    <div className="mt-20 w-[60rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem]">
-      <div className="flex flex-row items-center justify-between">
-        <div className="flex flex-col gap-2">
-          <div className="flex flex-row items-center justify-between gap-1 max-[744px]:w-[21.5625rem]">
+    <div className="mt-20 flex w-[60rem] flex-col max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]">
+      <div className="flex flex-row items-center justify-between max-[744px]:justify-center">
+        <div className="flex flex-col gap-2 max-[744px]:w-full">
+          <div className="flex flex-row items-center justify-between gap-1">
             <h2 className="flex flex-row items-center gap-2 text-2xl font-bold text-black max-[744px]:flex-col max-[744px]:items-start max-[744px]:gap-0">
               <p>{"고민을 덜어줄,"}</p>
               <p>
@@ -70,16 +74,31 @@ const BestInformationList = () => {
           전체보기
         </Link>
       </div>
-      <div className="mt-6 flex flex-wrap items-center justify-center gap-4">
-        {data.map((post, index) => (
-          <InformationItem
-            key={index}
-            id={index + 1}
-            category={post.category}
-            title={post.title}
-            image={post.image}
-          />
-        ))}
+      <div
+        className="overflow-x-auto"
+        ref={scrollHook.listRef}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          scrollHook.onDragStart(e);
+        }}
+        onMouseMove={scrollHook.onDragMove}
+        onMouseUp={scrollHook.onDragEnd}
+        onMouseLeave={scrollHook.onDragEnd}
+        onTouchStart={scrollHook.onTouchStart}
+        onTouchMove={scrollHook.onTouchMove}
+        onTouchEnd={scrollHook.onTouchEnd}
+      >
+        <div className="mt-6 flex w-fit flex-wrap items-center justify-center gap-4 p-1 max-[744px]:flex-row max-[744px]:flex-nowrap">
+          {data.map((post, index) => (
+            <InformationItem
+              key={index}
+              id={index + 1}
+              category={post.category}
+              title={post.title}
+              image={post.image}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/home/NewMeetingList.tsx b/src/components/home/NewMeetingList.tsx
@@ -1,8 +1,12 @@
-import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+import { useDragScrollType } from "@/hooks/useDragScroll";
 import MeetingItem from "../common/MeetingItem";
 import Link from "next/link";
 
-const NewMeetingList = () => {
+type MyProps = {
+  scrollHook: useDragScrollType;
+};
+
+const NewMeetingList = ({ scrollHook }: MyProps) => {
   // TODO
   const data: {
     category: string;
@@ -12,7 +16,6 @@ const NewMeetingList = () => {
     date: Date;
     location: string;
     time: string;
-    image: string;
     current: number;
     total: number;
     qualification: string;
@@ -27,7 +30,6 @@ const NewMeetingList = () => {
       date: new Date(),
       location: "강원특별자치도, 강원",
       time: "13:00",
-      image: "/meeting1.svg",
       current: 2,
       total: 4,
       qualification: "(20대, 성별 상관없음)",
@@ -42,7 +44,6 @@ const NewMeetingList = () => {
       date: new Date(),
       location: "강원, 동해시",
       time: "08:00",
-      image: "/PostImage2.svg",
       current: 1,
       total: 6,
       qualification: "(30대, 성별 상관없음)",
@@ -57,7 +58,6 @@ const NewMeetingList = () => {
       date: new Date(),
       location: "제주",
       time: "10:00",
-      image: "/PostImage3.svg",
       current: 1,
       total: 4,
       qualification: "(2-30대, 성별 상관없음)",
@@ -72,7 +72,6 @@ const NewMeetingList = () => {
       date: new Date(),
       location: "강원특별자치도, 강원",
       time: "13:00",
-      image: "/meeting1.svg",
       current: 2,
       total: 4,
       qualification: "(20대, 성별 상관없음)",
@@ -87,7 +86,6 @@ const NewMeetingList = () => {
       date: new Date(),
       location: "강원, 동해시",
       time: "08:00",
-      image: "/PostImage2.svg",
       current: 1,
       total: 6,
       qualification: "(30대, 성별 상관없음)",
@@ -102,7 +100,6 @@ const NewMeetingList = () => {
       date: new Date(),
       location: "제주",
       time: "10:00",
-      image: "/PostImage3.svg",
       current: 1,
       total: 4,
       qualification: "(2-30대, 성별 상관없음)",
@@ -112,10 +109,10 @@ const NewMeetingList = () => {
   ];
 
   return (
-    <div className="my-20 w-[60rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem]">
-      <div className="flex flex-row items-center justify-between">
-        <div className="flex flex-col gap-2">
-          <div className="flex flex-row items-center justify-between gap-1 max-[744px]:w-[21.5625rem]">
+    <div className="my-20 w-[60rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]">
+      <div className="flex flex-row items-center justify-between max-[744px]:justify-center">
+        <div className="flex flex-col gap-2 max-[744px]:w-full">
+          <div className="flex flex-row items-center justify-between gap-1">
             <h2 className="flex flex-row items-center gap-2 text-2xl font-bold text-black max-[744px]:flex-col max-[744px]:items-start max-[744px]:gap-0">
               <p>{"새로움을 발견할,"}</p>
               <p>
@@ -140,27 +137,40 @@ const NewMeetingList = () => {
           전체보기
         </Link>
       </div>
-
-      <div className="mt-6 flex flex-wrap items-center justify-center gap-4">
-        {data.map((post, index) => (
-          <MeetingItem
-            key={index}
-            id={index + 1}
-            category={post.category}
-            bookmark={post.bookmark}
-            title={post.title}
-            username={post.username}
-            date={post.date}
-            location={post.location}
-            time={post.time}
-            image={post.image}
-            current={post.current}
-            total={post.total}
-            qualification={post.qualification}
-            likes={post.likes}
-            views={post.views}
-          />
-        ))}
+      <div
+        className="overflow-x-auto"
+        ref={scrollHook.listRef}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          scrollHook.onDragStart(e);
+        }}
+        onMouseMove={scrollHook.onDragMove}
+        onMouseUp={scrollHook.onDragEnd}
+        onMouseLeave={scrollHook.onDragEnd}
+        onTouchStart={scrollHook.onTouchStart}
+        onTouchMove={scrollHook.onTouchMove}
+        onTouchEnd={scrollHook.onTouchEnd}
+      >
+        <div className="mt-6 flex w-fit flex-wrap items-center justify-center gap-4 p-1 max-[744px]:flex-row max-[744px]:flex-nowrap">
+          {data.map((post, index) => (
+            <MeetingItem
+              key={index}
+              id={index + 1}
+              category={post.category}
+              bookmark={post.bookmark}
+              title={post.title}
+              username={post.username}
+              date={post.date}
+              location={post.location}
+              time={post.time}
+              current={post.current}
+              total={post.total}
+              qualification={post.qualification}
+              likes={post.likes}
+              views={post.views}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/home/TabList.tsx b/src/components/home/TabList.tsx
@@ -3,9 +3,9 @@ import Link from "next/link";
 
 const TabList = () => {
   return (
-    <div className="mt-20 flex w-[60rem] flex-row items-center justify-between max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem] max-[744px]:flex-col max-[744px]:gap-4">
+    <div className="mt-20 flex w-[60rem] flex-row items-center justify-between max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)] max-[744px]:flex-col max-[744px]:gap-4">
       <Link
-        className="flex h-72 w-[29.375rem] flex-col justify-between rounded-2xl bg-gradient-to-br from-[#CBF6FF] to-[#EBE0FA] p-12 duration-300 hover:scale-105 max-[1024px]:h-48 max-[1024px]:w-[19.25rem] max-[1024px]:p-6 max-[744px]:w-[21.5625rem]"
+        className="flex h-72 w-[29.375rem] flex-col justify-between rounded-2xl bg-gradient-to-br from-[#CBF6FF] to-[#EBE0FA] p-12 duration-300 hover:scale-105 max-[1024px]:h-48 max-[1024px]:w-[19.25rem] max-[1024px]:p-6 max-[744px]:w-full"
         href="/informations/restaurant?subCategory=all"
       >
         <div className="space-y-2">
@@ -30,7 +30,7 @@ const TabList = () => {
         </div>
       </Link>
       <Link
-        className="flex h-72 w-[29.375rem] flex-col justify-between rounded-2xl bg-gradient-to-br from-[#E7FCE0] to-[#C3E9FF] p-12 duration-300 hover:scale-105 max-[1024px]:h-48 max-[1024px]:w-[19.25rem] max-[1024px]:p-6 max-[744px]:w-[21.5625rem]"
+        className="flex h-72 w-[29.375rem] flex-col justify-between rounded-2xl bg-gradient-to-br from-[#E7FCE0] to-[#C3E9FF] p-12 duration-300 hover:scale-105 max-[1024px]:h-48 max-[1024px]:w-[19.25rem] max-[1024px]:p-6 max-[744px]:w-full"
         href="/meetings"
       >
         <div className="space-y-2">

diff --git a/src/components/informations/CategoryLinks.tsx b/src/components/informations/CategoryLinks.tsx
@@ -6,7 +6,7 @@ type MyProps = {
 
 const CategoryLinks = ({ category }: MyProps) => {
   return (
-    <div className="mt-[5.5rem] flex w-[60rem] flex-row items-center justify-between border-b-[0.0625rem] pb-[0.375rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem]">
+    <div className="mt-[5.5rem] flex w-[60rem] flex-row items-center justify-between border-b-[0.0625rem] pb-[0.375rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]">
       <nav className="w-fit">
         <ul className="flex flex-row items-center gap-9">
           <li>

diff --git a/src/components/informations/InformationFilterModal.tsx b/src/components/informations/InformationFilterModal.tsx
@@ -8,7 +8,7 @@ type MyProps = {
 const InformationFilterModal = ({ closeModal }: MyProps) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
-      <div className="flex h-fit w-80 flex-col rounded-xl bg-white p-6 max-[600px]:w-[90%]">
+      <div className="flex h-fit w-80 flex-col rounded-xl bg-white p-6">
         <div className="flex flex-row items-center justify-end">
           <MdClose
             className="cursor-pointer text-gray2 hover:text-main"

diff --git a/src/components/informations/InformationList.tsx b/src/components/informations/InformationList.tsx
@@ -89,7 +89,7 @@ const InformationList = ({
   ];
 
   return (
-    <div className="mt-6 flex w-[60rem] flex-col max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem]">
+    <div className="mt-6 flex w-[60rem] flex-col max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]">
       {isModal && <InformationFilterModal closeModal={closeModal} />}
       <div className="flex flex-row items-center justify-between max-[1024px]:flex-col-reverse max-[1024px]:items-start max-[1024px]:space-y-6 max-[1024px]:space-y-reverse">
         <SubCategoryList category={category} subCategory={subCategory} />