diff --git a/components/common/Header.tsx b/components/common/Header.tsx
index cc19c284e..7d75e4c8d 100644
--- a/components/common/Header.tsx
+++ b/components/common/Header.tsx
@@ -1,28 +1,53 @@
-import { useState } from "react";
-import useFetch from "@/src/hook/useFetch";
-import { IHeaderUserLoginInfoApi } from "./interface";
-import { BASE_URL } from "@/src/constant/api";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
 import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderUserInfo, HeaderWrap } from "./headerStyle";
-import Link from "next/link";
+import { useRouter } from "next/router";
 import { Profile } from "@/styles/commonStyle";
 import LinkButton from "./atoms/LinkButton";
+import Link from "next/link";
 
 const logo = '/assets/logo/logo.svg';
 
-function Header() {
-  // const { pathname } = useLocation();
-  const { value } = useFetch<IHeaderUserLoginInfoApi>(BASE_URL);
+export interface IHeaderUser {
+  id:number,
+  email:string,
+  name?:string,
+  image_source?:string,
+  created_at?:string,
+  auth_id:string
+}
+
+export interface IHeaderUserLoginInfoApi {
+  userInfo?: {
+    data: IHeaderUser[];
+  };
+}
+
+export async function getStaticProps() {
+  const res = await axios.get(``);
+  const userInfo = res.data;
+
+  return {
+    props:{
+      userInfo,
+    }
+  }
+}
+
+function Header({userInfo}:IHeaderUserLoginInfoApi) {
+  const {pathname} = useRouter();
   const [fixed, setFixed] = useState(true);
-  // useEffect(() => {
-  //   if (pathname === '/folder') {
-  //     setFixed(false);
-  //   }
-  // }, [pathname]);
-  const userInfo = value?.data[0] ?? undefined;
+
+  useEffect(() => {
+    if (pathname === '/folder') {
+      setFixed(false);
+    }
+  }, [pathname]);
+
   return (
     <HeaderWrap className="head__wrap" $position={fixed}>
       <HeaderInner>
-        <HeaderLogo>
+        <HeaderLogo className="head__logo">
           <Link href="/">
             <img src={logo} alt="linkbrary" />
           </Link>
@@ -31,7 +56,7 @@ function Header() {
           {userInfo ? (
             <HeaderUserInfo>
               <Profile></Profile>
-              <Email>{userInfo?.email}</Email>
+              <Email>{userInfo?.data[0].email}</Email>
             </HeaderUserInfo>
           ) : (
             <LinkButton $link={'/signin'} $linkClass={'link--gradient link--login large'}>
diff --git a/components/common/atoms/Button.tsx b/components/common/atoms/Button.tsx
index a8a6ca6f7..dfb50c4a5 100644
--- a/components/common/atoms/Button.tsx
+++ b/components/common/atoms/Button.tsx
@@ -1,11 +1,12 @@
+import { ButtonHTMLAttributes } from 'react';
 import { ButtonModule } from './buttonStyle';
 interface IButtonModule {
   children: React.ReactNode;
   $btnClass: string;
   $BeforButtonIcon?: string;
-  $id?: string | number;
+  $id?: string;
   $afterButtonIcon?: string;
-  $type?: 'button' | 'reset' | 'submit' | undefined;
+  $type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   onclick?: () => void;
 }
 
diff --git a/components/common/atoms/CheckBox.tsx b/components/common/atoms/CheckBox.tsx
index 5374db9d7..31f1b8225 100644
--- a/components/common/atoms/CheckBox.tsx
+++ b/components/common/atoms/CheckBox.tsx
@@ -6,7 +6,7 @@ interface ICheckBoxData {
 }
 
 function CheckBox({ $data }: ICheckBoxData) {
-  if (typeof $data) {
+  if ($data?.data) {
     return (
       <CheckBoxWrap className="chk--list-type1">
         {$data &&
diff --git a/components/common/atoms/Input.tsx b/components/common/atoms/Input.tsx
index 54a6a09d2..5325a76f4 100644
--- a/components/common/atoms/Input.tsx
+++ b/components/common/atoms/Input.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
 import { InputModule } from './inputStyle';
 import Button from './Button';
 import { SearchResults } from '@/pages/folder/folderStyle';
+import { Relative } from '@/styles/commonStyle';
 
 interface IButtonModule {
   $type?: string;
@@ -47,7 +48,7 @@ function Input({
 
   return (
    <>
-     <div style={{position:'relative'}}>
+     <Relative>
         <InputModule
           type={$type}
           className={$inputClass}
@@ -62,7 +63,7 @@ function Input({
             {children}
           </Button>
         )}
-      </div>
+      </Relative>
     {value && <SearchResults><span>{value}</span>으로 검색한 결과입니다.</SearchResults>}
    </>
   );
diff --git a/components/common/atoms/LinkButton.tsx b/components/common/atoms/LinkButton.tsx
index 3d262fc6c..ef565e915 100644
--- a/components/common/atoms/LinkButton.tsx
+++ b/components/common/atoms/LinkButton.tsx
@@ -3,15 +3,17 @@ interface IButtonModule {
   children: React.ReactNode;
   $link: string;
   $linkClass: string;
+  $target?: string;
 }
 
 export default function LinkButton({
   children,
   $link,
   $linkClass,
+  $target="_self"
 }: IButtonModule) {
   return (
-    <LinkModule href={$link} className={$linkClass}>
+    <LinkModule href={$link} className={$linkClass} target="$target">
       {children}
     </LinkModule>
   );
diff --git a/components/common/atoms/LinkButtonStyle.ts b/components/common/atoms/LinkButtonStyle.ts
index 65518d78d..a406993d1 100644
--- a/components/common/atoms/LinkButtonStyle.ts
+++ b/components/common/atoms/LinkButtonStyle.ts
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { theme } from "@/styles/theme";
 import Link from "next/link";
+import { font24 } from "@/styles/commonStyle";
 
 
 export const LinkModule = styled(Link)`
@@ -21,6 +22,11 @@ export const LinkModule = styled(Link)`
         width: 80px;
       }
     }
+    &--title {
+      &-text {
+        ${font24}
+      }
+    }
   }
   &.full {
     width: 100% !important; 
diff --git a/components/common/interface.ts b/components/common/interface.ts
deleted file mode 100644
index 26e97fa76..000000000
--- a/components/common/interface.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// user login info
-export interface IHeaderUserLoginInfoApi {
-  data: [
-    {
-      id:number,
-      email:string,
-      name?:string,
-      image_source?:string,
-      created_at?:string,
-      auth_id:string
-    }
-  ]
-}
\ No newline at end of file
diff --git a/components/folder/ContantList.tsx b/components/folder/ContantList.tsx
deleted file mode 100644
index 1c1e67f33..000000000
--- a/components/folder/ContantList.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { IFolderContent } from '@/pages/folder/interface';
-import PostCard from './PostCard';
-import { EmptyBox, PostCardWrap } from '@/pages/folder/folderStyle';
-
-
-interface IFolderList {
-  contant: IFolderContent[] | [] | undefined | null;
-}
-
-function ContantList({ contant }: IFolderList) {
-  return (
-    <div>
-      {
-        contant ? (
-          <PostCardWrap>
-            {contant?.map((data) => (
-              <PostCard key={data.id} {...data} />
-            ))}
-          </PostCardWrap>
-        ) : (
-          <EmptyBox>저장된 링크가 없습니다.</EmptyBox>
-        )
-      }
-    </div>
-  );
-}
-export default ContantList;
diff --git a/components/folder/FolderButtonList.tsx b/components/folder/FolderButtonList.tsx
index e6f961449..e5da8cff0 100644
--- a/components/folder/FolderButtonList.tsx
+++ b/components/folder/FolderButtonList.tsx
@@ -5,21 +5,21 @@ import { IFolderMenuButtonApi } from '@/pages/folder/interface';
 
 interface IButtonList {
   $menu: IFolderMenuButtonApi | null;
-  $btnActive: number | string;
+  $activeBtnId: number;
   onClick: (id:number) => void;
 }
 
 function FolderButtonList({
   $menu,
-  $btnActive,
+  $activeBtnId,
   onClick,
 }: IButtonList) {
 
   return (
     <BookMarkBtnList>
       <Button
-        $id={-1}
-        $btnClass={`button--outlined ${$btnActive === -1 ? 'active' : ''}`}
+        $id={`-1`}
+        $btnClass={`button--outlined ${$activeBtnId === -1 ? 'active' : ''}`}
         onclick={() => onClick(-1)}
       >
         전체
@@ -30,7 +30,7 @@ function FolderButtonList({
             key={item.id}
             $id={`${item.id}`}
             $btnClass={`button--outlined ${
-              $btnActive === item.id ? 'active' : ''
+              $activeBtnId === item.id ? 'active' : ''
             }`}
             onclick={() => onClick(item.id)}
           >
diff --git a/components/folder/FolderContentControll.tsx b/components/folder/FolderContentControll.tsx
index ab5c6bd75..2a406883f 100644
--- a/components/folder/FolderContentControll.tsx
+++ b/components/folder/FolderContentControll.tsx
@@ -1,8 +1,9 @@
 import { memo } from 'react';
 import Button from '../common/atoms/Button';
-import Link from 'next/link';
 import { ShareBox } from '../share/shareStyle';
 import { ShareListBtn } from '@/pages/folder/folderStyle';
+import LinkButton from '../common/atoms/LinkButton';
+import { Font } from '@/styles/commonStyle';
 
 const folderControlBtn = [
   {
@@ -27,7 +28,7 @@ const folderControlBtn = [
 
 interface iControll {
   $title: string;
-  onclick: (type: any) => void;
+  onclick: (type: string) => void;
   $id?:number
 }
 
@@ -35,9 +36,14 @@ function FolderContentControll({ $title, onclick, $id }: iControll) {
   const handleModalOpen = (type: any) => {
     onclick(type);
   };
+
   return (
     <ShareBox>
-      <Link href={`/shared/${$id}`} target='_blank'>{$title}</Link>
+      {
+        $id &&
+        $id === -1 ? <Font as='strong' className='font--size-ls tab-title'>{$title}</Font>:
+        <LinkButton $link={`/shared/${$id}`} $linkClass="link--title-text tab-title" $target='_blank'>{$title}</LinkButton>  
+      }
       {$title === '전체' || (
         <ShareListBtn>
           {folderControlBtn.map((btn) => (
diff --git a/components/folder/PostCard.tsx b/components/folder/PostCard.tsx
index 0e0d543be..87254c94b 100644
--- a/components/folder/PostCard.tsx
+++ b/components/folder/PostCard.tsx
@@ -1,21 +1,14 @@
-import { IFolderContent, IFolderMenuButtonApi } from "@/pages/folder/interface";
-import useFetch from "@/src/hook/useFetch";
 import { useMemo, useState } from "react";
+import Link from "next/link";
+import { IFolderContent} from "@/pages/folder/interface";
 import { IModal } from "../modal/interface";
-import { FOLDER_MENU_LIST_API } from "@/src/constant/api";
 import { BookMarkBtn, CardMenu, CardWrap } from "./PostCardStyle";
-import Link from "next/link";
-import { DFlaxAlignCenterBtw, EllipsisLine } from "@/styles/commonStyle";
 import { calculateTimeAgo } from "@/src/utils/calcTilmAgo";
 import Modal from "../modal/Modal";
-import { modalOrder } from "@/src/constant/modal";
+import { DFlaxAlignCenterBtw, EllipsisLine } from "@/styles/commonStyle";
 
 const emptyImg = '/assets/logo/logo.svg';
 
-function useFatchDataLoad<T>(api: string) {
-  return useFetch<T>(api);
-}
-
 export default function PostCard({ image_source, description, created_at}: IFolderContent) {
   const [bookMark, setBookMark] = useState(false);
   const [cardMenuShow, setCardMenuShow] = useState(false);
@@ -28,25 +21,10 @@ export default function PostCard({ image_source, description, created_at}: IFold
     $buttonText: null,
     $modalData: null,
   });
-  const { value: menu, isLoading: menuLoading } =
-    useFatchDataLoad<IFolderMenuButtonApi>(FOLDER_MENU_LIST_API);
 
   const handelerBookMarkActive = () => setBookMark((prev) => !prev);
   const handelerCardDropdown = () => setCardMenuShow((prev) => !prev);
 
-  const handleModalOpen = (type: string) => {
-    let modalInfo = modalOrder[type];
-    if (type === 'folderInAdd') {
-      modalInfo = {
-        ...modalInfo,
-        $modalData: menu,
-      };
-    }
-    setModalInfo(modalInfo);
-    setModalShow(true);
-    setCardMenuShow(false);
-  };
-
   const handleModalClose = () => {
     setModalShow(false);
   };
@@ -93,7 +71,7 @@ export default function PostCard({ image_source, description, created_at}: IFold
           </button>
           {cardMenuShow && (
             <div className="card__dropdown-menu">
-              <button
+              {/* <button
                 className="card__menu-btn"
                 onClick={() => handleModalOpen('folderDelete')}
               >
@@ -104,7 +82,7 @@ export default function PostCard({ image_source, description, created_at}: IFold
                 onClick={() => handleModalOpen('folderInAdd')}
               >
                 폴더에 추가
-              </button>
+              </button> */}
             </div>
           )}
         </CardMenu>
diff --git a/components/folder/PostCardList.tsx b/components/folder/PostCardList.tsx
new file mode 100644
index 000000000..fbf1da7e4
--- /dev/null
+++ b/components/folder/PostCardList.tsx
@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { IFolderContent } from '@/pages/folder/interface';
+import PostCard from './PostCard';
+import { EmptyBox, PostCardWrap } from '@/pages/folder/folderStyle';
+
+
+interface IFolderList {
+  $content: IFolderContent[] | undefined | null;
+}
+
+function PostCardList({ $content }: IFolderList) {
+  if(!$content) return <EmptyBox>저장된 링크가 없습니다.</EmptyBox>
+  return (
+    <PostCardWrap>
+      {$content?.map((data) => (
+        <PostCard key={data.id} {...data} />
+      ))}
+    </PostCardWrap>
+  );
+}
+export default memo(PostCardList);
diff --git a/components/share/ShareModal.tsx b/components/share/ShareModal.tsx
index 4be74d641..70b288f21 100644
--- a/components/share/ShareModal.tsx
+++ b/components/share/ShareModal.tsx
@@ -1,4 +1,4 @@
-import { snsShare } from '../../constant/share';
+import { snsShare } from '@/src/constant/share';
 import Button from '../common/atoms/Button';
 import { ShareBox } from './shareStyle';
 
diff --git a/components/share/shareStyle.ts b/components/share/shareStyle.ts
index 2a5cee387..9431cd153 100644
--- a/components/share/shareStyle.ts
+++ b/components/share/shareStyle.ts
@@ -1,4 +1,18 @@
 import { DFlaxAlignCenterBtw } from "@/styles/commonStyle";
+import { theme } from "@/styles/theme";
 import styled from "styled-components";
 
-export const ShareBox = styled(DFlaxAlignCenterBtw)``
\ No newline at end of file
+export const ShareBox = styled(DFlaxAlignCenterBtw)`
+  .tab-title {
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+  }
+  @media screen and (max-width: ${theme.screenSize.moLarge}) {
+    flex-direction: column;
+    align-items: flex-start;
+    padding-bottom: 1.15rem;
+    .tab-title {
+      margin-bottom: 0.75rem;
+    }
+  }
+`
\ No newline at end of file
diff --git a/lib/axios.ts b/lib/axios.ts
new file mode 100644
index 000000000..28eb6adc2
--- /dev/null
+++ b/lib/axios.ts
@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const instance = axios.create({
+  baseURL:'https://bootcamp-api.codeit.kr/api/users/1'
+});
+
+export default instance;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e3d06f454..adae6bbb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "fe-weekly-mission",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.6.8",
+        "date-fns": "^3.6.0",
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18",
@@ -1277,6 +1279,11 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -1298,6 +1305,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -1484,6 +1501,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1540,6 +1568,15 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1594,6 +1631,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2315,6 +2360,25 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2324,6 +2388,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3200,6 +3277,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3599,6 +3695,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index ba2070910..86310f8f0 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.6.8",
+    "date-fns": "^3.6.0",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
diff --git a/pages/404.tsx b/pages/404.tsx
index e9895ae98..7552ed144 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -7,7 +7,7 @@ export default function NotFound() {
     <NotFoundWrap>
       <TitleMs>페이지 작업 중 입니다.</TitleMs>
       <div>
-        <Link href="/">페이지 이동</Link>
+        <Link href="/folder">페이지 이동</Link>
       </div>
     </NotFoundWrap>
   );
diff --git a/pages/faq/index.tsx b/pages/faq/index.tsx
index 82035918d..c7552b6dd 100644
--- a/pages/faq/index.tsx
+++ b/pages/faq/index.tsx
@@ -1,10 +1,9 @@
-
+import { InnerLarge } from "@/styles/commonStyle";
 
 export default function Faq() {
   return (
     <div>
-      faq
-
+       <InnerLarge>Faq</InnerLarge>
     </div>
   );
 }
\ No newline at end of file
diff --git a/pages/folder/folderStyle.ts b/pages/folder/folderStyle.ts
index 67c5379a2..d8d75b607 100644
--- a/pages/folder/folderStyle.ts
+++ b/pages/folder/folderStyle.ts
@@ -73,7 +73,7 @@ export const BodyInner = styled(ContainBodyInner)`
 
 export const PostCardWrap = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(33.3333%, 1fr));
   gap: 1.5625rem 1.25rem;
 
   @media screen and (max-width: 1124px) {
diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx
index d0e6140cd..70fc2fa04 100644
--- a/pages/folder/index.tsx
+++ b/pages/folder/index.tsx
@@ -1,32 +1,58 @@
-import { IModal } from "@/components/modal/interface";
-import { FOLDER_CONTANT_LIST_API, FOLDER_MENU_LIST_API } from "@/src/constant/api";
-import useFetch from "@/src/hook/useFetch";
-import { useState } from "react";
-import { IFolderContentApi, IFolderMenuButtonApi } from "./interface";
+import { useEffect, useState } from "react";
+import { ContainBody } from "@/styles/commonStyle";
 import { modalOrder } from "@/src/constant/modal";
-import { BodyInner, BookmarkBox, FolderContainHead } from "./folderStyle";
 import LinkAddHeader from "@/components/folder/LinkAddHeader";
-import { ContainBody } from "@/styles/commonStyle";
 import SearchInputBox from "@/components/folder/SearchInputBox";
 import FolderButtonList from "@/components/folder/FolderButtonList";
 import Button from "@/components/common/atoms/Button";
 import FolderContentControll from "@/components/folder/FolderContentControll";
-import ContantList from "@/components/folder/ContantList";
-import Loading from "@/components/loading/Loading";
+import PostCardList from "@/components/folder/PostCardList";
 import Modal from "@/components/modal/Modal";
+import { IModal } from "@/components/modal/interface";
+import Loading from "@/components/loading/Loading";
+import { BodyInner, BookmarkBox, FolderContainHead } from "./folderStyle";
+import { IFolderContentApi, IFolderMenuButtonApi} from "./interface";
+import axios from "@/lib/axios";
+import { useRouter } from "next/router";
+import { GetServerSidePropsContext } from "next";
 
 const addImage = '/assets/icon/icon_primary_add.svg';
 const searchImage = '/assets/icon/icon_search.svg';
 const linkImage = '/assets/icon/icon_primaty_link.svg';
 
-function useFatchDataLoad<T>(api: string) {
-  return useFetch<T>(api);
+export async function getServerSideProps(contaxt:GetServerSidePropsContext) {
+  let $menu;
+  let $content;
+  const { query } = contaxt;
+  try {
+    let resContent ;
+    const resMenu = await axios.get(`/folders`);
+    if(query.id) {
+      resContent = await axios.get(`/links?folderId=${query.id}`);
+    } else {
+      resContent = await axios.get(`/links`);
+    }
+    $menu = resMenu.data;
+    $content = resContent.data;
+
+  } catch (error) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props:{
+      $menu,
+      $content,
+    }
+  }
 }
 
-export default function Folder() {
-  const [title, setTitle] = useState('전체');
-  const [btnActive, setBtnActive] = useState<number>(-1);
-  const [dynamicAPI, setDynamicAPI] = useState<string>(FOLDER_CONTANT_LIST_API); // 버튼리스트 클릭시 해당 컨텐트 노출
+export default function Folder({$menu, $content}: {$menu:IFolderMenuButtonApi, $content:IFolderContentApi}) {
+  const router = useRouter();
+  const [tabTitle, setTabTitle] = useState('전체');
+  const [activeBtn, setActiveBtn] = useState<number>(-1);
   const [modalShow, setModalShow] = useState(false);
   const [modalInfo, setModalInfo] = useState<IModal>({
     $title: '',
@@ -36,27 +62,21 @@ export default function Folder() {
     $buttonText: null,
     $modalData: null,
   });
-  const { value: menu, isLoading: menuLoading } =
-    useFatchDataLoad<IFolderMenuButtonApi>(FOLDER_MENU_LIST_API);
-  const { value: contant, isLoading: contantLoading } =
-    useFatchDataLoad<IFolderContentApi>(dynamicAPI);
-  const [searchContatn, setSearchContant] = useState<any>();
+  const [searchContatn, setSearchContent] = useState<any>();
 
   // 폴더리스트버튼
   const handleClick = (id: number) => {
     if (!id) return;
 
-    if (id < 0) {
-      setDynamicAPI(FOLDER_CONTANT_LIST_API);
-      setTitle('전체');
-      setBtnActive(id)
-      return;
+    if(id === -1) {
+      router.push(``)
+      setTabTitle('전체');
+    } else{
+      router.push(`?id=${id}`)
+      let title = $menu.data.filter(data => `${data.id}` === `${id}`);
+      setTabTitle(`${title[0].name}`);
     }
-
-    setBtnActive(id);
-    setDynamicAPI(`${FOLDER_CONTANT_LIST_API}?folderId=${id}`);
-    const result = menu?.data.filter((data) => +data.id === +id);
-    result && setTitle(result[0]?.name as '');
+    setActiveBtn(id)
   };
 
   // modal open
@@ -65,7 +85,7 @@ export default function Folder() {
     if (type === 'folderInAdd') {
       modalInfo = {
         ...modalInfo,
-        $modalData: menu,
+        $modalData: $menu,
       };
     }
     setModalInfo(modalInfo);
@@ -81,7 +101,7 @@ export default function Folder() {
   const handelSearch = (value: string) => {
     let filter;
     if (value) {
-      filter = contant?.data.filter((con) => {
+      filter = $content?.data.filter((con) => {
         if (!con) return;
         return (
           con.description?.includes(value) ||
@@ -89,23 +109,37 @@ export default function Folder() {
           con.url?.includes(value)
         );
       });
-      setSearchContant(filter);
+      setSearchContent(filter);
       return;
     }
-    setSearchContant(contant?.data);
+    setSearchContent($content?.data);
   };
 
-  // contant list
-  const contantSearch = searchContatn ? searchContatn : contant?.data;
-  const loading = menuLoading === false && contantLoading === false;
+  // search
+  const contentSearch = searchContatn ?? $content?.data;
 
+  useEffect(()=>{
+    let idExists ;
+    
+    if(router.query.id){ // folder가 있을때
+      idExists = $menu.data.some((item:any) => `${item.id}` === `${router.query.id}`);
+    } else if (router.query.id === '-1') { // 전체 일때
+      router.push(`/folder`)
+    }
+
+    if (idExists === false) { // folder가 없을때
+      alert('페이지가 없습니다.');
+      router.push(`/folder`)
+    }
+  },[])
+
+  if(!$menu || !$content) return <Loading />
   return (
     <>
       <FolderContainHead className='folder--header'>
         <LinkAddHeader $inputIconImg={linkImage} />
       </FolderContainHead>
-      
-      {loading ? 
+
         <ContainBody className='folder__dody'>
           <BodyInner>
             {/* 검색창 */}
@@ -113,8 +147,8 @@ export default function Folder() {
             {/* 폴더 리스트 버튼 */}
             <BookmarkBox>
               <FolderButtonList
-                $menu={menu}
-                $btnActive={btnActive}
+                $menu={$menu}
+                $activeBtnId={activeBtn}
                 onClick={handleClick}
               />
               <Button
@@ -125,16 +159,14 @@ export default function Folder() {
                 폴더추가
               </Button>
             </BookmarkBox>
-            {/* 설정 버튼 */}
-            <FolderContentControll $title={title} onclick={handleModalOpen} />
+            {/* 탭 타이틀, 설정 버튼 */}
+            <FolderContentControll $id={activeBtn} $title={tabTitle} onclick={handleModalOpen} />
             {/* 컨텐츠 리스트 */}
-            <ContantList contant={contantSearch}/>
+            <PostCardList $content={contentSearch}/>
           </BodyInner>
         </ContainBody>
-        : <Loading/>  
-      }
 
-      <Modal onOpen={modalShow} onClose={handleModalClose} $folderId={btnActive} {...modalInfo} />
+      <Modal onOpen={modalShow} onClose={handleModalClose} $folderId={activeBtn} {...modalInfo} />
     </>
   );
 }
diff --git a/pages/folder/shared.tsx b/pages/folder/shared.tsx
deleted file mode 100644
index 596afe670..000000000
--- a/pages/folder/shared.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ContainBody, ContainHead, TitleMs } from "@/styles/commonStyle";
-import { BodyInner, BoxLinkSearch, ShareHeadInner } from "./folderStyle";
-import useFetch from "@/src/hook/useFetch";
-import { useParams } from "next/navigation";
-import { IFolderContentApi, IFolderMenuButtonApi } from "./interface";
-import { FOLDER_CONTANT_LIST_API, FOLDER_MENU_LIST_API } from "@/src/constant/api";
-import Input from "@/components/common/atoms/Input";
-import ContantList from "@/components/folder/ContantList";
-import Loading from "@/components/loading/Loading";
-
-const logo = '/assets/logo/logo_codeit.svg';
-const search = '/assets/icon/icon_search.svg';
-
-interface IFolder {
-  $title?: string;
-  $folderLogo?: string;
-  $folderLogoAlt?: string;
-}
-
-export default function FolderHead({ $title, $folderLogo, $folderLogoAlt }: IFolder) {
-  return (
-    <ShareHeadInner>
-      {$folderLogo && <img src={$folderLogo} alt={$folderLogoAlt} />}
-      {$folderLogoAlt && <p>{$folderLogoAlt}</p>}
-      {$title && <TitleMs>{$title}</TitleMs>}
-    </ShareHeadInner>
-  );
-}
-
-function useFatchDataLoad<T>(api: string) {
-  return useFetch<T>(api);
-}
-
-function Shared() {
-  const {id} = useParams();
-  // const navigate = useNavigate();
-  const { value: menus, isLoading: menusLoading } =
-  useFatchDataLoad<IFolderMenuButtonApi>(`${FOLDER_MENU_LIST_API}`);
-  const { value: title } =
-  useFatchDataLoad<IFolderMenuButtonApi>(`${FOLDER_MENU_LIST_API}/${id}`);
-  const { value: contant, isLoading: contantLoading } =
-  useFatchDataLoad<IFolderContentApi>(`${FOLDER_CONTANT_LIST_API}?folderId=${id}`);
-
-  const filter = menus?.data.some(data => `${data.id}` === id)
-  if(filter === false) {
-    // navigate('/not-found');
-    return null;
-  } 
-
-  const loading = menusLoading === false || contantLoading === false;
-
-  return (
-    <>
-      <ContainHead>
-      <FolderHead
-          $title={title?.data[0]?.name}
-          $folderLogo={logo}
-          $folderLogoAlt={'@코드잇'}
-        />
-      </ContainHead>
-      {
-        loading ?
-        <ContainBody>
-        <BodyInner>
-          <BoxLinkSearch>
-            <Input
-              $inputClass={'input__link--search'}
-              $placeholder={'링크를 검색해 보세요.'}
-              $beforeBgIcon={search}
-            />
-          </BoxLinkSearch>
-          <ContantList contant={contant?.data} />
-        </BodyInner>
-      </ContainBody>
-      : <Loading/>
-      }
-     
-    </>
-  );
-}
diff --git a/pages/shared/[id].tsx b/pages/shared/[id].tsx
new file mode 100644
index 000000000..bb856efb6
--- /dev/null
+++ b/pages/shared/[id].tsx
@@ -0,0 +1,72 @@
+import { ContainBody, ContainHead, TitleMs } from "@/styles/commonStyle";
+import { BodyInner, BoxLinkSearch, ShareHeadInner } from "../folder/folderStyle";
+import { IFolderContentApi, IFolderMenuButton } from "../folder/interface";
+import Input from "@/components/common/atoms/Input";
+import PostCardList from "@/components/folder/PostCardList";
+import axios from "@/lib/axios";
+import { useRouter } from "next/router";
+import { GetServerSidePropsContext } from "next";
+
+const logo = '/assets/logo/logo_codeit.svg';
+const search = '/assets/icon/icon_search.svg';
+
+export async function getServerSideProps(contaxt:GetServerSidePropsContext) {
+  let $title;
+  let $content;
+  const { query } = contaxt;
+  try {
+    const resTitle = await axios.get(`/folders/${query.id}`);
+    const resContent = await axios.get(`/links?folderId=${query.id}`);
+    $title = resTitle.data;
+    $content = resContent.data;
+    if(!$title.data[0]) {
+      return {
+        notFound: true,
+      }
+    }
+  } catch (error) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props:{
+      $title,
+      $content
+    }
+  }
+}
+
+export interface IShareTitle {
+  data: Omit<IFolderMenuButton[], 'link'>;
+}
+
+export default function Shared({$title, $content}:{$title:IShareTitle, $content:IFolderContentApi}) {
+  const router = useRouter();
+
+  if(!$title.data[0]) router.push('/not-found');;
+  return (
+    <>
+      <ContainHead>
+        <ShareHeadInner>
+          <img src={logo} alt='@코드잇' />
+          <p>@코드잇</p>
+          {$title?.data[0]?.name && <TitleMs>{$title?.data[0]?.name}</TitleMs>}
+        </ShareHeadInner>
+      </ContainHead>
+        <ContainBody>
+        <BodyInner>
+          <BoxLinkSearch>
+            <Input
+              $inputClass={'input__link--search'}
+              $placeholder={'링크를 검색해 보세요.'}
+              $beforeBgIcon={search}
+            />
+          </BoxLinkSearch>
+          <PostCardList $content={$content?.data} />
+        </BodyInner>
+      </ContainBody>   
+    </>
+  );
+}
diff --git a/src/constant/api.ts b/src/constant/api.ts
index b00a3e68c..06991deab 100644
--- a/src/constant/api.ts
+++ b/src/constant/api.ts
@@ -1,4 +1,4 @@
 export const BASE_URL = 'https://bootcamp-api.codeit.kr/api/users/1';
 
 export const FOLDER_MENU_LIST_API = `${BASE_URL}/folders`;
-export const FOLDER_CONTANT_LIST_API = `${BASE_URL}/links`;
\ No newline at end of file
+export const FOLDER_CONTENT_LIST_API = `${BASE_URL}/links`;
\ No newline at end of file
diff --git a/src/hook/useFetch.tsx b/src/hook/useFetch.tsx
deleted file mode 100644
index 07ac96f1b..000000000
--- a/src/hook/useFetch.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export default function useFetch<T>(url: string) {
-  const [value, setValue] = useState<T | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    async function fromDate() {
-      try {
-        const response = await fetch(url);
-        const result = await response.json();
-        if (response.ok) {
-          setValue(result);
-        }
-      } catch (error: any) {
-        setError(error);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-    fromDate();
-  }, [url]);
-
-  return { value, isLoading, error };
-}
diff --git a/styles/commonStyle.ts b/styles/commonStyle.ts
index a2d0830a5..7a28ae184 100644
--- a/styles/commonStyle.ts
+++ b/styles/commonStyle.ts
@@ -45,7 +45,7 @@ export const TitleMs = styled.h3`
   font-weight: 700;
   @media screen and (max-width: ${theme.screenSize.moLarge}) {
     font-size: calc(${theme.title.ms} / 2);
-      line-height: 1.79rem;
+    line-height: 1.79rem;
   }
 `
 export const ModlaTitle = styled.h2`
@@ -53,37 +53,47 @@ export const ModlaTitle = styled.h2`
   font-weight: 700;
   text-align: center;
 `
+// ====  폰트  ====
+
+export const bold = css`
+  font-weight: 700;
+`
 
-export const SubTitle = styled.h3`
+export const font24 = css`
   font-size: 1.5rem;
   line-height: 1.8125rem;
   font-weight: 600;
+  @media screen and (max-width: ${theme.screenSize.moLarge}) {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
 `
 
-// ====  폰트  ====
-
 export const Font = styled.div`
   &.font--size {
+    &-ls {
+      font-size: ${theme.font.ls};
+    }
     &-l {
-      font-size: ${({ theme }) => theme.font.l};
+      font-size: ${theme.font.l};
     }
 
     &-ms {
-      font-size: ${({ theme }) => theme.font.lm};
+      font-size: ${theme.font.lm};
     }
 
     &-m {
-      font-size: ${({ theme }) => theme.font.m};
+      font-size: ${theme.font.m};
       line-height: 1.5rem;
     }
 
     &-s {
-      font-size: ${({ theme }) => theme.font.sm};
+      font-size: ${theme.font.sm};
       line-height: 1.375rem;
     }
 
     &-ss {
-      font-size: ${({ theme }) => theme.font.s};
+      font-size: ${theme.font.s};
     }
   }
 `;
@@ -179,4 +189,10 @@ export const ContainBodyInner = styled.div`
   @media screen and (max-width: ${theme.screenSize.moLarge}) {
     padding: 1.25rem 2rem 3.75rem;
   }
+`
+
+
+// ====  position  ====
+export const Relative = styled.div`
+  position: relative;
 `
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index b2f5fea45..1c50dd26d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -28,7 +28,7 @@ section {
 
 html,
 body {
-  /* min-width: $ {theme.screenSize.minWidth}; */
+  min-width: 18.75rem;
   font-size: 16px;
   line-height: 1;
   font-family: 'Pretendard-Regular',
diff --git a/styles/styled.d.ts b/styles/styled.d.ts
index 0969b0fba..f53a5647d 100644
--- a/styles/styled.d.ts
+++ b/styles/styled.d.ts
@@ -7,6 +7,7 @@ declare module 'styled-components' {
       ms: string,
     },
     font: {
+      ls: string,
       l: string,
       lm: string,
       m: string,
diff --git a/styles/theme.ts b/styles/theme.ts
index 95bc56f36..184eb0bbc 100644
--- a/styles/theme.ts
+++ b/styles/theme.ts
@@ -10,6 +10,7 @@ const theme : DefaultTheme  = {
   },
   /* 폰트 사이트(px)- 13,14,16,18,20 */
   font: {
+    ls: "1.5rem",
     l: "1.25rem",
     lm: "1.125rem",
     m: "1rem",