Merge pull request #64 from team-pofo/refactor/#63/ModifyLayout

refactor. #63-마이페이지 재렌더링 방지 위해 중첩 레이아웃 적용

src/components/Layout/styles.ts

@@ -9,3 +9,71 @@ export const LayoutContainer = styled.div`
 export const Content = styled.main`
   flex: 1;
 `;
+
+const grey = "#59636e";
+const lightgrey = "#DEE4E9";
+const sidebarHover = "#F2F2F2";
+
+export const MypageContainer = styled.div`
+  max-width: 1200px;
+  padding: 60px 60px 60px 60px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+`;
+
+export const MypageSidebarContainer = styled.div`
+  width: 200px;
+  height: 100%;
+  position: sticky;
+  top: 140px;
+`;
+
+export const MypageMyinfo = styled.div`
+  width: 200px;
+  border-bottom: solid 2px ${lightgrey};
+  p {
+    padding-left: 10px;
+  }
+`;
+
+export const MypageNickname = styled.p`
+  font-size: 20px;
+  margin-top: 20px;
+`;
+
+export const MypageEmail = styled.p`
+  color: ${grey};
+  margin-bottom: 20px;
+`;
+
+export const MypageSidebar = styled.div`
+  width: 200px;
+  margin-top: 17px;
+  display: flex;
+  flex-direction: column;
+
+  button {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-top: 3px;
+    padding: 5px 10px 5px;
+    border-radius: 10px;
+    gap: 15px;
+    font-size: 18px;
+
+    &:hover {
+      background-color: ${sidebarHover};
+    }
+  }
+  .active {
+    background-color: ${sidebarHover};
+  }
+`;
+
+export const MypageContentContainer = styled.div`
+  flex: 1;
+  /* min-width: 400px; */
+`;

src/pages/[username]/editprofile.tsx

@@ -1,11 +1,17 @@
-import React from "react";
-import MypageLayout from "@/components/Mypage/MypageLayout";
+import React, { ReactElement } from "react";
+import MypageLayout from "@/components/Layout/MypageLayout";
+import { NextPageWithLayout } from "../_app";
+import Layout from "@/components/Layout/Layout";
 
-const EditProfile: React.FC = () => {
+const EditProfile: NextPageWithLayout = () => {
+  return <p>개인정보 변경 ^^</p>;
+};
+
+EditProfile.getLayout = function getLayout(page: ReactElement) {
   return (
-    <MypageLayout>
-      <p>개인정보 변경 ^^</p>
-    </MypageLayout>
+    <Layout>
+      <MypageLayout>{page}</MypageLayout>
+    </Layout>
   );
 };
 

src/pages/[username]/likeprojects.tsx

@@ -1,11 +1,17 @@
-import React from "react";
-import MypageLayout from "@/components/Mypage/MypageLayout";
+import React, { ReactElement } from "react";
+import MypageLayout from "@/components/Layout/MypageLayout";
+import Layout from "@/components/Layout/Layout";
+import { NextPageWithLayout } from "../_app";
 
-const LikeProjects: React.FC = () => {
+const LikeProjects: NextPageWithLayout = () => {
+  return <p>좋아요한 프로젝트 ^^</p>;
+};
+
+LikeProjects.getLayout = function getLayout(page: ReactElement) {
   return (
-    <MypageLayout>
-      <p>좋아요한 프로젝트 ^^</p>
-    </MypageLayout>
+    <Layout>
+      <MypageLayout>{page}</MypageLayout>
+    </Layout>
   );
 };
 

src/pages/[username]/projects.tsx

@@ -1,29 +1,26 @@
-import React from "react";
-import MypageLayout from "@/components/Mypage/MypageLayout";
+import React, { ReactElement } from "react";
+import MypageLayout from "@/components/Layout/MypageLayout";
 import MyProjectComponents from "@/components/Mypage/MyProjects/MyProjects";
 import { useAuthStore } from "@/stores/authStore";
 import { css, Global } from "@emotion/react";
+import { NextPageWithLayout } from "../_app";
+import Layout from "@/components/Layout/Layout";
 
-const MyProjects: React.FC = () => {
+const MyProjects: NextPageWithLayout = () => {
   const { isLoggedIn } = useAuthStore();
   if (isLoggedIn) {
-    return (
-      <div>
-        <Global
-          styles={css`
-            &::-webkit-scrollbar {
-              display: none;
-            }
-          `}
-        />
-        <MypageLayout>
-          <MyProjectComponents />
-        </MypageLayout>
-      </div>
-    );
+    return <MyProjectComponents />;
   } else {
     return null;
   }
 };
 
+MyProjects.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <Layout>
+      <MypageLayout>{page}</MypageLayout>
+    </Layout>
+  );
+};
+
 export default MyProjects;

src/pages/_app.tsx

@@ -7,10 +7,19 @@ import { ApolloProvider } from "@apollo/client";
 import client from "@/lib/apolloClient";
 import { useAuthStore } from "@/stores/authStore";
 import { useRouter } from "next/router";
-import { useEffect, useRef } from "react";
+import { ReactElement, ReactNode, useEffect, useRef } from "react";
+import { NextPage } from "next";
 const myFont = localFont({ src: "../fonts/PretendardVariable.woff2" });
 
-export default function App({ Component, pageProps }: AppProps) {
+export type NextPageWithLayout<P = "", IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const { isLoggedIn, isAuthLoading } = useAuthStore();
   const router = useRouter();
   const hasAlerted = useRef(false);
@@ -32,6 +41,21 @@ export default function App({ Component, pageProps }: AppProps) {
     }
   }, [isLoggedIn, isAuthLoading, router]);
 
+  const getLayout = Component.getLayout ?? ((page) => <Layout>{page}</Layout>);
+  // return getLayout(
+  //   <ApolloProvider client={client}>
+  //     <Component {...pageProps} />
+  //   </ApolloProvider>,
+  // );
+
+  return (
+    <ApolloProvider client={client}>
+      <div className={myFont.className}>
+        {getLayout(<Component {...pageProps} />)}
+      </div>
+    </ApolloProvider>
+  );
+
   return (
     <div className={myFont.className}>
       <Layout>

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 import ProjectCard from "@/components/ProjectCard/ProjectCard";
 import SearchWrapperContainer from "../components/Home/HomeSearch";
 
@@ -11,8 +11,9 @@ import { useSearchProject } from "@/stores/searchProjectStore";
 import { useSelectStacks } from "@/stores/selectStackType/selectStacksStore";
 import { useSelectTypes } from "@/stores/selectStackType/selectTypesStore";
 import { getCategoryKey } from "@/lib/enum/projectCategoryEnum";
+import Layout from "@/components/Layout/Layout";
 
-export default function Home() {
+const Home = () => {
   const [isLoading, setIsLoading] = useState(true); // 초기 로딩 상태 추가
 
   const {
@@ -182,4 +183,10 @@ export default function Home() {
       </div>
     </>
   );
-}
+};
+
+Home.getLayout = (page: ReactElement) => {
+  return <Layout>{page}</Layout>;
+};
+
+export default Home;