From 1085d3e1f821ccc98825bd41d3417b38b693c39e Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Sun, 25 Feb 2024 05:07:00 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=ED=95=98=EB=A9=B4=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/Container.tsx |  4 +++-
 src/pages/fridge/add/index.tsx     | 27 ++++++++++++++++++++++++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/atoms/Container.tsx b/src/components/atoms/Container.tsx
index 0d3aca7..14cf524 100644
--- a/src/components/atoms/Container.tsx
+++ b/src/components/atoms/Container.tsx
@@ -3,11 +3,13 @@ import React from 'react';
 interface ContainerProps {
   children: React.ReactNode;
   className?: string;
+  id?: string;
 }
 
-const Container: React.FC<ContainerProps> = ({ children, className }) => {
+const Container: React.FC<ContainerProps> = ({ children, className, id }) => {
   return (
     <div
+      id={id}
       className={`flex flex-col justify-center items-center gap-22 p-32 w-full rounded-12 ${className}`}
     >
       {children}
diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx
index 6bbcff1..35faa8c 100644
--- a/src/pages/fridge/add/index.tsx
+++ b/src/pages/fridge/add/index.tsx
@@ -1,7 +1,7 @@
 import type { NextPage } from 'next';
 import { Header, IngredientModal } from '@/components/organisms';
 import { Container } from '../../../components/atoms';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useGetIngredientList } from '@/hooks/queries/fridge';
 import Image from 'next/image';
 import {
@@ -23,6 +23,21 @@ const FridgePage: NextPage = () => {
   } = useDisclosure();
 
   const [currentCategory, setCurrentCategory] = useState('전체');
+  const categoryRef = useRef<HTMLDivElement>(null);
+
+  const handleCategoryClick = (category: string) => {
+    setCurrentCategory(category);
+    const categoryComponent = document.getElementById(category);
+
+    if (categoryComponent) {
+      const labelPosition = categoryComponent.getBoundingClientRect().top;
+
+      window.scrollTo({
+        top: window.scrollY + labelPosition - 300,
+        behavior: 'smooth',
+      });
+    }
+  };
 
   const data = useGetIngredientList();
 
@@ -82,16 +97,18 @@ const FridgePage: NextPage = () => {
               <div
                 className="flex gap-[10px]"
                 style={{ transform: `translateX(${scrollX}px)` }}
+                ref={categoryRef}
               >
                 {['전체', ...(data?.map((item) => item.category) ?? [])].map(
                   (category) => (
                     <div
                       key={category}
                       onClick={() => {
-                        setCurrentCategory(category);
+                        handleCategoryClick(category);
                       }}
                       className={`${category === currentCategory ? 'bg-primary2 text-white' : 'bg-white text-gray4'} cursor-pointer body1-semibold pt-[6px] pb-[6px] pl-[18px] pr-[18px] rounded-[20px]`}
                       style={{ whiteSpace: 'nowrap' }}
+                      data-category={category}
                     >
                       {category}
                     </div>
@@ -101,7 +118,11 @@ const FridgePage: NextPage = () => {
             </Draggable>
           </section>
           {data?.map((items) => (
-            <Container key={items.category} className="bg-white">
+            <Container
+              key={items.category}
+              className="bg-white"
+              id={items.category}
+            >
               <label className="w-full body1-semibold">{items.category}</label>
               <ul className="w-full grid grid-cols-4 gap-4">
                 {items.ingredientGroupList.map((item) => (