feat/#49/sidebar position:sticky로 위치 고정

src/components/Mypage/MyProjects.tsx

@@ -0,0 +1,30 @@
+export default function MyProjectComponents() {
+  return (
+    <div
+      style={{ width: "300px", height: "1000px", border: "solid 30x black" }}
+    >
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+      <h1>hello</h1>
+    </div>
+  );
+}

src/components/Mypage/styles.ts

@@ -15,8 +15,9 @@ export const MypageContainer = styled.div`
 
 export const MypageSidebarContainer = styled.div`
   width: 200px;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
+  position: sticky;
+  top: 140px;
 `;
 
 export const MypageMyinfo = styled.div`
@@ -42,7 +43,6 @@ export const MypageSidebar = styled.div`
   margin-top: 17px;
   display: flex;
   flex-direction: column;
-  align-items: baseline;
 
   button {
     display: flex;
@@ -64,7 +64,9 @@ export const MypageSidebar = styled.div`
 `;
 
 export const MypageContentContainer = styled.div`
-  /* border: solid black 3px; */
-  margin: auto;
-  display: flex;
+  flex: 1;
+  overflow-y: auto;
+  border: solid black 3px;
+  min-width: 400px;
+  height: 2000px;
 `;

src/pages/mypage/myprojects.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import MypageLayout from "@/components/Mypage/MypageLayout";
+import MyProjectComponents from "@/components/Mypage/MyProjects";
 
 const MyProjects: React.FC = () => {
   return (
     <MypageLayout>
-      <p>나의 프로젝트 ^^</p>
+      <MyProjectComponents />
     </MypageLayout>
   );
 };