diff --git a/src/assets/css/app.scss b/src/assets/css/app.scss
index 2bc4d07..8138b04 100644
--- a/src/assets/css/app.scss
+++ b/src/assets/css/app.scss
@@ -6,6 +6,7 @@
 @import "pages/home";
 @import "pages/awards";
 @import "pages/introduce";
+@import "pages/projects";
 
 @import "components/navBar";
 @import "components/footer";
diff --git a/src/assets/css/pages/projects.scss b/src/assets/css/pages/projects.scss
new file mode 100644
index 0000000..4381e10
--- /dev/null
+++ b/src/assets/css/pages/projects.scss
@@ -0,0 +1,88 @@
+.projects-page {
+  .dash-title {
+    .title-font {
+      font-size: 6.25rem;
+    }
+  }
+
+  .project-component {
+    display: flex;
+    flex-direction: column;
+    .project-content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 5rem;
+      img {
+        width: 62.5rem;
+      }
+
+      .project-desc {
+        //margin: 2.5rem 0 0 5rem;
+        width: 70rem;
+
+        .title {
+          font-family: "Noto Sans KR";
+          font-size: 3.75rem;
+          color: $colorBrown100;
+          //margin-top: 3.75rem;
+        }
+
+        .subtitle {
+          font-family: "Noto Sans KR";
+          color: $colorBrown100;
+          font-size: 2.5rem;
+          margin-top: 0.625rem;
+        }
+
+        .text {
+          font-family: "Noto Sans KR";
+          color: $colorBrown100;
+          font-size: 1.875rem;
+          margin-top: 0.625rem;
+        }
+
+        .sub-text {
+          font-family: "Noto Sans KR";
+          color: $colorBrown100;
+          font-size: 1.625rem;
+          margin-top: 0.625rem;
+        }
+      }
+    }
+    .project-btn-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 1rem;
+      margin: 5rem 8rem 0 0;
+    }
+  }
+}
+
+.video-modal {
+  position: fixed;
+  width: 100rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 100;
+  .close-btn {
+    position: fixed;
+    z-index: 5;
+    right: 3rem;
+    top: 3rem;
+    cursor: pointer;
+    font-size: 3rem;
+    color: $colorBlack;
+    background-color: $colorWhite;
+    width: 3rem;
+    height: 3rem;
+    text-align: center;
+    border-radius: 1rem;
+  }
+  video {
+    width: 100rem;
+    border-radius: 2rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/ProjectComponent.tsx b/src/components/ProjectComponent.tsx
new file mode 100644
index 0000000..8f3b9f7
--- /dev/null
+++ b/src/components/ProjectComponent.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import { NavLink } from "react-router-dom";
+import { STACK_NAME } from "src/types/enum";
+import github from "src/assets/icons/github.webp";
+import VideoModal from "src/components/VideoModal";
+import { useRecoilState } from "recoil";
+import { ModalState, recoilModalState } from "src/states/recoilModalState";
+
+const ProjectComponent = (props: any) => {
+  const [isVideoModalOpen, setIsVideoModalOpen] =
+    useRecoilState(recoilModalState);
+  const defaultRecoilModalState: ModalState = { ...isVideoModalOpen };
+
+  const changeVideoModalState = () => {
+    defaultRecoilModalState.value = !isVideoModalOpen.value;
+    defaultRecoilModalState.src = props.data.videoLink;
+    setIsVideoModalOpen(defaultRecoilModalState);
+  };
+  return (
+    <div className="project-component">
+      <div className="project-content">
+        <img alt="project-img" src={props.data.img}></img>
+        <div className="project-desc">
+          <div className="title">
+            <strong>{props.data.title}</strong>
+          </div>
+          <div className="subtitle">{props.data.subtitle}</div>
+          {props.data.user ? (
+            <div className="text">{props.data.user}</div>
+          ) : null}
+          <div className="text">
+            {props.data.strongStacks &&
+              props.data.strongStacks.map((el: STACK_NAME) => (
+                <strong>{el}, </strong>
+              ))}
+            {props.data.stacks &&
+              props.data.stacks.map((e: STACK_NAME) => {
+                return props.data.stacks[props.data.stacks.length - 1] === e ? (
+                  <>{e}</>
+                ) : (
+                  <>{e}, </>
+                );
+              })}
+          </div>
+          <br />
+          <div className="text">{props.data.desc[0]}</div>
+          <div className="text">{props.data.desc[1]}</div>
+          <br />
+          <div className="text">{props.data.desc[2]}</div>
+          <div className="sub-text">{props.data.desc[3]}</div>
+          <div className="sub-text">{props.data.desc[4]}</div>
+        </div>
+      </div>
+      <div className="project-btn-container">
+        {/* <div style={{display: 'flex', justifyContent: 'end', marginTop: '5px', marginRight: '50px'}}>
+                      <VideoButton onClick={onVideoModalOpen1} style={{display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer'}}>VIDEO 보기 → </VideoButton>
+                  </div> */}
+        {/*{isVideoModalOpen1 ? (*/}
+        {/*  <VideoModal*/}
+        {/*    setIsVideoModalOpen={setIsVideoModalOpen1}*/}
+        {/*    video={focuz_video}*/}
+        {/*    pageNumber={1}*/}
+        {/*  />*/}
+        {/*) : null}*/}
+        <div>
+          {props.data.isHaveWeb ? (
+            <NavLink className="project-btn" to={props.data.webLink}>
+              Web Page →
+            </NavLink>
+          ) : null}
+        </div>
+
+        {props.data.isHaveVideo ? (
+          <button className="project-btn" onClick={changeVideoModalState}>
+            VIDEO 보기 →{" "}
+          </button>
+        ) : null}
+
+        {/*{isVideoModalOpen.value ? (*/}
+        {/*  <VideoModal video={props.data.videoLink} />*/}
+        {/*) : null}*/}
+        {props.data.isHaveGithub ? (
+          <NavLink className="project-btn" to={props.data.githubLink}>
+            <img alt="github" src={github}></img>
+            GITHUB
+          </NavLink>
+        ) : null}
+      </div>
+      {/*<div style={{ display: "flex", justifyContent: "center" }}>*/}
+      {/*  <video*/}
+      {/*    width="600"*/}
+      {/*    controls={true}*/}
+      {/*    ref={videoRef}*/}
+      {/*    onCanPlay={() => setPlayBackRate()}*/}
+      {/*  >*/}
+      {/*    <source src={props.data.videoLink} type="video/mp4" />*/}
+      {/*  </video>*/}
+      {/*</div>*/}
+    </div>
+  );
+};
+
+export default ProjectComponent;
diff --git a/src/components/VideoModal.js b/src/components/VideoModal.js
deleted file mode 100644
index 6257d5e..0000000
--- a/src/components/VideoModal.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { useRef } from 'react';
-
-const VideoModal = ({setIsVideoModalOpen, video, pageNumber}) => {
-    const closeModal = () => {
-        setIsVideoModalOpen(false);
-    };
-    const videoRef= useRef();
-    const setPlayBackRate = () => {
-      videoRef.current.playbackRate = 1.6;
-    };
-
-    return (
-        <div style={{
-            position: 'absolute',
-            top: '0',
-            left: (document.body.clientWidth)*{pageNumber},
-            transform: 'translate(40%, 1%)',
-            zIndex: 99999
-        }}>
-            <CloseButton onClick={closeModal} >X</CloseButton>
-            <video width='800' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()} >
-                <source src={video} type="video/mp4"/>
-            </video>
-        </div>
-    )
-}
-
-export default VideoModal;
-
-const CloseButton = styled.button`
-    position: fixed;
-    z-index: 999999;
-    right: 20px;
-    top: 10px;
-    cursor: pointer;
-    
-    font-family: applesdgothic;
-    font-size: 30px;
-    
-`
\ No newline at end of file
diff --git a/src/components/VideoModal.tsx b/src/components/VideoModal.tsx
new file mode 100644
index 0000000..e25df16
--- /dev/null
+++ b/src/components/VideoModal.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { useRef } from "react";
+import { useRecoilState } from "recoil";
+import { ModalState, recoilModalState } from "src/states/recoilModalState";
+
+const VideoModal = ({ video }: any) => {
+  const [videoModalState, setVideoModalState] =
+    useRecoilState(recoilModalState);
+  const defaultRecoilModalState: ModalState = { ...videoModalState };
+
+  const closeModal = () => {
+    defaultRecoilModalState.value = !videoModalState;
+    defaultRecoilModalState.src = null;
+    setVideoModalState(defaultRecoilModalState);
+  };
+  // const videoRef = useRef();
+  const setPlayBackRate = () => {
+    document.getElementsByTagName("video")[0].playbackRate = 1.6;
+  };
+
+  return (
+    <div className="video-modal">
+      <div className="close-btn" onClick={closeModal}>
+        X
+      </div>
+      <video
+        id="video"
+        controls={true}
+        // ref={videoRef}
+        onCanPlay={() => setPlayBackRate()}
+      >
+        <source src={video} type="video/mp4" />
+      </video>
+    </div>
+  );
+};
+
+export default VideoModal;
+
+// const CloseButton = styled.button`
+//     position: fixed;
+//     z-index: 999999;
+//     right: 20px;
+//     top: 10px;
+//     cursor: pointer;
+//
+//     font-family: applesdgothic;
+//     font-size: 30px;
+//
+// `
diff --git a/src/lang/locale/ko.json b/src/lang/locale/ko.json
index e6dfc15..46198de 100644
--- a/src/lang/locale/ko.json
+++ b/src/lang/locale/ko.json
@@ -52,5 +52,103 @@
       "univ": "경희대학교 컴퓨터공학과",
       "apple-academy": "애플 디벨로퍼 아카데미"
     }
+  },
+  "awards": {
+    "money": "성적우수 장학, 밝은사회 장학, SW중심대학 장학 ... 외 다수 장학 수혜",
+    "sanjose": "2023 San Jose State University Enterpreneurship Award 최우수",
+    "khu": "2022 경희대학교 소프트웨어융합대학 동아리대항전 최우수",
+    "edu": "2021 대학생 교육기부 공모전 장작 더하기 장려상"
+  },
+  "projects": {
+    "esim": {
+      "title": "World-ESIM",
+      "subtitle": "- ESIM 판매 사이트",
+      "user": "(일본, 한국, 미국에 실제 서비스 제공 중)",
+      "desc-1": "일본 공항과 일본 상점 키오스크 및 각종 앱에",
+      "desc-2": "물리적 상품부터 API 상품까지 판매하는 웹 사이트를 개발 및 배포하였습니다.",
+      "desc-3": "프론트엔드 개발 3명, 백엔드 개발 3명, 디자인팀/기획팀으로 진행하였습니다.",
+      "desc-4": "그 중 저는 임시 PL(프로젝트 리더)로, 프론트엔드를 맡아",
+      "desc-5": "컴포넌트 다이어그램, 유스케이스 다이어그램, 초기 컴포넌트(countBox, button, dropDown, 모든 modal 등), 회원가입/로그인 페이지, 마이 페이지, 상품 상세 페이지, 결제 페이지, 다국어 지원, api 연동, localStorage 및 header 등 웹 관련 세팅, 모바일 반응형 작업, getQueryString 및 modalManager 등 자주 사용되는 함수/컴포넌트 분리 및 통합, 정규식 정의, 코드 리팩토링 등을 하였습니다."
+    },
+    "esim-admin": {
+      "title": "World-ESIM 관리자 화면",
+      "subtitle": "- ESIM 판매 관리자용 사이트",
+      "user": "(일본, 한국, 미국에 실제 서비스 제공 중)",
+      "desc-1": "ESIM을 판매하는 관리자 전용 사이트로,",
+      "desc-2": "물리적 상품부터 API용 상품까지 모두 등록, 수정, 판매, 정산 할 수 있는 웹 사이트를 개발 및 배포하였습니다.",
+      "desc-3": "프론트엔드 개발 3명, 백엔드 개발 3명, 디자인팀/기획팀으로 진행하였습니다.",
+      "desc-4": "그 중 저는 임시 PL(프로젝트 리더)로, 프론트엔드를 맡아",
+      "desc-5": "컴포넌트 다이어그램, 유스케이스 다이어그램, 초기 컴포넌트(table, imageUploader, excelUploader, sideMenu 등), 로그인 페이지, 회원(관리자)수정 페이지, 상품 등록 페이지, api 연동, localStorage 및 header 등 웹 관련 세팅, getQueryString 및 modalManager 등 자주 사용되는 함수/컴포넌트 분리 및 통합, 코드 리팩토링 등을 하였습니다."
+    },
+    "nfm-trd": {
+      "title": "기억 박물관 - 내 추억에 놀러와",
+      "subtitle": "- 추억 기록 모바일 웹콘텐츠",
+      "user": "(실 사용자 2만명, 2022 추석 가오픈/2023 설~ 정식 운영)",
+      "desc-1": "국립 민속 박물관 제 3관에서 진행한 웹 컨텐츠로,",
+      "desc-2": "중장년층을 타겟으로 추억을 기록하는 웹 사이트를 개발 및 배포하였습니다.",
+      "desc-3": "개발자 3명, 디자이너 2명, 기획자 1명, 개발 멘토 1명으로 진행하였습니다.",
+      "desc-4": "그 중 저는 PL(프로젝트 리더)로, 프론트엔드, 백엔드, DB를 맡아",
+      "desc-5": "초기 프론트엔드 개발 세팅, 리다이렉팅 세팅, 정규식 정의, 닉네임/연령대 입력 페이지 프론트엔드, 유물 선택 페이지 프론트엔드, 기록 페이지 프론트엔드, 결과 페이지 프론트엔드/백엔드, 공유 페이지 프론트엔드/백엔드, 배경음/클릭음 함수화 및 적용, 눌러서 음소거 해제 기능 (각 페이지마다 필요에 따라 적용), uuid로 개인별 URL 공유 기능, 주인/방문자 구분 후 차별화 등을 개발하였습니다."
+    },
+    "focuz": {
+      "title": "FOCUZ",
+      "subtitle": "- 얼굴인식 캠스터디 웹사이트",
+      "user": "(경희대 소프트웨어융합대학 동아리대항전 1위)",
+      "desc-1": "기존 화상 회의 프로그램 및 공부 프로그램과 차별화 하여",
+      "desc-2": "얼굴 인식된 시간을 측정하여 공부 집중도를 분석합니다.",
+      "desc-3": "프론트엔드 2명, 백엔드 2명, 멘토 2명으로 진행하였습니다.",
+      "desc-4": "그 중 저는 프론트엔드에서",
+      "desc-5": "페이지 라우팅, 회원가입/로그인-kakao auth, 공부하기 페이지-tensorflow 라이브러리 활용, 친구/그룹 추가/목록 페이지 - 페이지, 컴포넌트 개발, 스터디 그룹 생성 페이지, 분석 페이지(캘린더 날짜 설정, 시간 그래프화)를 구현하였습니다."
+    },
+    "bburing": {
+      "title":"BBuRing_log",
+      "subtitle": "- 전국 뿌링클 맛집 기록 웹사이트",
+      "user":"",
+      "desc-1":"전국 뿌링클 맛집 탐방을 위해",
+      "desc-2":"각 매장 별로 리뷰를 기록해둘 수 있습니다.",
+      "desc-3":"프론트엔드 1명, 백엔드 1명으로 진행하였습니다.",
+      "desc-4":"그 중 저는 프론트엔드에서",
+      "desc-5":"페이지 라우팅, 홈 사이트 안내-애니메이션, kakao map api-마커 등록, 지점 검색, 포스팅 확인-지도 클릭 시 리뷰/마우스 호버 글 미리보기, 포스팅 작성을 구현하였습니다."
+    },
+    "eclipse": {
+      "title":"Eclipse",
+      "subtitle":"- 대학생의 진로 걱정 해결을 위한 웹사이트",
+      "user":"",
+      "desc-1":"코로나19 이후 선/후배 관계의 단절로",
+      "desc-2":"진로 걱정이 많은 대학생들을 위해 기획하였습니다.",
+      "desc-3":"프론트엔드 2명, 백엔드 2명으로 진행하였습니다.",
+      "desc-4":"그 중 저는 프론트엔드에서",
+      "desc-5":"디자인, 페이지 라우팅, 홈화면, 로그인, 교수-학생 소통 페이지, 시간표 추천 페이지, 내 프로필 관리 페이지, 후원하기 페이지, 알람 확인하기 페이지를 구현하였습니다."
+    },
+    "gallery": {
+      "title":"gallery web",
+      "subtitle":"- 찍은 사진들을 기록해둘 수 있는 웹사이트",
+      "user":"",
+      "desc-1":"사진 찍는 것을 좋아하는 사람들을 위해",
+      "desc-2":"웹사이트에 기록해둘 수 있는 웹사이트를 기획하였습니다.",
+      "desc-3":"혼자 toy project로 진행하였습니다.",
+      "desc-4":"디자인, 페이지 라우팅, 홈화면, 회원가입/로그인, 개인정보 수정, 글/사진 업로드, 포스팅 확인, 포스팅 수정, 포스팅 삭제를 구현하였습니다.",
+      "desc-5":""
+    },
+    "apartment": {
+      "title":"Search For Apartment Transactions",
+      "subtitle":"- 아파트 매매 실거래가를 확인할 수 있는 웹사이트",
+      "user":"",
+      "desc-1":"원하는 지역을 선택하여",
+      "desc-2":"아파트의 매매 실거래가를 확인하고, 부동산 페이지로 넘어갈 수 있습니다.",
+      "desc-3":"프론트엔드 1명, api 크롤링 1명으로 진행하였습니다.",
+      "desc-4":"그 중 저는 프론트엔드에서",
+      "desc-5":" 디자인, api 연동, 검색 기능, 부동산 사이트 http 하이퍼링크 등을 구현하였습니다."
+    },
+    "d": {
+      "title":"",
+      "subtitle":"",
+      "user":"",
+      "desc-1":"",
+      "desc-2":"",
+      "desc-3":"",
+      "desc-4":"",
+      "desc-5":""
+    }
   }
 }
\ No newline at end of file
diff --git a/src/lib/getProjectPropsData.tsx b/src/lib/getProjectPropsData.tsx
new file mode 100644
index 0000000..dd53213
--- /dev/null
+++ b/src/lib/getProjectPropsData.tsx
@@ -0,0 +1,228 @@
+import { ProjectDataInterface } from "src/types/type";
+import { STACK_NAME } from "src/types/enum";
+import { useTranslation } from "react-i18next";
+
+import esim from "src/assets/images/projects/world-esim.webp";
+import esimadmin from "src/assets/images/projects/world-esim-admin.webp";
+import nfmtrd2023 from "src/assets/images/projects/nfm-trd-2023.webp";
+import focuz from "src/assets/images/projects/focuz.webp";
+import focuz_video from "src/assets/images/projects/구현영상.mp4";
+import bburing_log from "src/assets/images/projects/BBuRing.webp";
+import bburing_log_video from "src/assets/images/projects/BBuRing.mp4";
+import eclipse from "src/assets/images/projects/eclipse.webp";
+import eclipse_video from "src/assets/images/projects/eclipse.mp4";
+import gallery from "src/assets/images/projects/gallery.webp";
+import gallery_video from "src/assets/images/projects/gallery.mp4";
+import apart from "src/assets/images/projects/apartment.webp";
+
+export default function getProjectPropsData() {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { t } = useTranslation();
+  const propsObj: ProjectDataInterface[] = [
+    {
+      idx: 8,
+      img: esim,
+      title: t("projects.esim.title"),
+      subtitle: t("projects.esim.subtitle"),
+      user: t("projects.esim.user"),
+      strongStacks: [
+        STACK_NAME.VUE,
+        STACK_NAME.TYPESCRIPT,
+        STACK_NAME.SASS,
+        STACK_NAME.NODE,
+        STACK_NAME.POSTGRESQL,
+        STACK_NAME.S3,
+      ],
+      stacks: [STACK_NAME.DOCKER, STACK_NAME.JENKINS, STACK_NAME.FIGMA],
+      desc: [
+        t("projects.esim.desc-1"),
+        t("projects.esim.desc-2"),
+        t("projects.esim.desc-3"),
+        t("projects.esim.desc-4"),
+        t("projects.esim.desc-5"),
+      ],
+      isHaveWeb: true,
+      isHaveGithub: false,
+      isHaveVideo: false,
+      webLink: "https://esim.famppy.com/",
+      githubLink: null,
+      videoLink: null,
+    },
+    {
+      idx: 7,
+      img: esimadmin,
+      title: t("projects.esim-admin.title"),
+      subtitle: t("projects.esim-admin.subtitle"),
+      user: t("projects.esim-admin.user"),
+      strongStacks: [
+        STACK_NAME.VUE,
+        STACK_NAME.TYPESCRIPT,
+        STACK_NAME.SASS,
+        STACK_NAME.NODE,
+        STACK_NAME.POSTGRESQL,
+        STACK_NAME.S3,
+      ],
+      stacks: [STACK_NAME.DOCKER, STACK_NAME.JENKINS, STACK_NAME.FIGMA],
+      desc: [
+        t("projects.esim-admin.desc-1"),
+        t("projects.esim-admin.desc-2"),
+        t("projects.esim-admin.desc-3"),
+        t("projects.esim-admin.desc-4"),
+        t("projects.esim-admin.desc-5"),
+      ],
+      isHaveWeb: true,
+      isHaveGithub: false,
+      isHaveVideo: false,
+      webLink: "https://esim-admin.famppy.com/",
+      githubLink: null,
+      videoLink: null,
+    },
+    {
+      idx: 6,
+      img: nfmtrd2023,
+      title: t("projects.nfm-trd.title"),
+      subtitle: t("projects.nfm-trd.subtitle"),
+      user: t("projects.nfm-trd.user"),
+      strongStacks: [
+        STACK_NAME.VUE,
+        STACK_NAME.TYPESCRIPT,
+        STACK_NAME.SASS,
+        STACK_NAME.NODE,
+        STACK_NAME.POSTGRESQL,
+        STACK_NAME.S3,
+      ],
+      stacks: [STACK_NAME.DOCKER, STACK_NAME.JENKINS, STACK_NAME.FIGMA],
+      desc: [
+        t("projects.nfm-trd.desc-1"),
+        t("projects.nfm-trd.desc-2"),
+        t("projects.nfm-trd.desc-3"),
+        t("projects.nfm-trd.desc-4"),
+        t("projects.nfm-trd.desc-5"),
+      ],
+      isHaveWeb: true,
+      isHaveGithub: false,
+      isHaveVideo: false,
+      webLink: "https://nfm-trd-2023.apoc.day/#/",
+      githubLink: null,
+      videoLink: null,
+    },
+    {
+      idx: 5,
+      img: focuz,
+      title: t("projects.focuz.title"),
+      subtitle: t("projects.focuz.subtitle"),
+      user: t("projects.focuz.user"),
+      strongStacks: [
+        STACK_NAME.REACT,
+        STACK_NAME.TENSORFLOW,
+        STACK_NAME.KAKAOOAUTH,
+        STACK_NAME.STYLEDCOMPONENT,
+      ],
+      stacks: [STACK_NAME.SPRING, STACK_NAME.MYSQL, STACK_NAME.REDIS],
+      desc: [
+        t("projects.focuz.desc-1"),
+        t("projects.focuz.desc-2"),
+        t("projects.focuz.desc-3"),
+        t("projects.focuz.desc-4"),
+        t("projects.focuz.desc-5"),
+      ],
+      isHaveWeb: false,
+      isHaveGithub: true,
+      isHaveVideo: true,
+      webLink: null,
+      githubLink: "https://github.com/happyhyep/FOCUZ",
+      videoLink: focuz_video,
+    },
+    {
+      idx: 4,
+      img: bburing_log,
+      title: t("projects.bburing.title"),
+      subtitle: t("projects.bburing.subtitle"),
+      user: null,
+      strongStacks: [STACK_NAME.REACT, STACK_NAME.DOCKER],
+      stacks: [STACK_NAME.SPRING, STACK_NAME.PYTHON, STACK_NAME.MYSQL],
+      desc: [
+        t("projects.bburing.desc-1"),
+        t("projects.bburing.desc-2"),
+        t("projects.bburing.desc-3"),
+        t("projects.bburing.desc-4"),
+        t("projects.bburing.desc-5"),
+      ],
+      isHaveWeb: false,
+      isHaveGithub: true,
+      isHaveVideo: true,
+      webLink: null,
+      githubLink: "https://github.com/happyhyep/BBuRing_log",
+      videoLink: bburing_log_video,
+    },
+    {
+      idx: 3,
+      img: eclipse,
+      title: t("projects.eclipse.title"),
+      subtitle: t("projects.eclipse.subtitle"),
+      user: null,
+      strongStacks: [STACK_NAME.REACT],
+      stacks: [STACK_NAME.DJANGO],
+      desc: [
+        t("projects.eclipse.desc-1"),
+        t("projects.eclipse.desc-2"),
+        t("projects.eclipse.desc-3"),
+        t("projects.eclipse.desc-4"),
+        t("projects.eclipse.desc-5"),
+      ],
+      isHaveWeb: false,
+      isHaveGithub: true,
+      isHaveVideo: true,
+      webLink: null,
+      githubLink: "https://github.com/happyhyep/Eclipse",
+      videoLink: eclipse_video,
+    },
+    {
+      idx: 2,
+      img: gallery,
+      title: t("projects.gallery.title"),
+      subtitle: t("projects.gallery.subtitle"),
+      user: null,
+      strongStacks: [STACK_NAME.REACT],
+      stacks: [STACK_NAME.FIREBASE],
+      desc: [
+        t("projects.gallery.desc-1"),
+        t("projects.gallery.desc-2"),
+        t("projects.gallery.desc-3"),
+        t("projects.gallery.desc-4"),
+        t("projects.gallery.desc-5"),
+      ],
+      isHaveWeb: false,
+      isHaveGithub: true,
+      isHaveVideo: true,
+      webLink: null,
+      githubLink: "https://github.com/happyhyep/gallery-web",
+      videoLink: gallery_video,
+    },
+    {
+      idx: 1,
+      img: apart,
+      title: t("projects.apartment.title"),
+      subtitle: t("projects.apartment.subtitle"),
+      user: null,
+      strongStacks: [STACK_NAME.VANILLAJS, STACK_NAME.EC2],
+      stacks: [STACK_NAME.OPENAPI],
+      desc: [
+        t("projects.apartment.desc-1"),
+        t("projects.apartment.desc-2"),
+        t("projects.apartment.desc-3"),
+        t("projects.apartment.desc-4"),
+        t("projects.apartment.desc-5"),
+      ],
+      isHaveWeb: false,
+      isHaveGithub: true,
+      isHaveVideo: false,
+      webLink: null,
+      githubLink:
+        "https://github.com/happyhyep/project_search_for_apart_transactions",
+      videoLink: null,
+    },
+  ];
+
+  return propsObj;
+}
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 9752590..b89a799 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,30 +1,15 @@
-import React, { useState } from "react";
-import NavBar from "src/components/common/NavBar";
-import Footer from "src/components/common/Footer";
-import { motion, useScroll } from "framer-motion";
-import nfmtrd2023 from "@images/projects/nfm-trd-2023.webp";
-import focuz from "@images/projects/focuz.webp";
-import focuz_video from "@images/projects/구현영상.mp4";
-import bburing from "@images/projects/BBuRing.webp";
-import bburing_video from "@images/projects/BBuRing.mp4";
-import eclipse from "@images/projects/eclipse.webp";
-import eclipse_video from "@images/projects/eclipse.mp4";
-import gallery from "@images/projects/gallery.webp";
-import gallery_video from "@images/projects/gallery.mp4";
-import apartment from "@images/projects/apartment.webp";
-import github from "@icons/github.webp";
-import { NavLink } from "react-router-dom";
-
+import React from "react";
 // @ts-ignore
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-
-import VideoModal from "../components/VideoModal";
+import Layout from "src/components/layout/Layout";
+import TopBar from "src/components/common/TopBar";
+import DashTitle from "src/components/common/DashTitle";
+import ProjectComponent from "src/components/ProjectComponent";
+import getProjectPropsData from "src/lib/getProjectPropsData";
 
 export default function Projects() {
-  const { scrollYProgress } = useScroll();
-
   function SamplePrevArrow(props: any) {
     const { className, style, onClick } = props;
     return (
@@ -69,560 +54,583 @@ export default function Projects() {
     prevArrow: <SamplePrevArrow />,
   };
 
-  const [isVideoModalOpen1, setIsVideoModalOpen1] = useState(false);
-  const [isVideoModalOpen2, setIsVideoModalOpen2] = useState(false);
-  const [isVideoModalOpen3, setIsVideoModalOpen3] = useState(false);
-  const [isVideoModalOpen4, setIsVideoModalOpen4] = useState(false);
+  const propsObj = getProjectPropsData();
+  // const propsObj: ProjectDataInterface[] = [
+  //   {
+  //     title: "기억 박물관 - 내 추억에 놀러와",
+  //     subtitle: "- 추억 기록 모바일 웹콘텐츠",
+  //     user: "(실 사용자 2만명)",
+  //     strongStacks: [
+  //       STACK_NAME.VUE,
+  //       STACK_NAME.TYPESCRIPT,
+  //       STACK_NAME.SASS,
+  //       STACK_NAME.NODE,
+  //       STACK_NAME.POSTGRESQL,
+  //       STACK_NAME.S3,
+  //     ],
+  //     stacks: [STACK_NAME.DOCKER, STACK_NAME.JENKINS, STACK_NAME.FIGMA],
+  //     desc: [
+  //       "국립 민속 박물관 제 3관에서 진행한 웹 컨텐츠로,",
+  //       "중장년층을 타겟으로 추억을 기록하는 웹 사이트를 개발 및 배포하였습니다.",
+  //       "개발자 3명, 디자이너 2명, 기획자 1명, 개발 멘토 1명으로 진행하였습니다.",
+  //       "그 중 저는 개발 PL(프로젝트 리더)로, 프론트엔드, 백엔드, DB를 맡아",
+  //       "초기 프론트엔드 개발 세팅, 닉네임/연령대 입력 페이지 프론트엔드, 유물 선택 페이지 프론트엔드, 기록 페이지 프론트엔드, 결과 페이지 프론트엔드/백엔드, 공유 페이지 프론트엔드/백엔드를 개발하였습니다.",
+  //     ],
+  //     isHaveWeb: true,
+  //     isHaveGithub: false,
+  //     isHaveVideo: false,
+  //     webLink: "https://nfm-trd-2023.apoc.day/#/",
+  //     githubLink: null,
+  //     videoLink: null,
+  //   },
+  // ];
+  // const [isVideoModalOpen1, setIsVideoModalOpen1] = useState(false);
+  // const [isVideoModalOpen2, setIsVideoModalOpen2] = useState(false);
+  // const [isVideoModalOpen3, setIsVideoModalOpen3] = useState(false);
+  // const [isVideoModalOpen4, setIsVideoModalOpen4] = useState(false);
+  //
+  // const onVideoModalOpen1 = () => {
+  //   setIsVideoModalOpen1(true);
+  // };
+  // const onVideoModalOpen2 = () => {
+  //   setIsVideoModalOpen2(true);
+  // };
+  // const onVideoModalOpen3 = () => {
+  //   setIsVideoModalOpen3(true);
+  // };
+  // const onVideoModalOpen4 = () => {
+  //   setIsVideoModalOpen4(true);
+  // };
 
-  const onVideoModalOpen1 = () => {
-    setIsVideoModalOpen1(true);
-  };
-  const onVideoModalOpen2 = () => {
-    setIsVideoModalOpen2(true);
-  };
-  const onVideoModalOpen3 = () => {
-    setIsVideoModalOpen3(true);
-  };
-  const onVideoModalOpen4 = () => {
-    setIsVideoModalOpen4(true);
-  };
   return (
-    <>
-      <NavBar></NavBar>
-      <motion.div
-        className="bar"
-        style={{
-          scaleX: scrollYProgress,
-          position: "fixed",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-          width: "100%",
-          height: "5px",
-          transformOrigin: 0,
-          transform: "translate3d(0, 0, 0)",
-          background: "#000000",
-        }}
-      />
-
-      {/*<div*/}
-      {/*  style={{*/}
-      {/*    display: "flex",*/}
-      {/*    justifyContent: "space-between",*/}
-      {/*    alignItems: "center",*/}
-      {/*    marginTop: "50px",*/}
-      {/*    marginBottom: "20px",*/}
-      {/*  }}*/}
-      {/*>*/}
-      {/*  <DashLine />*/}
-      {/*  <Happyhyep style={{ width: "20%" }}>Front-end</Happyhyep>*/}
-      {/*  <DashLine />*/}
-      {/*</div>*/}
+    <Layout>
+      <section className="projects-page">
+        <TopBar color="#000000" />
+        <DashTitle name="Web"></DashTitle>
+        <Slider {...settings}>
+          {/* ---- 국립 민속 박물관 프로젝트 ---- */}
+          {propsObj &&
+            propsObj.map((el) => {
+              return <ProjectComponent data={el} />;
+            })}
 
-      {/*<Slider {...settings}>*/}
-      {/*  /!* ---- 국립 민속 박물관 프로젝트 ---- *!/*/}
-      {/*  <div className="project1">*/}
-      {/*    <div style={{ display: "flex", justifyContent: "center" }}>*/}
-      {/*      <img*/}
-      {/*        alt="nfm-trd-2023"*/}
-      {/*        src={nfmtrd2023}*/}
-      {/*        style={{ width: "500px" }}*/}
-      {/*      ></img>*/}
-      {/*      <div*/}
-      {/*        style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
-      {/*      >*/}
-      {/*        <Title>*/}
-      {/*          <strong>기억 박물관 - 내 추억에 놀러와</strong>*/}
-      {/*        </Title>*/}
-      {/*        <Text style={{ fontSize: "20px" }}>*/}
-      {/*          - 추억 기록 모바일 웹컨텐츠*/}
-      {/*        </Text>*/}
-      {/*        <Text>(실 사용자 2만명)</Text>*/}
-      {/*        <Text>*/}
-      {/*          <strong>Vue.js, Typescript, Sass, Node.js, PostgreSQL</strong>,*/}
-      {/*          AWS, Figma*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>국립 민속 박물관 제 3관에서 진행한 웹 컨텐츠로,</Text>*/}
-      {/*        <Text>*/}
-      {/*          중장년층을 타겟으로 추억을 기록하는 웹 사이트를 개발 및*/}
-      {/*          배포하였습니다.*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>*/}
-      {/*          개발자 3명, 디자이너 2명, 기획자 1명, 개발 멘토 1명으로*/}
-      {/*          진행하였습니다.*/}
-      {/*        </Text>*/}
-      {/*        <Text style={{ fontSize: "13px", fontStyle: "bold" }}>*/}
-      {/*          그 중 저는 개발 <strong>PL(프로젝트 리더)</strong>로,*/}
-      {/*          프론트엔드, 백엔드, DB를 맡아*/}
-      {/*        </Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          초기 프론트엔드 개발 세팅, 닉네임/연령대 입력 페이지 프론트엔드,*/}
-      {/*          유물 선택 페이지 프론트엔드, 기록 페이지 프론트엔드, 결과 페이지*/}
-      {/*          프론트엔드/백엔드, 공유 페이지 프론트엔드/백엔드를*/}
-      {/*          개발하였습니다.*/}
-      {/*        </Text>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*    /!* <div style={{display: 'flex', justifyContent: 'end', marginTop: '5px', marginRight: '50px'}}>*/}
-      {/*              <VideoButton onClick={onVideoModalOpen1} style={{display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer'}}>VIDEO 보기 → </VideoButton>*/}
-      {/*          </div> *!/*/}
-      {/*    {isVideoModalOpen1 ? (*/}
-      {/*      <VideoModal*/}
-      {/*        setIsVideoModalOpen={setIsVideoModalOpen1}*/}
-      {/*        video={focuz_video}*/}
-      {/*        pageNumber={1}*/}
-      {/*      />*/}
-      {/*    ) : null}*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <GithubButton*/}
-      {/*        to="https://nfm-trd-2023.apoc.day/#/"*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        Web Page →*/}
-      {/*      </GithubButton>*/}
-      {/*    </div>*/}
-      {/*  </div>*/}
+          {/*<div className="project1">*/}
+          {/*  <div style={{ display: "flex", justifyContent: "center" }}>*/}
+          {/*    <img*/}
+          {/*      alt="nfm-trd-2023"*/}
+          {/*      src={nfmtrd2023}*/}
+          {/*      style={{ width: "500px" }}*/}
+          {/*    ></img>*/}
+          {/*    <div*/}
+          {/*      style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
+          {/*    >*/}
+          {/*      <Title>*/}
+          {/*        <strong>기억 박물관 - 내 추억에 놀러와</strong>*/}
+          {/*      </Title>*/}
+          {/*      <Text style={{ fontSize: "20px" }}>*/}
+          {/*        - 추억 기록 모바일 웹컨텐츠*/}
+          {/*      </Text>*/}
+          {/*      <Text>(실 사용자 2만명)</Text>*/}
+          {/*      <Text>*/}
+          {/*        <strong>Vue.js, Typescript, Sass, Node.js, PostgreSQL</strong>,*/}
+          {/*        AWS, Figma*/}
+          {/*      </Text>*/}
+          {/*      <br />*/}
+          {/*      <Text>국립 민속 박물관 제 3관에서 진행한 웹 컨텐츠로,</Text>*/}
+          {/*      <Text>*/}
+          {/*        중장년층을 타겟으로 추억을 기록하는 웹 사이트를 개발 및*/}
+          {/*        배포하였습니다.*/}
+          {/*      </Text>*/}
+          {/*      <br />*/}
+          {/*      <Text>*/}
+          {/*        개발자 3명, 디자이너 2명, 기획자 1명, 개발 멘토 1명으로*/}
+          {/*        진행하였습니다.*/}
+          {/*      </Text>*/}
+          {/*      <Text style={{ fontSize: "13px", fontStyle: "bold" }}>*/}
+          {/*        그 중 저는 개발 <strong>PL(프로젝트 리더)</strong>로,*/}
+          {/*        프론트엔드, 백엔드, DB를 맡아*/}
+          {/*      </Text>*/}
+          {/*      <Text style={{ fontSize: "13px" }}>*/}
+          {/*        초기 프론트엔드 개발 세팅, 닉네임/연령대 입력 페이지 프론트엔드,*/}
+          {/*        유물 선택 페이지 프론트엔드, 기록 페이지 프론트엔드, 결과 페이지*/}
+          {/*        프론트엔드/백엔드, 공유 페이지 프론트엔드/백엔드를*/}
+          {/*        개발하였습니다.*/}
+          {/*      </Text>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/* <div style={{display: 'flex', justifyContent: 'end', marginTop: '5px', marginRight: '50px'}}>
+                      <VideoButton onClick={onVideoModalOpen1} style={{display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer'}}>VIDEO 보기 → </VideoButton>
+                  </div> */}
+          {/*  {isVideoModalOpen1 ? (*/}
+          {/*    <VideoModal*/}
+          {/*      setIsVideoModalOpen={setIsVideoModalOpen1}*/}
+          {/*      video={focuz_video}*/}
+          {/*      pageNumber={1}*/}
+          {/*    />*/}
+          {/*  ) : null}*/}
+          {/*  <div*/}
+          {/*    style={{*/}
+          {/*      display: "flex",*/}
+          {/*      justifyContent: "end",*/}
+          {/*      marginTop: "5px",*/}
+          {/*      marginRight: "50px",*/}
+          {/*    }}*/}
+          {/*  >*/}
+          {/*    <GithubButton*/}
+          {/*      to="https://nfm-trd-2023.apoc.day/#/"*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "center",*/}
+          {/*        alignItems: "center",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      Web Page →*/}
+          {/*    </GithubButton>*/}
+          {/*  </div>*/}
+          {/*</div>*/}
 
-      {/*  /!* ---- focuz 프로젝트 ---- *!/*/}
-      {/*  <div className="project1">*/}
-      {/*    <div style={{ display: "flex", justifyContent: "center" }}>*/}
-      {/*      <img alt="focuz" src={focuz} style={{ width: "500px" }}></img>*/}
-      {/*      <div*/}
-      {/*        style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
-      {/*      >*/}
-      {/*        <Title>*/}
-      {/*          <strong>FOCUZ</strong>*/}
-      {/*        </Title>*/}
-      {/*        <Text style={{ fontSize: "20px" }}>*/}
-      {/*          - 얼굴인식 캠스터디 웹사이트*/}
-      {/*        </Text>*/}
-      {/*        <Text>(경희대 소프트웨어융합대학 동아리대항전 1위)</Text>*/}
-      {/*        <Text>*/}
-      {/*          <strong>React.js, Tensorflow, kakao oauth,</strong> Spring,*/}
-      {/*          MySQL, redis*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>*/}
-      {/*          기존 화상 회의 프로그램 및 공부 프로그램과 차별화 하여*/}
-      {/*        </Text>*/}
-      {/*        <Text>얼굴 인식된 시간을 측정하여 공부 집중도를 분석합니다.</Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>*/}
-      {/*          프론트엔드 2명, 백엔드 2명, 멘토 2명으로 진행하였습니다.*/}
-      {/*        </Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          그 중 저는 프론트엔드에서*/}
-      {/*        </Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          페이지 라우팅, 회원가입/로그인-kakao auth, 공부하기*/}
-      {/*          페이지-tensorflow 라이브러리 활용, 친구/그룹 추가/목록 페이지 -*/}
-      {/*          페이지, 컴포넌트 개발, 스터디 그룹 생성 페이지, 분석*/}
-      {/*          페이지(캘린더 날짜 설정, 시간 그래프화)를 구현하였습니다.*/}
-      {/*        </Text>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <VideoButton*/}
-      {/*        onClick={onVideoModalOpen1}*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*          cursor: "pointer",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        VIDEO 보기 →{" "}*/}
-      {/*      </VideoButton>*/}
-      {/*    </div>*/}
-      {/*    {isVideoModalOpen1 ? (*/}
-      {/*      <VideoModal*/}
-      {/*        setIsVideoModalOpen={setIsVideoModalOpen1}*/}
-      {/*        video={focuz_video}*/}
-      {/*        pageNumber={1}*/}
-      {/*      />*/}
-      {/*    ) : null}*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <GithubButton*/}
-      {/*        to="https://github.com/happyhyep/FOCUZ"*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <img*/}
-      {/*          alt="github"*/}
-      {/*          src={github}*/}
-      {/*          style={{ width: "16px", marginRight: "3px" }}*/}
-      {/*        ></img>*/}
-      {/*        GITHUB*/}
-      {/*      </GithubButton>*/}
-      {/*    </div>*/}
-      {/*    /!* <div style={{display: 'flex', justifyContent: 'center'}}>*/}
-      {/*              <video width='600' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()}>*/}
-      {/*                  <source src={focuz_video} type="video/mp4"/>*/}
-      {/*              </video>*/}
-      {/*          </div> *!/*/}
-      {/*  </div>*/}
+          {/*  /!* ---- focuz 프로젝트 ---- *!/*/}
+          {/*  <div className="project1">*/}
+          {/*    <div style={{ display: "flex", justifyContent: "center" }}>*/}
+          {/*      <img alt="focuz" src={focuz} style={{ width: "500px" }}></img>*/}
+          {/*      <div*/}
+          {/*        style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
+          {/*      >*/}
+          {/*        <Title>*/}
+          {/*          <strong>FOCUZ</strong>*/}
+          {/*        </Title>*/}
+          {/*        <Text style={{ fontSize: "20px" }}>*/}
+          {/*          - 얼굴인식 캠스터디 웹사이트*/}
+          {/*        </Text>*/}
+          {/*        <Text>(경희대 소프트웨어융합대학 동아리대항전 1위)</Text>*/}
+          {/*        <Text>*/}
+          {/*          <strong>React.js, Tensorflow, kakao oauth,</strong> Spring,*/}
+          {/*          MySQL, redis*/}
+          {/*        </Text>*/}
+          {/*        <br />*/}
+          {/*        <Text>*/}
+          {/*          기존 화상 회의 프로그램 및 공부 프로그램과 차별화 하여*/}
+          {/*        </Text>*/}
+          {/*        <Text>얼굴 인식된 시간을 측정하여 공부 집중도를 분석합니다.</Text>*/}
+          {/*        <br />*/}
+          {/*        <Text>*/}
+          {/*          프론트엔드 2명, 백엔드 2명, 멘토 2명으로 진행하였습니다.*/}
+          {/*        </Text>*/}
+          {/*        <Text style={{ fontSize: "13px" }}>*/}
+          {/*          그 중 저는 프론트엔드에서*/}
+          {/*        </Text>*/}
+          {/*        <Text style={{ fontSize: "13px" }}>*/}
+          {/*          페이지 라우팅, 회원가입/로그인-kakao auth, 공부하기*/}
+          {/*          페이지-tensorflow 라이브러리 활용, 친구/그룹 추가/목록 페이지 -*/}
+          {/*          페이지, 컴포넌트 개발, 스터디 그룹 생성 페이지, 분석*/}
+          {/*          페이지(캘린더 날짜 설정, 시간 그래프화)를 구현하였습니다.*/}
+          {/*        </Text>*/}
+          {/*      </div>*/}
+          {/*    </div>*/}
+          {/*    <div*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "end",*/}
+          {/*        marginTop: "5px",*/}
+          {/*        marginRight: "50px",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <VideoButton*/}
+          {/*        onClick={onVideoModalOpen1}*/}
+          {/*        style={{*/}
+          {/*          display: "flex",*/}
+          {/*          justifyContent: "center",*/}
+          {/*          alignItems: "center",*/}
+          {/*          cursor: "pointer",*/}
+          {/*        }}*/}
+          {/*      >*/}
+          {/*        VIDEO 보기 →{" "}*/}
+          {/*      </VideoButton>*/}
+          {/*    </div>*/}
+          {/*    {isVideoModalOpen1 ? (*/}
+          {/*      <VideoModal*/}
+          {/*        setIsVideoModalOpen={setIsVideoModalOpen1}*/}
+          {/*        video={focuz_video}*/}
+          {/*        pageNumber={1}*/}
+          {/*      />*/}
+          {/*    ) : null}*/}
+          {/*    <div*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "end",*/}
+          {/*        marginTop: "5px",*/}
+          {/*        marginRight: "50px",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <GithubButton*/}
+          {/*        to="https://github.com/happyhyep/FOCUZ"*/}
+          {/*        style={{*/}
+          {/*          display: "flex",*/}
+          {/*          justifyContent: "center",*/}
+          {/*          alignItems: "center",*/}
+          {/*        }}*/}
+          {/*      >*/}
+          {/*        <img*/}
+          {/*          alt="github"*/}
+          {/*          src={github}*/}
+          {/*          style={{ width: "16px", marginRight: "3px" }}*/}
+          {/*        ></img>*/}
+          {/*        GITHUB*/}
+          {/*      </GithubButton>*/}
+          {/*    </div>*/}
+          {/*    <div style={{display: 'flex', justifyContent: 'center'}}>*/}
+          {/*              <video width='600' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()}>*/}
+          {/*                  <source src={focuz_video} type="video/mp4"/>*/}
+          {/*              </video>*/}
+          {/*          </div>*/}
+          {/*  </div>*/}
 
-      {/*  /!* ---- BBuRing_log ---- *!/*/}
-      {/*  <div className="project2">*/}
-      {/*    <div style={{ display: "flex", justifyContent: "center" }}>*/}
-      {/*      <img alt="bburing" src={bburing} style={{ width: "500px" }}></img>*/}
-      {/*      <div*/}
-      {/*        style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
-      {/*      >*/}
-      {/*        <Title>*/}
-      {/*          <strong>BBuRing_log</strong>*/}
-      {/*        </Title>*/}
-      {/*        <Text style={{ fontSize: "20px" }}>*/}
-      {/*          - 전국 뿌링클 맛집 기록 웹사이트*/}
-      {/*        </Text>*/}
-      {/*        <Text>*/}
-      {/*          <strong>React.js, Docker,</strong> Spring, Python, MySQL*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>전국 뿌링클 맛집 탐방을 위해</Text>*/}
-      {/*        <Text>각 매장 별로 리뷰를 기록해둘 수 있습니다.</Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>프론트엔드 1명, 백엔드 1명으로 진행하였습니다.</Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          그 중 저는 프론트엔드에서*/}
-      {/*        </Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          페이지 라우팅, 홈 사이트 안내-애니메이션, kakao map api-마커*/}
-      {/*          등록, 지점 검색, 포스팅 확인-지도 클릭 시 리뷰/마우스 호버 글*/}
-      {/*          미리보기, 포스팅 작성을 구현하였습니다.*/}
-      {/*        </Text>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <VideoButton*/}
-      {/*        onClick={onVideoModalOpen2}*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*          cursor: "pointer",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        VIDEO 보기 →{" "}*/}
-      {/*      </VideoButton>*/}
-      {/*    </div>*/}
-      {/*    {isVideoModalOpen2 ? (*/}
-      {/*      <VideoModal*/}
-      {/*        setIsVideoModalOpen={setIsVideoModalOpen2}*/}
-      {/*        video={bburing_video}*/}
-      {/*        pageNumber={2}*/}
-      {/*      />*/}
-      {/*    ) : null}*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <GithubButton*/}
-      {/*        to="https://github.com/happyhyep/BBuRing_log"*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <img*/}
-      {/*          alt="github"*/}
-      {/*          src={github}*/}
-      {/*          style={{ width: "16px", marginRight: "3px" }}*/}
-      {/*        ></img>*/}
-      {/*        GITHUB*/}
-      {/*      </GithubButton>*/}
-      {/*    </div>*/}
-      {/*    /!* <Happyhyep style={{marginTop: '30px'}}>VIDEO</Happyhyep>*/}
-      {/*          <div style={{display: 'flex', justifyContent: 'center'}}>*/}
-      {/*              <video width='600' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()}>*/}
-      {/*                  <source src={bburing_video} type="video/mp4"/>*/}
-      {/*              </video>*/}
-      {/*          </div> *!/*/}
-      {/*  </div>*/}
+          {/* ---- BBuRing_log ---- */}
+          {/*<div className="project2">*/}
+          {/*  <div style={{ display: "flex", justifyContent: "center" }}>*/}
+          {/*    <img alt="bburing" src={bburing} style={{ width: "500px" }}></img>*/}
+          {/*    <div*/}
+          {/*      style={{*/}
+          {/*        marginTop: "20px",*/}
+          {/*        marginLeft: "40px",*/}
+          {/*        width: "450px",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <Title>*/}
+          {/*        <strong>BBuRing_log</strong>*/}
+          {/*      </Title>*/}
+          {/*      <Text style={{ fontSize: "20px" }}>*/}
+          {/*        - 전국 뿌링클 맛집 기록 웹사이트*/}
+          {/*      </Text>*/}
+          {/*      <Text>*/}
+          {/*        <strong>React.js, Docker,</strong> Spring, Python, MySQL*/}
+          {/*      </Text>*/}
+          {/*      <br />*/}
+          {/*      <Text>전국 뿌링클 맛집 탐방을 위해</Text>*/}
+          {/*      <Text>각 매장 별로 리뷰를 기록해둘 수 있습니다.</Text>*/}
+          {/*      <br />*/}
+          {/*      <Text>프론트엔드 1명, 백엔드 1명으로 진행하였습니다.</Text>*/}
+          {/*      <Text style={{ fontSize: "13px" }}>*/}
+          {/*        그 중 저는 프론트엔드에서*/}
+          {/*      </Text>*/}
+          {/*      <Text style={{ fontSize: "13px" }}>*/}
+          {/*        페이지 라우팅, 홈 사이트 안내-애니메이션, kakao map api-마커*/}
+          {/*        등록, 지점 검색, 포스팅 확인-지도 클릭 시 리뷰/마우스 호버 글*/}
+          {/*        미리보기, 포스팅 작성을 구현하였습니다.*/}
+          {/*      </Text>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*  <div*/}
+          {/*    style={{*/}
+          {/*      display: "flex",*/}
+          {/*      justifyContent: "end",*/}
+          {/*      marginTop: "5px",*/}
+          {/*      marginRight: "50px",*/}
+          {/*    }}*/}
+          {/*  >*/}
+          {/*    <VideoButton*/}
+          {/*      onClick={onVideoModalOpen2}*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "center",*/}
+          {/*        alignItems: "center",*/}
+          {/*        cursor: "pointer",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      VIDEO 보기 →{" "}*/}
+          {/*    </VideoButton>*/}
+          {/*  </div>*/}
+          {/*  {isVideoModalOpen2 ? (*/}
+          {/*    <VideoModal*/}
+          {/*      setIsVideoModalOpen={setIsVideoModalOpen2}*/}
+          {/*      video={bburing_video}*/}
+          {/*      pageNumber={2}*/}
+          {/*    />*/}
+          {/*  ) : null}*/}
+          {/*  <div*/}
+          {/*    style={{*/}
+          {/*      display: "flex",*/}
+          {/*      justifyContent: "end",*/}
+          {/*      marginTop: "5px",*/}
+          {/*      marginRight: "50px",*/}
+          {/*    }}*/}
+          {/*  >*/}
+          {/*    <GithubButton*/}
+          {/*      to="https://github.com/happyhyep/BBuRing_log"*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "center",*/}
+          {/*        alignItems: "center",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <img*/}
+          {/*        alt="github"*/}
+          {/*        src={github}*/}
+          {/*        style={{ width: "16px", marginRight: "3px" }}*/}
+          {/*      ></img>*/}
+          {/*      GITHUB*/}
+          {/*    </GithubButton>*/}
+          {/*  </div>*/}
+          {/*  /!* <Happyhyep style={{marginTop: '30px'}}>VIDEO</Happyhyep>*/}
+          {/*          <div style={{display: 'flex', justifyContent: 'center'}}>*/}
+          {/*              <video width='600' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()}>*/}
+          {/*                  <source src={bburing_video} type="video/mp4"/>*/}
+          {/*              </video>*/}
+          {/*          </div> *!/*/}
+          {/*</div>*/}
 
-      {/*  /!* ---- eclipse ---- *!/*/}
-      {/*  <div className="project3">*/}
-      {/*    <div style={{ display: "flex", justifyContent: "center" }}>*/}
-      {/*      <img alt="bburing" src={eclipse} style={{ width: "500px" }}></img>*/}
-      {/*      <div*/}
-      {/*        style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
-      {/*      >*/}
-      {/*        <Title>*/}
-      {/*          <strong>Eclipse</strong>*/}
-      {/*        </Title>*/}
-      {/*        <Text style={{ fontSize: "20px" }}>*/}
-      {/*          - 대학생의 진로 걱정 해결을 위한 웹사이트*/}
-      {/*        </Text>*/}
-      {/*        <Text>*/}
-      {/*          <strong>React.js</strong> Python(Django)*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>코로나19 이후 선/후배 관계의 단절로</Text>*/}
-      {/*        <Text>진로 걱정이 많은 대학생들을 위해 기획하였습니다.</Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>프론트엔드 2명, 백엔드 2명으로 진행하였습니다.</Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          그 중 저는 프론트엔드에서*/}
-      {/*        </Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          디자인, 페이지 라우팅, 홈화면, 로그인, 교수-학생 소통 페이지,*/}
-      {/*          시간표 추천 페이지, 내 프로필 관리 페이지, 후원하기 페이지, 알람*/}
-      {/*          확인하기 페이지를 구현하였습니다.*/}
-      {/*        </Text>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <VideoButton*/}
-      {/*        onClick={onVideoModalOpen3}*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*          cursor: "pointer",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        VIDEO 보기 →{" "}*/}
-      {/*      </VideoButton>*/}
-      {/*    </div>*/}
-      {/*    {isVideoModalOpen3 ? (*/}
-      {/*      <VideoModal*/}
-      {/*        setIsVideoModalOpen={setIsVideoModalOpen3}*/}
-      {/*        video={eclipse_video}*/}
-      {/*        pageNumber={3}*/}
-      {/*      />*/}
-      {/*    ) : null}*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <GithubButton*/}
-      {/*        to="https://github.com/happyhyep/Eclipse"*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <img*/}
-      {/*          alt="github"*/}
-      {/*          src={github}*/}
-      {/*          style={{ width: "16px", marginRight: "3px" }}*/}
-      {/*        ></img>*/}
-      {/*        GITHUB*/}
-      {/*      </GithubButton>*/}
-      {/*    </div>*/}
-      {/*    /!* <Happyhyep style={{marginTop: '30px'}}>VIDEO</Happyhyep>*/}
-      {/*          <div style={{display: 'flex', justifyContent: 'center'}}>*/}
-      {/*              <video width='600' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()}>*/}
-      {/*                  <source src={eclipse_video} type="video/mp4"/>*/}
-      {/*              </video>*/}
-      {/*          </div> *!/*/}
-      {/*  </div>*/}
+          {/*  /!* ---- eclipse ---- *!/*/}
+          {/*  <div className="project3">*/}
+          {/*    <div style={{ display: "flex", justifyContent: "center" }}>*/}
+          {/*      <img alt="bburing" src={eclipse} style={{ width: "500px" }}></img>*/}
+          {/*      <div*/}
+          {/*        style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
+          {/*      >*/}
+          {/*        <Title>*/}
+          {/*          <strong>Eclipse</strong>*/}
+          {/*        </Title>*/}
+          {/*        <Text style={{ fontSize: "20px" }}>*/}
+          {/*          - 대학생의 진로 걱정 해결을 위한 웹사이트*/}
+          {/*        </Text>*/}
+          {/*        <Text>*/}
+          {/*          <strong>React.js</strong> Python(Django)*/}
+          {/*        </Text>*/}
+          {/*        <br />*/}
+          {/*        <Text>코로나19 이후 선/후배 관계의 단절로</Text>*/}
+          {/*        <Text>진로 걱정이 많은 대학생들을 위해 기획하였습니다.</Text>*/}
+          {/*        <br />*/}
+          {/*        <Text>프론트엔드 2명, 백엔드 2명으로 진행하였습니다.</Text>*/}
+          {/*        <Text style={{ fontSize: "13px" }}>*/}
+          {/*          그 중 저는 프론트엔드에서*/}
+          {/*        </Text>*/}
+          {/*        <Text style={{ fontSize: "13px" }}>*/}
+          {/*          디자인, 페이지 라우팅, 홈화면, 로그인, 교수-학생 소통 페이지,*/}
+          {/*          시간표 추천 페이지, 내 프로필 관리 페이지, 후원하기 페이지, 알람*/}
+          {/*          확인하기 페이지를 구현하였습니다.*/}
+          {/*        </Text>*/}
+          {/*      </div>*/}
+          {/*    </div>*/}
+          {/*    <div*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "end",*/}
+          {/*        marginTop: "5px",*/}
+          {/*        marginRight: "50px",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <VideoButton*/}
+          {/*        onClick={onVideoModalOpen3}*/}
+          {/*        style={{*/}
+          {/*          display: "flex",*/}
+          {/*          justifyContent: "center",*/}
+          {/*          alignItems: "center",*/}
+          {/*          cursor: "pointer",*/}
+          {/*        }}*/}
+          {/*      >*/}
+          {/*        VIDEO 보기 →{" "}*/}
+          {/*      </VideoButton>*/}
+          {/*    </div>*/}
+          {/*    {isVideoModalOpen3 ? (*/}
+          {/*      <VideoModal*/}
+          {/*        setIsVideoModalOpen={setIsVideoModalOpen3}*/}
+          {/*        video={eclipse_video}*/}
+          {/*        pageNumber={3}*/}
+          {/*      />*/}
+          {/*    ) : null}*/}
+          {/*    <div*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "end",*/}
+          {/*        marginTop: "5px",*/}
+          {/*        marginRight: "50px",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <GithubButton*/}
+          {/*        to="https://github.com/happyhyep/Eclipse"*/}
+          {/*        style={{*/}
+          {/*          display: "flex",*/}
+          {/*          justifyContent: "center",*/}
+          {/*          alignItems: "center",*/}
+          {/*        }}*/}
+          {/*      >*/}
+          {/*        <img*/}
+          {/*          alt="github"*/}
+          {/*          src={github}*/}
+          {/*          style={{ width: "16px", marginRight: "3px" }}*/}
+          {/*        ></img>*/}
+          {/*        GITHUB*/}
+          {/*      </GithubButton>*/}
+          {/*    </div>*/}
+          {/*    /!* <Happyhyep style={{marginTop: '30px'}}>VIDEO</Happyhyep>*/}
+          {/*          <div style={{display: 'flex', justifyContent: 'center'}}>*/}
+          {/*              <video width='600' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()}>*/}
+          {/*                  <source src={eclipse_video} type="video/mp4"/>*/}
+          {/*              </video>*/}
+          {/*          </div> *!/*/}
+          {/*  </div>*/}
 
-      {/*  /!* ---- gallery web ---- *!/*/}
-      {/*  <div className="project4">*/}
-      {/*    <div style={{ display: "flex", justifyContent: "center" }}>*/}
-      {/*      <img alt="bburing" src={gallery} style={{ width: "500px" }}></img>*/}
-      {/*      <div*/}
-      {/*        style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
-      {/*      >*/}
-      {/*        <Title>*/}
-      {/*          <strong>gallery web</strong>*/}
-      {/*        </Title>*/}
-      {/*        <Text style={{ fontSize: "20px" }}>*/}
-      {/*          - 찍은 사진들을 기록해둘 수 있는 웹사이트*/}
-      {/*        </Text>*/}
-      {/*        <Text>*/}
-      {/*          <strong>React.js, firebase</strong>*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>사진 찍는 것을 좋아하는 사람들을 위해</Text>*/}
-      {/*        <Text>*/}
-      {/*          웹사이트에 기록해둘 수 있는 웹사이트를 기획하였습니다.*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>혼자 toy project로 진행하였습니다.</Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          디자인, 페이지 라우팅, 홈화면, 회원가입/로그인, 개인정보 수정,*/}
-      {/*          글/사진 업로드, 포스팅 확인, 포스팅 수정, 포스팅 삭제를*/}
-      {/*          구현하였습니다.*/}
-      {/*        </Text>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <VideoButton*/}
-      {/*        onClick={onVideoModalOpen4}*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*          cursor: "pointer",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        VIDEO 보기 →{" "}*/}
-      {/*      </VideoButton>*/}
-      {/*    </div>*/}
-      {/*    {isVideoModalOpen4 ? (*/}
-      {/*      <VideoModal*/}
-      {/*        setIsVideoModalOpen={setIsVideoModalOpen4}*/}
-      {/*        video={gallery_video}*/}
-      {/*        pageNumber={4}*/}
-      {/*      />*/}
-      {/*    ) : null}*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <GithubButton*/}
-      {/*        to="https://github.com/happyhyep/gallery-web"*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <img*/}
-      {/*          alt="github"*/}
-      {/*          src={github}*/}
-      {/*          style={{ width: "16px", marginRight: "3px" }}*/}
-      {/*        ></img>*/}
-      {/*        GITHUB*/}
-      {/*      </GithubButton>*/}
-      {/*    </div>*/}
-      {/*    /!* <Happyhyep style={{marginTop: '30px'}}>VIDEO</Happyhyep>*/}
-      {/*          <div style={{display: 'flex', justifyContent: 'center'}}>*/}
-      {/*              <video width='600' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()}>*/}
-      {/*                  <source src={gallery_video} type="video/mp4"/>*/}
-      {/*              </video>*/}
-      {/*          </div> *!/*/}
-      {/*  </div>*/}
+          {/*  /!* ---- gallery web ---- *!/*/}
+          {/*<div className="project4">*/}
+          {/*  <div style={{ display: "flex", justifyContent: "center" }}>*/}
+          {/*    <img alt="bburing" src={gallery} style={{ width: "500px" }}></img>*/}
+          {/*    <div*/}
+          {/*      style={{*/}
+          {/*        marginTop: "20px",*/}
+          {/*        marginLeft: "40px",*/}
+          {/*        width: "450px",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <Title>*/}
+          {/*        <strong>gallery web</strong>*/}
+          {/*      </Title>*/}
+          {/*      <Text style={{ fontSize: "20px" }}>*/}
+          {/*        - 찍은 사진들을 기록해둘 수 있는 웹사이트*/}
+          {/*      </Text>*/}
+          {/*      <Text>*/}
+          {/*        <strong>React.js, firebase</strong>*/}
+          {/*      </Text>*/}
+          {/*      <br />*/}
+          {/*      <Text>사진 찍는 것을 좋아하는 사람들을 위해</Text>*/}
+          {/*      <Text>*/}
+          {/*        웹사이트에 기록해둘 수 있는 웹사이트를 기획하였습니다.*/}
+          {/*      </Text>*/}
+          {/*      <br />*/}
+          {/*      <Text>혼자 toy project로 진행하였습니다.</Text>*/}
+          {/*      <Text style={{ fontSize: "13px" }}>*/}
+          {/*        디자인, 페이지 라우팅, 홈화면, 회원가입/로그인, 개인정보 수정,*/}
+          {/*        글/사진 업로드, 포스팅 확인, 포스팅 수정, 포스팅 삭제를*/}
+          {/*        구현하였습니다.*/}
+          {/*      </Text>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*  <div*/}
+          {/*    style={{*/}
+          {/*      display: "flex",*/}
+          {/*      justifyContent: "end",*/}
+          {/*      marginTop: "5px",*/}
+          {/*      marginRight: "50px",*/}
+          {/*    }}*/}
+          {/*  >*/}
+          {/*    <VideoButton*/}
+          {/*      onClick={onVideoModalOpen4}*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "center",*/}
+          {/*        alignItems: "center",*/}
+          {/*        cursor: "pointer",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      VIDEO 보기 →{" "}*/}
+          {/*    </VideoButton>*/}
+          {/*  </div>*/}
+          {/*  {isVideoModalOpen4 ? (*/}
+          {/*    <VideoModal*/}
+          {/*      setIsVideoModalOpen={setIsVideoModalOpen4}*/}
+          {/*      video={gallery_video}*/}
+          {/*      pageNumber={4}*/}
+          {/*    />*/}
+          {/*  ) : null}*/}
+          {/*  <div*/}
+          {/*    style={{*/}
+          {/*      display: "flex",*/}
+          {/*      justifyContent: "end",*/}
+          {/*      marginTop: "5px",*/}
+          {/*      marginRight: "50px",*/}
+          {/*    }}*/}
+          {/*  >*/}
+          {/*    <GithubButton*/}
+          {/*      to="https://github.com/happyhyep/gallery-web"*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "center",*/}
+          {/*        alignItems: "center",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <img*/}
+          {/*        alt="github"*/}
+          {/*        src={github}*/}
+          {/*        style={{ width: "16px", marginRight: "3px" }}*/}
+          {/*      ></img>*/}
+          {/*      GITHUB*/}
+          {/*    </GithubButton>*/}
+          {/*  </div>*/}
+          {/*  /!* <Happyhyep style={{marginTop: '30px'}}>VIDEO</Happyhyep>*/}
+          {/*          <div style={{display: 'flex', justifyContent: 'center'}}>*/}
+          {/*              <video width='600' controls="controls" ref={videoRef} onCanPlay={() => setPlayBackRate()}>*/}
+          {/*                  <source src={gallery_video} type="video/mp4"/>*/}
+          {/*              </video>*/}
+          {/*          </div> *!/*/}
+          {/*</div>*/}
 
-      {/*  /!* ---- apartment ---- *!/*/}
-      {/*  <div className="project5">*/}
-      {/*    <div style={{ display: "flex", justifyContent: "center" }}>*/}
-      {/*      <img alt="bburing" src={apartment} style={{ width: "500px" }}></img>*/}
-      {/*      <div*/}
-      {/*        style={{ marginTop: "20px", marginLeft: "40px", width: "450px" }}*/}
-      {/*      >*/}
-      {/*        <Title>*/}
-      {/*          <strong>Search For Apartment Transactions</strong>*/}
-      {/*        </Title>*/}
-      {/*        <Text style={{ fontSize: "20px" }}>*/}
-      {/*          - 아파트 매매 실거래가를 확인할 수 있는 웹사이트*/}
-      {/*        </Text>*/}
-      {/*        <Text>*/}
-      {/*          <strong>Vanilla.js, 공공데이터 api, aws 배포</strong>*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>원하는 지역을 선택하여</Text>*/}
-      {/*        <Text>*/}
-      {/*          아파트의 매매 실거래가를 확인하고, 부동산 페이지로 넘어갈 수*/}
-      {/*          있습니다.*/}
-      {/*        </Text>*/}
-      {/*        <br />*/}
-      {/*        <Text>프론트엔드 1명, api 크롤링 1명으로 진행하였습니다.</Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          그 중 저는 프론트엔드에서*/}
-      {/*        </Text>*/}
-      {/*        <Text style={{ fontSize: "13px" }}>*/}
-      {/*          디자인, api 연동, 검색 기능, 부동산 사이트 http 하이퍼링크 등을*/}
-      {/*          구현하였습니다.*/}
-      {/*        </Text>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*    <div*/}
-      {/*      style={{*/}
-      {/*        display: "flex",*/}
-      {/*        justifyContent: "end",*/}
-      {/*        marginTop: "5px",*/}
-      {/*        marginRight: "50px",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <GithubButton*/}
-      {/*        to="https://github.com/happyhyep/project_search_for_apart_transactions"*/}
-      {/*        style={{*/}
-      {/*          display: "flex",*/}
-      {/*          justifyContent: "center",*/}
-      {/*          alignItems: "center",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <img*/}
-      {/*          alt="github"*/}
-      {/*          src={github}*/}
-      {/*          style={{ width: "16px", marginRight: "3px" }}*/}
-      {/*        ></img>*/}
-      {/*        GITHUB*/}
-      {/*      </GithubButton>*/}
-      {/*    </div>*/}
-      {/*  </div>*/}
-      {/*</Slider>*/}
-      <Footer />
-    </>
+          {/*  /!* ---- apartment ---- *!/*/}
+          {/*<div className="project5">*/}
+          {/*  <div style={{ display: "flex", justifyContent: "center" }}>*/}
+          {/*    <img*/}
+          {/*      alt="bburing"*/}
+          {/*      src={apartment}*/}
+          {/*      style={{ width: "500px" }}*/}
+          {/*    ></img>*/}
+          {/*    <div*/}
+          {/*      style={{*/}
+          {/*        marginTop: "20px",*/}
+          {/*        marginLeft: "40px",*/}
+          {/*        width: "450px",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <Title>*/}
+          {/*        <strong>Search For Apartment Transactions</strong>*/}
+          {/*      </Title>*/}
+          {/*      <Text style={{ fontSize: "20px" }}>*/}
+          {/*        - 아파트 매매 실거래가를 확인할 수 있는 웹사이트*/}
+          {/*      </Text>*/}
+          {/*      <Text>*/}
+          {/*        <strong>Vanilla.js, 공공데이터 api, aws 배포</strong>*/}
+          {/*      </Text>*/}
+          {/*      <br />*/}
+          {/*      <Text>원하는 지역을 선택하여</Text>*/}
+          {/*      <Text>*/}
+          {/*        아파트의 매매 실거래가를 확인하고, 부동산 페이지로 넘어갈 수*/}
+          {/*        있습니다.*/}
+          {/*      </Text>*/}
+          {/*      <br />*/}
+          {/*      <Text>프론트엔드 1명, api 크롤링 1명으로 진행하였습니다.</Text>*/}
+          {/*      <Text style={{ fontSize: "13px" }}>*/}
+          {/*        그 중 저는 프론트엔드에서*/}
+          {/*      </Text>*/}
+          {/*      <Text style={{ fontSize: "13px" }}>*/}
+          {/*        디자인, api 연동, 검색 기능, 부동산 사이트 http 하이퍼링크*/}
+          {/*        등을 구현하였습니다.*/}
+          {/*      </Text>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*  <div*/}
+          {/*    style={{*/}
+          {/*      display: "flex",*/}
+          {/*      justifyContent: "end",*/}
+          {/*      marginTop: "5px",*/}
+          {/*      marginRight: "50px",*/}
+          {/*    }}*/}
+          {/*  >*/}
+          {/*    <GithubButton*/}
+          {/*      to="https://github.com/happyhyep/project_search_for_apart_transactions"*/}
+          {/*      style={{*/}
+          {/*        display: "flex",*/}
+          {/*        justifyContent: "center",*/}
+          {/*        alignItems: "center",*/}
+          {/*      }}*/}
+          {/*    >*/}
+          {/*      <img*/}
+          {/*        alt="github"*/}
+          {/*        src={github}*/}
+          {/*        style={{ width: "16px", marginRight: "3px" }}*/}
+          {/*      ></img>*/}
+          {/*      GITHUB*/}
+          {/*    </GithubButton>*/}
+          {/*  </div>*/}
+          {/*</div>*/}
+        </Slider>
+      </section>
+    </Layout>
   );
 }
 
diff --git a/src/types/enum.ts b/src/types/enum.ts
index cb0ff5c..90660dd 100644
--- a/src/types/enum.ts
+++ b/src/types/enum.ts
@@ -1 +1,24 @@
-export {};
+export enum STACK_NAME {
+  VUE = "Vue",
+  TYPESCRIPT = "Typescript",
+  SASS = "Sass",
+  NODE = "Node.js",
+  POSTGRESQL = "PostgreSQL",
+  S3 = "AWS S3",
+  EC2 = "AWS EC2",
+  FIGMA = "Figma",
+  DOCKER = "Docker",
+  JENKINS = "Jenkins",
+  REACT = "React",
+  TENSORFLOW = "Tensorflow",
+  KAKAOOAUTH = "Kakao oauth",
+  SPRING = "Spring",
+  MYSQL = "MySQL",
+  REDIS = "Redis",
+  PYTHON = "Python",
+  DJANGO = "Django",
+  FIREBASE = "Firebase",
+  VANILLAJS = "VanillaJS",
+  OPENAPI = "Open api",
+  STYLEDCOMPONENT = "Styled Component",
+}