themoment-team · handsomejeongwoo · Aug 21, 2023 · Aug 8, 2023 · Aug 8, 2023 · Aug 10, 2023
diff --git a/apps/client/src/app/policy/privacy/page.tsx b/apps/client/src/app/policy/privacy/page.tsx
@@ -0,0 +1,11 @@
+import { PrivacyPolicy, Header, Footer } from 'client/components';
+
+export default function Privacy() {
+  return (
+    <>
+      <Header segment='about' />
+      <PrivacyPolicy />
+      <Footer />
+    </>
+  );
+}
diff --git a/apps/client/src/components/Footer/index.tsx b/apps/client/src/components/Footer/index.tsx
@@ -22,7 +22,7 @@ const Footer = () => {
               ALL RIGHTS RESERVED.
             </S.Copyright>
             <S.LinkWrapper>
-              <Link href='#'>개인정보처리방침</Link>
+              <Link href='/policy/privacy'>개인정보처리방침</Link>
               <Link href='#'>영상정보처리기기운영·관리방침</Link>
               <Link href='/policy/copyright'>저작권신고 및 보호규정</Link>
               <Link href='/about/location'>찾아오시는 길</Link>

diff --git a/apps/client/src/components/Policy/BulletItem/index.tsx b/apps/client/src/components/Policy/BulletItem/index.tsx
@@ -6,16 +6,18 @@ 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>{children}</S.Text>
+    <S.Text isSmall={isSmall}>{children}</S.Text>
   </S.BulletItemWrapper>
 );
 

diff --git a/apps/client/src/components/Policy/BulletItem/style.ts b/apps/client/src/components/Policy/BulletItem/style.ts
@@ -14,9 +14,9 @@ export const Bullet = styled.div<{ isDark: boolean }>`
   margin-top: 0.5938rem;
 `;
 
-export const Text = styled.p`
-  ${({ theme }) => theme.typo.h4}
-  width: 100%;
+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/PrivacyPolicy/Policy1/index.tsx 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
@@ -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
@@ -0,0 +1,53 @@
+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>
+      )}
+      {width < 900 && <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
@@ -0,0 +1,64 @@
+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;
+  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/Policy11/FifthTable900.tsx 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
@@ -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;