Merge pull request #76 from FINAL-TEAM4/pettalk/concern

#66 카테고리 스크롤 추가, 클릭이벤트 추가
FINAL-TEAM4 · Sep 18, 2023 · cdcf6b9 · cdcf6b9
2 parents 0a759e5 + 0126f34
commit cdcf6b9
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 23 deletions.
diff --git a/src/pages/petTalk/concern.tsx b/src/pages/petTalk/concern.tsx
@@ -5,7 +5,8 @@ import { Link, useLocation } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import { activeTabState } from "../../store/petTalkState";
 import Head from "@/components/Head";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
+import { useScrollDiv } from "@/utils/Scroll";
 import heart from "../../assets/heart_18px.svg";
 import talk from "../../assets/talk_18px.svg";
 import view from "../../assets/view_18px.svg";
@@ -18,7 +19,10 @@ const Concern = () => {
   const [activeTab, setActiveTab] = useRecoilState(activeTabState);
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const categoryRef = useRef<HTMLDivElement>(null);
+
+  const scrollRef = useScrollDiv();
+
+  const [activeCategory, setActiveCategory] = useState(0);
 
   const handleFloating = () => {
     setIsMenuOpen(!isMenuOpen);
@@ -34,18 +38,6 @@ const Concern = () => {
     }
   }, [location.pathname, setActiveTab]);
 
-  const handleScroll = (direction: "left" | "right") => {
-    const container = categoryRef.current;
-    if (container) {
-      const scrollAmount = 200; // 조절 가능한 스크롤 양
-      if (direction === "left") {
-        container.scrollLeft -= scrollAmount;
-      } else {
-        container.scrollLeft += scrollAmount;
-      }
-    }
-  };
-
   return (
     <>
       <Background>
@@ -83,15 +75,38 @@ const Concern = () => {
 
           <div className={styles.content_wrapper}>
             <div className={styles.category_container}>
-              <div className={styles.category_wrapper} ref={categoryRef}>
-                <button>질병/질환</button>
-                <button>미용/패션</button>
-                <button>교육/훈련</button>
-                <button>양육/관리</button>
-                <button>반려용품</button>
+              <div className={styles.category_wrapper} ref={scrollRef}>
+                <button
+                  className={activeCategory === 0 ? styles.active_button : ""}
+                  onClick={() => setActiveCategory(0)}
+                >
+                  질병/질환
+                </button>
+                <button
+                  className={activeCategory === 1 ? styles.active_button : ""}
+                  onClick={() => setActiveCategory(1)}
+                >
+                  미용/패션
+                </button>
+                <button
+                  className={activeCategory === 2 ? styles.active_button : ""}
+                  onClick={() => setActiveCategory(2)}
+                >
+                  교육/훈련
+                </button>
+                <button
+                  className={activeCategory === 3 ? styles.active_button : ""}
+                  onClick={() => setActiveCategory(3)}
+                >
+                  양육/관리
+                </button>
+                <button
+                  className={activeCategory === 4 ? styles.active_button : ""}
+                  onClick={() => setActiveCategory(4)}
+                >
+                  반려용품
+                </button>
               </div>
-              <button onClick={() => handleScroll("left")}>&lt;</button>
-              <button onClick={() => handleScroll("right")}>&gt;</button>
             </div>
 
             <div className={styles.select_wrap}>

diff --git a/src/styles/pettalk.module.scss b/src/styles/pettalk.module.scss
@@ -33,6 +33,7 @@
 
 .content_wrapper {
   padding: 80px 0 65px 0;
+  overflow: hidden;
   .select_wrap {
     display: flex;
     margin: 0 24px;
@@ -205,6 +206,31 @@
     }
     z-index: 50;
   }
+  .category_wrapper {
+    width: 327px;
+    display: flex;
+    margin: 0 24px;
+    padding-bottom: 24px;
+    white-space: nowrap;
+    overflow-x: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    button {
+      border: 1px solid $gray_0300_D6D6D6;
+      padding: 6px 16px;
+      border-radius: 50px;
+      margin-right: 8px;
+      &.active_button {
+        color: $base_white_ffffff;
+        background-color: $base_black_000000;
+      }
+    }
+  }
 }
 .menu {
   width: 160px;
@@ -251,10 +277,18 @@
 }
 
 .category_wrapper {
+  width: 327px;
   display: flex;
   margin: 0 24px;
-  overflow: auto;
+  padding-bottom: 24px;
   white-space: nowrap;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 
   button {
     border: 1px solid $gray_0300_D6D6D6;