From e05cc48fdd409916fd29bf6080b33e57bf38b05c Mon Sep 17 00:00:00 2001
From: typhoon <typ@Typhoon-MacBook-Pro.local>
Date: Mon, 17 Mar 2025 16:57:32 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=84=B8=ED=8C=85=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20sidebar=20=EC=9E=91=EC=97=85=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/setting/SettingSideBar.tsx |  6 +--
 src/pages/blog/BlogPage.tsx               |  2 +-
 src/pages/setting/SettingPage.tsx         | 51 ++++++++++++++++++++---
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/components/setting/SettingSideBar.tsx b/src/components/setting/SettingSideBar.tsx
index fcebca3..0b36cef 100644
--- a/src/components/setting/SettingSideBar.tsx
+++ b/src/components/setting/SettingSideBar.tsx
@@ -3,9 +3,9 @@ interface TabType {
     title: string;
 }
 
-function SettingSideBar({setSelectedSection}: {
+function SettingSideBar({setSelectedSection, side}: {
     setSelectedSection: (section: string) => void,
-    side?: boolean,
+    side: boolean,
 }) {
 
     const tabList: TabType[] = [
@@ -23,7 +23,7 @@ function SettingSideBar({setSelectedSection}: {
 
     return (
         <div
-            className="w-52 h-full flex-col justify-start items-start">
+            className={`w-52 h-full flex-col justify-start items-start ${side && "pt-16 px-4 bg-gray-50 h-screen overflow-y-scroll"}`}>
             <ul className="w-full flex flex-col gap-y-1.5 flex-wrap">
                 {tabList.map((tab) =>
                     <li key={tab.section}>
diff --git a/src/pages/blog/BlogPage.tsx b/src/pages/blog/BlogPage.tsx
index 6cb2885..a0da329 100644
--- a/src/pages/blog/BlogPage.tsx
+++ b/src/pages/blog/BlogPage.tsx
@@ -214,7 +214,7 @@ function BlogPage() {
             <div ref={sideBarRef}
                  className={`${isOpen ? "block translate-x-0 overflow-y-scroll" : "hidden translate-x-full overflow-y-hidden"} !bg-orange-400 absolute top-0 right-0 w-96 flex-col
                      transform transition-transform duration-300 ease-out z-20`}>
-                <button className="absolute top-4 right-[calc(320px)] hover:cursor-pointer"
+                <button className="absolute top-4 left-[calc(320px)] hover:cursor-pointer"
                         onClick={() => setIsOpen(false)}>
                     <MdOutlineExitToApp className="size-8 text-gray-500"/>
                 </button>
diff --git a/src/pages/setting/SettingPage.tsx b/src/pages/setting/SettingPage.tsx
index 23bca6c..94ad8ca 100644
--- a/src/pages/setting/SettingPage.tsx
+++ b/src/pages/setting/SettingPage.tsx
@@ -1,5 +1,5 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import PostSettingPage from "./PostSettingPage.tsx";
 import ProfileSettingPage from "./ProfileSettingPage.tsx";
 import FolderSettingPage from "./FolderSettingPage.tsx";
@@ -7,6 +7,8 @@ import {useNavigate, useParams} from "react-router-dom";
 import SettingSideBar from "../../components/setting/SettingSideBar.tsx";
 import {useSelector} from "react-redux";
 import {RootState} from "../../store.tsx";
+import IconButton from "../../components/common/IconButton.tsx";
+import {MdMenu, MdOutlineExitToApp} from "react-icons/md";
 
 function SettingPage() {
 
@@ -15,6 +17,22 @@ function SettingPage() {
     const navigate = useNavigate();
     const [selectedSection, setSelectedSection] = useState<string>(section || "profile");
 
+    const sideBarRef = useRef<HTMLDivElement | null>(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    const handleClickOutside = (event: MouseEvent) => {
+        if (sideBarRef.current && !sideBarRef.current.contains(event.target as Node)) {
+            setMenuOpen(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
     useEffect(() => {
         navigate(`/setting/${selectedSection}`);
     }, [selectedSection]);
@@ -32,18 +50,39 @@ function SettingPage() {
 
     return (
         <BasicLayout>
-            <div className="flex w-full gap-x-4">
-                <SettingSideBar setSelectedSection={setSelectedSection}/>
+            <div
+                ref={sideBarRef}
+                className={`${menuOpen ? "block translate-x-0 overflow-y-scroll" : "hidden translate-x-full overflow-y-hidden"} absolute top-0 left-0 flex-col
+                     transform transition-transform duration-300 ease-out z-20`}>
+                <button className="absolute top-4 left-4 hover:cursor-pointer"
+                        onClick={() => setMenuOpen(false)}>
+                    <MdOutlineExitToApp className="size-8 text-gray-500"/>
+                </button>
+                <SettingSideBar
+                    setSelectedSection={setSelectedSection}
+                    side={true}/>
+            </div>
+            <div className={`${(menuOpen) ? "opacity-50 backdrop-blur-sm z-10 overflow-y-hidden" : "z-10"} flex flex-col sm:flex-row w-full gap-x-4 sm:gap-y-4`}>
+                <div className="hidden sm:block">
+                    <SettingSideBar
+                        setSelectedSection={setSelectedSection}
+                        side={false}/>
+                </div>
+                <div className="block sm:hidden">
+                    <IconButton
+                        icon={<MdMenu size={24}/>}
+                        onClick={() => setMenuOpen(prev => !prev)}/>
+                </div>
                 {(selectedSection === "profile") &&
-                    <div className="min-w-160 border-l border-gray-200 w-full ps-8">
+                    <div className="sm:border-l border-gray-200 w-full ps-8">
                         <ProfileSettingPage/>
                     </div>}
                 {(selectedSection === "folder") &&
-                    <div className="min-w-160 border-l border-gray-200 w-full ps-8">
+                    <div className="sm:border-l border-gray-200 w-full ps-8">
                         <FolderSettingPage/>
                     </div>}
                 {(selectedSection === "post") &&
-                    <div className="min-w-160 border-l border-gray-200 w-full ps-8">
+                    <div className="sm:border-l border-gray-200 w-full ps-8">
                         <PostSettingPage/>
                     </div>}
             </div>

From 46159141ee4cf244dbd82d2f1a3d2073af47875a Mon Sep 17 00:00:00 2001
From: typhoon0678 <typhoon0678@gmail.com>
Date: Mon, 17 Mar 2025 18:02:16 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=84=B8=ED=8C=85=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=9E=91=EC=84=B1=20=EB=B8=94?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=EB=90=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header.tsx          |  2 +-
 src/components/setting/SettingSideBar.tsx |  2 +-
 src/pages/blog/BlogPage.tsx               |  4 ++--
 src/pages/setting/SettingPage.tsx         | 16 ++++++++--------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 7ddfcd2..a4cf373 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -92,7 +92,7 @@ function Header() {
                             className="relative flex justify-around items-center w-full">
                             <ProfileImageCircle profileUrl={loginState.profileUrl} onClick={handleDropDown}/>
                             <div
-                                className={`${isOpen ? "" : "hidden"} absolute z-50 top-12 right-0 bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44`}>
+                                className={`${isOpen ? "" : "hidden"} absolute z-99 top-12 right-0 bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44`}>
                                 <div className="flex flex-col gap-1 px-4 py-3 text-sm text-gray-900">
                                     <div className="font-medium truncate">{loginState.username}</div>
                                     <div className="font-medium truncate">{loginState.email}</div>
diff --git a/src/components/setting/SettingSideBar.tsx b/src/components/setting/SettingSideBar.tsx
index 0b36cef..0375312 100644
--- a/src/components/setting/SettingSideBar.tsx
+++ b/src/components/setting/SettingSideBar.tsx
@@ -23,7 +23,7 @@ function SettingSideBar({setSelectedSection, side}: {
 
     return (
         <div
-            className={`w-52 h-full flex-col justify-start items-start ${side && "pt-16 px-4 bg-gray-50 h-screen overflow-y-scroll"}`}>
+            className={`w-48 h-full flex-col justify-start items-start ${side && "pt-16 px-4 bg-gray-50 h-screen"}`}>
             <ul className="w-full flex flex-col gap-y-1.5 flex-wrap">
                 {tabList.map((tab) =>
                     <li key={tab.section}>
diff --git a/src/pages/blog/BlogPage.tsx b/src/pages/blog/BlogPage.tsx
index a0da329..e9b69cc 100644
--- a/src/pages/blog/BlogPage.tsx
+++ b/src/pages/blog/BlogPage.tsx
@@ -212,9 +212,9 @@ function BlogPage() {
                 </div>
             </div>
             <div ref={sideBarRef}
-                 className={`${isOpen ? "block translate-x-0 overflow-y-scroll" : "hidden translate-x-full overflow-y-hidden"} !bg-orange-400 absolute top-0 right-0 w-96 flex-col
+                 className={`${isOpen ? "block translate-x-0" : "hidden translate-x-full"} absolute top-0 right-0 w-96 flex-col
                      transform transition-transform duration-300 ease-out z-20`}>
-                <button className="absolute top-4 left-[calc(320px)] hover:cursor-pointer"
+                <button className="absolute top-6 left-6 hover:cursor-pointer"
                         onClick={() => setIsOpen(false)}>
                     <MdOutlineExitToApp className="size-8 text-gray-500"/>
                 </button>
diff --git a/src/pages/setting/SettingPage.tsx b/src/pages/setting/SettingPage.tsx
index 94ad8ca..5aa5033 100644
--- a/src/pages/setting/SettingPage.tsx
+++ b/src/pages/setting/SettingPage.tsx
@@ -52,9 +52,9 @@ function SettingPage() {
         <BasicLayout>
             <div
                 ref={sideBarRef}
-                className={`${menuOpen ? "block translate-x-0 overflow-y-scroll" : "hidden translate-x-full overflow-y-hidden"} absolute top-0 left-0 flex-col
+                className={`${menuOpen ? "block translate-x-0" : "hidden translate-x-full"} absolute top-0 left-0 flex-col
                      transform transition-transform duration-300 ease-out z-20`}>
-                <button className="absolute top-4 left-4 hover:cursor-pointer"
+                <button className="absolute top-6 right-6 hover:cursor-pointer"
                         onClick={() => setMenuOpen(false)}>
                     <MdOutlineExitToApp className="size-8 text-gray-500"/>
                 </button>
@@ -62,27 +62,27 @@ function SettingPage() {
                     setSelectedSection={setSelectedSection}
                     side={true}/>
             </div>
-            <div className={`${(menuOpen) ? "opacity-50 backdrop-blur-sm z-10 overflow-y-hidden" : "z-10"} flex flex-col sm:flex-row w-full gap-x-4 sm:gap-y-4`}>
-                <div className="hidden sm:block">
+            <div className={`${(menuOpen) ? "opacity-50 backdrop-blur-sm z-10 overflow-y-hidden" : "z-10"} px-4 flex flex-col md:flex-row w-full gap-x-4 md:gap-y-4`}>
+                <div className="hidden md:block">
                     <SettingSideBar
                         setSelectedSection={setSelectedSection}
                         side={false}/>
                 </div>
-                <div className="block sm:hidden">
+                <div className="block md:hidden">
                     <IconButton
                         icon={<MdMenu size={24}/>}
                         onClick={() => setMenuOpen(prev => !prev)}/>
                 </div>
                 {(selectedSection === "profile") &&
-                    <div className="sm:border-l border-gray-200 w-full ps-8">
+                    <div className="md:border-l border-gray-200 w-full ps-8">
                         <ProfileSettingPage/>
                     </div>}
                 {(selectedSection === "folder") &&
-                    <div className="sm:border-l border-gray-200 w-full ps-8">
+                    <div className="md:border-l border-gray-200 w-full ps-8">
                         <FolderSettingPage/>
                     </div>}
                 {(selectedSection === "post") &&
-                    <div className="sm:border-l border-gray-200 w-full ps-8">
+                    <div className="md:border-l border-gray-200 w-full ps-8">
                         <PostSettingPage/>
                     </div>}
             </div>