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 (
+ <>
+
+
+
+
+ );
+}
diff --git a/apps/client/src/components/Footer/index.tsx b/apps/client/src/components/Footer/index.tsx
index d45898d50..f54c26183 100644
--- a/apps/client/src/components/Footer/index.tsx
+++ b/apps/client/src/components/Footer/index.tsx
@@ -23,7 +23,7 @@ const Footer = () => {
개인정보처리방침
- 영상정보처리기기운영·관리방침
+ 영상정보처리기기운영·관리방침
저작권신고 및 보호규정
찾아오시는 길
관리자
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 (
+
+
+ 영상정보처리기기 운영ㆍ관리 방침
+
+ 영상정보처리기기 운영.관리 방침
+
+ 본 광주소프트웨어마이스터고등학교(이하 본 기관이라 함)는
+ 영상정보처리기기 운영․관리 방침을 통해 본 기관에서 처리하는
+ 영상정보가 어떠한 용도와 방식으로 이용ㆍ관리되고 있는지
+ 알려드립니다.
+
+
+
+
+ 영상정보처리기기의 설치 근거 및 설치 목적
+
+
+ 쿠키의 사용 목적 : 자주 찾는 서비스를 설정할 수 있도록 하여
+ 이용자에게 최적화된 정보 제공을 위해 사용됩니다.
+
+
+ - 시설안전 및 화재 예방
+
- 차량도난 및 파손방지 : 주차장에 설치하는 경우
+
- 주차대수 30대를 초과하는 규모의 경우「주차장법
+ 시행규칙」제6조제1항을 근거로 설치ㆍ운영 가능
+
+
+
+ 설치 대수, 설치 위치 및 촬영범위
+ {설치대수설치위치및촬영범위.map((text, index) => (
+ {text}
+ ))}
+
+
+ 관리책임자 및 접근권한자
+
+ 귀하의 영상정보를 보호하고 개인영상정보와 관련한 불만을 처리하기
+ 위하여 아래와 같이 개인영상정보 보호책임자를 두고 있습니다.
+
+ {width > 1024 ? (
+
+
+ 구분
+ 이름
+ 직위
+ 소속
+ 연락처
+
+ 관리책임자
+ 이수연
+ 실장
+ 행정실
+ 062-949-6803
+ 접근관리자
+ 장희연
+ 주무관
+ 행정실
+ 062-949-6808
+
+
+
+ ) : (
+ <>
+
+
+ 구분
+ 이름
+ 직위
+
+ 관리책임자
+ 이수연
+ 실장
+ 접근관리자
+ 장희연
+ 주무관
+
+
+
+ 소속
+ 연락처
+
+ 행정실
+ 062-949-6803
+ 행정실
+ 062-949-6808
+
+
+
+
+ )}
+
+
+
+ 영상정보의 촬영시간, 보관기간, 보관장소 및 처리방법
+
+
+ 처리방법: 개인영상정보의 목적 외 이용, 제3자 제공, 파기, 열람 등
+ 요구에 관한 사항을 기록ㆍ관리하고, 보관기간 만료 시 복원이 불가능한
+ 방법으로 영구 삭제(출력물의 경우 파쇄 또는 소각)합니다.
+
+
+ 촬영시간
+ 연락처
+ 연락처
+
+ 24시간
+
+ - 촬영일로부터 20일
+
- 보유기관 경과 자동삭제
+
+ 중앙통제실(당직실)
+
+
+
+
+
+ 개인영상정보의 확인 방법 및 장소에 관한 사항
+
+ {개인영상정보의확인방법및장소에관한사항.map((text, index) => (
+ {text}
+ ))}
+
+
+
+ 정보주체의 영상정보 열람 등 요구에 대한 조치
+
+
+ 본 기관에서 처리하는 영상정보는 다음과 같이 안전성 확보조치(관리적,
+ 기술적, 물리적 조치)를 통해 안전하게 관리되고 있습니다. 본 기관은
+ 개인영상정보를 위한 관리적 대책으로서 개인정보에 대한 접근 권한을
+ 차등부여하고 있고, 개인영상정보의 위ㆍ변조 방지를 위하여
+ 개인영상정보의 생성 일시, 열람시 열람 목적, 열람자, 열람 일시 등을
+ 기록하여 관리하고 있습니다. 이 외에도 개인영상정보의 안전한 물리적
+ 보관을 위하여 잠금장치를 설치하고 있습니다.
+
+
+
+ 영상정보의 안전성 확보조치
+ {영상정보의안전성확보조치.map((text, index) => (
+ {text}
+ ))}
+
+
+ 영상정보 처리방침 변경에 관한 사항
+
+ 이 영상정보처리기기 운영․관리방침은 2019년 11월 22일에 제정되었으며
+ 법령ㆍ정책 또는 보안기술의변경에 따라 내용의 추가ㆍ삭제 및 수정이
+ 있을 시에는 본 기관 홈페이지를 통해 변경사유 및 내용 등을 공지하도록
+ 하겠습니다.
+
+ 공고일자 : 2019년 12월 2일 / 시행일자 : 2019년 12월 2일
+
+
+
+
+ );
+};
+
+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/index.ts b/apps/client/src/components/index.ts
index 33b071263..e50a8ef8c 100644
--- a/apps/client/src/components/index.ts
+++ b/apps/client/src/components/index.ts
@@ -19,6 +19,7 @@ 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';