Merge pull request #40 from Strong-Potato/33-feat-add-list-slide

Feat: add list slide
Strong-Potato · Jan 7, 2024 · eb5326c · eb5326c
2 parents e2f1e82 + feb4dab
commit eb5326c
Show file tree

Hide file tree

Showing 22 changed files with 518 additions and 142 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Home/RecommendedItemList/RecommendedItemList.module.scss b/src/components/Home/RecommendedItemList/RecommendedItemList.module.scss
@@ -1,10 +1,10 @@
 @use "@/sass" as *;
 
 .container {
-  display: flex;
-  gap: 16px;
+  @include slide_button_container;
 
-  padding: 0 20px;
-
-  overflow-x: scroll;
+  .slide_box {
+    @include slide_list_container;
+    gap: 16px;
+  }
 }
diff --git a/src/components/Home/RecommendedItemList/RecommendedItemList.tsx b/src/components/Home/RecommendedItemList/RecommendedItemList.tsx
@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 
 import styles from "./RecommendedItemList.module.scss";
 
+import useComponentSize from "@/hooks/useComponetSize";
+
+import SlideButton from "@/components/SlideButton/SlideButton";
+
 import { getData } from "@/mocks/handlers/home";
 
 import RecommendedItem from "./RecommendedItem/RecommendedItem";
@@ -14,6 +18,8 @@ interface PropsType {
 
 function RecommendedItemList(apiNum: PropsType) {
   const [data, setData] = useState<RecommendedItemDataType[]>();
+  const [slideLocation, setSlideLocation] = useState<number>(0);
+  const [componentRef, size] = useComponentSize();
 
   useEffect(() => {
     getData<RecommendedItemDataType[] | undefined>(
@@ -24,10 +30,35 @@ function RecommendedItemList(apiNum: PropsType) {
 
   return (
     <div className={styles.container}>
-      {data &&
-        data.map((data, i) => (
-          <RecommendedItem data={data} key={data.title + i} />
-        ))}
+      {data && (
+        <SlideButton
+          // ref의 left값 state
+          slideLocation={slideLocation}
+          // left값 setState
+          setSlideLocation={setSlideLocation}
+          // 리스트 목록 아이템의 width
+          itemWidth={144}
+          // 리스트의 갭
+          flexGap={16}
+          // 아이템 갯수
+          itemNumber={data.length}
+          // 목록 전체 넓이
+          slideSize={size}
+        />
+      )}
+      <div
+        className={styles.slide_box}
+        ref={componentRef}
+        style={{
+          overflow: size.width < 450 ? "scroll" : "visible",
+          left: slideLocation + "px",
+        }}
+      >
+        {data &&
+          data.map((data, i) => (
+            <RecommendedItem data={data} key={data.title + i} />
+          ))}
+      </div>
     </div>
   );
 }

diff --git a/src/components/Home/RecommendedLocationList/RecommendedLocationList.module.scss b/src/components/Home/RecommendedLocationList/RecommendedLocationList.module.scss
@@ -1,10 +1,10 @@
 @use "@/sass" as *;
 
 .container {
-  display: flex;
-  gap: 8px;
+  @include slide_button_container;
 
-  padding: 0 20px;
-
-  overflow-x: scroll;
+  .slide_box {
+    @include slide_list_container;
+    gap: 8px;
+  }
 }
diff --git a/src/components/Home/RecommendedLocationList/RecommendedLocationList.tsx b/src/components/Home/RecommendedLocationList/RecommendedLocationList.tsx
@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 
 import styles from "./RecommendedLocationList.module.scss";
 
+import useComponentSize from "@/hooks/useComponetSize";
+
+import SlideButton from "@/components/SlideButton/SlideButton";
+
 import { getData } from "@/mocks/handlers/home";
 
 import RecommendedLocation from "./RecommendedLocation/RecommendedLocation";
@@ -10,6 +14,8 @@ import { LocationDataType } from "@/types/home";
 
 function RecommendedLocationList() {
   const [data, setData] = useState<LocationDataType[]>();
+  const [slideLocation, setSlideLocation] = useState<number>(0);
+  const [componentRef, size] = useComponentSize();
 
   useEffect(() => {
     getData<LocationDataType[] | undefined>(
@@ -20,10 +26,29 @@ function RecommendedLocationList() {
 
   return (
     <div className={styles.container}>
-      {data &&
-        data.map((data, i) => (
-          <RecommendedLocation data={data} key={data.location + i} />
-        ))}
+      {data && (
+        <SlideButton
+          slideLocation={slideLocation}
+          setSlideLocation={setSlideLocation}
+          itemWidth={122}
+          flexGap={8}
+          itemNumber={data.length}
+          slideSize={size}
+        />
+      )}
+      <div
+        className={styles.slide_box}
+        ref={componentRef}
+        style={{
+          overflow: size.width < 450 ? "scroll" : "visible",
+          left: slideLocation + "px",
+        }}
+      >
+        {data &&
+          data.map((data, i) => (
+            <RecommendedLocation data={data} key={data.location + i} />
+          ))}
+      </div>
     </div>
   );
 }

diff --git a/src/components/Home/TabBar/TabBar.tsx b/src/components/Home/TabBar/TabBar.tsx
@@ -11,7 +11,9 @@ function TabBar() {
         <Link to="/search">
           <IoSearchSharp />
         </Link>
-        <AiOutlineBell />
+        <Link to="/alarm">
+          <AiOutlineBell />
+        </Link>
       </div>
     </div>
   );

diff --git a/src/components/Home/TripSpaceAtHome/TripSpaceAtHome.module.scss b/src/components/Home/TripSpaceAtHome/TripSpaceAtHome.module.scss
@@ -1,10 +1,10 @@
 @use "@/sass" as *;
 
 .container {
-  display: flex;
-  gap: 8px;
+  @include slide_button_container;
 
-  padding: 0 20px;
-
-  overflow-x: scroll;
+  .slide_box {
+    @include slide_list_container;
+    gap: 8px;
+  }
 }
diff --git a/src/components/Home/TripSpaceAtHome/TripSpaceAtHome.tsx b/src/components/Home/TripSpaceAtHome/TripSpaceAtHome.tsx
@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 
 import styles from "./TripSpaceAtHome.module.scss";
 
+import useComponentSize from "@/hooks/useComponetSize";
+
+import SlideButton from "@/components/SlideButton/SlideButton";
+
 import { getData } from "@/mocks/handlers/home";
 
 import TripSpaceItem from "./TripSpaceItem/TripSpaceItem";
@@ -10,6 +14,8 @@ import { TripSpaceDataType } from "@/types/home";
 
 function TripSpaceAtHome() {
   const [data, setData] = useState<TripSpaceDataType[]>();
+  const [slideLocation, setSlideLocation] = useState<number>(0);
+  const [componentRef, size] = useComponentSize();
 
   const dataNull = {
     tripTitle: "아직 여행 일정이 없어요",
@@ -24,13 +30,32 @@ function TripSpaceAtHome() {
 
   return (
     <div className={styles.container}>
-      {data ? (
-        data.map((data, i) => (
-          <TripSpaceItem data={data} key={data.tripTitle + i} />
-        ))
-      ) : (
-        <TripSpaceItem data={dataNull} key={dataNull.tripTitle} />
+      {data && (
+        <SlideButton
+          slideLocation={slideLocation}
+          setSlideLocation={setSlideLocation}
+          itemWidth={323}
+          flexGap={8}
+          itemNumber={data.length}
+          slideSize={size}
+        />
       )}
+      <div
+        className={styles.slide_box}
+        ref={componentRef}
+        style={{
+          overflow: size.width < 450 ? "scroll" : "visible",
+          left: slideLocation + "px",
+        }}
+      >
+        {data ? (
+          data.map((data, i) => (
+            <TripSpaceItem data={data} key={data.tripTitle + i} />
+          ))
+        ) : (
+          <TripSpaceItem data={dataNull} key={dataNull.tripTitle} />
+        )}
+      </div>
     </div>
   );
 }

diff --git a/src/components/Home/TripSpaceAtHome/TripSpaceItem/TripSpaceItem.tsx b/src/components/Home/TripSpaceAtHome/TripSpaceItem/TripSpaceItem.tsx
@@ -1,4 +1,5 @@
 import { MdArrowForwardIos } from "react-icons/md";
+import { Link } from "react-router-dom";
 
 import styles from "./TripSpaceItem.module.scss";
 
@@ -11,7 +12,7 @@ interface PropsData {
 function TripSpaceItem(data: PropsData) {
   const imageAlt = `${data.data.tripTitle}의 사진`;
   return (
-    <div className={styles.container}>
+    <Link to="/carryout" className={styles.container}>
       <div className={styles.img_box}>
         <img
           className={styles.trip_img}
@@ -30,7 +31,7 @@ function TripSpaceItem(data: PropsData) {
           <MdArrowForwardIos />
         </div>
       )}
-    </div>
+    </Link>
   );
 }