diff --git a/fe/.eslintrc.cjs b/fe/.eslintrc.cjs
index d6c9537..b11198f 100644
--- a/fe/.eslintrc.cjs
+++ b/fe/.eslintrc.cjs
@@ -1,18 +1,18 @@
 module.exports = {
-  root: true,
+  root: false,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};
diff --git a/fe/src/app/layout/MainLayout.tsx b/fe/src/app/layout/MainLayout.tsx
index eb40978..5617836 100644
--- a/fe/src/app/layout/MainLayout.tsx
+++ b/fe/src/app/layout/MainLayout.tsx
@@ -1,11 +1,17 @@
 import MainHeader from "@/shared/ui/header/MainHeader";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 
 export function MainLayout() {
+  const location = useLocation();
+  // Header의 높이만큼 Outlet을 내리기 위한 스타일
+  const outletStyle = location.pathname !== "/" ? "pt-[8dvh]" : "";
+
   return (
     <>
       <MainHeader />
-      <Outlet />
+      <div className={outletStyle}>
+        <Outlet />
+      </div>
     </>
   );
 }
diff --git a/fe/src/app/routes/index.tsx b/fe/src/app/routes/index.tsx
index d684663..0984e20 100644
--- a/fe/src/app/routes/index.tsx
+++ b/fe/src/app/routes/index.tsx
@@ -4,6 +4,9 @@ import ErrorLayout from "../layout/ErrorLayout";
 import { MainLayout } from "@/app/layout/MainLayout";
 import MainPage from "@/pages/main/index";
 const NotFoundPage = lazy(() => import("@/pages/not-found/index"));
+const ProjectDetailPage = lazy(
+  () => import("@/pages/project/projectName/index")
+);
 
 // const MainPage = lazy(() => import("../pages/main/MainPage"));
 
@@ -18,6 +21,14 @@ const router = createBrowserRouter([
         path: "main",
         element: <Suspense fallback={null}>{/* <MainPage /> */}</Suspense>,
       },
+      {
+        path: "project/:projectName",
+        element: (
+          <Suspense fallback={null}>
+            <ProjectDetailPage />
+          </Suspense>
+        ),
+      },
       {
         path: "*",
         element: <Suspense fallback={null}>{<NotFoundPage />}</Suspense>,
diff --git a/fe/src/entities/projects/ui/download-button/FileDownloadButton.tsx b/fe/src/entities/projects/ui/download-button/FileDownloadButton.tsx
index 599a69f..4537412 100644
--- a/fe/src/entities/projects/ui/download-button/FileDownloadButton.tsx
+++ b/fe/src/entities/projects/ui/download-button/FileDownloadButton.tsx
@@ -1,4 +1,5 @@
 import { useDownloadFile } from "@/entities/projects/libs/useDownloadFile";
+import { useDeviceSize } from "@/shared/libs";
 
 type Props = {
   fileUrl: string;
@@ -6,12 +7,14 @@ type Props = {
 
 export default function FileDownload({ fileUrl }: Props) {
   const { isDownloading, handleFileDownload } = useDownloadFile(fileUrl);
+  const device = useDeviceSize();
+  const textStyle = device === "desktop" ? "text-lg" : "text-sm";
 
   return (
     <button
       onClick={handleFileDownload}
       disabled={isDownloading}
-      className="font-semibold text-white px-2 py-1 rounded-md border-[1px] mt-4"
+      className={`font-semibold text-white px-2 py-1 rounded-md border-[1px] mb-4 ${textStyle}`}
     >
       <span>{isDownloading ? "다운로드 중" : "다운로드하기"}</span>
       {/* <form action={fileUrl} method="get" target="_blank">
diff --git a/fe/src/entities/projects/ui/project/Description.tsx b/fe/src/entities/projects/ui/project/Description.tsx
new file mode 100644
index 0000000..f7ab20b
--- /dev/null
+++ b/fe/src/entities/projects/ui/project/Description.tsx
@@ -0,0 +1,79 @@
+import { useDeviceSize } from "@/shared/libs";
+import { useInView } from "framer-motion";
+import { PropsWithChildren, useRef } from "react";
+import { DetailLink } from "@/entities/projects/ui/project/DetailLink";
+
+type DescriptionProps = {
+  projectName: string;
+  projectDescription: string;
+  techSkills: string[];
+  animeDirection: "LToR" | "RToL";
+};
+
+export const Description = ({
+  projectName,
+  projectDescription,
+  techSkills,
+  animeDirection,
+  children,
+}: PropsWithChildren<DescriptionProps>) => {
+  const device = useDeviceSize();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isInView = useInView(containerRef, {});
+
+  const headTextFontStyle = device === "desktop" ? "text-xl" : "text-lg";
+  const detailTextFontStyle = device === "desktop" ? "text-sm" : "text-xs";
+
+  const selectedTechSkills =
+    device === "desktop" ? techSkills : [...techSkills.slice(0, 3), "..."];
+
+  return (
+    <div
+      className="flex flex-col items-start justify-center basis-[50%] backdrop-blur-sm px-4 py-2"
+      ref={containerRef}
+    >
+      <h1 className="flex items-center justify-center w-full mb-4 text-lg">
+        <span className="pr-2 mr-4 border-r-2 max-w-[40%] font-bold">
+          프로젝트 명{" "}
+        </span>
+        <span className={`flex-1 text-2xl ${headTextFontStyle}`}>
+          {projectName}
+        </span>
+      </h1>
+      <p className="flex flex-col flex-1 mb-4">
+        <span className={`${headTextFontStyle} font-semibold mb-2`}>
+          프로젝트 소개
+        </span>
+        <span className={`ml-4 ${detailTextFontStyle}`}>
+          {projectDescription}
+        </span>
+      </p>
+      <div className="mb-4">
+        <p className="mb-2 font-semibold">사용한 기술 스택</p>
+        <ul className={`flex flex-col ml-4 gap-y-1 ${detailTextFontStyle}`}>
+          {selectedTechSkills.map((skill, idx) => (
+            <li
+              key={skill}
+              style={{
+                transform: isInView
+                  ? "none"
+                  : `translateX(${
+                      animeDirection === "LToR" ? "-300px" : "300px"
+                    })`,
+                opacity: isInView ? 1 : 0,
+                transition: `all 0.5s cubic-bezier(0.17, 0.55, 0.55, 1) `,
+                transitionDelay: `${idx * 0.25 + 1.2}s`,
+              }}
+            >
+              {skill}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div>{children}</div>
+      <p>
+        <DetailLink projectName={projectName} />
+      </p>
+    </div>
+  );
+};
diff --git a/fe/src/entities/projects/ui/project/DetailLink.tsx b/fe/src/entities/projects/ui/project/DetailLink.tsx
new file mode 100644
index 0000000..15a76e3
--- /dev/null
+++ b/fe/src/entities/projects/ui/project/DetailLink.tsx
@@ -0,0 +1,15 @@
+import { useDeviceSize } from "@/shared/libs";
+import { Link } from "react-router-dom";
+
+type Props = {
+  projectName: string;
+};
+export const DetailLink = ({ projectName }: Props) => {
+  const device = useDeviceSize();
+  if (device !== "desktop") {
+    const encodedProjectName = encodeURIComponent(projectName);
+    return <Link to={`/project/${encodedProjectName}`}>더 자세히 보기</Link>;
+  }
+
+  return <Link to="/project">더 자세히 보기</Link>;
+};
diff --git a/fe/src/entities/projects/ui/project/ImageContainer.tsx b/fe/src/entities/projects/ui/project/ImageContainer.tsx
new file mode 100644
index 0000000..9f5df80
--- /dev/null
+++ b/fe/src/entities/projects/ui/project/ImageContainer.tsx
@@ -0,0 +1,58 @@
+import { useDeviceSize } from "@/shared/libs";
+import "./ImageContainer.css";
+import { useEffect, useRef, useState } from "react";
+
+// https://blog.webdevsimplified.com/2023-05/lazy-load-images/
+export const ImageContainer = ({
+  image,
+  alt = "project",
+  smallImageUrl,
+}: {
+  image: string;
+  alt?: string;
+  smallImageUrl: string;
+}) => {
+  const device = useDeviceSize();
+  const imageStyle = device === "desktop" ? "w-full" : "w-[80vw] h-[34vh]";
+  const blurredImageDivRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [, setIsLargeImgLoaded] = useState(false);
+
+  useEffect(() => {
+    function loaded() {
+      if (blurredImageDivRef.current) {
+        setIsLargeImgLoaded(true);
+        blurredImageDivRef.current.classList.add("loaded");
+      }
+    }
+
+    const img = imageRef.current;
+    if (img?.complete) {
+      loaded();
+    } else {
+      img?.addEventListener("load", loaded);
+    }
+
+    return () => {
+      img?.removeEventListener("load", loaded);
+    };
+  }, []);
+
+  return (
+    <div className="basis-[50%] flex flex-col items-center justify-center">
+      <div
+        style={{ backgroundImage: `url(${smallImageUrl})` }}
+        className={`blurred-img`}
+        ref={blurredImageDivRef}
+      >
+        <img
+          ref={imageRef}
+          className={`${imageStyle}`}
+          src={image}
+          alt={alt}
+          loading="lazy"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/fe/src/entities/projects/ui/project/ProjectContainer.tsx b/fe/src/entities/projects/ui/project/ProjectContainer.tsx
index 8881b59..dbcaca8 100644
--- a/fe/src/entities/projects/ui/project/ProjectContainer.tsx
+++ b/fe/src/entities/projects/ui/project/ProjectContainer.tsx
@@ -1,13 +1,15 @@
 import { useDeviceSize } from "@/shared/libs";
-import { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { PropsWithChildren, useRef } from "react";
 import { motion, useInView } from "framer-motion";
-import { Link } from "react-router-dom";
-import "./ImageContainer.css";
+import { Description } from "@/entities/projects/ui/project/Description";
+
+import { getAlignStyle } from "@/entities/projects/utils/getAlignStyle";
+import { ImageContainer } from "@/entities/projects/ui/project/ImageContainer";
 
 type Props = {
   isAlignReverse?: boolean;
 };
-// https://blog.webdevsimplified.com/2023-05/lazy-load-images/
+
 export default function ProjectContainer({
   isAlignReverse,
   children,
@@ -28,7 +30,6 @@ export default function ProjectContainer({
         transform: isInView ? "none" : "translateX(-200px)",
         opacity: isInView ? 1 : 0,
         transition: "all 0.5s cubic-bezier(0.17, 0.55, 0.55, 1) 1s",
-        // transitionDelay: "0.5s",
       }}
     >
       <div className={`flex ${alignStyle} gap-x-4 w-[85vw]`}>{children}</div>
@@ -36,140 +37,5 @@ export default function ProjectContainer({
   );
 }
 
-function getAlignStyle(alignDirection: "row" | "col", alignReverse?: boolean) {
-  if (alignDirection === "col") {
-    return "flex-col";
-  }
-
-  if (alignReverse) {
-    return "flex-row-reverse";
-  }
-  return "flex-row";
-}
-
-// https://blog.webdevsimplified.com/2023-05/lazy-load-images/
-const ImageContainer = ({
-  image,
-  alt = "project",
-  smallImageUrl,
-}: {
-  image: string;
-  alt?: string;
-  smallImageUrl: string;
-}) => {
-  const device = useDeviceSize();
-  const imageStyle = device === "desktop" ? "w-full" : "w-[80vw] h-[34vh]";
-  const blurredImageDivRef = useRef<HTMLDivElement>(null);
-  const imageRef = useRef<HTMLImageElement>(null);
-  const [, setIsLargeImgLoaded] = useState(false);
-
-  useEffect(() => {
-    function loaded() {
-      if (blurredImageDivRef.current) {
-        setIsLargeImgLoaded(true);
-        blurredImageDivRef.current.classList.add("loaded");
-      }
-    }
-
-    const img = imageRef.current;
-    if (img?.complete) {
-      loaded();
-    } else {
-      img?.addEventListener("load", loaded);
-    }
-
-    return () => {
-      img?.removeEventListener("load", loaded);
-    };
-  }, []);
-
-  return (
-    <div className="basis-[50%] flex flex-col items-center justify-center">
-      <div
-        style={{ backgroundImage: `url(${smallImageUrl})` }}
-        className={`blurred-img`}
-        ref={blurredImageDivRef}
-      >
-        <img
-          ref={imageRef}
-          className={`${imageStyle}`}
-          src={image}
-          alt={alt}
-          loading="lazy"
-        />
-      </div>
-    </div>
-  );
-};
-
-type DescriptionProps = {
-  projectName: string;
-  projectDescription: string;
-  techSkills: string[];
-  animeDirection: "LToR" | "RToL";
-};
-const Description = ({
-  projectName,
-  projectDescription,
-  techSkills,
-  animeDirection,
-  children,
-}: PropsWithChildren<DescriptionProps>) => {
-  const device = useDeviceSize();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isInView = useInView(containerRef, {});
-
-  const headTextFontStyle = device === "desktop" ? "text-xl" : "text-lg";
-  const detailTextFontStyle = device === "desktop" ? "text-sm" : "text-xs";
-
-  const selectedTechSkills =
-    device === "desktop" ? techSkills : [...techSkills.slice(0, 3), "..."];
-
-  return (
-    <div
-      className="flex flex-col items-start justify-center basis-[50%] backdrop-blur-sm px-4 py-2"
-      ref={containerRef}
-    >
-      <h1 className="flex items-center justify-center w-full mb-4 text-lg">
-        <span className="pr-2 mr-4 border-r-2 max-w-[40%]">프로젝트 명 </span>
-        <span className={`flex-1 text-2xl ${headTextFontStyle}`}>
-          {projectName}
-        </span>
-      </h1>
-      <p className="flex flex-col flex-1 mb-4">
-        <span className="text-xl font-semibold">프로젝트 소개</span>
-        <span className={`ml-4 ${detailTextFontStyle}`}>
-          {projectDescription}
-        </span>
-      </p>
-      <div className="mb-4">
-        <p className="mb-2 font-semibold">사용한 기술 스택</p>
-        <ul className={`flex flex-col ml-4 gap-y-1 ${detailTextFontStyle}`}>
-          {selectedTechSkills.map((skill, idx) => (
-            <li
-              key={skill}
-              style={{
-                transform: isInView
-                  ? "none"
-                  : `translateX(${
-                      animeDirection === "LToR" ? "-300px" : "300px"
-                    })`,
-                opacity: isInView ? 1 : 0,
-                transition: `all 0.5s cubic-bezier(0.17, 0.55, 0.55, 1) `,
-                transitionDelay: `${idx * 0.25 + 1.2}s`,
-              }}
-            >
-              {skill}
-            </li>
-          ))}
-        </ul>
-      </div>
-      <p>
-        <Link to="/project">더 자세히 보기</Link>
-        {children}
-      </p>
-    </div>
-  );
-};
 ProjectContainer.ImageContainer = ImageContainer;
 ProjectContainer.Description = Description;
diff --git a/fe/src/entities/projects/utils/getAlignStyle.ts b/fe/src/entities/projects/utils/getAlignStyle.ts
new file mode 100644
index 0000000..f4ddb7e
--- /dev/null
+++ b/fe/src/entities/projects/utils/getAlignStyle.ts
@@ -0,0 +1,13 @@
+export function getAlignStyle(
+  alignDirection: "row" | "col",
+  alignReverse?: boolean
+) {
+  if (alignDirection === "col") {
+    return "flex-col";
+  }
+
+  if (alignReverse) {
+    return "flex-row-reverse";
+  }
+  return "flex-row";
+}
diff --git a/fe/src/index.css b/fe/src/index.css
index 357b8e1..6b87dc3 100644
--- a/fe/src/index.css
+++ b/fe/src/index.css
@@ -10,57 +10,3 @@
 body {
   margin: 0;
 }
-
-/* .blurred-img img {
-  opacity: 0;
-}
-
-.blurred-img {
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.blurred-img {
-  filter: blur(10px);
-}
-.blurred-img::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  animation: pulse 2.5s infinite;
-  background-color: white;
-}
-
-@layer components {
-  @keyframes pulse {
-    0% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 0.1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-  .blurred-img {
-    @apply relative bg-no-repeat bg-cover;
-  }
-
-  .blurred-img::before {
-    @apply content-[''] absolute inset-0 opacity-0 animation-pulse bg-text-color;
-  }
-
-  .blurred-img.loaded::before {
-    @apply animation-none content-none;
-  }
-
-  .blurred-img img {
-    @apply transition-opacity ease-in-out opacity-0 duration-250;
-  }
-
-  .blurred-img.loaded img {
-    @apply opacity-100;
-  }
-} */
diff --git a/fe/src/pages/project/projectName/index.ts b/fe/src/pages/project/projectName/index.ts
new file mode 100644
index 0000000..5e602c6
--- /dev/null
+++ b/fe/src/pages/project/projectName/index.ts
@@ -0,0 +1 @@
+export { default } from "./ui/page";
diff --git a/fe/src/pages/project/projectName/ui/page.tsx b/fe/src/pages/project/projectName/ui/page.tsx
new file mode 100644
index 0000000..f17ba79
--- /dev/null
+++ b/fe/src/pages/project/projectName/ui/page.tsx
@@ -0,0 +1,13 @@
+import { useParams } from "react-router-dom";
+
+export default function ProjectDetailPage() {
+  const { projectName } = useParams<{ projectName: string }>();
+
+  if (!projectName) {
+    return <>Invalid Project Name</>;
+  }
+
+  const decodedProjectName = decodeURIComponent(projectName!);
+
+  return <>Detail ProjectPage: {decodedProjectName}</>;
+}
diff --git a/fe/src/shared/constants/index.ts b/fe/src/shared/constants/index.ts
index e69de29..afec58f 100644
--- a/fe/src/shared/constants/index.ts
+++ b/fe/src/shared/constants/index.ts
@@ -0,0 +1 @@
+export * from "./projects/projectOutlineList";
diff --git a/fe/src/shared/constants/projects/projectDetailList.ts b/fe/src/shared/constants/projects/projectDetailList.ts
new file mode 100644
index 0000000..e69de29
diff --git a/fe/src/shared/constants/projects/projectOutlineList.ts b/fe/src/shared/constants/projects/projectOutlineList.ts
new file mode 100644
index 0000000..c77b0c0
--- /dev/null
+++ b/fe/src/shared/constants/projects/projectOutlineList.ts
@@ -0,0 +1,157 @@
+import studyLogProjectImg from "@/shared/assets/images/study-log.png";
+import studyLogProjectSmallImg from "@/shared/assets/images/study-log-small.png";
+import readyToWorkProjectImg from "@/shared/assets/images/ready_to_work.png";
+import readyToWorkProjectSmallImg from "@/shared/assets/images/ready_to_work-small.png";
+import cryptoProjectImg from "@/shared/assets/images/crypto.png";
+import cryptoProjectSmallImg from "@/shared/assets/images/crypto-small.png";
+import eyeveProjectImg from "@/shared/assets/images/eyeve.png";
+import eyeveProjectSmallImg from "@/shared/assets/images/eyeve-small.png";
+import vscodeExtensionProjectImg from "@/shared/assets/images/vscode-extension.png";
+import vscodeExtensionProjectSmallImg from "@/shared/assets/images/vscode-extension-small.png";
+import portfolioProjectImg from "@/shared/assets/images/portfolio.png";
+import portfolioProjectSmallImg from "@/shared/assets/images/portfolio-small.png";
+import type { Project, ProjectStyle } from "@/shared/model";
+
+const readyToWork: Project & ProjectStyle = {
+  image: {
+    default: readyToWorkProjectImg,
+    small: readyToWorkProjectSmallImg,
+  },
+  name: "Ready To Work",
+  description:
+    "엔카의 김상범 대표님과 광운대학교의 IDEA Lab에서 진행한 프로젝트입니다. HR 도메인의 B2B 서비스이며, 문제 해결 방식을 통해 인재 채용을 쉽게 할 수 있도록 도움을 주고자 서비스를 기획하였습니다.",
+  techSkill: [
+    "React",
+    "TypeScript",
+    "Tailwind CSS",
+    "Ant Design",
+    "Zustand",
+    "Tanstack Query",
+    "D3.js",
+    "...",
+  ],
+  isAlignReverse: false,
+  animeDirection: "LToR",
+};
+
+const eyeve: Project & ProjectStyle = {
+  image: {
+    default: eyeveProjectImg,
+    small: eyeveProjectSmallImg,
+  },
+  name: "Eyeve",
+  description:
+    "광운대학교 IDEA Lab에서 카메라를 통한 시선 추적을 통해 학생들의 집중도를 분석하는 연구용 서비스를 개발하였습니다. 2024년 춘계 산업공학회의 포스터 세션에 등록되기도 하였습니다.",
+  techSkill: [
+    "React",
+    "TypeScript",
+    "Tailwind CSS",
+    "WebSocket",
+    "WebRTC",
+    "Zustand",
+    "...",
+  ],
+  isAlignReverse: true,
+  animeDirection: "RToL",
+  additionalInfo: {
+    type: "DownloadFile",
+    content: `${import.meta.env.VITE_API_SERVER}/files/eyeve.pdf`,
+  },
+};
+
+const cryptoChart: Project & ProjectStyle = {
+  image: {
+    default: cryptoProjectImg,
+    small: cryptoProjectSmallImg,
+  },
+  name: "암호화폐 차트 그래프",
+  description:
+    "항해 플러스 프론트엔드 1기에서 진행한 프로젝트입니다. 암호화폐 차트 그래프를 보여주는 서비스를 개발하였습니다.",
+  techSkill: [
+    "React",
+    "TypeScript",
+    "Tailwind CSS",
+    "lightweight-charts",
+    "date-fns",
+    "Tanstack Query",
+    "socket.io",
+    "Jira",
+    "...",
+  ],
+  isAlignReverse: false,
+  animeDirection: "RToL",
+};
+
+const studyLog: Project & ProjectStyle = {
+  image: {
+    default: studyLogProjectImg,
+    small: studyLogProjectSmallImg,
+  },
+  name: "웹 기반 스터디 인증 SNS",
+  description:
+    "웹 서비스 설계 및 실습 수업에서 진행한 SNS 플랫폼 서비스입니다. 스터디 인증을 통해 사용자들이 서로 인증을 공유하고 소통할 수 있는 서비스를 개발하였습니다.",
+  techSkill: [
+    "React",
+    "TypeScript",
+    "Tailwind CSS",
+    "date-fns",
+    "Tanstack Query",
+    "...",
+  ],
+  isAlignReverse: true,
+  animeDirection: "LToR",
+};
+
+const vscodeExtension: Project & ProjectStyle = {
+  image: {
+    default: vscodeExtensionProjectImg,
+    small: vscodeExtensionProjectSmallImg,
+  },
+  name: "StudyLog VSCode Extension",
+  description:
+    "개발자의 개발 시간을 측정해주는 VSCode Extension을 개발하였습니다.",
+  techSkill: [
+    "Next.js",
+    "TypeScript",
+    "Tailwind CSS",
+    "date-fns",
+    "Tanstack Query",
+    "Nest.js",
+    "MongoDB",
+    "Docker",
+    "AWS",
+    "...",
+  ],
+  isAlignReverse: false,
+  animeDirection: "RToL",
+};
+
+const portfolio: Project & ProjectStyle = {
+  image: {
+    default: portfolioProjectImg,
+    small: portfolioProjectSmallImg,
+  },
+  name: "포트폴리오 사이트",
+  description:
+    "제가 개발한 프로젝트들을 소개하는 포트폴리오 사이트입니다. SEO 최적화를 위해 많은 노력을 기울였습니다.",
+  techSkill: [
+    "React",
+    "Node.js",
+    "TailwindCSS",
+    "three.js",
+    "WebGL",
+    "MongoDB",
+    "...",
+  ],
+  isAlignReverse: true,
+  animeDirection: "LToR",
+};
+
+export const projectOutlineList: (Project & ProjectStyle)[] = [
+  readyToWork,
+  eyeve,
+  cryptoChart,
+  studyLog,
+  vscodeExtension,
+  portfolio,
+];
diff --git a/fe/src/shared/constants/webGl/StarScene.ts b/fe/src/shared/constants/webGl/StarScene.ts
index 4c2ac55..072bcb7 100644
--- a/fe/src/shared/constants/webGl/StarScene.ts
+++ b/fe/src/shared/constants/webGl/StarScene.ts
@@ -181,6 +181,7 @@ export class StarScene {
     // this.myStars.forEach((star) => {
     //   star.animate();
     // });
+
     this.raycaster.setFromCamera(this.pointer, this.camera!);
     const intersectItem = this.raycaster
       .intersectObjects(this.scene.children)
@@ -213,16 +214,6 @@ export class StarScene {
         selectStar.star.geometry.attributes.color.needsUpdate = true;
       }
     }
-    //
-
-    // for (const object of intersects) {
-    //   const colors = (object.object as Points).geometry.attributes.color
-    //     .array as Float32Array;
-    //   colors[0] = 1;
-    //   colors[1] = 1;
-    //   colors[2] = 0;
-    //   (object.object as Points).geometry.attributes.color.needsUpdate = true;
-    // }
 
     this.renderer.render(this.scene, this.camera!);
   }
diff --git a/fe/src/shared/model/index.ts b/fe/src/shared/model/index.ts
new file mode 100644
index 0000000..6ec1d89
--- /dev/null
+++ b/fe/src/shared/model/index.ts
@@ -0,0 +1 @@
+export * from "./project.entity";
diff --git a/fe/src/shared/model/project.entity.ts b/fe/src/shared/model/project.entity.ts
new file mode 100644
index 0000000..81cc61b
--- /dev/null
+++ b/fe/src/shared/model/project.entity.ts
@@ -0,0 +1,19 @@
+export type AdditionalInfo = {
+  type: "DownloadFile";
+  content: string;
+} & { type: string; content: unknown };
+
+export interface Project {
+  image: {
+    default: string;
+    small: string;
+  };
+  name: string;
+  description: string;
+  techSkill: string[];
+  additionalInfo?: AdditionalInfo;
+}
+export interface ProjectStyle {
+  isAlignReverse: boolean;
+  animeDirection: "LToR" | "RToL";
+}
diff --git a/fe/src/shared/ui/header/MainHeader.tsx b/fe/src/shared/ui/header/MainHeader.tsx
index d8d9ba7..19bb776 100644
--- a/fe/src/shared/ui/header/MainHeader.tsx
+++ b/fe/src/shared/ui/header/MainHeader.tsx
@@ -1,6 +1,6 @@
 export default function MainHeader() {
   return (
-    <header className="fixed top-0 w-full h-[8vh] text-white z-40 flex backdrop-blur-sm">
+    <header className="fixed top-0 w-full h-[8dvh] text-white z-40 flex backdrop-blur-sm">
       <div className="flex items-center justify-between w-full h-full px-4 ">
         <h1 className="text-2xl font-bold">방구석 코딩쟁이의 포트폴리오</h1>
         <nav className="flex items-center justify-between"></nav>
diff --git a/fe/src/widgets/main/projectsShowcase/ui/ProjectsShowCase/ProjectsShowCase.tsx b/fe/src/widgets/main/projectsShowcase/ui/ProjectsShowCase/ProjectsShowCase.tsx
index f49fef4..37f589b 100644
--- a/fe/src/widgets/main/projectsShowcase/ui/ProjectsShowCase/ProjectsShowCase.tsx
+++ b/fe/src/widgets/main/projectsShowcase/ui/ProjectsShowCase/ProjectsShowCase.tsx
@@ -9,20 +9,18 @@ import ContentContainer from "@/shared/ui/content-container/ContentContainer";
 import Introduction from "@/entities/introduction/index";
 import { ProjectContainer as Project } from "@/entities/projects/index";
 
-// IMG Resources
-import studyLogProjectImg from "@/shared/assets/images/study-log.png";
-import studyLogProjectSmallImg from "@/shared/assets/images/study-log-small.png";
-import readyToWorkProjectImg from "@/shared/assets/images/ready_to_work.png";
-import readyToWorkProjectSmallImg from "@/shared/assets/images/ready_to_work-small.png";
-import cryptoProjectImg from "@/shared/assets/images/crypto.png";
-import cryptoProjectSmallImg from "@/shared/assets/images/crypto-small.png";
-import eyeveProjectImg from "@/shared/assets/images/eyeve.png";
-import eyeveProjectSmallImg from "@/shared/assets/images/eyeve-small.png";
-import vscodeExtensionProjectImg from "@/shared/assets/images/vscode-extension.png";
-import vscodeExtensionProjectSmallImg from "@/shared/assets/images/vscode-extension-small.png";
-import portfolioProjectImg from "@/shared/assets/images/portfolio.png";
-import portfolioProjectSmallImg from "@/shared/assets/images/portfolio-small.png";
 import { withLoading } from "@/widgets/main/projectsShowcase/ui/withLoading/withLoading";
+import { projectOutlineList } from "@/shared/constants/index";
+import { AdditionalInfo } from "@/shared/model";
+
+function renderAdditionalInfo(additionalInfo: AdditionalInfo) {
+  switch (additionalInfo.type) {
+    case "DownloadFile":
+      return <FileDownloadButton fileUrl={additionalInfo.content} />;
+    default:
+      return <></>;
+  }
+}
 
 function ProjectsShowCase() {
   const ref = useRef<HTMLDivElement>(null);
@@ -55,176 +53,55 @@ function ProjectsShowCase() {
             <div className="h-[100dvh]" ref={containerRef}></div>
           </div>
           {/* 홈 */}
-          <ContentContainer height="137.5vh">
+          <ContentContainer height="137.5dvh">
             <Introduction />
           </ContentContainer>
           {/* 경력 */}
           <ContentContainer>
             <MyCareer />
           </ContentContainer>
-          {/* Ready To Work Project */}
-          <ContentContainer>
-            <Project isAlignReverse={false}>
-              <Project.ImageContainer
-                image={readyToWorkProjectImg}
-                smallImageUrl={readyToWorkProjectSmallImg}
-              />
-              <Project.Description
-                projectName="Ready To Work"
-                projectDescription="엔카의 김상범 대표님과 광운대학교의 IDEA Lab에서 진행한 프로젝트입니다. HR 도메인의 B2B 서비스이며, 문제 해결 방식을 통해 인재 채용을 쉽게 할 수 있도록 도움을 주고자 서비스를 기획하였습니다."
-                techSkills={[
-                  "React",
-                  "TypeScript",
-                  "Tailwind CSS",
-                  "Ant Design",
-                  "Zustand",
-                  "Tanstack Query",
-                  "D3.js",
-                  "...",
-                ]}
-                animeDirection="LToR"
-              />
-            </Project>
-          </ContentContainer>
-
-          <ContentContainer>
-            <Project isAlignReverse={true}>
-              <Project.ImageContainer
-                image={eyeveProjectImg}
-                smallImageUrl={eyeveProjectSmallImg}
-              />
-              <Project.Description
-                projectName="Eyeve"
-                projectDescription="광운대학교 IDEA Lab에서 카메라를 통한 시선 추적을 통해 학생들의 집중도를 분석하는 연구용 서비스를 개발하였습니다. 2024년 춘계 산업공학회의 포스터 세션에 등록되기도 하였습니다."
-                techSkills={[
-                  "React",
-                  "TypeScript",
-                  "Tailwind CSS",
-                  "WebSocket",
-                  "WebRTC",
-                  "Zustand",
-                  "...",
-                ]}
-                animeDirection="RToL"
-              >
-                <FileDownloadButton
-                  fileUrl={`${import.meta.env.VITE_API_SERVER}/files/eyeve.pdf`}
+          {/* 프로젝트 들... */}
+          {projectOutlineList.map((project) => (
+            <ContentContainer
+              key={project.name}
+              ExtraContent={
+                project.additionalInfo &&
+                renderAdditionalInfo(project.additionalInfo)
+              }
+            >
+              <Project isAlignReverse={project.isAlignReverse}>
+                <Project.ImageContainer
+                  image={project.image.default}
+                  smallImageUrl={project.image.small}
                 />
-              </Project.Description>
-            </Project>
-          </ContentContainer>
-          {/* 암호화폐 차트 */}
-          <ContentContainer>
-            <Project isAlignReverse={false}>
-              <Project.ImageContainer
-                image={cryptoProjectImg}
-                smallImageUrl={cryptoProjectSmallImg}
-              />
-              <Project.Description
-                projectName="암호화폐 차트 그래프"
-                projectDescription="항해 플러스 프론트엔드 1기에서 진행한 프로젝트입니다. 암호화폐 차트 그래프를 보여주는 서비스를 개발하였습니다."
-                techSkills={[
-                  "React",
-                  "TypeScript",
-                  "Tailwind CSS",
-                  "lightweight-charts",
-                  "date-fns",
-                  "Tanstack Query",
-                  "socket.io",
-                  "Jira",
-                  "...",
-                ]}
-                animeDirection="RToL"
-              ></Project.Description>
-            </Project>
-          </ContentContainer>
-          {/* 웹 기반 스터디 인증 SNS */}
-          <ContentContainer>
-            <Project isAlignReverse={true}>
-              <Project.ImageContainer
-                image={studyLogProjectImg}
-                smallImageUrl={studyLogProjectSmallImg}
-              />
-              <Project.Description
-                projectName="웹 기반 스터디 인증 SNS"
-                projectDescription="웹 서비스 설계 및 실습 수업에서 진행한 SNS 플랫폼 서비스입니다. 스터디 인증을 통해 사용자들이 서로 인증을 공유하고 소통할 수 있는 서비스를 개발하였습니다."
-                techSkills={[
-                  "React",
-                  "TypeScript",
-                  "Tailwind CSS",
-                  "date-fns",
-                  "Tanstack Query",
-                  "...",
-                ]}
-                animeDirection="RToL"
-              ></Project.Description>
-            </Project>
-          </ContentContainer>
-          {/* VSCode Extension */}
-          <ContentContainer>
-            <Project isAlignReverse={false}>
-              <Project.ImageContainer
-                image={vscodeExtensionProjectImg}
-                smallImageUrl={vscodeExtensionProjectSmallImg}
-              />
-              <Project.Description
-                projectName="StudyLog VSCode Extension"
-                projectDescription="개발자의 개발 시간을 측정해주는 VSCode Extension을 개발하였습니다."
-                techSkills={[
-                  "Next.js",
-                  "TypeScript",
-                  "Tailwind CSS",
-                  "date-fns",
-                  "Tanstack Query",
-                  "Nest.js",
-                  "MongoDB",
-                  "Docker",
-                  "AWS",
-                  "...",
-                ]}
-                animeDirection="RToL"
-              ></Project.Description>
-            </Project>
-          </ContentContainer>
-          <ContentContainer>
-            <Project isAlignReverse={false}>
-              <Project.ImageContainer
-                image={portfolioProjectImg}
-                smallImageUrl={portfolioProjectSmallImg}
-              />
-              <Project.Description
-                projectName="포트폴리오 사이트"
-                projectDescription="제가 개발한 프로젝트들을 소개하는 포트폴리오 사이트입니다. SEO 최적화를 위해 많은 노력을 기울였습니다."
-                techSkills={[
-                  "React",
-                  "Node.js",
-                  "TailwindCSS",
-                  "three.js",
-                  "WebGL",
-                  "MongoDB",
-                ]}
-                animeDirection="RToL"
-              ></Project.Description>
-            </Project>
-          </ContentContainer>
+                <Project.Description
+                  projectName={project.name}
+                  projectDescription={project.description}
+                  techSkills={project.techSkill}
+                  animeDirection={project.animeDirection}
+                ></Project.Description>
+              </Project>
+            </ContentContainer>
+          ))}
+
           <ContentContainer>
-            <h1 className="text-4xl font-bold text-white">My 8</h1>
-            <p className="text-lg">What's next?</p>
+            <h1 className="text-4xl font-bold text-white">What's next?</h1>
+            <p className="text-lg">To be continued...</p>
           </ContentContainer>
           <ContentContainer>
-            <h1 className="text-4xl font-bold text-white">My 9</h1>
-            <p className="text-lg">What's next?</p>
+            <h1 className="text-4xl font-bold text-white">What's next?</h1>
+            <p className="text-lg">To be continued...</p>
           </ContentContainer>
           <ContentContainer>
-            <h1 className="text-4xl font-bold text-white">My 10</h1>
-            <p className="text-lg">What's next?</p>
+            <h1 className="text-4xl font-bold text-white">What's next?</h1>
+            <p className="text-lg">To be continued...</p>
           </ContentContainer>
           <ContentContainer>
-            <h1 className="text-4xl font-bold text-white">My 11</h1>
-            <p className="text-lg">What's next?</p>
+            <h1 className="text-4xl font-bold text-white">What's next?</h1>
+            <p className="text-lg">To be continued...</p>
           </ContentContainer>
           {/* 137.5vh */}
-          <ContentContainer height="137.5vh" scrollSnapAlign="end">
+          <ContentContainer height="137.5dvh" scrollSnapAlign="end">
             <div className="flex h-[100dvh] flex-col justify-center items-center">
               <Contact />
             </div>
diff --git a/fe/src/widgets/main/projectsShowcase/ui/withLoading/withLoading.tsx b/fe/src/widgets/main/projectsShowcase/ui/withLoading/withLoading.tsx
index ce4a464..f989e26 100644
--- a/fe/src/widgets/main/projectsShowcase/ui/withLoading/withLoading.tsx
+++ b/fe/src/widgets/main/projectsShowcase/ui/withLoading/withLoading.tsx
@@ -11,6 +11,7 @@ export function withLoading<P extends object>(
       setIsLoading(false);
     };
 
+    // TODO: Loading은 전체 한번만 진행되도록..!
     return (
       <>
         {!isLoading && <WrappedComponent {...props} />}