지난 과정
- 개인정보처리방침 페이지에 사용할 내용 작성해두었음
작업 과정
1. 개인정보처리방침 을 위한 공간 만들기
2. 공간 내 내용 붙여넣기
과정 1. 개인정보처리방침을 위한 공간 만들기
&
과정 2. 공간 내 내용 붙여넣기
과정 내용:
- 내가 만드는 서비스는 SPA로 기존에 보여주던 내용 Component 대신 개인정보처리방침을 보여줄 Component를 보여주어야 함
- 이를 위해서는 MUI Dialog 를 사용하는 것이 가장 좋다고 판단
진행 방향:
- 개인정보처리방침을 보여주기 위해 MUI Dialog 사용
- MUI Dialog 의 open 여부는 react state 사용
- footer에서 state와 setState를 props 로 받음
- DialogTitle 에 제목
- DialogContent 에 내용 넣음 (내용은 작성 게시물 - Part 1 에서 가져옴)
결과 코드:
const MyFooter = (props) => {
const handlePrivacyOpen = () => {
props.setPrivacy(true);
};
const handlePrivacyClose = () => {
props.setPrivacy(false);
};
const handleContactOpen = () => {
props.setContact(true);
};
const handleContactClose = () => {
props.setContact(false);
};
return (
<>
<div>
<Dialog
open={props.privacy}
onClose={handlePrivacyClose}
aria-labelledby="privacy-dialog-title"
aria-describedby="privacy-dialog-description"
>
<DialogTitle id="privacy-dialog-title">{"개인정보처리방침"}</DialogTitle>
<DialogContent>
<DialogContentText id="privacy-dialog-description">
<p><span><b>1. 개인정보의 처리 목적</b></span></p>
<p><span><나만솔로>(‘<a href="https://iamsolo.site/">https://iamsolo.site/</a>’이하 ‘나는솔로 비공식 팬사이트’) 은(는) 다음의 목적을 위하여 개인정보를 처리하고 있으며, 다음의 목적 이외의 용도로는 이용하지 않습니다.</span><span><br /></span><span>- 고객 가입의사 확인, 고객에 대한 서비스 제공에 따른 본인 식별.인증, 회원자격 유지.관리, 물품 또는 서비스 공급에 따른 금액 결제, 물품 또는 서비스의 공급.배송 등</span><span><br /></span><span><br /></span>
<span><b>2. 개인정보의 처리 및 보유 기간</b></span><span><br /></span><span><br /></span><span>① <나만솔로>(‘<a href="https://iamsolo.site/">https://iamsolo.site/</a>’이하 ‘나는솔로 비공식 팬사이트’) 은(는) 정보주체로부터 개인정보를 수집할 때 동의 받은 개인정보 보유․이용기간 또는 법령에 따른 개인정보 보유․이용기간 내에서 개인정보를 처리․보유합니다.</span><span><br /></span><span><br /></span><span>② 구체적인 개인정보 처리 및 보유 기간은 다음과 같습니다.</span><span><br /></span><span>☞ 아래 예시를 참고하여 개인정보 처리업무와 개인정보 처리업무에 대한 보유기간 및 관련 법령, 근거 등을 기재합니다.</span><span><br /></span><span>(예시)- 고객 가입 및 관리 : 서비스 이용계약 또는 회원가입 해지시까지, 다만 채권․채무관계 잔존시에는 해당 채권․채무관계 정산시까지</span><span><br /></span><span>- 전자상거래에서의 계약․청약철회, 대금결제, 재화 등 공급기록 : 5년</span></p>
<p><span><b>3. 정보주체와 법정대리인의 권리·의무 및 그 행사방법 이용자는 개인정보주체로써 다음과 같은 권리를 행사할 수 있습니다.</b></span></p>
<p><span>① 정보주체는 나만솔로(‘<a href="https://iamsolo.site/">https://iamsolo.site/</a>’이하 ‘나는솔로 비공식 팬사이트) 에 대해 언제든지 다음 각 호의 개인정보 보호 관련 권리를 행사할 수 있습니다.</span><span><br /></span><span>1. 개인정보 열람요구</span><span><br /></span><span>2. 오류 등이 있을 경우 정정 요구</span><span><br /></span><span>3. 삭제요구</span><span><br /></span><span>4. 처리정지 요구</span></p>
<p><span><b>4. 처리하는 개인정보의 항목 작성</b></span><span><br /></span><span><br /></span><span>① </span><span><나만솔로>('<a href="https://iamsolo.site/'이하">https://iamsolo.site/'이하</a> '나는솔로 비공식 팬사이트')</span><span>은(는) 다음의 개인정보 항목을 처리하고 있습니다.</span></p>
<p><span>1<없음></span><span><br /></span><span>- 필수항목 : 없음</span><span><br /></span><span>- 선택항목 :</span></p>
<p><span><b>5. 개인정보의 파기</b></span></p>
<p><span><나만솔로>('나는솔로 비공식 팬사이트')</span><span>은(는) 원칙적으로 개인정보 처리목적이 달성된 경우에는 지체없이 해당 개인정보를 파기합니다. 파기의 절차, 기한 및 방법은 다음과 같습니다.</span></p>
<p><span>-파기절차</span><span><br /></span><span>이용자가 입력한 정보는 목적 달성 후 별도의 DB에 옮겨져(종이의 경우 별도의 서류) 내부 방침 및 기타 관련 법령에 따라 일정기간 저장된 후 혹은 즉시 파기됩니다. 이 때, DB로 옮겨진 개인정보는 법률에 의한 경우가 아니고서는 다른 목적으로 이용되지 않습니다.</span><span><br /></span><span><br /></span><span>-파기기한</span><span><br /></span><span>이용자의 개인정보는 개인정보의 보유기간이 경과된 경우에는 보유기간의 종료일로부터 5일 이내에, 개인정보의 처리 목적 달성, 해당 서비스의 폐지, 사업의 종료 등 그 개인정보가 불필요하게 되었을 때에는 개인정보의 처리가 불필요한 것으로 인정되는 날로부터 5일 이내에 그 개인정보를 파기합니다.</span></p>
<p><span><b>6. 개인정보 자동 수집 장치의 설치•운영 및 거부에 관한 사항</b></span></p>
<p><span>나만솔로 은 정보주체의 이용정보를 저장하고 수시로 불러오는 ‘쿠키’를 사용하지 않습니다.</span></p>
<p><span><b>7. 개인정보 보호책임자 작성</b></span></p>
<p><span>① 나만솔로(‘<a href="https://iamsolo.site/">https://iamsolo.site/</a>’이하 ‘나는솔로 비공식 팬사이트) 은(는) 개인정보 처리에 관한 업무를 총괄해서 책임지고, 개인정보 처리와 관련한 정보주체의 불만처리 및 피해구제 등을 위하여 아래와 같이 개인정보 보호책임자를 지정하고 있습니다.</span></p>
<p><span>▶ 개인정보 보호책임자</span><span><br /></span><span>성명: 박태선</span><span><br /></span><span>직책: 대표</span><span><br /></span><span>직급: CEO</span><span><br /></span><span>mobile: 01036539698</span><span><br /></span><span>email: taesonpark@naver.com</span></p>
<p><span>② 정보주체께서는 나만솔로(‘<a href="https://iamsolo.site/">https://iamsolo.site/</a>’이하 ‘나는솔로 비공식 팬사이트) 의 서비스(또는 사업)을 이용하시면서 발생한 모든 개인정보 보호 관련 문의, 불만처리, 피해구제 등에 관한 사항을 개인정보 보호책임자 및 담당부서로 문의하실 수 있습니다. 나만솔로(‘<a href="https://iamsolo.site/">https://iamsolo.site/</a>’이하 ‘나는솔로 비공식 팬사이트) 은(는) 정보주체의 문의에 대해 지체 없이 답변 및 처리해드릴 것입니다.</span></p>
<p><span><b>8. 개인정보 처리방침 변경</b></span></p>
<p><span>①이 개인정보처리방침은 시행일로부터 적용되며, 법령 및 방침에 따른 변경내용의 추가, 삭제 및 정정이 있는 경우에는 변경사항의 시행 7일 전부터 공지사항을 통하여 고지할 것입니다.</span></p>
<p><span><b>9. 개인정보의 안전성 확보 조치</b></span><br></br><br></br><span><나만솔로>('나는솔로 비공식 팬사이트')</span><span>은(는) 개인정보보호법 제29조에 따라 다음과 같이 안전성 확보에 필요한 기술적/관리적 및 물리적 조치를 하고 있습니다.</span></p>
<p><span>1. 정기적인 자체 감사 실시</span><span><br /></span><span>개인정보 취급 관련 안정성 확보를 위해 정기적(분기 1회)으로 자체 감사를 실시하고 있습니다.</span></p>
</DialogContentText>
</DialogContent>
</Dialog>
</div>
<div>
<Dialog
open={props.contact}
onClose={handleContactClose}
aria-labelledby="contact-dialog-title"
aria-describedby="contact-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
</DialogContentText>
</DialogContent>
</Dialog>
</div>
<Box sx={{
width: '100%',
marginTop: 'auto',
}}>
<Container maxWidth="lg">
<Typography variant="body2" align="center">
<Button onClick={handlePrivacyOpen}>개인정보처리방침</Button> | <Button onClick={handleContactOpen}>문의사항</Button>
<br />
© 기글앤스마일 {new Date().getFullYear()}. All Rights Reserved.
</Typography>
</Container>
</Box>
</>
);
};
