feat: browser Width <768 일 때 Dropdown 추가 (#35)

Mogazoa-team20 · Jun 5, 2024 · a62857c · a62857c
1 parent bf26e27
commit a62857c
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 53 deletions.
diff --git a/src/app/(userpage)/otherpage/[userId]/components/TabButton/TabButton.module.scss b/src/app/(userpage)/otherpage/[userId]/components/TabButton/TabButton.module.scss
@@ -0,0 +1,21 @@
+@import "@/styles/_index";
+@import "@/styles/_media";
+
+.buttonBox {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  justify-content: start;
+
+  margin-bottom: 30px;
+}
+
+.selectButton {
+  all: unset;
+  color: $gray-100;
+  cursor: pointer;
+}
+
+.active {
+  color: $white-100;
+}
diff --git a/src/app/(userpage)/otherpage/[userId]/components/TabButton/TabButton.tsx b/src/app/(userpage)/otherpage/[userId]/components/TabButton/TabButton.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import cn from "@/utils/classNames";
+import styles from "./TabButton.module.scss";
+
+type TabButtonProps = {
+  button: string;
+  onSelectButton: (value: string) => void;
+};
+
+export default function TabButton({ button, onSelectButton }: TabButtonProps) {
+  return (
+    <div>
+      <div className={cn(styles.buttonBox)}>
+        <div
+          className={cn(styles.selectButton, styles[`${button === "reviewed" ? "active" : ""}`])}
+          onClick={() => onSelectButton("reviewed")}
+          onKeyDown={() => onSelectButton("reviewed")}
+          role='button'
+          tabIndex={0}
+        >
+          리뷰 남긴 상품
+        </div>
+        <div
+          className={cn(styles.selectButton, styles[`${button === "created" ? "active" : ""}`])}
+          onClick={() => {
+            onSelectButton("created");
+          }}
+          onKeyDown={() => onSelectButton("created")}
+          role='button'
+          tabIndex={0}
+        >
+          등록한 상품
+        </div>
+        <div
+          className={cn(styles.selectButton, styles[`${button === "favorite" ? "active" : ""}`])}
+          onClick={() => {
+            onSelectButton("favorite");
+          }}
+          onKeyDown={() => onSelectButton("favorite")}
+          role='button'
+          tabIndex={0}
+        >
+          찜한 상품
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/...pp/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.module.scss b/...pp/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.module.scss
@@ -5,19 +5,4 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-}
-
-.buttonBox {
-  display: flex;
-  gap: 40px;
-  align-items: center;
-  justify-content: start;
-}
-
-.selectButton {
-  all: unset;
-}
-
-.active {
-  color: red;
-}
+}
diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.tsx b/src/app/(userpage)/otherpage/[userId]/components/UserActivityList/UserActivityList.tsx
@@ -1,50 +1,49 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
 import { productMock } from "@/app/(userpage)/productMock";
+import { Dropdown } from "@/components/Dropdown";
+import { ORDER, DROPDOWN } from "@/components/Dropdown/constants";
+import useWindowSize from "@/hooks/useWindowSize";
 import cn from "@/utils/classNames";
 import styles from "./UserActivityList.module.scss";
 // eslint-disable-next-line no-restricted-imports
+import TabButton from "../TabButton/TabButton";
+// eslint-disable-next-line no-restricted-imports
 import UserProductList from "../UserProductList/UserProductList";
 
 export default function UserActivityList() {
-  const [button, setButton] = useState<string>("reviewed");
+  const [selectedButton, setSelectedButton] = useState<string>("reviewed");
+  const { width } = useWindowSize();
+  const { control, watch } = useForm({ mode: "onBlur" });
+
+  useEffect(() => {
+    if (watch("select")) {
+      console.log("바뀜", watch("select"));
+    }
+  }, [watch("select")]);
+
+  const onSelectButtonHandler = (value: string) => {
+    setSelectedButton(value);
+  };
 
   return (
-    <div className={styles.container}>
-      <div className={cn(styles.buttonBox)}>
-        <div
-          className={cn(styles.selectButton, styles[`${button === "reviewed" ? "active" : ""}`])}
-          onClick={() => {
-            setButton("reviewed");
-          }}
-          onKeyDown={() => setButton("reviewed")}
-          role='button'
-          tabIndex={0}
-        >
-          리뷰 남긴 상품
-        </div>
-        <div
-          className={cn(styles.selectButton, styles[`${button === "created" ? "active" : ""}`])}
-          onClick={() => {
-            setButton("created");
-          }}
-          onKeyDown={() => setButton("created")}
-          role='button'
-          tabIndex={0}
-        >
-          등록한 상품
-        </div>
-        <div
-          className={cn(styles.selectButton, styles[`${button === "favorite" ? "active" : ""}`])}
-          onClick={() => {
-            setButton("favorite");
-          }}
-          onKeyDown={() => setButton("favorite")}
-          role='button'
-          tabIndex={0}
-        >
-          찜한 상품
+    <div className={cn(styles.container)}>
+      {width > 768 ? (
+        <TabButton
+          onSelectButton={onSelectButtonHandler}
+          button={selectedButton}
+        />
+      ) : (
+        <div>
+          <Dropdown
+            items={ORDER.PROFILE}
+            control={control}
+            name='select'
+            variant={DROPDOWN.ORDER}
+            placeholder={ORDER.PROFILE[0].option}
+          />
         </div>
-      </div>
+      )}
       <UserProductList list={productMock} />
     </div>
   );

diff --git a/src/components/Dropdown/constants.ts b/src/components/Dropdown/constants.ts
@@ -36,4 +36,18 @@ export const ORDER = {
       option: "좋아요순",
     },
   ],
+  PROFILE: [
+    {
+      value: "reviewed",
+      option: "리뷰 남긴 상품",
+    },
+    {
+      value: "created",
+      option: "등록한 상품",
+    },
+    {
+      value: "favorite",
+      option: "찜한 상품",
+    },
+  ],
 };