diff --git a/README.md b/README.md
index e0e2acf36..ba45ad2cf 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 광주소프트웨어마이스터고등학교 공식 홈페이지입니다.
 
-## commands
+## Commands
 
 > root `package.json` scripts에 `--filter` command를 포함하여 작성해두었습니다.
 
@@ -12,13 +12,13 @@ $ cd official-gsm-front
 $ pnpm install
 
 # command of a specific package
-$ pnpm <workspace-name> <command>
+$ pnpm <package-name> <command>
 
 # example
 $ pnpm client dev
 ```
 
-## directory structure
+## Directory structure
 
 ```bash
 ...
@@ -36,3 +36,17 @@ $ pnpm client dev
 │   └── ui
 ...
 ```
+
+## Skill set
+
+```txt
+- application
+  Next.js - App Router
+
+- core library
+  Storybook
+  Typescript
+  emotion
+  @tanstack/react-query
+  axios
+```
diff --git a/apps/admin/src/app/post/edit/[postSeq]/page.tsx b/apps/admin/src/app/post/edit/[postSeq]/page.tsx
index c22272d31..65d77c5c2 100644
--- a/apps/admin/src/app/post/edit/[postSeq]/page.tsx
+++ b/apps/admin/src/app/post/edit/[postSeq]/page.tsx
@@ -52,7 +52,7 @@ export default function EditPage({ params: { postSeq } }: EditPageProps) {
   const { data } = useGetPostDetail(postSeq);
 
   const isGallery = category === 'EVENT_GALLERY';
-  const gallerySubmitDisabled = isGallery && files.length === 0;
+  const galleryEditDisabled = isGallery && !prevFiles?.length && !files.length;
 
   const {
     register,
@@ -240,7 +240,7 @@ export default function EditPage({ params: { postSeq } }: EditPageProps) {
             <Button
               width='22.5625rem'
               type='submit'
-              disabled={gallerySubmitDisabled}
+              disabled={galleryEditDisabled}
             >
               완료
             </Button>
diff --git a/apps/admin/src/components/ApproveModal/index.tsx b/apps/admin/src/components/ApproveModal/index.tsx
index 055e20ff4..5f089c83f 100644
--- a/apps/admin/src/components/ApproveModal/index.tsx
+++ b/apps/admin/src/components/ApproveModal/index.tsx
@@ -13,7 +13,7 @@ const ApproveModal: React.FC<ApproveModalProps> = ({ close }) => {
   const { data: unApproveList, refetch } = useGetUnapproveList();
 
   return (
-    <S.ModalConatiner onClick={(e) => e.stopPropagation()}>
+    <S.ModalContainer onClick={(e) => e.stopPropagation()}>
       <S.ModalHeader>
         🤝 가입 요청
         <div onClick={close}>
@@ -29,7 +29,7 @@ const ApproveModal: React.FC<ApproveModalProps> = ({ close }) => {
           />
         ))}
       </S.ModalContent>
-    </S.ModalConatiner>
+    </S.ModalContainer>
   );
 };
 
diff --git a/apps/admin/src/components/ApproveModal/style.ts b/apps/admin/src/components/ApproveModal/style.ts
index 6a05985ca..e7391993c 100644
--- a/apps/admin/src/components/ApproveModal/style.ts
+++ b/apps/admin/src/components/ApproveModal/style.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const ModalConatiner = styled.div`
+export const ModalContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: absolute;
diff --git a/apps/admin/src/components/DeleteModal/index.tsx b/apps/admin/src/components/DeleteModal/index.tsx
index 03d968427..209d15216 100644
--- a/apps/admin/src/components/DeleteModal/index.tsx
+++ b/apps/admin/src/components/DeleteModal/index.tsx
@@ -9,7 +9,7 @@ const DeleteModal: React.FC<DeleteModalProps> = ({ onClick }) => (
     <S.DeletePostText>게시물 삭제</S.DeletePostText>
     <S.ReQuestionText>정말 게시물을 삭제하실건가요?</S.ReQuestionText>
     <S.ButtonForm method='dialog'>
-      <S.CancleButton>취소하기</S.CancleButton>
+      <S.CancelButton>취소하기</S.CancelButton>
       <S.DeleteButton onClick={onClick}>삭제하기</S.DeleteButton>
     </S.ButtonForm>
   </S.ModalWrapper>
diff --git a/apps/admin/src/components/DeleteModal/style.ts b/apps/admin/src/components/DeleteModal/style.ts
index bdcd89ff1..bffffba79 100644
--- a/apps/admin/src/components/DeleteModal/style.ts
+++ b/apps/admin/src/components/DeleteModal/style.ts
@@ -40,7 +40,7 @@ export const Button = styled.button`
   cursor: pointer;
 `;
 
-export const CancleButton = styled(Button)`
+export const CancelButton = styled(Button)`
   background: ${({ theme }) => theme.color.gray['040']};
   color: ${({ theme }) => theme.color.gray['080']};
 `;
diff --git a/apps/client/public/images/policy/Copyright1.png b/apps/client/public/images/policy/Copyright1.png
new file mode 100644
index 000000000..6c25ebf87
Binary files /dev/null and b/apps/client/public/images/policy/Copyright1.png differ
diff --git a/apps/client/public/images/policy/Copyright2.png b/apps/client/public/images/policy/Copyright2.png
new file mode 100644
index 000000000..35a49ad3d
Binary files /dev/null and b/apps/client/public/images/policy/Copyright2.png differ
diff --git a/apps/client/public/images/promotion/poster.png b/apps/client/public/images/promotion/poster.png
new file mode 100644
index 000000000..805b6b5fe
Binary files /dev/null and b/apps/client/public/images/promotion/poster.png differ
diff --git a/apps/client/public/video/promotion.webm b/apps/client/public/video/promotion.webm
new file mode 100644
index 000000000..6fb4ae4a2
Binary files /dev/null and b/apps/client/public/video/promotion.webm differ
diff --git a/apps/client/src/app/about/location/page.tsx b/apps/client/src/app/about/location/page.tsx
new file mode 100644
index 000000000..cbed0a6a0
--- /dev/null
+++ b/apps/client/src/app/about/location/page.tsx
@@ -0,0 +1,25 @@
+import { Location, Header, Footer } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 찾아오시는 길 페이지입니다.',
+  title: { absolute: '찾아오시는 길' },
+  openGraph: {
+    title: '찾아오시는 길',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 찾아오시는 길 페이지입니다.',
+    url: 'https://official.hellogsm.kr/about/location',
+  },
+};
+
+export default function LocationPage() {
+  return (
+    <>
+      <Header segment='about' />
+      <Location />
+      <Footer />
+    </>
+  );
+}
diff --git a/apps/client/src/app/policy/cctv/page.tsx b/apps/client/src/app/policy/cctv/page.tsx
new file mode 100644
index 000000000..9137ac76d
--- /dev/null
+++ b/apps/client/src/app/policy/cctv/page.tsx
@@ -0,0 +1,25 @@
+import { Footer, Header, MediaPolicy } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 영상정보처리기기 운영ㆍ관리 방침 페이지입니다.',
+  title: { absolute: '영상정보처리기기 운영ㆍ관리 방침' },
+  openGraph: {
+    title: '영상정보처리기기 운영ㆍ관리 방침',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 영상정보처리기기 운영ㆍ관리 방침 페이지입니다.',
+    url: 'https://official.hellogsm.kr/policy/copyright',
+  },
+};
+
+export default function cctvPage() {
+  return (
+    <>
+      <Header segment='about' />
+      <MediaPolicy />
+      <Footer />
+    </>
+  );
+}
diff --git a/apps/client/src/app/policy/copyright/page.tsx b/apps/client/src/app/policy/copyright/page.tsx
new file mode 100644
index 000000000..c08ab4630
--- /dev/null
+++ b/apps/client/src/app/policy/copyright/page.tsx
@@ -0,0 +1,25 @@
+import { Footer, Header, CopyrightPolicy } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 저작권신고 및 보호규정 페이지입니다.',
+  title: { absolute: '저작권신고 및 보호규정' },
+  openGraph: {
+    title: '저작권신고 및 보호규정',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 저작권신고 및 보호규정 페이지입니다.',
+    url: 'https://official.hellogsm.kr/policy/copyright',
+  },
+};
+
+export default function CopyrightPage() {
+  return (
+    <>
+      <Header segment='about' />
+      <CopyrightPolicy />
+      <Footer />
+    </>
+  );
+}
diff --git a/apps/client/src/app/policy/privacy/page.tsx b/apps/client/src/app/policy/privacy/page.tsx
new file mode 100644
index 000000000..5cec8569f
--- /dev/null
+++ b/apps/client/src/app/policy/privacy/page.tsx
@@ -0,0 +1,25 @@
+import { PrivacyPolicy, Header, Footer } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 개인정보처리방침 페이지입니다.',
+  title: { absolute: '개인정보처리방침' },
+  openGraph: {
+    title: '개인정보처리방침',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 개인정보처리방침 페이지입니다.',
+    url: 'https://official.hellogsm.kr/policy/privacy',
+  },
+};
+
+export default function Privacy() {
+  return (
+    <>
+      <Header segment='about' />
+      <PrivacyPolicy />
+      <Footer />
+    </>
+  );
+}
diff --git a/apps/client/src/app/post/[postSeq]/page.tsx b/apps/client/src/app/post/[postSeq]/page.tsx
index f1975446f..17ba75fe5 100644
--- a/apps/client/src/app/post/[postSeq]/page.tsx
+++ b/apps/client/src/app/post/[postSeq]/page.tsx
@@ -4,6 +4,8 @@ import { Footer, Header, AssembledPost } from 'client/components';
 
 import { postUrl } from 'api/client';
 
+import { descriptionFormatting } from 'common';
+
 import type { PostDetailType } from 'types';
 
 import type { Metadata } from 'next';
@@ -12,11 +14,13 @@ interface PostPageProps {
   params: { postSeq: string };
 }
 
-export default function PostPage({ params: { postSeq } }: PostPageProps) {
+export default async function PostPage({ params: { postSeq } }: PostPageProps) {
+  const post = await getPostDetail(parseInt(postSeq));
+
   return (
     <>
       <Header segment='list' />
-      <AssembledPost postSeq={parseInt(postSeq)} />
+      <AssembledPost post={post} postSeq={parseInt(postSeq)} />
       <Footer />
     </>
   );
@@ -28,9 +32,7 @@ export const generateMetadata = async ({
   try {
     const postSeq = Number(params.postSeq);
 
-    const post: PostDetailType = await fetch(
-      `${process.env.BASE_URL}/api/client${postUrl.postDetail(postSeq)}`
-    ).then((res) => res.json());
+    const post = await getPostDetail(postSeq);
 
     return {
       title: { absolute: post.postTitle },
@@ -46,5 +48,17 @@ export const generateMetadata = async ({
   }
 };
 
-const descriptionFormatting = (description: string) =>
-  description.replace(/\n/g, ' ').replace(/\s+/g, ' ').slice(0, 120);
+async function getPostDetail(postSeq: number) {
+  const res = await fetch(
+    `${process.env.BASE_URL}/api/client${postUrl.postDetail(postSeq)}`,
+    {
+      next: {
+        revalidate: 60,
+      },
+    }
+  );
+
+  const data: PostDetailType = await res.json();
+
+  return data;
+}
diff --git a/apps/client/src/assets/index.ts b/apps/client/src/assets/index.ts
index dc7954da9..d1898b376 100644
--- a/apps/client/src/assets/index.ts
+++ b/apps/client/src/assets/index.ts
@@ -1,6 +1,7 @@
 export { default as ArrowIcon } from './svg/icon/ArrowIcon';
 export { default as ChevronIcon } from './svg/icon/ChevronIcon';
 export { default as CloseIcon } from './svg/icon/CloseIcon';
+export { default as ContactIcon } from './svg/icon/ContactIcon';
 export { default as DownChevronsIcon } from './about/section1/DownChevronsIcon';
 export { default as DreamIcon } from './about/section3/DreamIcon';
 export { default as FooterGSMLogo } from './svg/FooterGSMLogo';
@@ -10,8 +11,11 @@ export { default as HeaderGSMLogo } from './svg/HeaderGSMLogo';
 export { default as HomeScrollDownIcon } from './svg/icon/HomeScrollDownIcon';
 export { default as ImaginationIcon } from './about/section3/ImaginationIcon';
 export { default as LeftArrowIcon } from './about/section7/LeftArrowIcon';
+export { default as MapIcon } from './svg/icon/MapIcon';
+export { default as MarkIcon } from './svg/icon/MarkIcon';
 export { default as MouseIcon } from './about/section1/MouseIcon';
 export { default as NotFoundTitle } from './svg/NotFoundTitle';
 export { default as ReturnChevronIcon } from './svg/icon/ReturnChevronIcon';
 export { default as RightArrowIcon } from './about/section7/RightArrowIcon';
+export { default as SubwayIcon } from './svg/icon/SubwayIcon';
 export { default as UnderscoreIcon } from './svg/icon/UnderscoreIcon';
diff --git a/apps/client/src/assets/svg/icon/ContactIcon.tsx b/apps/client/src/assets/svg/icon/ContactIcon.tsx
new file mode 100644
index 000000000..b065faed5
--- /dev/null
+++ b/apps/client/src/assets/svg/icon/ContactIcon.tsx
@@ -0,0 +1,19 @@
+const ContactIcon = () => (
+  <svg
+    width='24'
+    height='25'
+    viewBox='0 0 24 25'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M2.25 7.25C2.25 15.534 8.966 22.25 17.25 22.25H19.5C20.0967 22.25 20.669 22.0129 21.091 21.591C21.5129 21.169 21.75 20.5967 21.75 20V18.628C21.75 18.112 21.399 17.662 20.898 17.537L16.475 16.431C16.035 16.321 15.573 16.486 15.302 16.848L14.332 18.141C14.05 18.517 13.563 18.683 13.122 18.521C11.4849 17.9191 9.99815 16.9686 8.76478 15.7352C7.53141 14.5018 6.58087 13.0151 5.979 11.378C5.817 10.937 5.983 10.45 6.359 10.168L7.652 9.198C8.015 8.927 8.179 8.464 8.069 8.025L6.963 3.602C6.90214 3.35869 6.76172 3.1427 6.56405 2.98834C6.36638 2.83397 6.1228 2.75008 5.872 2.75H4.5C3.90326 2.75 3.33097 2.98705 2.90901 3.40901C2.48705 3.83097 2.25 4.40326 2.25 5V7.25Z'
+      stroke='#003365'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default ContactIcon;
diff --git a/apps/client/src/assets/svg/icon/MapIcon.tsx b/apps/client/src/assets/svg/icon/MapIcon.tsx
new file mode 100644
index 000000000..23a201887
--- /dev/null
+++ b/apps/client/src/assets/svg/icon/MapIcon.tsx
@@ -0,0 +1,19 @@
+const MapIcon = () => (
+  <svg
+    width='28'
+    height='28'
+    viewBox='0 0 28 28'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M10.5 7.87575V17.5007M17.5 10.5007V20.1257M18.0868 24.2067L23.7743 21.3636C24.2188 21.1419 24.5 20.6869 24.5 20.1899V5.62408C24.5 4.64875 23.4733 4.01408 22.6007 4.45041L18.0868 6.70675C17.717 6.89225 17.2818 6.89225 16.9132 6.70675L11.0868 3.79475C10.9046 3.70367 10.7037 3.65625 10.5 3.65625C10.2963 3.65625 10.0954 3.70367 9.91317 3.79475L4.22567 6.63791C3.78 6.86075 3.5 7.31575 3.5 7.81158V22.3774C3.5 23.3527 4.52667 23.9874 5.39933 23.5511L9.91317 21.2947C10.283 21.1092 10.7182 21.1092 11.0868 21.2947L16.9132 24.2079C17.283 24.3922 17.7182 24.3922 18.0868 24.2079V24.2067Z'
+      stroke='white'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default MapIcon;
diff --git a/apps/client/src/assets/svg/icon/MarkIcon.tsx b/apps/client/src/assets/svg/icon/MarkIcon.tsx
new file mode 100644
index 000000000..b0caf5ec0
--- /dev/null
+++ b/apps/client/src/assets/svg/icon/MarkIcon.tsx
@@ -0,0 +1,26 @@
+const MarkIcon = () => (
+  <svg
+    width='24'
+    height='25'
+    viewBox='0 0 24 25'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M15 11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11C9 10.2044 9.31607 9.44129 9.87868 8.87868C10.4413 8.31607 11.2044 8 12 8C12.7956 8 13.5587 8.31607 14.1213 8.87868C14.6839 9.44129 15 10.2044 15 11Z'
+      stroke='#003365'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <path
+      d='M19.5 11C19.5 18.142 12 22.25 12 22.25C12 22.25 4.5 18.142 4.5 11C4.5 9.01088 5.29018 7.10322 6.6967 5.6967C8.10322 4.29018 10.0109 3.5 12 3.5C13.9891 3.5 15.8968 4.29018 17.3033 5.6967C18.7098 7.10322 19.5 9.01088 19.5 11Z'
+      stroke='#003365'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default MarkIcon;
diff --git a/apps/client/src/assets/svg/icon/SubwayIcon.tsx b/apps/client/src/assets/svg/icon/SubwayIcon.tsx
new file mode 100644
index 000000000..5969d2a71
--- /dev/null
+++ b/apps/client/src/assets/svg/icon/SubwayIcon.tsx
@@ -0,0 +1,46 @@
+const MapIcon = () => (
+  <svg
+    width='22'
+    height='22'
+    viewBox='0 0 22 22'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <rect
+      x='1.3335'
+      y='1.33398'
+      width='19.3333'
+      height='16.6667'
+      rx='3'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <line
+      x1='1.6665'
+      y1='6'
+      x2='20.3332'
+      y2='6'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <line
+      x1='1.6665'
+      y1='10'
+      x2='20.3332'
+      y2='10'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <circle cx='10.9998' cy='13.6673' r='1.33333' fill='white' />
+    <path
+      d='M6.3335 19H8.3335L7.00016 21.6667H4.3335L6.3335 19Z'
+      fill='white'
+    />
+    <path
+      d='M15.6665 19H13.6665L14.9998 21.6667H17.6665L15.6665 19Z'
+      fill='white'
+    />
+  </svg>
+);
+
+export default MapIcon;
diff --git a/apps/client/src/components/About/Location/Map/index.tsx b/apps/client/src/components/About/Location/Map/index.tsx
new file mode 100644
index 000000000..99a9b9e93
--- /dev/null
+++ b/apps/client/src/components/About/Location/Map/index.tsx
@@ -0,0 +1,71 @@
+import { useRef } from 'react';
+
+import Script from 'next/script';
+
+import styled from '@emotion/styled';
+
+interface MapProps {
+  latitude: number;
+  longitude: number;
+}
+
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
+
+function Map({ latitude, longitude }: MapProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const onLoadKakaoMap = () => {
+    window.kakao.maps.load(() => {
+      const options = {
+        center: new window.kakao.maps.LatLng(latitude, longitude),
+      };
+
+      const map = new window.kakao.maps.Map(containerRef.current, options);
+
+      const markerPosition = new window.kakao.maps.LatLng(latitude, longitude);
+
+      const marker = new window.kakao.maps.Marker({
+        position: markerPosition,
+      });
+
+      const infoWindow = new window.kakao.maps.InfoWindow({
+        content:
+          '<div style="width: 250px; padding: 10px;">광주소프트웨어마이스터고등학교</div>',
+        removable: true,
+      });
+
+      window.kakao.maps.event.addListener(marker, 'click', function () {
+        infoWindow.open(map, marker);
+      });
+
+      marker.setMap(map);
+    });
+  };
+
+  return (
+    <>
+      <Script
+        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false`}
+        onLoad={onLoadKakaoMap}
+      />
+      <MapContainer id='map' ref={containerRef} />
+    </>
+  );
+}
+
+const MapContainer = styled.div`
+  width: 77.5rem;
+  height: 25rem;
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+`;
+
+export default Map;
diff --git a/apps/client/src/components/About/Location/index.tsx b/apps/client/src/components/About/Location/index.tsx
new file mode 100644
index 000000000..0fe76cbef
--- /dev/null
+++ b/apps/client/src/components/About/Location/index.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import * as I from 'client/assets';
+import { useGetWindowWidth } from 'client/hooks';
+
+import Map from './Map';
+import * as S from './style';
+
+const schoolCoordinate = {
+  latitude: 35.14273861528659,
+  longitude: 126.80073120716628,
+} as const;
+
+const Location = () => {
+  const width = useGetWindowWidth();
+
+  return (
+    <S.Location>
+      <S.ContentBox>
+        <S.Title>🔍 찾아오시는 길</S.Title>
+        <S.Line />
+        <S.Map>
+          <Map {...schoolCoordinate} />
+        </S.Map>
+        <S.MapContentBox>
+          <S.AddressAndContactBox>
+            <S.Address>
+              <S.IconBox>
+                {width < 600 ? (
+                  <S.Circle>
+                    <I.MarkIcon />
+                  </S.Circle>
+                ) : (
+                  <I.MarkIcon />
+                )}
+                <S.Subtitle>주소</S.Subtitle>
+              </S.IconBox>
+              <S.Desc>
+                광주광역시 광산구 상무대로 312 광주소프트웨어마이스터고등학교
+              </S.Desc>
+            </S.Address>
+            <S.Contact>
+              <S.IconBox>
+                {width < 600 ? (
+                  <S.Circle>
+                    <I.ContactIcon />
+                  </S.Circle>
+                ) : (
+                  <I.ContactIcon />
+                )}
+                <S.Subtitle>연락처</S.Subtitle>
+              </S.IconBox>
+              <S.Desc>
+                교무실 062)949-6800
+                <br />
+                (08:30~16:30)
+              </S.Desc>
+            </S.Contact>
+          </S.AddressAndContactBox>
+          {width > 600 && <S.Divide />}
+          <S.OnTheWayBox>
+            <S.Walk>
+              <S.Circle>
+                <I.MapIcon />
+              </S.Circle>
+              <S.DescBox>
+                <S.Subtitle>도보 이용 시</S.Subtitle>
+                <S.Desc>도미노 피자 건물 건너편</S.Desc>
+              </S.DescBox>
+            </S.Walk>
+            <S.Subway>
+              <S.Circle>
+                <I.SubwayIcon />
+              </S.Circle>
+              <S.DescBox>
+                <S.Subtitle>지하철 이용 시</S.Subtitle>
+                <S.Desc>송정공원역 1번출구 220m 앞</S.Desc>
+              </S.DescBox>
+            </S.Subway>
+          </S.OnTheWayBox>
+        </S.MapContentBox>
+      </S.ContentBox>
+    </S.Location>
+  );
+};
+
+export default Location;
diff --git a/apps/client/src/components/About/Location/style.ts b/apps/client/src/components/About/Location/style.ts
new file mode 100644
index 000000000..6e30eac22
--- /dev/null
+++ b/apps/client/src/components/About/Location/style.ts
@@ -0,0 +1,199 @@
+import styled from '@emotion/styled';
+
+export const Location = styled.div`
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem 0 7.5rem;
+`;
+
+export const ContentBox = styled.div`
+  width: 77.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    justify-content: space-evenly;
+  }
+`;
+
+export const Title = styled.div`
+  color: ${({ theme }) => theme.color.black};
+  font-size: 2.125rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 3.125rem;
+`;
+
+export const Line = styled.div`
+  height: 0.0625rem;
+  margin-top: 1.75rem;
+  margin-bottom: 2.25rem;
+  background: ${({ theme }) => theme.color.gray['050']};
+`;
+
+export const Map = styled.div`
+  width: 77.5rem;
+  height: 25rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+`;
+
+export const MapContentBox = styled.div`
+  width: 77.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    margin-top: 3.75rem;
+    flex-direction: column;
+    gap: 3.75rem;
+  }
+`;
+
+export const AddressAndContactBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2.75rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+`;
+
+export const OnTheWayBox = styled.div`
+  display: flex;
+  gap: 3.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    flex-direction: column;
+  }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+`;
+
+export const Address = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+export const Subtitle = styled.div`
+  ${({ theme }) => theme.typo.h4};
+  color: ${({ theme }) => theme.color.primary.navy};
+  font-weight: 700;
+`;
+
+export const Desc = styled.div`
+  color: ${({ theme }) => theme.color.gray['080']};
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    text-align: center;
+  }
+`;
+
+export const Contact = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+export const IconBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    flex-direction: column;
+  }
+`;
+
+export const DescBox = styled.div`
+  height: 3.5625rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const Walk = styled.div`
+  display: flex;
+  gap: 1.25rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    height: 8.8125rem;
+  }
+`;
+
+export const Subway = styled.div`
+  display: flex;
+  gap: 1.25rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    height: 8.8125rem;
+  }
+`;
+
+export const Circle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  background: ${({ theme }) => theme.color.primary.navy};
+  border-radius: 100%;
+  path {
+    stroke: ${({ theme }) => theme.color.white};
+  }
+`;
+
+export const Divide = styled.div`
+  width: 0.25rem;
+  height: 10rem;
+  background: ${({ theme }) => theme.color.gray['030']};
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    display: none;
+  }
+`;
diff --git a/apps/client/src/components/Footer/index.tsx b/apps/client/src/components/Footer/index.tsx
index 932e66104..e004ee546 100644
--- a/apps/client/src/components/Footer/index.tsx
+++ b/apps/client/src/components/Footer/index.tsx
@@ -22,10 +22,11 @@ const Footer = () => {
               ALL RIGHTS RESERVED.
             </S.Copyright>
             <S.LinkWrapper>
-              <Link href='#'>개인정보처리방침</Link>
+              <Link href='/policy/privacy'>개인정보처리방침</Link>
               <Link href='#'>영상정보처리기기운영·관리방침</Link>
-              <Link href='#'>저작권신고 및 보호규정</Link>
-              <Link href='#'>찾아오시는 길</Link>
+              <Link href='/policy/copyright'>저작권신고 및 보호규정</Link>
+              <Link href='/about/location'>찾아오시는 길</Link>
+              <a href='https://admin.official.hellogsm.kr/'>관리자</a>
             </S.LinkWrapper>
           </S.SiteInfo>
           <S.SchoolInfo>
diff --git a/apps/client/src/components/GalleryCard/index.tsx b/apps/client/src/components/GalleryCard/index.tsx
index 9044db304..99c5422c7 100644
--- a/apps/client/src/components/GalleryCard/index.tsx
+++ b/apps/client/src/components/GalleryCard/index.tsx
@@ -17,7 +17,7 @@ const GalleryCard: React.FC<GalleryCardProps> = ({
 }) => (
   <S.GalleryCard href={`/post/${postSeq}`}>
     <S.IMGWrapper>
-      <Image src={thumbnailUrl ?? ''} alt='content image' fill />
+      <Image src={thumbnailUrl ?? ''} alt='content image' fill sizes='400px' />
     </S.IMGWrapper>
     <S.TextBox>
       <S.Title className='text'>{postTitle}</S.Title>
diff --git a/apps/client/src/components/GalleryCard/style.ts b/apps/client/src/components/GalleryCard/style.ts
index 5ebed93b1..11c17974e 100644
--- a/apps/client/src/components/GalleryCard/style.ts
+++ b/apps/client/src/components/GalleryCard/style.ts
@@ -53,7 +53,7 @@ export const TextBox = styled.div`
   }
 `;
 
-export const Title = styled.h5`
+export const Title = styled.h3`
   ${({ theme }) => theme.typo.h5}
   color: ${({ theme }) => theme.color.gray['090']};
   font-weight: 600;
diff --git a/apps/client/src/components/Header/index.tsx b/apps/client/src/components/Header/index.tsx
index 715698833..018106dfe 100644
--- a/apps/client/src/components/Header/index.tsx
+++ b/apps/client/src/components/Header/index.tsx
@@ -10,6 +10,7 @@ import { css, useTheme } from '@emotion/react';
 
 import { HamburgerIcon, HeaderGSMLogo } from 'client/assets';
 import { HamburgerMenu } from 'client/components';
+import { useScrollToTop } from 'client/hooks';
 import { useGetWindowWidth } from 'client/hooks';
 
 import * as S from './style';
@@ -25,6 +26,8 @@ const Header: React.FC<HeaderProps> = ({
   segment,
   isAbovePromotionVideo = false,
 }) => {
+  useScrollToTop();
+
   const [isHamburgerMenuShow, setIsHamburgerMenuShow] =
     useState<boolean>(false);
 
@@ -55,7 +58,7 @@ const Header: React.FC<HeaderProps> = ({
     >
       <S.HeaderInner>
         <h1>
-          <S.LogoLink href='/'>
+          <S.LogoLink href='/' aria-label='logo'>
             <HeaderGSMLogo isAbovePromotionVideo={isAbovePromotionVideo} />
           </S.LogoLink>
         </h1>
diff --git a/apps/client/src/components/LinkToHelloGSM/style.ts b/apps/client/src/components/LinkToHelloGSM/style.ts
index beff2d946..997a6eea2 100644
--- a/apps/client/src/components/LinkToHelloGSM/style.ts
+++ b/apps/client/src/components/LinkToHelloGSM/style.ts
@@ -64,7 +64,7 @@ export const HashTagWrapper = styled.div`
   gap: 1rem;
 `;
 
-export const HashTag = styled.h4`
+export const HashTag = styled.p`
   ${({ theme: { typo } }) => typo.h4}
   color: ${({ theme: { color } }) => color.white};
   font-weight: 400;
diff --git a/apps/client/src/components/MainPage/GalleryList/index.stories.tsx b/apps/client/src/components/MainPage/GalleryList/index.stories.tsx
index 3273ad3e1..eb88aaa55 100644
--- a/apps/client/src/components/MainPage/GalleryList/index.stories.tsx
+++ b/apps/client/src/components/MainPage/GalleryList/index.stories.tsx
@@ -1,14 +1,14 @@
-import GallaryList from '.';
+import GalleryList from '.';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 export default {
-  title: 'client/MainPage/GallaryList',
-  component: GallaryList,
+  title: 'client/MainPage/GalleryList',
+  component: GalleryList,
   parameters: {},
-} as Meta<typeof GallaryList>;
+} as Meta<typeof GalleryList>;
 
-type Story = StoryObj<typeof GallaryList>;
+type Story = StoryObj<typeof GalleryList>;
 
 export const Primary: Story = {
   args: {},
diff --git a/apps/client/src/components/MainPage/NewsletterList/style.ts b/apps/client/src/components/MainPage/NewsletterList/style.ts
index 529d814f2..cd01d021d 100644
--- a/apps/client/src/components/MainPage/NewsletterList/style.ts
+++ b/apps/client/src/components/MainPage/NewsletterList/style.ts
@@ -24,7 +24,10 @@ export const NewsletterList = styled.div`
     background: rgba(178, 228, 73, 0.1);
     .dateCircle {
       background-color: ${({ theme: { color } }) => color.primary.lime};
-      color: #73962b;
+      color: ${({ theme }) => theme.color.sub.green};
+    }
+    & > div:nth-of-type(1) > p {
+      color: ${({ theme }) => theme.color.sub.green};
     }
   }
 
diff --git a/apps/client/src/components/NewsletterCard/style.ts b/apps/client/src/components/NewsletterCard/style.ts
index 66b4b946b..dd47ad169 100644
--- a/apps/client/src/components/NewsletterCard/style.ts
+++ b/apps/client/src/components/NewsletterCard/style.ts
@@ -50,7 +50,8 @@ export const TextWrapper = styled.div`
   flex-direction: column;
   gap: 0.625rem;
 
-  h4 {
+  h3,
+  p {
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -58,14 +59,14 @@ export const TextWrapper = styled.div`
   }
 `;
 
-export const Title = styled.h4`
+export const Title = styled.h3`
   ${({ theme: { typo } }) => typo.h4}
   color: ${({ theme: { color } }) => color.gray['090']};
   font-weight: 600;
   height: 3.625rem;
 `;
 
-export const Preview = styled.h4`
+export const Preview = styled.p`
   ${({ theme: { typo } }) => typo.body1}
   color: ${({ theme: { color } }) => color.gray['080']};
   font-weight: 400;
diff --git a/apps/client/src/components/NoticeBanner/Banner/index.tsx b/apps/client/src/components/NoticeBanner/Banner/index.tsx
index fdc361cbc..a9e37b6bc 100644
--- a/apps/client/src/components/NoticeBanner/Banner/index.tsx
+++ b/apps/client/src/components/NoticeBanner/Banner/index.tsx
@@ -18,7 +18,7 @@ const Banner: React.FC<BannerProps> = ({
       <S.Preview>{contentPreview}</S.Preview>
     </S.TextBox>
     <S.DonutImageWrapper>
-      <Image src='/images/notice/Donut.png' alt='donut' fill />
+      <Image src='/images/notice/Donut.png' alt='donut' fill sizes='250px' />
     </S.DonutImageWrapper>
   </S.Banner>
 );
diff --git a/apps/client/src/components/NoticeBanner/Banner/style.ts b/apps/client/src/components/NoticeBanner/Banner/style.ts
index 8f535bbf8..25bdd4712 100644
--- a/apps/client/src/components/NoticeBanner/Banner/style.ts
+++ b/apps/client/src/components/NoticeBanner/Banner/style.ts
@@ -55,7 +55,7 @@ export const TextBox = styled.div`
   }
 `;
 
-export const Text = styled.h5`
+export const Text = styled.p`
   font-weight: 600;
   ${({ theme: { typo } }) => typo.h5};
 `;
@@ -66,7 +66,7 @@ export const Title = styled.p`
   ${({ theme: { typo } }) => typo.title};
 `;
 
-export const Preview = styled.h4`
+export const Preview = styled.p`
   margin-top: 0.5rem;
   font-weight: 400;
   ${({ theme: { typo } }) => typo.h4};
diff --git a/apps/client/src/components/Policy/BulletItem/index.stories.tsx b/apps/client/src/components/Policy/BulletItem/index.stories.tsx
new file mode 100644
index 000000000..f22fe2b4b
--- /dev/null
+++ b/apps/client/src/components/Policy/BulletItem/index.stories.tsx
@@ -0,0 +1,25 @@
+import BulletItem from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'client/Policy/BulletItem',
+  component: BulletItem,
+} as Meta<typeof BulletItem>;
+
+type Story = StoryObj<typeof BulletItem>;
+
+export const Light: Story = {
+  args: {
+    children:
+      '광주소프트웨어마이스터고등학교가 취급하는 모든 개인정보는 개인정보보호법 등 관련 법령상의 개인정보보호 규정을 준수하여 이용자의 개인정보보호 및 권익을 보호하고 개인정보와 관련한 이용자의 고충을 원활하게 처리할 수 있도록 다음과 같은 처리방침을 두고 있습니다. ',
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    isDark: true,
+    children:
+      '광주소프트웨어마이스터고등학교가 취급하는 모든 개인정보는 개인정보보호법 등 관련 법령상의 개인정보보호 규정을 준수하여 이용자의 개인정보보호 및 권익을 보호하고 개인정보와 관련한 이용자의 고충을 원활하게 처리할 수 있도록 다음과 같은 처리방침을 두고 있습니다. ',
+  },
+};
diff --git a/apps/client/src/components/Policy/BulletItem/index.tsx b/apps/client/src/components/Policy/BulletItem/index.tsx
new file mode 100644
index 000000000..db2b2e77c
--- /dev/null
+++ b/apps/client/src/components/Policy/BulletItem/index.tsx
@@ -0,0 +1,24 @@
+/** @jsxImportSource @emotion/react */
+
+'use client';
+
+import * as S from './style';
+
+interface BulletItemProps {
+  children: React.ReactNode;
+  isSmall?: boolean;
+  isDark?: boolean;
+}
+
+const BulletItem: React.FC<BulletItemProps> = ({
+  children,
+  isDark = false,
+  isSmall = false,
+}) => (
+  <S.BulletItemWrapper>
+    <S.Bullet isDark={isDark} />
+    <S.Text isSmall={isSmall}>{children}</S.Text>
+  </S.BulletItemWrapper>
+);
+
+export default BulletItem;
diff --git a/apps/client/src/components/Policy/BulletItem/style.ts b/apps/client/src/components/Policy/BulletItem/style.ts
new file mode 100644
index 000000000..edd7d766d
--- /dev/null
+++ b/apps/client/src/components/Policy/BulletItem/style.ts
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+export const BulletItemWrapper = styled.div`
+  display: flex;
+  gap: 0.75rem;
+`;
+
+export const Bullet = styled.div<{ isDark: boolean }>`
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background: ${({ isDark, theme }) =>
+    isDark ? theme.color.gray['060'] : theme.color.primary.lime};
+  margin-top: 0.5938rem;
+`;
+
+export const Text = styled.p<{ isSmall: boolean }>`
+  ${({ theme, isSmall }) => (isSmall ? theme.typo.h5 : theme.typo.h4)}
+  width: 76.125rem;
+  font-weight: 400;
+  color: ${({ theme }) => theme.color.gray['070']};
+`;
diff --git a/apps/client/src/components/Policy/Copyright/index.stories.tsx b/apps/client/src/components/Policy/Copyright/index.stories.tsx
new file mode 100644
index 000000000..cf9775749
--- /dev/null
+++ b/apps/client/src/components/Policy/Copyright/index.stories.tsx
@@ -0,0 +1,12 @@
+import CopyRight from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'client/Policy/CopyRight',
+  component: CopyRight,
+} as Meta<typeof CopyRight>;
+
+type Story = StoryObj<typeof CopyRight>;
+
+export const Primary: Story = {};
diff --git a/apps/client/src/components/Policy/Copyright/index.tsx b/apps/client/src/components/Policy/Copyright/index.tsx
new file mode 100644
index 000000000..124b59076
--- /dev/null
+++ b/apps/client/src/components/Policy/Copyright/index.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import { BulletItem } from 'client/components';
+
+import * as S from './style';
+
+const 저작관신고접수수령인정보 = [
+  '성명 및 소속부서 : 광주소프트웨어마이스터고등학교 개인정보보호책임관',
+  '전화번호 : 062)949-6801',
+  '주소 : 우)62423 광주광역시 광산구 상무대로 312',
+];
+
+const 게시중단요청신청방법 = [
+  '게시된 저작물에 의해 권리를 침해당하였다고 판단되면 해당 절차에 따라서 게시중단을 요청합니다.',
+  '게시된 저작물의 게시중단(복제·전송 중단)을 요청할 경우에는 아래 문서를 다운로드 하여 작성한 후 ‘저작권 신고 접수 수령인’에게 방문 또는 전자우편으로 신청합니다.',
+  '정당한 권리 없이 게시중단을 요청하면 법에 의해 손해배상의 책임이 있습니다.',
+];
+
+const 재게시요청신청방법 = [
+  '게시가 중단된 저작물을 게시한 이용자가 해당 저작물이 정당한 권리에 의한 게시라고 판단되면 해당 절차에 따라서 재게시를 요청합니다.',
+  '게시중단을 통보받은 저작물에 대하여 재 게시를 요청할 경우에는 아래 문서를 다운로드 하여 작성한 후 ‘저작권 신고 접수 수령인’에게 방문 또는 전자우편으로 접수합니다.',
+  '정당한 권리 없이 게시중단을 요청하면 법에 의해 손해배상의 책임이 있습니다.',
+  '게시자 이의신청자가 신청서 소명자료를 제출하여 신청을 하고 이를 신고 수령인이 접수하여 검토 후 YES인 경우는 서비스를 제공하고 NO인 경우는 재게시 불가 통보를한다.',
+  '검토 후 YES였던 경우 중 재게시가 발생하게 되면 재게시 승인통보를 한다.',
+];
+
+const CopyrightPolicy = () => (
+  <S.ContentWrapper>
+    <S.Section>
+      <S.Title>저작권신고 및 보호규정</S.Title>
+      <S.SubContentWrapper>
+        <S.RegularSubTitle>저작권신고 및 보호규정</S.RegularSubTitle>
+        <S.Description>
+          저작물의 무단 전재 및 배포시 저작권법 136조에 의거 최고 5년 이하의
+          징역 또는 5천만원 이하의 벌금에 처하거나 이를 병과 할 수 있습니다. 본
+          서비스는 게시된 저작물로 인하여 저작권을 침해받은 경우 이를 처리하기
+          위한 서비스입니다. 다음 사항을 참고하여 신고하여 주시기 바랍니다.
+        </S.Description>
+      </S.SubContentWrapper>
+      <S.SubContentWrapper>
+        <S.BoldSubTitle>저작권 신고 접수 수령인(담당자)</S.BoldSubTitle>
+        {저작관신고접수수령인정보.map((text, index) => (
+          <BulletItem key={index}>{text}</BulletItem>
+        ))}
+      </S.SubContentWrapper>
+      <S.SubContentWrapper>
+        <S.DownloadWrapper>
+          <S.BoldSubTitle>게시중단요청 신청</S.BoldSubTitle>
+          <S.DownloadButton>양식 다운로드</S.DownloadButton>
+        </S.DownloadWrapper>
+        {게시중단요청신청방법.map((text, index) => (
+          <BulletItem key={index}>{text}</BulletItem>
+        ))}
+      </S.SubContentWrapper>
+    </S.Section>
+    <S.Section>
+      <S.ImageWrapper>
+        <S.PolicyImage
+          alt='개시중단요청 신청'
+          src='/images/policy/Copyright1.png'
+          fill
+        />
+      </S.ImageWrapper>
+      <S.SubContentWrapper>
+        <S.BoldSubTitle>재게시요청 신청</S.BoldSubTitle>
+        {재게시요청신청방법.map((text, index) => (
+          <BulletItem key={index}>{text}</BulletItem>
+        ))}
+      </S.SubContentWrapper>
+    </S.Section>
+    <S.ImageWrapper>
+      <S.PolicyImage
+        alt='재게시요청 신청'
+        src='/images/policy/Copyright2.png'
+        fill
+      />
+    </S.ImageWrapper>
+  </S.ContentWrapper>
+);
+
+export default CopyrightPolicy;
diff --git a/apps/client/src/components/Policy/Copyright/style.ts b/apps/client/src/components/Policy/Copyright/style.ts
new file mode 100644
index 000000000..6ea2261a1
--- /dev/null
+++ b/apps/client/src/components/Policy/Copyright/style.ts
@@ -0,0 +1,81 @@
+import Image from 'next/image';
+
+import styled from '@emotion/styled';
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ContentWrapper = styled(Column)`
+  width: 77.5rem;
+  gap: 5rem;
+  padding: 5rem 0 7.5rem;
+  margin: 0 auto;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+`;
+
+export const Section = styled(Column)`
+  gap: 3rem;
+`;
+
+export const Title = styled.h2`
+  ${({ theme }) => theme.typo.h2};
+  color: ${({ theme }) => theme.color.gray['090']};
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+`;
+
+export const SubContentWrapper = styled(Column)`
+  gap: 0.5rem;
+`;
+
+export const RegularSubTitle = styled.p`
+  ${({ theme }) => theme.typo.h3};
+  color: ${({ theme }) => theme.color.gray['090']};
+  font-weight: 400;
+`;
+
+export const BoldSubTitle = styled(RegularSubTitle)`
+  font-weight: 600;
+`;
+
+export const Description = styled.p`
+  ${({ theme }) => theme.typo.h4};
+  color: ${({ theme }) => theme.color.gray['070']};
+  font-weight: 400;
+`;
+
+export const DownloadWrapper = styled.div`
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+`;
+
+export const DownloadButton = styled.button`
+  ${({ theme }) => theme.typo.body2};
+  color: ${({ theme }) => theme.color.gray['060']};
+  font-weight: 600;
+
+  width: 6rem;
+  height: 1.75rem;
+  border-radius: 0.25rem;
+  background: ${({ theme }) => theme.color.gray['040']};
+  cursor: pointer;
+`;
+
+export const ImageWrapper = styled.div`
+  max-width: 65.1875rem;
+  width: 100%;
+`;
+
+export const PolicyImage = styled(Image)`
+  position: relative !important;
+`;
diff --git a/apps/client/src/components/Policy/Media/index.tsx b/apps/client/src/components/Policy/Media/index.tsx
new file mode 100644
index 000000000..1938e3026
--- /dev/null
+++ b/apps/client/src/components/Policy/Media/index.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import { BulletItem } from 'client/components';
+import { useGetWindowWidth } from 'client/hooks';
+
+import * as S from './style';
+
+const 설치대수설치위치및촬영범위 = [
+  '설치대수: 45대',
+  '설치 위치 및 촬영범위: 본교 건물 내ㆍ외부 및 주차장',
+];
+
+const 개인영상정보의확인방법및장소에관한사항 = [
+  '확인방법: 영상정보 관리책임자에게 미리 연락하고 개인영상정보(열람, 존재확인) 청구서로 요청한 후 확인 가능합니다.',
+  '확인장소: 행정실',
+];
+
+const 영상정보의안전성확보조치 = [
+  '귀하는 개인영상정보에 관하여 열람 또는 존재확인, 삭제를 원하는 경우 언제든지 영상정보처리기기 운영자에게 요구하실 수 있습니다. 단, 귀하가 촬영된 개인영상정보 및 명백히 정보주체의 급박한 생명, 신체, 재산의 이익을 위하여 필요한 개인영상정보에 한정됩니다.',
+  '본 기관은 개인영상정보에 관하여 열람 또는 존재확인, 삭제를 요구한 경우 지체없이 필요한 조치를 하겠습니다.',
+];
+
+const MediaPolicy = () => {
+  const width = useGetWindowWidth();
+
+  return (
+    <S.ContentWrapper>
+      <S.Section>
+        <S.Title>영상정보처리기기 운영ㆍ관리 방침</S.Title>
+        <S.SubContentWrapper>
+          <S.RegularSubTitle>영상정보처리기기 운영.관리 방침</S.RegularSubTitle>
+          <S.Description>
+            본 광주소프트웨어마이스터고등학교(이하 본 기관이라 함)는
+            영상정보처리기기 운영․관리 방침을 통해 본 기관에서 처리하는
+            영상정보가 어떠한 용도와 방식으로 이용ㆍ관리되고 있는지
+            알려드립니다.
+          </S.Description>
+        </S.SubContentWrapper>
+        <S.SubContentWrapper>
+          <S.BoldSubTitle>
+            영상정보처리기기의 설치 근거 및 설치 목적
+          </S.BoldSubTitle>
+          <BulletItem>
+            쿠키의 사용 목적 : 자주 찾는 서비스를 설정할 수 있도록 하여
+            이용자에게 최적화된 정보 제공을 위해 사용됩니다.
+          </BulletItem>
+          <S.Description>
+            - 시설안전 및 화재 예방
+            <br /> - 차량도난 및 파손방지 : 주차장에 설치하는 경우
+            <br /> - 주차대수 30대를 초과하는 규모의 경우「주차장법
+            시행규칙」제6조제1항을 근거로 설치ㆍ운영 가능
+          </S.Description>
+        </S.SubContentWrapper>
+        <S.SubContentWrapper>
+          <S.BoldSubTitle>설치 대수, 설치 위치 및 촬영범위</S.BoldSubTitle>
+          {설치대수설치위치및촬영범위.map((text, index) => (
+            <BulletItem key={index}>{text}</BulletItem>
+          ))}
+        </S.SubContentWrapper>
+        <S.SubContentWrapper>
+          <S.BoldSubTitle>관리책임자 및 접근권한자</S.BoldSubTitle>
+          <S.Description>
+            귀하의 영상정보를 보호하고 개인영상정보와 관련한 불만을 처리하기
+            위하여 아래와 같이 개인영상정보 보호책임자를 두고 있습니다.
+          </S.Description>
+          {width > 1024 ? (
+            <S.Wrap>
+              <S.TableTitle className='first'>
+                <S.TableTitleContent>구분</S.TableTitleContent>
+                <S.TableTitleContent>이름</S.TableTitleContent>
+                <S.TableTitleContent>직위</S.TableTitleContent>
+                <S.TableTitleContent>소속</S.TableTitleContent>
+                <S.TableTitleContent>연락처</S.TableTitleContent>
+                <S.TableContent className='first'>
+                  <S.TableRowContent>관리책임자</S.TableRowContent>
+                  <S.TableRowContent>이수연</S.TableRowContent>
+                  <S.TableRowContent>실장</S.TableRowContent>
+                  <S.TableRowContent>행정실</S.TableRowContent>
+                  <S.TableRowContent>062-949-6803</S.TableRowContent>
+                  <S.TableRowContent>접근관리자</S.TableRowContent>
+                  <S.TableRowContent>장희연</S.TableRowContent>
+                  <S.TableRowContent>주무관</S.TableRowContent>
+                  <S.TableRowContent>행정실</S.TableRowContent>
+                  <S.TableRowContent>062-949-6808</S.TableRowContent>
+                </S.TableContent>
+              </S.TableTitle>
+            </S.Wrap>
+          ) : (
+            <>
+              <S.Wrap>
+                <S.TableTitle className='first'>
+                  <S.TableTitleContent>구분</S.TableTitleContent>
+                  <S.TableTitleContent>이름</S.TableTitleContent>
+                  <S.TableTitleContent>직위</S.TableTitleContent>
+                  <S.TableContent className='first'>
+                    <S.TableRowContent>관리책임자</S.TableRowContent>
+                    <S.TableRowContent>이수연</S.TableRowContent>
+                    <S.TableRowContent>실장</S.TableRowContent>
+                    <S.TableRowContent>접근관리자</S.TableRowContent>
+                    <S.TableRowContent>장희연</S.TableRowContent>
+                    <S.TableRowContent>주무관</S.TableRowContent>
+                  </S.TableContent>
+                </S.TableTitle>
+                <S.TableTitle className='divide'>
+                  <S.TableTitleContent>소속</S.TableTitleContent>
+                  <S.TableTitleContent>연락처</S.TableTitleContent>
+                  <S.TableContent className='divide'>
+                    <S.TableRowContent>행정실</S.TableRowContent>
+                    <S.TableRowContent>062-949-6803</S.TableRowContent>
+                    <S.TableRowContent>행정실</S.TableRowContent>
+                    <S.TableRowContent>062-949-6808</S.TableRowContent>
+                  </S.TableContent>
+                </S.TableTitle>
+              </S.Wrap>
+            </>
+          )}
+        </S.SubContentWrapper>
+        <S.SubContentWrapper>
+          <S.BoldSubTitle>
+            영상정보의 촬영시간, 보관기간, 보관장소 및 처리방법
+          </S.BoldSubTitle>
+          <BulletItem>
+            처리방법: 개인영상정보의 목적 외 이용, 제3자 제공, 파기, 열람 등
+            요구에 관한 사항을 기록ㆍ관리하고, 보관기간 만료 시 복원이 불가능한
+            방법으로 영구 삭제(출력물의 경우 파쇄 또는 소각)합니다.
+          </BulletItem>
+          <S.TableTitle className='second'>
+            <S.TableTitleContent>촬영시간</S.TableTitleContent>
+            <S.TableTitleContent>연락처</S.TableTitleContent>
+            <S.TableTitleContent>연락처</S.TableTitleContent>
+            <S.TableContent className='second'>
+              <S.TableRowContent>24시간</S.TableRowContent>
+              <S.TableRowContent>
+                - 촬영일로부터 20일
+                <br />- 보유기관 경과 자동삭제
+              </S.TableRowContent>
+              <S.TableRowContent>중앙통제실(당직실)</S.TableRowContent>
+            </S.TableContent>
+          </S.TableTitle>
+        </S.SubContentWrapper>
+        <S.SubContentWrapper>
+          <S.BoldSubTitle>
+            개인영상정보의 확인 방법 및 장소에 관한 사항
+          </S.BoldSubTitle>
+          {개인영상정보의확인방법및장소에관한사항.map((text, index) => (
+            <BulletItem key={index}>{text}</BulletItem>
+          ))}
+        </S.SubContentWrapper>
+        <S.SubContentWrapper>
+          <S.BoldSubTitle>
+            정보주체의 영상정보 열람 등 요구에 대한 조치
+          </S.BoldSubTitle>
+          <BulletItem>
+            본 기관에서 처리하는 영상정보는 다음과 같이 안전성 확보조치(관리적,
+            기술적, 물리적 조치)를 통해 안전하게 관리되고 있습니다. 본 기관은
+            개인영상정보를 위한 관리적 대책으로서 개인정보에 대한 접근 권한을
+            차등부여하고 있고, 개인영상정보의 위ㆍ변조 방지를 위하여
+            개인영상정보의 생성 일시, 열람시 열람 목적, 열람자, 열람 일시 등을
+            기록하여 관리하고 있습니다. 이 외에도 개인영상정보의 안전한 물리적
+            보관을 위하여 잠금장치를 설치하고 있습니다.
+          </BulletItem>
+        </S.SubContentWrapper>
+        <S.SubContentWrapper>
+          <S.BoldSubTitle>영상정보의 안전성 확보조치</S.BoldSubTitle>
+          {영상정보의안전성확보조치.map((text, index) => (
+            <BulletItem key={index}>{text}</BulletItem>
+          ))}
+        </S.SubContentWrapper>
+        <S.SubContentWrapper>
+          <S.BoldSubTitle>영상정보 처리방침 변경에 관한 사항</S.BoldSubTitle>
+          <BulletItem>
+            이 영상정보처리기기 운영․관리방침은 2019년 11월 22일에 제정되었으며
+            법령ㆍ정책 또는 보안기술의변경에 따라 내용의 추가ㆍ삭제 및 수정이
+            있을 시에는 본 기관 홈페이지를 통해 변경사유 및 내용 등을 공지하도록
+            하겠습니다.
+            <br />
+            공고일자 : 2019년 12월 2일 / 시행일자 : 2019년 12월 2일
+          </BulletItem>
+        </S.SubContentWrapper>
+      </S.Section>
+    </S.ContentWrapper>
+  );
+};
+
+export default MediaPolicy;
diff --git a/apps/client/src/components/Policy/Media/style.ts b/apps/client/src/components/Policy/Media/style.ts
new file mode 100644
index 000000000..ec5b081ff
--- /dev/null
+++ b/apps/client/src/components/Policy/Media/style.ts
@@ -0,0 +1,171 @@
+import styled from '@emotion/styled';
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ContentWrapper = styled(Column)`
+  width: 77.5rem;
+  gap: 5rem;
+  padding: 5rem 0 7.5rem;
+  margin: 0 auto;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+`;
+
+export const Section = styled(Column)`
+  gap: 3rem;
+`;
+export const Wrap = styled.div``;
+
+export const Title = styled.h2`
+  ${({ theme }) => theme.typo.h2};
+  color: ${({ theme }) => theme.color.gray['090']};
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+`;
+
+export const SubContentWrapper = styled(Column)`
+  gap: 0.5rem;
+
+  .first {
+    grid-template-columns: 20rem 12.5rem 12.5rem 12.5rem 20rem;
+
+    @media ${({ theme }) => theme.breakPoint['1440']} {
+      grid-template-columns: 20% 20% 20% 20% 20%;
+    }
+    @media ${({ theme }) => theme.breakPoint['1024']} {
+      grid-template-columns: 33% 33% 33%;
+    }
+
+    @media ${({ theme }) => theme.breakPoint['600']} {
+      grid-template-columns: 33% 33% 33%;
+    }
+  }
+  .divide {
+    grid-template-columns: 21.75rem 34.75rem;
+
+    @media ${({ theme }) => theme.breakPoint['1024']} {
+      grid-template-columns: 50% 50%;
+    }
+    @media ${({ theme }) => theme.breakPoint['600']} {
+      grid-template-columns: 50% 50%;
+    }
+  }
+  .second {
+    grid-template-columns: 20rem 32.5rem 25rem;
+
+    @media ${({ theme }) => theme.breakPoint['1440']} {
+      grid-template-columns: 33% 33% 33%;
+    }
+    @media ${({ theme }) => theme.breakPoint['1024']} {
+      grid-template-columns: 33% 33% 33%;
+    }
+
+    @media ${({ theme }) => theme.breakPoint['600']} {
+      grid-template-columns: 33% 33% 33%;
+    }
+  }
+
+  img {
+    margin-top: 0.9375rem;
+  }
+`;
+
+export const RegularSubTitle = styled.p`
+  ${({ theme }) => theme.typo.h3};
+  color: ${({ theme }) => theme.color.gray['090']};
+  font-weight: 400;
+`;
+
+export const BoldSubTitle = styled(RegularSubTitle)`
+  font-weight: 600;
+`;
+
+export const Description = styled.p`
+  ${({ theme }) => theme.typo.h4};
+  color: ${({ theme }) => theme.color.gray['070']};
+  font-weight: 400;
+`;
+
+export const TableTitle = styled.div`
+  display: grid;
+  margin-top: 0.75rem;
+  grid-template-rows: 3.75rem;
+
+  .first {
+    grid-template-columns: 20rem 12.5rem 12.5rem 12.5rem 20rem;
+    grid-template-rows: 3rem 3rem;
+
+    @media ${({ theme }) => theme.breakPoint['1440']} {
+      grid-template-columns: 100% 100% 100% 100% 100%;
+    }
+    @media ${({ theme }) => theme.breakPoint['1024']} {
+      grid-template-columns: 100% 100% 100%;
+    }
+
+    @media ${({ theme }) => theme.breakPoint['600']} {
+      grid-template-columns: 100% 100% 100%;
+    }
+  }
+  .divide {
+    grid-template-columns: 21.75rem 34.75rem;
+    grid-template-rows: 3rem 3rem;
+
+    @media ${({ theme }) => theme.breakPoint['1024']} {
+      grid-template-columns: 100% 100%;
+    }
+    @media ${({ theme }) => theme.breakPoint['600']} {
+      grid-template-columns: 100% 100%;
+    }
+  }
+  .second {
+    grid-template-columns: 20rem 32.5rem 25rem;
+    grid-template-rows: 4.5rem;
+
+    @media ${({ theme }) => theme.breakPoint['1440']} {
+      grid-template-columns: 100% 100% 100%;
+    }
+    @media ${({ theme }) => theme.breakPoint['1024']} {
+      grid-template-columns: 100% 100% 100%;
+    }
+
+    @media ${({ theme }) => theme.breakPoint['600']} {
+      grid-template-columns: 100% 100% 100%;
+    }
+  }
+`;
+
+export const TableContent = styled.div`
+  display: grid;
+`;
+
+export const TabelCellTemplate = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: ${({ theme }) => theme.color.gray['080']};
+  border: 0.0625rem solid ${({ theme }) => theme.color.gray['050']};
+  box-sizing: border-box;
+`;
+
+export const TableTitleContent = styled(TabelCellTemplate)`
+  background-color: ${({ theme }) => theme.color.gray['030']};
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.6875rem;
+`;
+
+export const TableRowContent = styled(TabelCellTemplate)`
+  ${({ theme }) => theme.typo.body1};
+  color: ${({ theme }) => theme.color.gray['070']};
+  font-weight: 400;
+`;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy1/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy1/index.tsx
new file mode 100644
index 000000000..434176584
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy1/index.tsx
@@ -0,0 +1,23 @@
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+const 개인정보의처리목적 = [
+  `광주소프트웨어마이스터고등학교는 대국민 서비스 제공
+  및 민원처리, 소관업무 수행 등의 목적으로 필요에 의한 최소한의 개인정보를
+  수집하고 있습니다.`,
+  `제1항에 대한 사항은 광주소프트웨어마이스터고등학교
+  및 각 부서에서 운영하는 소관업무 홈페이지에 게재하여 정보주체가 확인할 수
+  있도록 안내를 하고 있습니다.`,
+];
+
+const Policy1 = () => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>제 1조 (개인정보의 처리 목적)</S.PolicyTitle>
+    {개인정보의처리목적.map((description, index) => (
+      <S.SubTitle key={index}>
+        <span>{index + 1}.&nbsp;</span> {description}
+      </S.SubTitle>
+    ))}
+  </S.PolicyContentBox>
+);
+
+export default Policy1;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy10/Table900.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy10/Table900.tsx
new file mode 100644
index 000000000..1f02a2cad
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy10/Table900.tsx
@@ -0,0 +1,55 @@
+import * as T from './style';
+
+const TableContent1 = [
+  '개인정보 침해신고센터(한국인터넷진흥원 운영)',
+  '개인정보 분쟁조정위원회\n(개인정보보호위원회 운영)',
+  '경찰청 사이버안전국',
+  '대검찰청 사이버수사과',
+];
+
+const TableContent2 = [
+  'http://privacy.kisa.or.kr',
+  'http://www.kopico.go.kr',
+  'http://cyberbureau.police.go.kr',
+  'http://www.spo.go.kr',
+];
+
+const TableContent3 = [
+  '(국번없이) 118',
+  '1833-6972',
+  '(국번없이) 182',
+  '(국번없이) 1301',
+];
+
+const Table900 = () => (
+  <>
+    <T.TableTitle>
+      <T.TableTitleContent>구분</T.TableTitleContent>
+      <T.TableContent>
+        {TableContent1.map((content, index) => (
+          <T.TableRowContent key={index}>{content}</T.TableRowContent>
+        ))}
+      </T.TableContent>
+    </T.TableTitle>
+
+    <T.TableTitle>
+      <T.TableTitleContent>홈페이지</T.TableTitleContent>
+      <T.TableContent>
+        {TableContent2.map((content, index) => (
+          <T.TableRowContent key={index}>{content}</T.TableRowContent>
+        ))}
+      </T.TableContent>
+    </T.TableTitle>
+
+    <T.TableTitle>
+      <T.TableTitleContent>전화</T.TableTitleContent>
+      <T.TableContent>
+        {TableContent3.map((content, index) => (
+          <T.TableRowContent key={index}>{content}</T.TableRowContent>
+        ))}
+      </T.TableContent>
+    </T.TableTitle>
+  </>
+);
+
+export default Table900;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy10/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy10/index.tsx
new file mode 100644
index 000000000..c2da3d97e
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy10/index.tsx
@@ -0,0 +1,54 @@
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+import Table900 from './Table900';
+import * as T from './style';
+
+interface Props {
+  width: number;
+}
+
+const TableContent = [
+  '개인정보 침해신고센터(한국인터넷진흥원 운영)',
+  'http://privacy.kisa.or.kr',
+  '(국번없이) 118',
+  '개인정보 분쟁조정위원회(개인정보보호위원회 운영)',
+  'http://www.kopico.go.kr',
+  '1833-6972',
+  '경찰청 사이버안전국',
+  'http://cyberbureau.police.go.kr',
+  '(국번없이) 182',
+  '대검찰청 사이버수사과',
+  'http://www.spo.go.kr',
+  '(국번없이) 130118',
+];
+
+const TableTitle = ['구분', '홈페이지', '전화'];
+
+const Policy10 = ({ width }: Props) => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>제 10조 (권익침해 구제방법)</S.PolicyTitle>
+    <S.SubTitle>
+      개인정보주체는 개인정보침해로 인한 피해를 구제 받기 위하여 개인정보
+      분쟁조정위원회, 한국인터넷진흥원 개인정보침해 신고센터 등에 분쟁해결이나
+      상담 등을 신청할 수 있습니다.
+    </S.SubTitle>
+    <S.TableWrap>
+      {width > 900 ? (
+        <T.TableTitle>
+          {TableTitle.map((title, index) => (
+            <T.TableTitleContent key={index}>{title}</T.TableTitleContent>
+          ))}
+          <T.TableContent>
+            {TableContent.map((content, index) => (
+              <T.TableRowContent key={index}>{content}</T.TableRowContent>
+            ))}
+          </T.TableContent>
+        </T.TableTitle>
+      ) : (
+        <Table900 />
+      )}
+    </S.TableWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy10;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy10/style.ts b/apps/client/src/components/Policy/PrivacyPolicy/Policy10/style.ts
new file mode 100644
index 000000000..92db459b1
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy10/style.ts
@@ -0,0 +1,63 @@
+import styled from '@emotion/styled';
+
+export const TableTitle = styled.div`
+  display: grid;
+  margin-top: 0.75rem;
+  grid-template-columns: 25rem 32.5rem 20rem;
+  grid-template-rows: 3.75rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    margin: 0;
+    grid-template-columns: 33.3% 33.3% 33.3%;
+    grid-template-rows: 3.75rem;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    margin: 0;
+    grid-template-columns: 100%;
+    grid-template-rows: 3.75rem;
+  }
+`;
+
+export const TableContent = styled.div`
+  display: grid;
+  grid-template-columns: 25rem 32.5rem 20rem;
+  grid-template-rows: 3rem 3rem 3rem 3rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    grid-template-columns: 100% 100% 100%;
+    grid-template-rows: 3rem 3rem 3rem 3rem;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 3rem 3.75rem 3rem 3rem;
+  }
+`;
+
+export const TabelCellTemplate = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: ${({ theme }) => theme.color.gray['080']};
+  border: 0.0625rem solid ${({ theme }) => theme.color.gray['050']};
+  box-sizing: border-box;
+`;
+
+export const TableTitleContent = styled(TabelCellTemplate)`
+  background-color: ${({ theme }) => theme.color.gray['030']};
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.6875rem;
+`;
+
+export const TableRowContent = styled(TabelCellTemplate)`
+  color: ${({ theme }) => theme.color.gray['070']};
+  ${({ theme }) => theme.typo.body1};
+  font-weight: 400;
+`;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy11/FifthTable900.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy11/FifthTable900.tsx
new file mode 100644
index 000000000..d738bd947
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy11/FifthTable900.tsx
@@ -0,0 +1,44 @@
+import * as T from './style';
+
+const TableContent1 = ['담당부서', '성명', '전화번호'];
+
+const TableContent2 = [
+  '광주소프트웨어마이스터고등학교장',
+  '최홍진',
+  '062-949-6801',
+];
+
+const TableContent3 = ['인문정보부', '정문정', '062-949-6850'];
+
+const FifthTable900 = () => (
+  <>
+    <T.FifthTableTitle>
+      <T.FifthTableTitleContent>구분</T.FifthTableTitleContent>
+      <T.FifthTableContent>
+        {TableContent1.map((content, index) => (
+          <T.FifthTableRowContent key={index}>{content}</T.FifthTableRowContent>
+        ))}
+      </T.FifthTableContent>
+    </T.FifthTableTitle>
+
+    <T.FifthTableTitle>
+      <T.FifthTableTitleContent>개인정보 보호책임자</T.FifthTableTitleContent>
+      <T.FifthTableContent>
+        {TableContent2.map((content, index) => (
+          <T.FifthTableRowContent key={index}>{content}</T.FifthTableRowContent>
+        ))}
+      </T.FifthTableContent>
+    </T.FifthTableTitle>
+
+    <T.FifthTableTitle>
+      <T.FifthTableTitleContent>개인정보 보호담당자</T.FifthTableTitleContent>
+      <T.FifthTableContent>
+        {TableContent3.map((content, index) => (
+          <T.FifthTableRowContent key={index}>{content}</T.FifthTableRowContent>
+        ))}
+      </T.FifthTableContent>
+    </T.FifthTableTitle>
+  </>
+);
+
+export default FifthTable900;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy11/SixthTable900.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy11/SixthTable900.tsx
new file mode 100644
index 000000000..046f4151d
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy11/SixthTable900.tsx
@@ -0,0 +1,74 @@
+import * as T from './style';
+
+const TableContent1 = [
+  '교육기획부',
+  '교육연구부',
+  '학생생활안전부',
+  '마이스터부',
+  '전문교육부',
+  '취업진로교육부',
+  '창체방과후교육부',
+  '보건실',
+  '상담실',
+  '도서실',
+  '행정실',
+];
+
+const TableContent2 = [
+  '부장',
+  '',
+  '부장',
+  '',
+  '부장',
+  '',
+  '부장',
+  '',
+  '부장',
+  '',
+  '부장',
+  '',
+  '부장',
+  '',
+  '보건교사',
+  '',
+  '상담교사',
+  '',
+  '사서',
+  '',
+  '실장',
+  '',
+];
+
+const SixthTable900 = () => (
+  <>
+    <T.SixthTableTitle>
+      <T.FifthTableTitleContent>구분</T.FifthTableTitleContent>
+      <T.FifthTableTitleContent>소속</T.FifthTableTitleContent>
+      <T.BigSixthTableTitle>
+        <T.SixthTableTitleContent>
+          개인정보
+          <br />
+          보호 분야
+          <br />별 책임자
+        </T.SixthTableTitleContent>
+      </T.BigSixthTableTitle>
+      <T.FifthTableContent>
+        {TableContent1.map((content, index) => (
+          <T.SixthTableRowContent key={index}>{content}</T.SixthTableRowContent>
+        ))}
+      </T.FifthTableContent>
+    </T.SixthTableTitle>
+
+    <T.SixthResTableTitle>
+      <T.SixthTableTitleContent>직위</T.SixthTableTitleContent>
+      <T.SixthTableTitleContent>비고</T.SixthTableTitleContent>
+      <T.SixthResTableContent>
+        {TableContent2.map((content, index) => (
+          <T.SixthTableRowContent key={index}>{content}</T.SixthTableRowContent>
+        ))}
+      </T.SixthResTableContent>
+    </T.SixthResTableTitle>
+  </>
+);
+
+export default SixthTable900;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy11/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy11/index.tsx
new file mode 100644
index 000000000..c226f402c
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy11/index.tsx
@@ -0,0 +1,126 @@
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+import FifthTable900 from './FifthTable900';
+import SixthTable900 from './SixthTable900';
+import * as T from './style';
+
+interface Props {
+  width: number;
+}
+
+const TableTitle1 = ['구분', '개인정보 보호책임자', '개인정보 보호담당자'];
+const TableTitle2 = ['구분', '소속', '직위', '비고'];
+
+const TableContent1 = [
+  '담당부서',
+  '광주소프트웨어마이스터고등학교장',
+  '인문정보부',
+  '성명',
+  '최홍진',
+  '정문정',
+  '전화번호',
+  '062-949-6801',
+  '062-949-6801',
+];
+
+const TableContent2 = [
+  '교육기획부',
+  '부장',
+  '',
+  '교육연구부',
+  '부장',
+  '',
+  '학생생활안전부',
+  '부장',
+  '',
+  '마이스터부',
+  '부장',
+  '',
+  '전문교육부',
+  '부장',
+  '',
+  '취업진로교육부',
+  '부장',
+  '',
+  '창체방과후교육부',
+  '부장',
+  '',
+  '보건실',
+  '보건교사',
+  '',
+  '상담실',
+  '상담교사',
+  '',
+  '도서실',
+  '사서',
+  '',
+  '행정실',
+  '실장',
+  '',
+];
+
+const Policy11: React.FC<Props> = ({ width }) => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>
+      제 11조 (개인정보보호 (분야별) 책임자 및 담당자 연락처)
+    </S.PolicyTitle>
+    <S.SubTitle>
+      <span>1.&nbsp;</span>
+      광주소프트웨어마이스터고등학교는 개인정보를 보호하고 개인정보와 관련한
+      불만을 처리하기 위하여 아래와 같이 개인정보 보호책임자 및 담당자를
+      지정하고 있습니다.
+    </S.SubTitle>
+    <S.TableWrap>
+      {width > 900 ? (
+        <T.FifthTableTitle>
+          {TableTitle1.map((title, index) => (
+            <T.FifthTableTitleContent key={index}>
+              {title}
+            </T.FifthTableTitleContent>
+          ))}
+          <T.FifthTableContent>
+            {TableContent1.map((content, index) => (
+              <T.FifthTableRowContent key={index}>
+                {content}
+              </T.FifthTableRowContent>
+            ))}
+          </T.FifthTableContent>
+        </T.FifthTableTitle>
+      ) : (
+        <FifthTable900 />
+      )}
+    </S.TableWrap>
+    <S.SubTitle>
+      <span>2.&nbsp;</span>
+      광주소프트웨어마이스터고등학교는 각 부서의 장을 개인정보보호 분야별
+      책임자로 아래와 같이 지정하고 있습니다.
+    </S.SubTitle>
+    <S.TableWrap>
+      {width > 900 ? (
+        <T.SixthTableTitle>
+          {TableTitle2.map((title, index) => (
+            <T.FifthTableTitleContent key={index}>
+              {title}
+            </T.FifthTableTitleContent>
+          ))}
+          <T.BigSixthTableTitle>
+            <T.SixthTableTitleContent>
+              개인정보보호 분야별 책임자
+            </T.SixthTableTitleContent>
+          </T.BigSixthTableTitle>
+          <T.SixthTableContent>
+            {TableContent2.map((content, index) => (
+              <T.FifthTableRowContent key={index}>
+                {content}
+              </T.FifthTableRowContent>
+            ))}
+          </T.SixthTableContent>
+        </T.SixthTableTitle>
+      ) : (
+        <SixthTable900 />
+      )}
+    </S.TableWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy11;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy11/style.ts b/apps/client/src/components/Policy/PrivacyPolicy/Policy11/style.ts
new file mode 100644
index 000000000..51b812a7f
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy11/style.ts
@@ -0,0 +1,159 @@
+import styled from '@emotion/styled';
+
+export const FifthTableTitle = styled.div`
+  display: grid;
+  margin: 1.25rem 0 1.25rem 0;
+  grid-template-columns: 11.25rem 40rem 26.25rem;
+  grid-template-rows: 3.75rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    margin: 0;
+    margin-bottom: 20px;
+    grid-template-columns: 14.6% 51.5% 33.8%;
+    grid-template-rows: 3.75rem;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    margin: 0;
+    grid-template-columns: 100%;
+    grid-template-rows: 3.75rem;
+  }
+`;
+
+export const FifthTableContent = styled.div`
+  display: grid;
+  grid-template-columns: 11.25rem 40rem 26.25rem;
+  grid-template-rows: 3rem 3rem 3rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    grid-template-columns: 100% 352.7% 231.5%;
+    grid-template-rows: 3rem 3rem 3rem;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 3rem 3rem 3rem;
+  }
+`;
+
+export const FifthTableCellTemplate = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: ${({ theme }) => theme.color.gray['080']};
+  border: 0.0625rem solid ${({ theme }) => theme.color.gray['050']};
+  box-sizing: border-box;
+  white-space: pre;
+`;
+
+export const FifthTableTitleContent = styled(FifthTableCellTemplate)`
+  background-color: ${({ theme }) => theme.color.gray['030']};
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.6875rem;
+`;
+
+export const FifthTableRowContent = styled(FifthTableCellTemplate)`
+  color: ${({ theme }) => theme.color.gray['070']};
+  ${({ theme }) => theme.typo.body1};
+  font-weight: 400;
+`;
+
+export const SixthTableTitle = styled.div`
+  display: grid;
+  margin: 0.75rem 0 0 0;
+  grid-template-columns: 33.75rem 25.5rem 12.5rem 5.75rem;
+  grid-template-rows: 3.75rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    margin-bottom: 0.75rem 0 0 0;
+    grid-template-columns: 42% 33% 16.7% 8.6%;
+    grid-template-rows: 3.75rem;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    margin-bottom: 0.75rem 0 0 0;
+    grid-template-columns: 27% 73%;
+    grid-template-rows: 3.75rem;
+  }
+`;
+
+export const BigSixthTableTitle = styled.div`
+  display: grid;
+  grid-template-columns: 33.75rem;
+  grid-template-rows: 33rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 33rem;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 33rem;
+  }
+`;
+
+export const SixthTableContent = styled.div`
+  display: grid;
+  grid-template-columns: 25.5rem 12.5rem 5.75rem;
+  grid-template-rows: repeat(11, 3rem);
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    grid-template-columns: 100% 50.6% 26.1%;
+    grid-template-rows: repeat(11, 3rem);
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    grid-template-columns: 270%;
+    grid-template-rows: repeat(11, 3rem);
+  }
+`;
+
+export const SixthTableCellTemplate = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: ${({ theme }) => theme.color.gray['080']};
+  border: 0.0625rem solid ${({ theme }) => theme.color.gray['050']};
+  box-sizing: border-box;
+  white-space: pre;
+`;
+
+export const SixthTableTitleContent = styled(SixthTableCellTemplate)`
+  background-color: ${({ theme }) => theme.color.gray['030']};
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.6875rem;
+`;
+
+export const SixthTableRowContent = styled(SixthTableCellTemplate)`
+  color: ${({ theme }) => theme.color.gray['070']};
+  ${({ theme }) => theme.typo.body1};
+  font-weight: 400;
+`;
+
+export const SixthResTableTitle = styled.div`
+  display: grid;
+  margin: 0.75rem 0 0 0;
+  grid-template-columns: 65.4% 34.6%;
+  grid-template-rows: 3.75rem;
+`;
+
+export const SixthResTableContent = styled.div`
+  display: grid;
+  grid-template-columns: 100% 52.9%;
+  grid-template-rows: repeat(11, 3rem);
+`;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy12/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy12/index.tsx
new file mode 100644
index 000000000..ad9930d99
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy12/index.tsx
@@ -0,0 +1,29 @@
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+const DateTitle = [
+  '2016. 7. 20. ~ 2017. 2. 28.',
+  '2016. 3. 01. ~ 2018. 2. 28.',
+  '2016. 3. 01. ~ 2018. 4. 1.',
+  '2016. 4. 02. ~ 2019. 3. 19.',
+  '2016. 3. 20. ~ 2019. 12. 1.',
+];
+
+const Policy12 = () => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>제 12조 (개인정보 처리방침의 변경)</S.PolicyTitle>
+    <S.SubTitle>
+      본 개인정보처리방침은 시행일로부터 적용되며, 이전의 개인정보 처리방침은
+      아래에서 확인할 수 있습니다.
+    </S.SubTitle>
+    <S.StartDateTitle>시행일자 : 2022. 09. 28.</S.StartDateTitle>
+    <S.DateTitleWrap>
+      {DateTitle.map((title, index) => (
+        <S.DateTitle key={index}>
+          {title} <span>개인정보처리방침 보기</span>
+        </S.DateTitle>
+      ))}
+    </S.DateTitleWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy12;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy2/Table1440.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy2/Table1440.tsx
new file mode 100644
index 000000000..d49b507d5
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy2/Table1440.tsx
@@ -0,0 +1,90 @@
+import * as T from './style';
+
+const Table1440 = () => {
+  const TableTitle = ['개인정보 파일명', '보유목적', '보유근거'];
+
+  const TableContent1 = [
+    `학교생활 기록부`,
+    `학생의 학업성취도 평가를 통한 내실화 도모`,
+    `-「초ㆍ중등교육법」제25조\n -「초ㆍ중등교육법 시행규칙」제21조`,
+    `학생건강 기록부`,
+    `학생건강기록 관리`,
+    `-「학교건강검사 규칙」제9조\n -「학생건강기록부 전산처리 및 관리지침」제14조`,
+    `학부모서비스 이용자명단`,
+    `학부모의 학생정보 열람`,
+    `「교육기본법」제23조의3`,
+    `홈페이지 회원정보`,
+    `홈페이지회원관리`,
+    `정보주체 동의`,
+    `민원사무 처리부`,
+    `민원접수 및 처리 관리`,
+    `-「민원 처리에 관한 법률 시행령」제6조\n-「민원 처리에 관한 법률 시행규칙」제3조`,
+    `학교운영위원회명부`,
+    `학교운영위원회 구성 및 운영관리`,
+    `-「초ㆍ중등교육법」제34조\n-「초ㆍ중등교육법 시행규칙」제62조`,
+    `스쿨뱅킹(CMS)정보`,
+    `수납금 처리`,
+    `정보주체 동의`,
+    `발전기금 기탁자명부`,
+    `학교발전기금 기탁자 및 내역 관리`,
+    `「초ㆍ중등교육법 시행규칙」제52조`,
+  ];
+
+  const TableContent2 = [
+    '-학생: 성명,주민번호,주소\n -보호자: 성명, 생년월일',
+    '준영구',
+    '각 학년부, 행정실',
+    '이름, 주민번호, 학년, 반, 번호, 성별,\n 혈액형, 키, 몸무게, 비만도',
+    '졸업후 5년',
+    '보건실',
+    '-학부모: 성명, 주민번호\n-학생: 성명, 주민번호',
+    '회원탈퇴시까지',
+    '각 학년부',
+    '이름,학년,반,번호',
+    '졸업/회원탈퇴시\n 까지',
+    '인문교육 정보부',
+    '이름,집주소,E-mail,연락처',
+    '10년',
+    '행정실',
+    '-학생: 이름,생년월일,학년,반,번호\n -보호자: 이름,연락처,생년월일,계좌정보',
+    '5년',
+    '행정실',
+    '성명,주소,생년월일, 직업,연락처',
+    '10년',
+    '행정실',
+    '성명, 생년월일, 주소, 연락처',
+    '5년',
+    '행정실',
+  ];
+
+  return (
+    <>
+      <T.TableTitle>
+        {TableTitle.map((title, index) => (
+          <T.TableTitleContent key={index}>{title}</T.TableTitleContent>
+        ))}
+        <T.TableContent>
+          {TableContent1.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+      <T.TableTitle>
+        <T.TableTitleContent>항목</T.TableTitleContent>
+        <T.TableTitleContent>보유기간</T.TableTitleContent>
+        <T.TableTitleContent>
+          열람요구
+          <br />
+          접수처리부서
+        </T.TableTitleContent>
+        <T.TableContent>
+          {TableContent2.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+    </>
+  );
+};
+
+export default Table1440;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy2/Table900.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy2/Table900.tsx
new file mode 100644
index 000000000..000f68a3d
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy2/Table900.tsx
@@ -0,0 +1,133 @@
+import * as T from './style';
+
+const Table900 = () => {
+  const TableContent1 = [
+    `학교생활 기록부`,
+    `학생건강 기록부`,
+    `학부모서비스 이용자명단`,
+    `홈페이지 회원정보`,
+    `민원사무 처리부`,
+    `학교운영위원회명부`,
+    `스쿨뱅킹(CMS)정보`,
+    `발전기금 기탁자명부`,
+  ];
+
+  const TableContent2 = [
+    `학생의 학업성취도 평가를 통한 내실화 도모`,
+    `학생건강기록 관리`,
+    `학부모의 학생정보 열람`,
+    `홈페이지회원관리`,
+    `민원접수 및 처리 관리`,
+    `학교운영위원회 구성 및 운영관리`,
+    `수납금 처리`,
+    `학교발전기금 기탁자 및 내역 관리`,
+  ];
+
+  const TableContent3 = [
+    `-「초ㆍ중등교육법」제25조\n -「초ㆍ중등교육법 시행규칙」제21조`,
+    `-「학교건강검사 규칙」제9조\n -「학생건강기록부 전산처리 및 관리지침」제14조`,
+    `「교육기본법」제23조의3`,
+    `정보주체 동의`,
+    `-「민원 처리에 관한 법률 시행령」제6조\n -「민원 처리에 관한 법률 시행규칙」제3조`,
+    `-「초ㆍ중등교육법」제34조\n -「초ㆍ중등교육법 시행규칙」제62조`,
+    `정보주체 동의`,
+    `「초ㆍ중등교육법 시행규칙」제52조`,
+  ];
+
+  const TableContent4 = [
+    `-학생: 성명,주민번호,주소\n -보호자: 성명, 생년월일`,
+    `이름, 주민번호, 학년, 반, 번호, 성별, 혈액형, 키, 몸무게,\n 비만도`,
+    `-학부모: 성명, 주민번호\n -학생: 성명, 주민번호`,
+    `이름,학년,반,번호`,
+    `이름,집주소,E-mail,연락처`,
+    `성명,주소,생년월일, 직업,연락처`,
+    ` -학생: 이름,생년월일,학년,반,번호\n -보호자: 이름,연락처,생년월일,계좌정보`,
+    `성명, 생년월일, 주소, 연락처`,
+  ];
+
+  const TableContent5 = [
+    `준영구`,
+    `졸업후 5년`,
+    `회원탈퇴시까지`,
+    `회원탈퇴시까지`,
+    `10년`,
+    `10년`,
+    `5년`,
+    `5년`,
+  ];
+
+  const TableContent6 = [
+    `열람요구\n 접수처리부서`,
+    `각 학년부, 행정실`,
+    `보건실`,
+    `각 학년부`,
+    `행정실`,
+    `행정실`,
+    `행정실`,
+    `행정실`,
+  ];
+
+  return (
+    <>
+      <T.TableTitle>
+        <T.TableTitleContent>개인정보 파일명</T.TableTitleContent>
+        <T.TableContent>
+          {TableContent1.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+
+      <T.TableTitle>
+        <T.TableTitleContent>보유목적</T.TableTitleContent>
+        <T.TableContent>
+          {TableContent2.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+
+      <T.TableTitle>
+        <T.TableTitleContent>보유근거</T.TableTitleContent>
+        <T.TableContent>
+          {TableContent3.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+
+      <T.TableTitle>
+        <T.TableTitleContent>항목</T.TableTitleContent>
+        <T.TableContent>
+          {TableContent4.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+
+      <T.TableTitle>
+        <T.TableTitleContent>보유기간</T.TableTitleContent>
+        <T.TableContent>
+          {TableContent5.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+
+      <T.TableTitle>
+        <T.TableTitleContent>
+          열람요구
+          <br />
+          접수처리부서
+        </T.TableTitleContent>
+        <T.TableContent>
+          {TableContent6.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+    </>
+  );
+};
+
+export default Table900;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy2/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy2/index.tsx
new file mode 100644
index 000000000..62fb1e6ad
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy2/index.tsx
@@ -0,0 +1,121 @@
+/** @jsxImportSource @emotion/react */
+
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+import Table1440 from './Table1440';
+import Table900 from './Table900';
+import * as T from './style';
+
+interface Props {
+  width: number;
+}
+
+const TableTitle = [
+  `개인정보 파일명`,
+  `보유목적`,
+  `보유근거`,
+  `항목`,
+  `보유기간`,
+  `열람요구\n접수처리부서`,
+];
+
+const TableContent = [
+  `학교생활 기록부`,
+  `학생의 학업성취도 평가를 통한\n 내실화 도모`,
+  `-「초ㆍ중등교육법」제25조\n -「초ㆍ중등교육법 시행규칙」제21조`,
+  `-학생: 성명,주민번호,주소\n -보호자: 성명, 생년월일`,
+  `준영구`,
+  `각 학년부, 행정실`,
+  `학생건강 기록부`,
+  `학생건강기록 관리`,
+  `-「학교건강검사 규칙」제9조\n -「학생건강기록부 전산처리 및 관리지침」제14조`,
+  `이름, 주민번호, 학년, 반, 번호, 성별,\n 혈액형, 키, 몸무게, 비만도`,
+  `졸업후 5년`,
+  `보건실`,
+  `학부모서비스\n 이용자명단`,
+  `학부모의 학생정보 열람`,
+  `「교육기본법」제23조의3`,
+  `-학부모: 성명, 주민번호\n -학생: 성명, 주민번호`,
+  `회원탈퇴시까지`,
+  `각 학년부`,
+  `홈페이지\n 회원정보`,
+  `홈페이지회원관리`,
+  `정보주체 동의`,
+  `이름,학년,반,번호`,
+  `졸업/회원탈퇴시 \n까지`,
+  `인문교육 정보부`,
+  `민원사무 처리부`,
+  `민원접수 및 처리 관리`,
+  `-「민원 처리에 관한 법률 시행령」제6조\n -「민원 처리에 관한 법률 시행규칙」제3조`,
+  `이름,집주소,E-mail,연락처`,
+  `10년`,
+  `행정실`,
+  `학교운영위원회명부`,
+  `학교운영위원회 구성 및 운영관리`,
+  `-「초ㆍ중등교육법」제34조\n -「초ㆍ중등교육법 시행규칙」제62조`,
+  `성명,주소,생년월일, 직업,연락처`,
+  `10년`,
+  `행정실`,
+  `스쿨뱅킹(CMS)\n 정보`,
+  `수납금 처리`,
+  `정보주체 동의`,
+  `-학생: 이름,생년월일,학년,반,번호\n -보호자: 이름,연락처,생년월일,계좌정보`,
+  `5년`,
+  `행정실`,
+  `발전기금 기탁자명부`,
+  `학교발전기금 기탁자 및 내역 관리`,
+  `「초ㆍ중등교육법 시행규칙」제52조`,
+  `성명, 생년월일, 주소, 연락처`,
+  `5년`,
+  `행정실`,
+];
+
+const 개인정보의처리및보유기간 = [
+  `광주소프트웨어마이스터고등학교에서 처리하는
+  개인정보는 수집 이용 목적으로 명시한 범위 내에서 처리하며,
+  개인정보보호법 및 관련 법령에서 정하는 보유기간을 준용하여 이행하고
+  있습니다.`,
+  `개인정보파일은 연1회 조사하여 대장 정비하며, 이후
+  등록 대상 발생 건은 별도 처리합니다.`,
+  `광주소프트웨어마이스터고등학교는 각 부서에서
+  운영하는 소관업무 및 홈페이지를 통해서 수집 보유하고 있는 주요
+  개인정보파일을 다음과 같이 안내하고 있습니다.`,
+];
+
+const Policy2 = ({ width }: Props) => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>제 2조 (개인정보의 처리 및 보유기간)</S.PolicyTitle>
+    {개인정보의처리및보유기간.map((description, index) => (
+      <S.SubTitle key={index}>
+        <span>{index + 1}.&nbsp;</span> {description}
+      </S.SubTitle>
+    ))}
+    <S.SubTitle>
+      [ 세부 내용은 개인정보보호 포털(https://www.privacy.go.kr) ▶ 개인서비스 ▶
+      정보주체 권리행사 ▶ 개인정보의 열람등 요구 ▶ 개인정보파일 (목록) 검색 ▶
+      기관명에 “광주소프트웨어마이스터고등학교” 입력 후 검색
+      <br />
+      광주소프트웨어마이스터고등학교 [개인정보파일 목록] 보기(클릭) ]
+    </S.SubTitle>
+    <S.TableWrap>
+      {width > 1440 ? (
+        <T.TableTitle>
+          {TableTitle.map((title, index) => (
+            <T.TableTitleContent key={index}>{title}</T.TableTitleContent>
+          ))}
+          <T.TableContent>
+            {TableContent.map((content, index) => (
+              <T.TableRowContent key={index}>{content}</T.TableRowContent>
+            ))}
+          </T.TableContent>
+        </T.TableTitle>
+      ) : width > 900 ? (
+        <Table1440 />
+      ) : (
+        <Table900 />
+      )}
+    </S.TableWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy2;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy2/style.ts b/apps/client/src/components/Policy/PrivacyPolicy/Policy2/style.ts
new file mode 100644
index 000000000..3f271bc8c
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy2/style.ts
@@ -0,0 +1,71 @@
+import styled from '@emotion/styled';
+
+export const TableTitle = styled.div`
+  display: grid;
+  margin-top: 0.75rem;
+  grid-template-columns: 9rem 14.75rem 20rem 17.5rem 8rem 8.25rem;
+  grid-template-rows: 4rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    margin: 0;
+    grid-template-columns: 33.3% 33.3% 33.3%;
+    grid-template-rows: 4rem;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    margin: 0;
+    grid-template-columns: 100%;
+    grid-template-rows: 4rem;
+  }
+`;
+
+export const TableContent = styled.div`
+  display: grid;
+  grid-template-columns: 9rem 14.75rem 20rem 17.5rem 8rem 8.25rem;
+
+  div {
+    height: 4.25rem;
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    grid-template-columns: 100% 100% 100%;
+
+    div {
+      height: 4.25rem;
+    }
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    grid-template-columns: 100%;
+
+    div {
+      height: 4.25rem;
+    }
+  }
+`;
+
+export const TabelCellTemplate = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: 0.0625rem solid ${({ theme }) => theme.color.gray['050']};
+  color: ${({ theme }) => theme.color.gray['070']};
+  box-sizing: border-box;
+  white-space: pre;
+`;
+
+export const TableTitleContent = styled(TabelCellTemplate)`
+  background-color: ${({ theme }) => theme.color.gray['030']};
+  ${({ theme }) => theme.typo.h5}
+  font-weight: 600;
+`;
+
+export const TableRowContent = styled(TabelCellTemplate)`
+  ${({ theme }) => theme.typo.body1};
+  font-weight: 400;
+`;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy3/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy3/index.tsx
new file mode 100644
index 000000000..3d8fa4aad
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy3/index.tsx
@@ -0,0 +1,44 @@
+import { BulletItem } from 'client/components';
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+const 개인정보자동수집장치의설치운영및거부에관한사항 = [
+  `광주소프트웨어마이스터고등학교 홈페이지 이용자에게 서비스를 제공하기
+  위해 이용정보를 저장하고 수시로 불러오는 ‘쿠키(cookie)’를 사용합니다.`,
+  ` 쿠키는 웹사이트를 운영하는데 이용되는 서버(http)가 이용자의 컴퓨터
+  브라우저에게 보내는 소량의 정보이며 이용자들의 PC 컴퓨터내의
+  하드디스크에 저장되기도 합니다.`,
+];
+
+const BulletItemTitle = [
+  `쿠키의 사용 목적 : 자주 찾는 서비스를 설정할 수 있도록 하여 이용자에게
+  최적화된 정보 제공을 위해 사용됩니다.`,
+  `쿠키의 설치·운영 및 거부 : 웹브라우저 상단의 도구 {'>'} 인터넷 옵션
+  {'>'} 개인정보 메뉴의 옵션 설정을 통해 쿠키 저장을 거부할 수 있습니다.`,
+  `쿠키 저장을 거부할 경우 일부 서비스 이용에 어려움이 발생할 수
+  있습니다.`,
+];
+
+const Policy3 = () => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>
+      제 3조 (개인정보 자동 수집 장치의 설치,운영 및 거부에 관한 사항)
+    </S.PolicyTitle>
+    {개인정보자동수집장치의설치운영및거부에관한사항.map(
+      (description, index) => (
+        <S.SubTitle key={index}>
+          <span>{index + 1}.&nbsp;</span>
+          {description}
+        </S.SubTitle>
+      )
+    )}
+    <S.BulletItemWrap>
+      {BulletItemTitle.map((item, index) => (
+        <BulletItem key={index} isSmall={true}>
+          {item}
+        </BulletItem>
+      ))}
+    </S.BulletItemWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy3;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy4/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy4/index.tsx
new file mode 100644
index 000000000..dd0b74bfb
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy4/index.tsx
@@ -0,0 +1,38 @@
+import { BulletItem } from 'client/components';
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+const BulletItemContent: string[] = [
+  '정보주체로부터 별도의 동의를 받는 경우',
+  '법률에 특별한 규정이 있는 경우 있습니다.',
+  '보주체 또는 법정대리인이 의사표시를 할 수 없는 상태에 있거나 주소불명 등으로 사전 동의를 받을 수 없는 경우로서 명백히 정보주체 또는 제3자의 급박한 생명, 신체, 재산의 이익을 위하여 필요하다고 인정되는 경우',
+  '통계작성 및 학술연구 등의 목적을 위하여 필요한 경우로서 특정 개인을 알아 볼 수 없는 형태로 개인정보를 제공하는 경우',
+  '개인정보를 목적 외의 용도로 이용하거나 이를 제3자에게 제공하지 아니하면 다른 법률에서 정하는 소관 업무를 수행할 수 없는 경우로서 보호위원회의 심의·의결을 거친 경우',
+  '조약, 그 밖의 국제협정의 이행을 위하여 외국정보 또는 국제기구에 제공하기 위하여 필요한 경우',
+  '범죄의 수사와 공소의 제기 및 유지를 위하여 필요한 경우',
+  '법원의 재판업무 수행을 위하여 필요한 경우',
+  '형 및 감호, 보호처분의 집행을 위하여 필요한 경우',
+];
+
+const Policy4 = () => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>
+      제 4조 (개인정보 자동 수집 장치의 설치,운영 및 거부에 관한 사항)
+    </S.PolicyTitle>
+    <S.SubTitle>
+      <span>1.&nbsp;</span>
+      광주소프트웨어마이스터고등학교는 원칙적으로 정보주체의 개인정보를
+      수집·이용 목적으로 명시한 범위 내에서 처리하며, 다음의 경우를 제외하고는
+      정보주체의 사전 동의 없이는 본래의 목적 범위를 초과하여 처리하거나
+      제3자에게 제공하지 않습니다.
+    </S.SubTitle>
+    <S.BulletItemWrap>
+      {BulletItemContent.map((i) => (
+        <BulletItem key={i} isSmall={true}>
+          {i}
+        </BulletItem>
+      ))}
+    </S.BulletItemWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy4;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy5/Table1440.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy5/Table1440.tsx
new file mode 100644
index 000000000..840b4f04d
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy5/Table1440.tsx
@@ -0,0 +1,42 @@
+import * as T from './style';
+
+const Table1400 = () => (
+  <>
+    <T.TableTitle isOnly={false}>
+      <T.TableTitleContent>위탁하는 업무의 내용</T.TableTitleContent>
+      <T.TableTitleContent>위탁 항목</T.TableTitleContent>
+      <T.TableContent>
+        <T.TableRowContent>
+          광주소프트웨어마이스터고등학교 홈페이지 유지관리
+        </T.TableRowContent>
+        <T.TableRowContent>
+          이름,학년,반,번호※ 회원가입시 수집하는 항목
+        </T.TableRowContent>
+        <T.TableRowContent>방과후 학교 프로그램운영</T.TableRowContent>
+        <T.TableRowContent>
+          이름,학년,반,번호,학생개인연락처,부 또는 모 성함 및 연락처
+          <br />※ 위탁시 제공하는 항목
+        </T.TableRowContent>
+      </T.TableContent>
+    </T.TableTitle>
+
+    <T.TableTitle isOnly={true}>
+      <T.TableTitleContent>수탁업체(명)</T.TableTitleContent>
+      <T.TableContent>
+        <T.TableRowContent>더모먼트</T.TableRowContent>
+        <T.TableRowContent>
+          업체명: 더모먼트
+          <br /> 주소: 광주광역시 광산구 상무대로 312
+          <br /> 전화번호: 062-949-6800
+        </T.TableRowContent>
+        <T.TableRowContent>
+          업체명: 더모먼트
+          <br /> 주소: 광주광역시 광산구 상무대로 312
+          <br /> 전화번호: 062-949-6800
+        </T.TableRowContent>
+      </T.TableContent>
+    </T.TableTitle>
+  </>
+);
+
+export default Table1400;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy5/Table900.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy5/Table900.tsx
new file mode 100644
index 000000000..827047d0f
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy5/Table900.tsx
@@ -0,0 +1,51 @@
+import * as T from './style';
+
+const TableContent1 = [
+  '광주소프트웨어마이스터고등학교 홈페이지 유지관리',
+  '방과후 학교 프로그램운영',
+];
+
+const Table900 = () => (
+  <>
+    <T.TableTitle>
+      <T.TableTitleContent>위탁하는 업무의 내용</T.TableTitleContent>
+      <T.TableContent>
+        {TableContent1.map((i) => (
+          <T.TableRowContent key={i}>{i}</T.TableRowContent>
+        ))}
+      </T.TableContent>
+    </T.TableTitle>
+
+    <T.TableTitle>
+      <T.TableTitleContent>위탁항목</T.TableTitleContent>
+      <T.TableContent>
+        <T.TableRowContent>
+          이름,학년,반,번호
+          <br />※ 회원가입시 수집하는 항목
+        </T.TableRowContent>
+        <T.TableRowContent>
+          이름,학년,반,번호,학생개인연락처,부 또는 모 성함 및 연락처
+          <br />※ 위탁시 제공하는 항목
+        </T.TableRowContent>
+      </T.TableContent>
+    </T.TableTitle>
+
+    <T.TableTitle>
+      <T.TableTitleContent>수탁업체(명)</T.TableTitleContent>
+      <T.TableContent>
+        <T.TableRowContent>
+          업체명: 더모먼트
+          <br /> 주소: 광주광역시 광산구 상무대로 312
+          <br /> 전화번호: 062-949-6800
+        </T.TableRowContent>
+        <T.TableRowContent>
+          업체명: 더모먼트
+          <br /> 주소: 광주광역시 광산구 상무대로 312
+          <br /> 전화번호: 062-949-6800
+        </T.TableRowContent>
+      </T.TableContent>
+    </T.TableTitle>
+  </>
+);
+
+export default Table900;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy5/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy5/index.tsx
new file mode 100644
index 000000000..f9f744b62
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy5/index.tsx
@@ -0,0 +1,72 @@
+import { BulletItem } from 'client/components';
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+import Table1440 from './Table1440';
+import Table900 from './Table900';
+import * as T from './style';
+
+interface Props {
+  width: number;
+}
+
+const TableTitle = ['위탁하는 업무의 내용', '수탁 업체(명)', '위탁 항목'];
+
+const TableContent = [
+  '광주소프트웨어마이스터고등학교\n 홈페이지 유지관리',
+  '이름,학년,반,번호\n※ 회원가입시 수집하는 항목',
+  '더모먼트',
+  '방과후 학교 프로그램운영',
+  '이름,학년,반,번호,학생개인연락처,부 또는 모 성함 및 연락처\n※ 위탁시 제공하는 항목',
+  '업체명: 더모먼트\n 주소: 광주광역시 광산구 상무대로 312\n전화번호: 062-374-9986',
+];
+
+const BulletItemTitle = [
+  `위탁업무 수행 목적 외 개인정보의 처리 금지에 관한 사항`,
+  `개인정보의 관리적·기술적 보호조치에 관한 사항`,
+  `개인정보의 안전관리에 관한 사항`,
+];
+
+const Policy5 = ({ width }: Props) => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>제 5조 (개인정보의 처리 위탁에 관한 사항)</S.PolicyTitle>
+    <S.SubTitle>
+      <span>1.&nbsp;</span>
+      광주소프트웨어마이스터고등학교는 개인정보의 처리 업무를 위탁하는 경우
+      다음의 내용이 포함된 문서에 의하여 처리하고 있습니다.
+    </S.SubTitle>
+    <S.BulletItemWrap>
+      {BulletItemTitle.map((item, index) => (
+        <BulletItem key={index} isSmall={true}>
+          {item}
+        </BulletItem>
+      ))}
+      <S.MiniTitle>
+        <span>-</span>
+        위탁업무의 목적 및 범위, 재 위탁 제한에 관한 사항, 개인정보 안전성 확보
+        조치에 관한 사항, 위탁업무와 관련하여 보유하고 있는 개인정보의
+        관리현황점검 등 감독에 관한 사항, 수탁자가 준수하여야할 의무를 위반한
+        경우의 손해배상책임에 관한 사항
+      </S.MiniTitle>
+    </S.BulletItemWrap>
+    <S.TableWrap>
+      {width > 1440 ? (
+        <T.TableTitle>
+          {TableTitle.map((title, index) => (
+            <T.TableTitleContent key={index}>{title}</T.TableTitleContent>
+          ))}
+          <T.TableContent>
+            {TableContent.map((i) => (
+              <T.TableRowContent key={i}>{i}</T.TableRowContent>
+            ))}
+          </T.TableContent>
+        </T.TableTitle>
+      ) : width > 900 ? (
+        <Table1440 />
+      ) : (
+        <Table900 />
+      )}
+    </S.TableWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy5;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy5/style.ts b/apps/client/src/components/Policy/PrivacyPolicy/Policy5/style.ts
new file mode 100644
index 000000000..a7b16b6a6
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy5/style.ts
@@ -0,0 +1,71 @@
+import styled from '@emotion/styled';
+
+export const TableTitle = styled.div<{ isOnly?: boolean }>`
+  display: grid;
+  margin-top: 0.75rem;
+  grid-template-columns: 20rem 25.5rem 32rem;
+  grid-template-rows: 3.75rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    margin: 0;
+    display: grid;
+    grid-template-columns: ${({ isOnly }) => (isOnly ? '100%' : '50% 50%')};
+  }
+
+  @media (max-width: 900px) {
+    margin: 0;
+    display: grid;
+    grid-template-columns: 100%;
+  }
+`;
+
+export const TableContent = styled.div<{ isOnly?: boolean }>`
+  display: grid;
+  grid-template-columns: 20rem 25.5rem 32rem;
+
+  div {
+    height: 6.25rem;
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    grid-template-columns: 100% 100%;
+
+    div {
+      height: 6.25rem;
+    }
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    grid-template-columns: 100%;
+
+    div {
+      height: 6.25rem;
+    }
+  }
+`;
+
+export const TabelCellTemplate = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: ${({ theme }) => theme.color.gray['080']};
+  border: 0.0625rem solid ${({ theme }) => theme.color.gray['050']};
+  box-sizing: border-box;
+  white-space: pre;
+`;
+
+export const TableTitleContent = styled(TabelCellTemplate)`
+  background-color: ${({ theme }) => theme.color.gray['030']};
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.6875rem;
+`;
+
+export const TableRowContent = styled(TabelCellTemplate)`
+  color: ${({ theme }) => theme.color.gray['070']};
+  font-weight: 400;
+  ${({ theme }) => theme.typo.body1};
+`;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy6/Table900.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy6/Table900.tsx
new file mode 100644
index 000000000..d6f10a9c4
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy6/Table900.tsx
@@ -0,0 +1,67 @@
+import * as T from './style';
+
+const Table900 = () => {
+  const TableContent1 = [
+    '행정실/각 학년부',
+    '보건실',
+    '각 학년부',
+    '인문정보부',
+    '행정실',
+    '행정실',
+    '행정실',
+    '행정실',
+  ];
+
+  const TableContent2 = [
+    '학교생활기록부',
+    '학생건강기록부',
+    '학부모서비스 이용자 명단',
+    '홈페이지 회원정보',
+    '민원사무처리부',
+    '학교운영위원회 명부',
+    '스쿨뱅킹(CMS) 정보',
+    '발전기금 기탁자 명부',
+  ];
+
+  const TableContent3 = [
+    '행정실062-949-6806\n1학년 062-949-6813\n2학년 062-949-6821\n3학년\n062-949-6834',
+    '062-949-6820',
+    '1학년 062-949-6813\n2학년 062-949-6821\n3학년 062-949-6834',
+    '062-949-6850',
+    '062-949-6806',
+    '062-949-6804',
+    '062-949-6806',
+    '062-949-6808',
+  ];
+
+  return (
+    <>
+      <T.TableTitle>
+        <T.TableTitleContent>열람 요구 접수 처리부서명</T.TableTitleContent>
+        <T.TableContent>
+          {TableContent1.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+      <T.TableTitle>
+        <T.TableTitleContent>개인정보파일명</T.TableTitleContent>
+        <T.TableContent>
+          {TableContent2.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+      <T.TableTitle>
+        <T.TableTitleContent>문의처</T.TableTitleContent>
+        <T.TableContent>
+          {TableContent3.map((content, index) => (
+            <T.TableRowContent key={index}>{content}</T.TableRowContent>
+          ))}
+        </T.TableContent>
+      </T.TableTitle>
+    </>
+  );
+};
+
+export default Table900;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy6/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy6/index.tsx
new file mode 100644
index 000000000..2898d5abe
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy6/index.tsx
@@ -0,0 +1,108 @@
+import { BulletItem } from 'client/components';
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+import Table900 from './Table900';
+import * as T from './style';
+
+interface Props {
+  width: number;
+}
+
+const TableTitle = ['열람 요구 접수 처리부서명', '개인정보파일명', '문의처'];
+
+const TableContent = [
+  '행정실/각 학년부',
+  '학교생활기록부',
+  '행정실062-949-6806\n1학년 062-949-6813\n2학년 062-949-6821\n3학년 062-949-6834',
+  '보건실',
+  '학생건강기록부',
+  '062-949-6820',
+  '각 학년부',
+  '학부모서비스 이용자 명단',
+  '1학년 062-949-6813\n2학년 062-949-6821\n3학년 062-949-6834',
+  '인문정보부',
+  '홈페이지 회원정보',
+  '062-949-6850',
+  '행정실',
+  '민원사무처리부',
+  '062-949-6806',
+  '행정실',
+  '학교운영위원회 명부',
+  '062-949-6804',
+  '행정실',
+  '스쿨뱅킹(CMS) 정보',
+  '062-949-6806',
+  '행정실',
+  '발전기금 기탁자 명부',
+  '062-949-6808',
+];
+
+const BulletItemTitle = [
+  `개인정보 열람요구`,
+  `오류 등이 있을 경우 정정 요구`,
+  `삭제요구`,
+  `처리정지 요구`,
+];
+
+const 정보추제의권리의무및그행사방법에관한사항 = [
+  `제1항에 따른 권리 행사는 개인정보보호법 시행규칙 별지 제8호 서식에 따라
+  작성 후 서면 전자우편, 모사전송(FAX) 등을 통하여 하실 수 있으며, 기관은
+  이에 대해 지체 없이 조치하겠습니다.`,
+  `정보주체가 개인정보의 오류 등에 대한 정정 또는 삭제를 요구한 경우에는 정정
+  또는 삭제를 완료할 때까지 당해 개인정보를 이용하거나 제공하지 않겠습니다.`,
+  `제1항에 따른 권리 행사는 정보주체의 법정대리인이나 위임을 받은 자 등
+  대리인을 통하여 하실 수 있습니다. 이 경우 개인정보보호법 시행규칙 별제
+  제11호 서식에 따른 위임장을 제출하셔야 합니다.`,
+  `개인정보 열람 및 처리정지 요구는 개인정보보호법 제35조 제5항, 제37조
+  제2항에 의하여 정보주체의 권리를 제한 할 수 있습니다.`,
+  `개인정보의 정정 및 삭제 요구는 다른 법령에서 그 개인정보가 수집 대상으로
+  명시되어 있는 경우에는 그 삭제를 요구할 수 없습니다.`,
+  `정보주체 권리에 따른 열람의 요구, 정정·삭제의 요구, 처리정지의 요구 시
+  열람 등 요구를 한 자가 본인이거나 정당한 대리인인지를 확인합니다.`,
+  `광주소프트웨어마이스터고등학교에서 보유중인 개인정보파일의 열람,
+  정정ㆍ삭제, 처리정지 요구 등을 접수ㆍ처리하는 해당 부서는 다음과 같습니다.`,
+];
+
+const Policy6: React.FC<Props> = ({ width }) => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>
+      제 6조 (정보추제의 권리, 의무 및 그 행사방법에 관한 사항)
+    </S.PolicyTitle>
+    <S.SubTitle>
+      <span>1.&nbsp;</span>
+      광주소프트웨어마이스터고등학교는 개인정보의 처리 업무를 위탁하는 경우
+      다음의 내용이 포함된 문서에 의하여 처리하고 있습니다.
+    </S.SubTitle>
+    <S.BulletItemWrap>
+      {BulletItemTitle.map((item, index) => (
+        <BulletItem key={index} isSmall={true}>
+          {item}
+        </BulletItem>
+      ))}
+    </S.BulletItemWrap>
+    {정보추제의권리의무및그행사방법에관한사항.map((dexcription, index) => (
+      <S.SubTitle key={index}>
+        <span>{index + 2}.&nbsp;</span>
+        {dexcription}
+      </S.SubTitle>
+    ))}
+    <S.TableWrap>
+      {width > 900 ? (
+        <T.TableTitle>
+          {TableTitle.map((title, index) => (
+            <T.TableTitleContent key={index}>{title}</T.TableTitleContent>
+          ))}
+          <T.TableContent>
+            {TableContent.map((content, index) => (
+              <T.TableRowContent key={index}>{content}</T.TableRowContent>
+            ))}
+          </T.TableContent>
+        </T.TableTitle>
+      ) : (
+        <Table900 />
+      )}
+    </S.TableWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy6;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy6/style.ts b/apps/client/src/components/Policy/PrivacyPolicy/Policy6/style.ts
new file mode 100644
index 000000000..a91624d0e
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy6/style.ts
@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+
+export const TableTitle = styled.div`
+  display: grid;
+  margin-top: 0.75rem;
+  grid-template-columns: 25.75rem 26rem 25.75rem;
+  grid-template-rows: 3.75rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    margin: 0;
+    grid-template-columns: 33.3% 33.3% 33.3%;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    margin: 0;
+    grid-template-columns: 100%;
+  }
+`;
+
+export const TableContent = styled.div`
+  display: grid;
+  grid-template-columns: 25.75rem 26rem 25.75rem;
+  grid-template-rows: 7.8125rem 3rem 6.5rem 3rem 3rem 3rem 3rem 3rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: grid;
+    grid-template-columns: 100% 100% 100%;
+  }
+
+  @media (max-width: 900px) {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 7.8125rem 3rem 6.5rem 3rem 3rem 3rem 3rem 3rem;
+  }
+`;
+
+export const TabelCellTemplate = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: 0.0625rem solid ${({ theme }) => theme.color.gray['050']};
+  color: ${({ theme }) => theme.color.gray['080']};
+  box-sizing: border-box;
+  white-space: pre;
+`;
+
+export const TableTitleContent = styled(TabelCellTemplate)`
+  background-color: ${({ theme }) => theme.color.gray['030']};
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.6875rem;
+`;
+
+export const TableRowContent = styled(TabelCellTemplate)`
+  color: ${({ theme }) => theme.color.gray['070']};
+  ${({ theme }) => theme.typo.body1};
+  font-weight: 400;
+`;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy7/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy7/index.tsx
new file mode 100644
index 000000000..2f208c63b
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy7/index.tsx
@@ -0,0 +1,14 @@
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+const Policy7 = () => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>제 7조 (처리하는 개인정보의 항목)</S.PolicyTitle>
+    <S.SubTitle>
+      광주소프트웨어마이스터고등학교에서 처리하는 개인정보는 소관업무 및
+      법령에서 정한 최소한의 개인정보만을 처리하며 자세한 사항은 정보주체가
+      확인할 수 있도록 제2조 3항에서 안내하고 있습니다.
+    </S.SubTitle>
+  </S.PolicyContentBox>
+);
+
+export default Policy7;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy8/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy8/index.tsx
new file mode 100644
index 000000000..ee6154a4f
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy8/index.tsx
@@ -0,0 +1,48 @@
+import { BulletItem } from 'client/components';
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+const Policy8 = () => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>제 8조 (개인정보 파기절차 및 방법)</S.PolicyTitle>
+    <S.SubTitle>
+      <span>1.&nbsp;</span>
+      광주소프트웨어마이스터고등학교는 원칙적으로 개인정보 처리목적이 달성된
+      개인정보는 지체 없이 파기합니다. 다만, 다른 법령에 따라 보존하여야 하는
+      경우에는 그러하지 않을 수 있습니다. 파기의 절차, 기한 및 방법은 다음과
+      같습니다.
+    </S.SubTitle>
+    <S.BulletItemWrap>
+      <BulletItem isSmall={true}>파기절차</BulletItem>
+      <S.MiniTitle>
+        <span>-</span>
+        불필요한 개인정보 및 개인정보파일은 개인정보책임자의 책임 하에 내부방침
+        절차에 따라 다음과 같이 처리하고 있습니다.
+      </S.MiniTitle>
+      <S.MiniTitle>
+        <span>-</span>
+        개인정보의 파기
+      </S.MiniTitle>
+      <S.MiniTitle>
+        <span>-</span>
+        보유기간이 경과한 개인정보는 종료일로부터 지체없이 파기합니다.
+      </S.MiniTitle>
+      <S.MiniTitle isPadding={true}>
+        <span>-</span>
+        개인정보파일의 처리 목적 달성, 해당 서비스의 폐지, 사업의 종료 등 그
+        개인정보파일이 불필요하게 되었을 때에는 개인정보의 처리가 불필요한
+        것으로 인정되는 날로부터 지체 없이 그 개인정보파일을 파기합니다.
+      </S.MiniTitle>
+      <BulletItem isSmall={true}>파기방법</BulletItem>
+      <S.MiniTitle>
+        <span>-</span>
+        전자적 형태의 정보는 기록을 재생할 수 없는 기술적 방법을 사용합니다.
+      </S.MiniTitle>
+      <S.MiniTitle>
+        <span>-</span>
+        종이에 출력된 개인정보는 분쇄기로 분쇄하거나 소각을 통하여 파기합니다.
+      </S.MiniTitle>
+    </S.BulletItemWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy8;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/Policy9/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/Policy9/index.tsx
new file mode 100644
index 000000000..791014c18
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/Policy9/index.tsx
@@ -0,0 +1,33 @@
+import { BulletItem } from 'client/components';
+import * as S from 'client/components/Policy/PrivacyPolicy/style';
+
+const BulletItemTitle = [
+  '개인정보 취급 직원의 최소화 및 교육 개인정보를 취급하는 직원은 반드시 필요한 인원에 한하여 지정 관리하고 있으며, 취급직원을 대상으로 안전한 관리를 위한 교육을 실시하고 있습니다.',
+  '개인정보에 대한 접근 제한 개인정보를 처리하는 개인정보처리시스템에 대한 접근권한의 부여, 변경, 말소를 통하여 개인정보에 대한 접근통제를 위한 필요한 조치를 하고 있으며 침입차단시스템을 이용하여 외부로부터의 무단 접근을 통제하고 있습니다.',
+  '접속기록의 보관 개인정보처리시스템에 접속한 기록을 최소 6개월 이상 보관하고 있습니다.',
+  '개인정보의 암호화 개인정보는 암호화 등을 통해 안전하게 저장 및 관리되고 있습니다. 또한 중요한 데이터는 저장 및 전송 시 암호화하여 사용하는 등의 별도 보안기능을 사용하고 있습니다.',
+  '보안프로그램 설치 및 주기적 점검 갱신 해킹이나 컴퓨터 바이러스 등에 의한 개인정보 유출 및 훼손을 막기 위하여 보안프로그램을 설치하고, 주기적인 갱신·점검하고 있습니다.',
+  `비인가자에 대한 출입 통제 개인정보를 보관하고 있는 개인정보처리시스템의 물리적 보관 장소를 별도로 두고 이에 대해 출입통제 절차를 수립, 운영하고 있습니다.`,
+];
+
+const Policy9 = () => (
+  <S.PolicyContentBox>
+    <S.PolicyTitle>제 9조 (개인정보 안정성 확보조치)</S.PolicyTitle>
+    <S.SubTitle>
+      <span>1.&nbsp;</span>
+      광주소프트웨어마이스터고등학교는 원칙적으로 개인정보 처리목적이 달성된
+      개인정보는 지체 없이 파기합니다. 다만, 다른 법령에 따라 보존하여야 하는
+      경우에는 그러하지 않을 수 있습니다. 파기의 절차, 기한 및 방법은 다음과
+      같습니다.
+    </S.SubTitle>
+    <S.BulletItemWrap>
+      {BulletItemTitle.map((title, index) => (
+        <BulletItem isSmall={true} key={index}>
+          {title}
+        </BulletItem>
+      ))}
+    </S.BulletItemWrap>
+  </S.PolicyContentBox>
+);
+
+export default Policy9;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/index.tsx b/apps/client/src/components/Policy/PrivacyPolicy/index.tsx
new file mode 100644
index 000000000..b5020a8a1
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/index.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { BulletItem } from 'client/components';
+import { useGetWindowWidth } from 'client/hooks';
+
+import Policy1 from './Policy1';
+import Policy10 from './Policy10';
+import Policy11 from './Policy11';
+import Policy12 from './Policy12';
+import Policy2 from './Policy2';
+import Policy3 from './Policy3';
+import Policy4 from './Policy4';
+import Policy5 from './Policy5';
+import Policy6 from './Policy6';
+import Policy7 from './Policy7';
+import Policy8 from './Policy8';
+import Policy9 from './Policy9';
+import * as S from './style';
+
+const PrivacyPolicy = () => {
+  const width = useGetWindowWidth();
+
+  return (
+    <S.SectionWrap>
+      <S.ContentWrap>
+        <S.Title>개인정보처리방침</S.Title>
+        <S.PolicyContentWrap>
+          <S.IntroContentBox>
+            <S.IntroTitle>
+              광주소프트웨어마이스터고등학교 홈페이지를 이용하시면서
+            </S.IntroTitle>
+            <BulletItem isDark={true} isSmall={true}>
+              광주소프트웨어마이스터고등학교가 취급하는 모든 개인정보는
+              개인정보보호법 등 관련 법령상의 개인정보보호 규정을 준수하여
+              이용자의 개인정보보호 및 권익을 보호
+              <br />
+              하고 개인정보와 관련한 이용자의 고충을 원활하게 처리할 수 있도록
+              다음과 같은 처리방침을 두고 있습니다.{' '}
+            </BulletItem>
+            <BulletItem isDark={true} isSmall={true}>
+              이 개인정보처리방침은 시행일로부터 적용되며, 법령 및 방침에 따른
+              변경내용의 추가, 삭제 및 정정이 있는 경우에는 변경사항의 시행 7일
+              전부터 공지사항을 통하여 고<br />
+              지할 것입니다.
+            </BulletItem>
+          </S.IntroContentBox>
+          <Policy1 />
+          <Policy2 width={width} />
+          <Policy3 />
+          <Policy4 />
+          <Policy5 width={width} />
+          <Policy6 width={width} />
+          <Policy7 />
+          <Policy8 />
+          <Policy9 />
+          <Policy10 width={width} />
+          <Policy11 width={width} />
+          <Policy12 />
+        </S.PolicyContentWrap>
+      </S.ContentWrap>
+    </S.SectionWrap>
+  );
+};
+
+export default PrivacyPolicy;
diff --git a/apps/client/src/components/Policy/PrivacyPolicy/style.ts b/apps/client/src/components/Policy/PrivacyPolicy/style.ts
new file mode 100644
index 000000000..ae9c90726
--- /dev/null
+++ b/apps/client/src/components/Policy/PrivacyPolicy/style.ts
@@ -0,0 +1,124 @@
+import styled from '@emotion/styled';
+
+export const SectionWrap = styled.div`
+  margin: 5rem 0 7.5rem 0;
+`;
+
+export const ContentWrap = styled.div`
+  width: 1248px;
+  margin: 0 auto;
+  padding-left: 0.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+`;
+
+export const PolicyContentWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+`;
+
+export const Title = styled.h1`
+  color: ${({ theme }) => theme.color.gray['090']};
+  ${({ theme }) => theme.typo.h2}
+  font-weight: 600;
+  margin-bottom: 3.5rem;
+  padding-left: 0.5rem;
+`;
+
+export const IntroTitle = styled.h2`
+  color: ${({ theme }) => theme.color.gray['090']};
+  ${({ theme }) => theme.typo.h3}
+  font-weight: 400;
+`;
+
+export const PolicyTitle = styled.h2`
+  ${({ theme }) => theme.typo.h3}
+  color: ${({ theme }) => theme.color.gray['090']};
+  font-weight: 600;
+  padding-bottom: 4px;
+`;
+
+export const SubTitle = styled.p`
+  color: ${({ theme }) => theme.color.gray['070']};
+  ${({ theme }) => theme.typo.h4}
+  display: flex;
+  font-weight: 400;
+  span {
+    display: block;
+  }
+`;
+
+export const MiniTitle = styled(SubTitle)<{ isPadding?: boolean }>`
+  color: ${({ theme }) => theme.color.gray['070']};
+  ${({ theme }) => theme.typo.body1}
+  display: flex;
+  padding-bottom: ${({ isPadding }) => isPadding && '2px'};
+  > span {
+    padding-right: 0.5rem;
+  }
+`;
+
+export const ContentBoxTemplate = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const IntroContentBox = styled(ContentBoxTemplate)`
+  gap: 0.5rem;
+`;
+
+export const PolicyContentBox = styled(ContentBoxTemplate)`
+  width: 100%;
+  gap: 4px;
+`;
+
+export const BulletItemWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  padding-top: 8px;
+  padding-left: 20px;
+
+  > p {
+    padding-left: 1.625rem;
+  }
+`;
+
+export const StartDateTitle = styled.p`
+  color: ${({ theme }) => theme.color.gray['070']};
+  ${({ theme }) => theme.typo.h4}
+  font-weight: 600;
+  padding: 0.5rem 0 0.25rem 0;
+`;
+
+export const DateTitle = styled(StartDateTitle)`
+  font-weight: 400;
+  padding: 0;
+  > span {
+    color: ${({ theme }) => theme.color.gray['060']};
+    ${({ theme }) => theme.typo.body1}
+    font-weight: 600;
+    padding-left: 0.75rem;
+  }
+`;
+
+export const DateTitleWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+export const TableWrap = styled.div`
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+`;
diff --git a/apps/client/src/components/PostPage/AssembledPost/index.tsx b/apps/client/src/components/PostPage/AssembledPost/index.tsx
index f749e2a65..27b13f9e1 100644
--- a/apps/client/src/components/PostPage/AssembledPost/index.tsx
+++ b/apps/client/src/components/PostPage/AssembledPost/index.tsx
@@ -10,14 +10,19 @@ import { useGetPostDetail } from 'api/client';
 
 import { FileButton } from 'ui';
 
+import type { PostDetailType } from 'types';
+
 import * as S from './style';
 
 interface AssembledPostProps {
+  post: PostDetailType;
   postSeq: number;
 }
 
-const AssembledPost: React.FC<AssembledPostProps> = ({ postSeq }) => {
-  const { data } = useGetPostDetail(postSeq);
+const AssembledPost: React.FC<AssembledPostProps> = ({ postSeq, post }) => {
+  const { data } = useGetPostDetail(postSeq, {
+    initialData: post,
+  });
 
   return (
     <S.BackGround>
@@ -31,7 +36,7 @@ const AssembledPost: React.FC<AssembledPostProps> = ({ postSeq }) => {
           }
         >
           <PostDetailHead postSeq={postSeq} />
-          {data.postContent && (
+          {(data.postContent || data.fileInfo.length > 0) && (
             <S.ContentWrapper>
               <PostContent postSeq={postSeq} />
               {data.fileInfo.length > 0 && (
diff --git a/apps/client/src/components/PostPage/PostContent/index.tsx b/apps/client/src/components/PostPage/PostContent/index.tsx
index a03d3fe6a..8e3f41b5a 100644
--- a/apps/client/src/components/PostPage/PostContent/index.tsx
+++ b/apps/client/src/components/PostPage/PostContent/index.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import Image from 'next/image';
-
 import { useGetPostDetail } from 'api/client';
 
 import { filterImages } from 'common';
@@ -23,7 +21,7 @@ const PostContent: React.FC<PostContentProps> = ({ postSeq }) => {
         <S.ContentWrapper>
           {imageFiles.map((file, index) => (
             <S.ImageWrapper key={index}>
-              <Image src={file.fileUrl} alt={file.fileName} fill />
+              <S.ContentImage src={file.fileUrl} alt={file.fileName} fill />
             </S.ImageWrapper>
           ))}
           <S.ContentText>{data?.postContent}</S.ContentText>
diff --git a/apps/client/src/components/PostPage/PostContent/style.ts b/apps/client/src/components/PostPage/PostContent/style.ts
index e956048ef..e6966de37 100644
--- a/apps/client/src/components/PostPage/PostContent/style.ts
+++ b/apps/client/src/components/PostPage/PostContent/style.ts
@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 import styled from '@emotion/styled';
 
 export const ContentWrapper = styled.div`
@@ -11,9 +13,12 @@ export const ContentWrapper = styled.div`
   }
 `;
 
+export const ContentImage = styled(Image)`
+  position: relative !important;
+`;
+
 export const ImageWrapper = styled.div`
   width: 50rem;
-  height: 30.375rem;
   overflow: hidden;
   position: relative;
   img {
diff --git a/apps/client/src/components/PostPage/PostDetailHead/index.tsx b/apps/client/src/components/PostPage/PostDetailHead/index.tsx
index 309a862ea..e74d434b1 100644
--- a/apps/client/src/components/PostPage/PostDetailHead/index.tsx
+++ b/apps/client/src/components/PostPage/PostDetailHead/index.tsx
@@ -18,6 +18,7 @@ const categoryTitle = {
 
 const PostDetailHead: React.FC<PostDetailHeadProps> = ({ postSeq }) => {
   const { data } = useGetPostDetail(postSeq);
+
   return (
     <>
       {data && (
@@ -34,4 +35,5 @@ const PostDetailHead: React.FC<PostDetailHeadProps> = ({ postSeq }) => {
     </>
   );
 };
+
 export default PostDetailHead;
diff --git a/apps/client/src/components/PromotionVideo/Video.tsx b/apps/client/src/components/PromotionVideo/Video.tsx
new file mode 100644
index 000000000..d9aa40669
--- /dev/null
+++ b/apps/client/src/components/PromotionVideo/Video.tsx
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+const Video = () => (
+  <VideoStyled
+    poster='/images/promotion/poster.png'
+    autoPlay
+    loop
+    muted
+    playsInline
+  >
+    <source src='/video/promotion.webm' type='video/webm' />
+    <source src='/video/promotion.mp4' type='video/mp4' />
+  </VideoStyled>
+);
+
+const VideoStyled = styled.video`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+
+export default Video;
diff --git a/apps/client/src/components/PromotionVideo/index.tsx b/apps/client/src/components/PromotionVideo/index.tsx
index b77893d33..359177ded 100644
--- a/apps/client/src/components/PromotionVideo/index.tsx
+++ b/apps/client/src/components/PromotionVideo/index.tsx
@@ -2,15 +2,16 @@
 
 import { Scroll } from 'client/components';
 
+import Video from './Video';
 import * as S from './style';
 
 const PromotionVideo = () => (
-  <S.VidoeWrapper>
-    <S.Video src='/video/promotion.mp4' autoPlay loop muted playsInline />
+  <S.VideoWrapper>
+    <Video />
     <S.VideoCover>
       <Scroll isPromotion={true} />
     </S.VideoCover>
-  </S.VidoeWrapper>
+  </S.VideoWrapper>
 );
 
 export default PromotionVideo;
diff --git a/apps/client/src/components/PromotionVideo/style.ts b/apps/client/src/components/PromotionVideo/style.ts
index cb1e023ae..0884fb61a 100644
--- a/apps/client/src/components/PromotionVideo/style.ts
+++ b/apps/client/src/components/PromotionVideo/style.ts
@@ -1,24 +1,21 @@
 import styled from '@emotion/styled';
 
-export const VidoeWrapper = styled.div`
+export const VideoWrapper = styled.div`
   width: 100%;
   height: 100vh;
+  height: 100dvh;
   position: fixed;
   top: 0;
   z-index: 0;
   display: flex;
   justify-content: center;
-`;
-
-export const Video = styled.video`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  background-color: ${({ theme }) => theme.color.black};
 `;
 
 export const VideoCover = styled.div`
   width: 100%;
   height: 100vh;
+  height: 100dvh;
   background: rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 0;
diff --git a/apps/client/src/components/Title/News/index.tsx b/apps/client/src/components/Title/News/index.tsx
index 7cf9e2b53..372c49cca 100644
--- a/apps/client/src/components/Title/News/index.tsx
+++ b/apps/client/src/components/Title/News/index.tsx
@@ -22,7 +22,7 @@ const NewsTitle: React.FC<NewsTitleProps> = ({
   </TitleTemplate>
 );
 
-export const NewsTitleStyle = styled.h1`
+export const NewsTitleStyle = styled.h2`
   font-size: 1.75rem;
   line-height: 2.563rem;
   font-weight: 600;
diff --git a/apps/client/src/components/index.ts b/apps/client/src/components/index.ts
index 9bf35fb5a..b2073dda9 100644
--- a/apps/client/src/components/index.ts
+++ b/apps/client/src/components/index.ts
@@ -1,6 +1,8 @@
 export { default as AboutTitle } from './Title/About';
 export { default as AssembledPost } from './PostPage/AssembledPost';
+export { default as BulletItem } from './Policy/BulletItem';
 export { default as CategoryHeader } from './CategoryHeader';
+export { default as CopyrightPolicy } from './Policy/Copyright';
 export { default as CurriculumCards } from './About/Section4/CurriculumCards';
 export { default as DesktopResponsive } from './About/Section5/DesktopResponsive';
 export { default as EducationDirection } from './About/Section3/EducationDirection';
@@ -12,10 +14,12 @@ export { default as Header } from './Header';
 export { default as IdealTalent } from './About/Section7/IdealTalent';
 export { default as LinkToHelloGSM } from './LinkToHelloGSM';
 export { default as ListPageContent } from './ListPageContent';
+export { default as Location } from './About/Location';
 export { default as MainPageContent } from './MainPage/Content';
 export { default as MainPageHeader } from './MainPage/Header';
 export { default as MainPageNewsletterList } from './MainPage/NewsletterList';
 export { default as MajorCard } from './About/Section5/MajorCard';
+export { default as MediaPolicy } from './Policy/Media';
 export { default as MobileResponsive } from './About/Section5/MobileResponsive';
 export { default as NavigationEvents } from './NavigationEvents';
 export { default as NewsTitle } from './Title/News';
@@ -24,6 +28,7 @@ export { default as NotFoundContent } from './NotFoundContent';
 export { default as NoticeBanner } from './NoticeBanner';
 export { default as PostContent } from './PostPage/PostContent';
 export { default as PostDetailHead } from './PostPage/PostDetailHead';
+export { default as PrivacyPolicy } from './Policy/PrivacyPolicy';
 export { default as PromotionVideo } from './PromotionVideo';
 export { default as ReturnToList } from './PostPage/ReturnToList';
 export { default as Scroll } from './Scroll';
diff --git a/apps/client/src/hooks/index.ts b/apps/client/src/hooks/index.ts
index 2f7cbf580..97486aefd 100644
--- a/apps/client/src/hooks/index.ts
+++ b/apps/client/src/hooks/index.ts
@@ -2,3 +2,4 @@ export { default as useGetScrollHeight } from './useGetScrollHeight';
 export { default as useGetWindowHeight } from './useGetWindowHeight';
 export { default as useGetWindowScrollHeight } from './useGetWindowScrollHeight';
 export { default as useGetWindowWidth } from './useGetWindowWidth';
+export { default as useScrollToTop } from './useScrollToTop';
diff --git a/apps/client/src/hooks/useScrollToTop.ts b/apps/client/src/hooks/useScrollToTop.ts
new file mode 100644
index 000000000..e99b105d8
--- /dev/null
+++ b/apps/client/src/hooks/useScrollToTop.ts
@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+
+/**
+ * window를 맨 위로 scroll합니다.
+ */
+export default function useScrollToTop() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+}
diff --git a/packages/api/client/src/hooks/api/post/useGetPostDetail.ts b/packages/api/client/src/hooks/api/post/useGetPostDetail.ts
index be2f2e728..e7ed28478 100644
--- a/packages/api/client/src/hooks/api/post/useGetPostDetail.ts
+++ b/packages/api/client/src/hooks/api/post/useGetPostDetail.ts
@@ -13,5 +13,5 @@ export const useGetPostDetail = (
   useQuery<PostDetailType>(
     postQueryKeys.getPostDetail(seq),
     () => get(postUrl.postDetail(seq)),
-    options
+    { staleTime: 1000, ...options }
   );
diff --git a/packages/common/src/styles/theme.ts b/packages/common/src/styles/theme.ts
index 6c28441e2..7444b0f58 100644
--- a/packages/common/src/styles/theme.ts
+++ b/packages/common/src/styles/theme.ts
@@ -11,6 +11,7 @@ const color = {
     orange: '#FF9877',
     yellow: '#F8FADB',
     gray: '#CDD5E2',
+    green: '#73962B',
   },
   gray: {
     '010': '#FCFCFC',
diff --git a/packages/common/src/utils/descriptionFormatting.ts b/packages/common/src/utils/descriptionFormatting.ts
new file mode 100644
index 000000000..bcdbbc5be
--- /dev/null
+++ b/packages/common/src/utils/descriptionFormatting.ts
@@ -0,0 +1,4 @@
+const descriptionFormatting = (description: string) =>
+  description.replace(/\n/g, ' ').replace(/\s+/g, ' ').slice(0, 120);
+
+export default descriptionFormatting;
diff --git a/packages/common/src/utils/filterImages.ts b/packages/common/src/utils/filterImages.ts
index f98206c10..ceb9bd638 100644
--- a/packages/common/src/utils/filterImages.ts
+++ b/packages/common/src/utils/filterImages.ts
@@ -1,10 +1,10 @@
 import { FileInfoType } from 'types';
 
-const extentions = ['JPG', 'PNG', 'HEIC', 'JPEG', 'WEBP'];
+const extensions = ['JPG', 'PNG', 'HEIC', 'JPEG', 'WEBP'];
 
 const filterImages = (fileInfo?: FileInfoType[]): FileInfoType[] => {
   return (
-    fileInfo?.filter((file) => extentions.includes(file.fileExtension)) ?? []
+    fileInfo?.filter((file) => extensions.includes(file.fileExtension)) ?? []
   );
 };
 
diff --git a/packages/common/src/utils/index.ts b/packages/common/src/utils/index.ts
index b9974afbd..7cfaba149 100644
--- a/packages/common/src/utils/index.ts
+++ b/packages/common/src/utils/index.ts
@@ -3,3 +3,4 @@ export { default as formatDate } from './formatDate';
 export { default as secondsToMs } from './secondsToMs';
 export { default as pxToRem } from './pxToRem';
 export { default as filterImages } from './filterImages';
+export { default as descriptionFormatting } from './descriptionFormatting';