Merge pull request codeit-13-3team#37 from codeit-13-3team/feature/category-animation

feat: category animation 구현

Author: jihye5081

src/components/home/Category.tsx

@@ -6,10 +6,16 @@ const Category = ({
   selectedCategory,
   setSelectedCategory,
   setSelectedCategoryName,
+  isMenuOpen,
+  onClose,
 }: {
   selectedCategory: number | null;
   setSelectedCategory: (id: number | null) => void;
   setSelectedCategoryName: (name: string | null) => void;
+  isMenuOpen: boolean;
+  onClose: () => void;
+
+  // TODO interface로 뽑기
 }) => {
   const {
     data: categoryList,
@@ -31,16 +37,29 @@ const Category = ({
       setSelectedCategory(category.id);
       setSelectedCategoryName(category.name);
     }
+    onClose();
   };
 
+  const baseClasses =
+    'max-w-[220px] w-full md:w-[180px] lg:w-[220px] ' +
+    'bg-black-500 flex-shrink-0 ' +
+    'transform transition-transform duration-300 ease-in-out';
+
   return (
-    <div className="hidden md:block md:w-[180px] lg:w-[220px] bg-black-500 w-full cursor-pointer">
-      <h2 className="text-4 py-[15px] px-5">카테고리</h2>
+    <div
+      className={
+        'fixed inset-y-0 left-0 md:static ' +
+        baseClasses +
+        ' ' +
+        (isMenuOpen ? 'translate-x-0 md:translate-x-0' : '-translate-x-full md:translate-x-0')
+      }
+    >
+      <h2 className="text-4 py-[15px] px-5 mt-[45px]">카테고리</h2>
       <ul>
         {categoryList.map((cat) => (
           <li
             key={cat.id}
-            className={`text-4 py-[15px] px-5 ${
+            className={`text-4 py-[15px] px-5 cursor-pointer ${
               selectedCategory === cat.id
                 ? 'bg-black-400 text-gray-50 shadow-[inset_0_0_0_1px_rgba(53,53,66,1)] rounded-[8px]'
                 : 'text-gray-200'

src/pages/index.tsx

@@ -11,15 +11,26 @@ const Home = () => {
   const [selectedCategoryName, setSelectedCategoryName] = useState<string | null>(null);
   const keyword = '';
   const [selectedOrder, setSelectedOrder] = useState<string | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
   return (
-    <div className="text-gray-50 flex w-full">
-      <div className="mx-auto w-full flex justify-center">
-        <Category
-          selectedCategory={selectedCategory}
-          setSelectedCategory={setSelectedCategory}
-          setSelectedCategoryName={setSelectedCategoryName}
-        />
+    <div className="text-gray-50 flex w-full min-h-screen">
+      <div className="mx-auto w-full flex justify-center relative">
+        {isMenuOpen && (
+          <div
+            className="fixed inset-0 bg-black-300/80 z-40 md:hidden"
+            onClick={() => setIsMenuOpen(false)}
+          />
+        )}
+        <div className="z-50">
+          <Category
+            selectedCategory={selectedCategory}
+            setSelectedCategory={setSelectedCategory}
+            setSelectedCategoryName={setSelectedCategoryName}
+            isMenuOpen={isMenuOpen}
+            onClose={() => setIsMenuOpen(false)}
+          />
+        </div>
 
         <div className="flex min-w-0 flex-col lg:flex-row-reverse gap-[10px]">
           <div className="flex flex-col mb-[60px] lg:border-l-[1px] lg:border-black-400 lg:pl-[30px] lg:h-screen pt-[30px]">
@@ -45,6 +56,7 @@ const Home = () => {
                       TOP 6
                     </span>
                   </h4>
+                  <button onClick={() => setIsMenuOpen((o) => !o)}>테스트</button>
                   <ProductList order="reviewCount" />
                 </div>
 
@@ -71,7 +83,10 @@ const Home = () => {
                       {!selectedCategory && keyword && <span>'{keyword}'로 검색한 상품</span>}
                     </div>
                     {selectedCategory && (
-                      <div className="flex items-center bg-black-400 border border-black-300 rounded-[100px] py-[6px] w-fit px-3 mt-[30px] md:hidden">
+                      <div
+                        className="flex items-center bg-black-400 border border-black-300 rounded-[100px] py-[6px] w-fit px-3 mt-[30px] md:hidden cursor-pointer"
+                        onClick={() => setIsMenuOpen(true)}
+                      >
                         <Image
                           src={categoryIcon}
                           alt="카테고리 아이콘"