feat/#49/sidebarIndex usestate에서 zustand로 변경

src/components/Mypage/MypageLayout.tsx

@@ -1,8 +1,7 @@
 import * as Styles from "./styles";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
-
+import { useSidebarStore } from "@/stores/mypageSidebarStore";
 import { LuFileText, LuHeart, LuSettings } from "react-icons/lu";
 
 function MypageMyInfo() {
@@ -21,47 +20,41 @@ function MypageMyInfo() {
   );
 }
 
-function MypageSidebar({
-  sidebarIndex,
-  setSidebarIndex,
-}: {
-  sidebarIndex: number;
-  setSidebarIndex: (sidebarIndex: number) => void;
-}) {
+function MypageSidebar() {
   const items = [
     {
       icon: <LuFileText />,
       label: "나의 프로젝트",
-      link: "/myprojects",
+      link: "myprojects",
     },
     {
       icon: <LuHeart />,
       label: "좋아요한 프로젝트",
-      link: "/likeprojects",
+      link: "likeprojects",
     },
     {
       icon: <LuSettings />,
       label: "개인정보 변경",
-      link: "/editprofile",
+      link: "editprofile",
     },
   ];
 
+  const { sidebarIndex, setSidebarIndex } = useSidebarStore();
+
   return (
     <Styles.MypageSidebar>
       {items.map((item, index) => (
         <Link
           key={index}
           href={`/mypage/${item.link}`}
-          style={{ width: "100%" }}
           passHref
+          style={{ width: "100%" }}
         >
           <button
-            key={index}
-            onClick={() => setSidebarIndex(index)}
-            style={{
-              backgroundColor:
-                sidebarIndex === index ? "#F4F4F5" : "transparent",
+            onClick={() => {
+              setSidebarIndex(index);
             }}
+            className={sidebarIndex === index ? "active" : ""}
           >
             {item.icon}
             {item.label}
@@ -76,25 +69,18 @@ type MypageLayoutProps = {
   children: React.ReactNode;
 };
 
-const MypageLayout: React.FC<MypageLayoutProps> = ({ children }) => {
-  const [sidebarIndex, setSidebarIndex] = useState(0);
-
+export default function MypageLayout({ children }: MypageLayoutProps) {
   return (
     <div>
       <Styles.MypageContainer>
         <Styles.MypageSidebarContainer>
           <MypageMyInfo />
-          <MypageSidebar
-            sidebarIndex={sidebarIndex}
-            setSidebarIndex={setSidebarIndex}
-          />
+          <MypageSidebar />
         </Styles.MypageSidebarContainer>
         <Styles.MypageContentContainer>
           {children}
         </Styles.MypageContentContainer>
       </Styles.MypageContainer>
     </div>
   );
-};
-
-export default MypageLayout;
+}

src/components/Mypage/styles.ts

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 
 const grey = "#59636e";
 const lightgrey = "#DEE4E9";
-const sidebarHover = "#F4F4F5";
+const sidebarHover = "#F2F2F2";
 
 export const MypageContainer = styled.div`
   max-width: 1200px;
@@ -58,6 +58,9 @@ export const MypageSidebar = styled.div`
       background-color: ${sidebarHover};
     }
   }
+  .active {
+    background-color: ${sidebarHover};
+  }
 `;
 
 export const MypageContentContainer = styled.div`

src/pages/mypage/editprofile.tsx

@@ -4,7 +4,7 @@ import MypageLayout from "@/components/Mypage/MypageLayout";
 const EditProfile: React.FC = () => {
   return (
     <MypageLayout>
-      <p>개인정보 변경^^</p>
+      <p>개인정보 변경 ^^</p>
     </MypageLayout>
   );
 };

src/pages/mypage/index.tsx

@@ -1,16 +1,7 @@
-import React from "react";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
 
-const Mypage: React.FC = () => {
+export default function Mypage() {
   const router = useRouter();
-
-  useEffect(() => {
-    // 기본 경로에서 myprojects로 리다이렉트
-    router.replace("/mypage/myprojects");
-  }, [router]);
-
-  return null; // 리다이렉트 중이므로 아무것도 렌더링하지 않음
-};
-
-export default Mypage;
+  router.replace("/mypage/myprojects");
+  return null;
+}

src/stores/mypageSidebarStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+type SidebarStore = {
+  sidebarIndex: number;
+  setSidebarIndex: (index: number) => void;
+};
+
+export const useSidebarStore = create<SidebarStore>((set) => ({
+  sidebarIndex: 0,
+  setSidebarIndex: (index: number) => set({ sidebarIndex: index }),
+}));