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/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,8 +14,8 @@ export const Bullet = styled.div<{ isDark: boolean }>`
   margin-top: 0.5938rem;
 `;
 
-export const Text = styled.p`
-  ${({ theme }) => theme.typo.h4}
+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/PrivacyPolicy/FifthTable/index.tsx b/apps/client/src/components/PrivacyPolicy/FifthTable/index.tsx
@@ -0,0 +1,22 @@
+import * as S from './style';
+
+const FifthTable = () => (
+  <S.TableTitle>
+    <S.TableTitleContent>구분</S.TableTitleContent>
+    <S.TableTitleContent>개인정보 보호책임자</S.TableTitleContent>
+    <S.TableTitleContent>개인정보 보호담당자</S.TableTitleContent>
+    <S.TableContent>
+      <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.TableRowContent>전화번호</S.TableRowContent>
+      <S.TableRowContent>062-949-6801</S.TableRowContent>
+      <S.TableRowContent>062-949-6801</S.TableRowContent>
+    </S.TableContent>
+  </S.TableTitle>
+);
+
+export default FifthTable;
diff --git a/apps/client/src/components/PrivacyPolicy/FifthTable/style.ts b/apps/client/src/components/PrivacyPolicy/FifthTable/style.ts
@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+
+export const TableTitle = styled.div`
+  display: grid;
+  margin: 0.75rem 0 1.5rem 0;
+  grid-template-columns: 11.25rem 40rem 26.25rem;
+  grid-template-rows: 3.75rem;
+`;
+
+export const TableContent = styled.div`
+  display: grid;
+  grid-template-columns: 11.25rem 40rem 26.25rem;
+  grid-template-rows: 3rem 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']};
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
diff --git a/apps/client/src/components/PrivacyPolicy/FirstTable/index.tsx b/apps/client/src/components/PrivacyPolicy/FirstTable/index.tsx
@@ -0,0 +1,114 @@
+import * as S from './style';
+
+const FirstTable = () => (
+  <S.TableTitle>
+    <S.TableTitleContent>개인정보 파일명</S.TableTitleContent>
+    <S.TableTitleContent>보유목적</S.TableTitleContent>
+    <S.TableTitleContent>보유근거</S.TableTitleContent>
+    <S.TableTitleContent>항목</S.TableTitleContent>
+    <S.TableTitleContent>보유기간</S.TableTitleContent>
+    <S.TableTitleContent>
+      열람요구
+      <br />
+      접수처리부서
+    </S.TableTitleContent>
+    <S.TableContent>
+      <S.TableRowContent>학교생활 기록부</S.TableRowContent>
+      <S.TableRowContent>
+        학생의 학업성취도 평가를 통한 내실화 도모
+      </S.TableRowContent>
+      <S.TableRowContent>
+        -「초ㆍ중등교육법」제25조
+        <br /> -「초ㆍ중등교육법 시행규칙」제21조
+      </S.TableRowContent>
+      <S.TableRowContent>
+        -학생: 성명,주민번호,주소
+        <br /> -보호자: 성명, 생년월일
+      </S.TableRowContent>
+      <S.TableRowContent>준영구</S.TableRowContent>
+      <S.TableRowContent>각 학년부, 행정실</S.TableRowContent>
+      <S.TableRowContent>학생건강 기록부</S.TableRowContent>
+      <S.TableRowContent>학생건강기록 관리</S.TableRowContent>
+      <S.TableRowContent>
+        -「학교건강검사 규칙」제9조
+        <br /> -「학생건강기록부 전산처리 및 관리지침」제14조
+      </S.TableRowContent>
+      <S.TableRowContent>
+        이름, 주민번호, 학년, 반, 번호, 성별,
+        <br /> 혈액형, 키, 몸무게, 비만도
+      </S.TableRowContent>
+      <S.TableRowContent>졸업후 5년</S.TableRowContent>
+      <S.TableRowContent>보건실</S.TableRowContent>
+      <S.TableRowContent>
+        학부모서비스
+        <br /> 이용자명단
+      </S.TableRowContent>
+      <S.TableRowContent>학부모의 학생정보 열람</S.TableRowContent>
+      <S.TableRowContent>「교육기본법」제23조의3</S.TableRowContent>
+      <S.TableRowContent>
+        -학부모: 성명, 주민번호
+        <br />
+        -학생: 성명, 주민번호
+      </S.TableRowContent>
+      <S.TableRowContent>회원탈퇴시까지</S.TableRowContent>
+      <S.TableRowContent>각 학년부</S.TableRowContent>
+      <S.TableRowContent>
+        홈페이지
+        <br />
+        회원정보
+      </S.TableRowContent>
+      <S.TableRowContent>홈페이지회원관리</S.TableRowContent>
+      <S.TableRowContent>정보주체 동의</S.TableRowContent>
+      <S.TableRowContent>이름,학년,반,번호</S.TableRowContent>
+      <S.TableRowContent>
+        졸업/회원탈퇴시
+        <br />
+        까지
+      </S.TableRowContent>
+      <S.TableRowContent>인문교육 정보부</S.TableRowContent>
+      <S.TableRowContent>민원사무 처리부</S.TableRowContent>
+      <S.TableRowContent>민원접수 및 처리 관리</S.TableRowContent>
+      <S.TableRowContent>
+        -「민원 처리에 관한 법률 시행령」제6조
+        <br />
+        -「민원 처리에 관한 법률 시행규칙」제3조
+      </S.TableRowContent>
+      <S.TableRowContent>이름,집주소,E-mail,연락처</S.TableRowContent>
+      <S.TableRowContent>10년</S.TableRowContent>
+      <S.TableRowContent>행정실</S.TableRowContent>
+
+      <S.TableRowContent>학교운영위원회명부</S.TableRowContent>
+      <S.TableRowContent>학교운영위원회 구성 및 운영관리</S.TableRowContent>
+      <S.TableRowContent>
+        -「초ㆍ중등교육법」제34조
+        <br />
+        -「초ㆍ중등교육법 시행규칙」제62조
+      </S.TableRowContent>
+      <S.TableRowContent>성명,주소,생년월일, 직업,연락처</S.TableRowContent>
+      <S.TableRowContent>10년</S.TableRowContent>
+      <S.TableRowContent>행정실</S.TableRowContent>
+      <S.TableRowContent>
+        스쿨뱅킹(CMS)
+        <br />
+        정보
+      </S.TableRowContent>
+      <S.TableRowContent>수납금 처리</S.TableRowContent>
+      <S.TableRowContent>정보주체 동의</S.TableRowContent>
+      <S.TableRowContent>
+        -학생: 이름,생년월일,학년,반,번호
+        <br />
+        -보호자: 이름,연락처,생년월일,계좌정보
+      </S.TableRowContent>
+      <S.TableRowContent>5년</S.TableRowContent>
+      <S.TableRowContent>행정실</S.TableRowContent>
+      <S.TableRowContent>발전기금 기탁자명부</S.TableRowContent>
+      <S.TableRowContent>학교발전기금 기탁자 및 내역 관리</S.TableRowContent>
+      <S.TableRowContent>「초ㆍ중등교육법 시행규칙」제52조</S.TableRowContent>
+      <S.TableRowContent>성명, 생년월일, 주소, 연락처</S.TableRowContent>
+      <S.TableRowContent>5년</S.TableRowContent>
+      <S.TableRowContent>행정실</S.TableRowContent>
+    </S.TableContent>
+  </S.TableTitle>
+);
+
+export default FirstTable;
diff --git a/apps/client/src/components/PrivacyPolicy/FirstTable/style.ts b/apps/client/src/components/PrivacyPolicy/FirstTable/style.ts
@@ -0,0 +1,39 @@
+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;
+`;
+
+export const TableContent = styled.div`
+  display: grid;
+  grid-template-columns: 9rem 14.75rem 20rem 17.5rem 8rem 8.25rem;
+
+  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;
+`;
+
+export const TableTitleContent = styled(TabelCellTemplate)`
+  background-color: ${({ theme }) => theme.color.gray['030']};
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.6875rem;
+`;
+
+export const TableRowContent = styled(TabelCellTemplate)`
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
diff --git a/apps/client/src/components/PrivacyPolicy/FourthTable/index.tsx b/apps/client/src/components/PrivacyPolicy/FourthTable/index.tsx
@@ -0,0 +1,29 @@
+import * as S from './style';
+
+const FourthTable = () => (
+  <S.TableTitle>
+    <S.TableTitleContent>구분</S.TableTitleContent>
+    <S.TableTitleContent>홈페이지</S.TableTitleContent>
+    <S.TableTitleContent>전화</S.TableTitleContent>
+    <S.TableContent>
+      <S.TableRowContent>
+        개인정보 침해신고센터(한국인터넷진흥원 운영)
+      </S.TableRowContent>
+      <S.TableRowContent>http://privacy.kisa.or.kr</S.TableRowContent>
+      <S.TableRowContent>(국번없이) 118</S.TableRowContent>
+      <S.TableRowContent>
+        개인정보 분쟁조정위원회(개인정보보호위원회 운영)
+      </S.TableRowContent>
+      <S.TableRowContent>http://www.kopico.go.kr</S.TableRowContent>
+      <S.TableRowContent>1833-6972</S.TableRowContent>
+      <S.TableRowContent>경찰청 사이버안전국</S.TableRowContent>
+      <S.TableRowContent>http://cyberbureau.police.go.kr</S.TableRowContent>
+      <S.TableRowContent>(국번없이) 182</S.TableRowContent>
+      <S.TableRowContent>대검찰청 사이버수사과</S.TableRowContent>
+      <S.TableRowContent>http://www.spo.go.kr</S.TableRowContent>
+      <S.TableRowContent>(국번없이) 130118</S.TableRowContent>
+    </S.TableContent>
+  </S.TableTitle>
+);
+
+export default FourthTable;
diff --git a/apps/client/src/components/PrivacyPolicy/FourthTable/style.ts b/apps/client/src/components/PrivacyPolicy/FourthTable/style.ts
@@ -0,0 +1,38 @@
+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;
+`;
+
+export const TableContent = styled.div`
+  display: grid;
+  grid-template-columns: 25rem 32.5rem 20rem;
+  grid-template-rows: 3rem 3rem 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']};
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
diff --git a/apps/client/src/components/PrivacyPolicy/SecondTable/index.tsx b/apps/client/src/components/PrivacyPolicy/SecondTable/index.tsx
@@ -0,0 +1,34 @@
+import * as S from './style';
+
+const SecondTable = () => (
+  <S.TableTitle>
+    <S.TableTitleContent>위탁하는 업무의 내용</S.TableTitleContent>
+    <S.TableTitleContent>수탁 업체(명)</S.TableTitleContent>
+    <S.TableTitleContent>위탁 항목</S.TableTitleContent>
+    <S.TableContent>
+      <S.TableRowContent>
+        광주소프트웨어마이스터고등학교
+        <br /> 홈페이지 유지관리
+      </S.TableRowContent>
+      <S.TableRowContent>
+        이름,학년,반,번호
+        <br />※ 회원가입시 수집하는 항목
+      </S.TableRowContent>
+      <S.TableRowContent>더모먼트</S.TableRowContent>
+      <S.TableRowContent>방과후 학교 프로그램운영</S.TableRowContent>
+      <S.TableRowContent>
+        이름,학년,반,번호,학생개인연락처,부 또는 모 성함 및 연락처
+        <br />※ 위탁시 제공하는 항목
+      </S.TableRowContent>
+      <S.TableRowContent>
+        업체명: ㈜엑스메카
+        <br />
+        주소: 광주광역시 서구 천변좌로 268 KDB생명빌딩 2510호
+        <br />
+        전화번호: 062-374-9986
+      </S.TableRowContent>
+    </S.TableContent>
+  </S.TableTitle>
+);
+
+export default SecondTable;