[ Mobile ] [ Feat ] 이용약관 개인정보 처리방침 페이지 구현 (#41)

apps/mobile/src/app/privacy/page.tsx

@@ -0,0 +1,127 @@
+import {
+  containerStyle,
+  contentStyle,
+  headingStyle,
+  paragraphStyle,
+  titleStyle,
+} from './privacyPage.css';
+
+const PrivacyPage = () => {
+  return (
+    <div className={containerStyle}>
+      <div className={contentStyle}>
+        <p className={titleStyle}>개인정보 처리방침</p>
+        <p>
+          개인정보 처리방침 rankit(이하 &quot;사이트&quot;라 칭함)는
+          『개인정보보호법』에 따라 이용자의 개인정보를 보호하기 위하여 다음과
+          같이 개인정보 처리방침을 수립하고 공개합니다. <br />
+          <br />본 개인정보 처리방침은 사이트가 제공하는 서비스에 적용됩니다.
+        </p>
+        <div>
+          <p className={headingStyle}>
+            1. 개인정보의 수집 항목과 목적 및 보유 기간
+          </p>
+          <p className={paragraphStyle}>
+            &quot;개인정보&quot;는 생존하는 개인에 관한 정보로서 해당 정보에
+            포함된 깃허브 계정의 아이디, 프로필 사진 등으로 해당 개인을 식별할
+            수 있는 정보(해당 정보만으로는 특정 개인을 식별할 수 없더라도 다른
+            정보와 쉽게 결합하여 식별할 수 있는 것을 포함)를 말합니다.
+            <br /> 사이트가 회원에게 필수적으로 수집하는 개인정보의 항목 및
+            목적과 보유 기간은 다음과 같습니다.
+            <br /> 목적 : 연동 및 이용자 식별, 회원 관리 <br />
+            항목 : 깃허브 아이디 및 깃허브 계정정보 <br />
+            보유기간 : 회원 탈퇴 시 즉시 파기 <br />
+            <br />
+            목적 : 프로필에 노출 <br />
+            항목 : 깃허브 아이디 및 프로필 사진, 회원이 설정한 학교 및 지역 정보
+            <br />
+            보유기간 : 회원 탈퇴 시 즉시 파기 사이트 접속 및 이용 과정에서
+            IP주소, 쿠키, 서비스 이용 기록이 생성되어 수집될 수 있습니다.
+            <br /> 웹 브라우저의 설정에서 쿠키의 저장을 허용 혹은 거부할 수
+            있습니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>2. 개인정보의 제3자 제공</p>
+          <p className={paragraphStyle}>
+            사이트는 회원의 개인정보를 제3자에게 제공하지 않습니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>3. 개인정보 자동 수집의 거부</p>
+          <p className={paragraphStyle}>
+            사이트는 깃허브 소셜 로그인을 통해 사용자의 개인정보를 수집합니다.
+            <br />
+            깃허브 소셜 로그인과, 학교 지역정보 수집을 거부할 시 사이트의
+            서비스를 정상적으로 이용할 수 없습니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>4. 개인정보의 파기</p>
+          <p className={paragraphStyle}>
+            사이트는 원칙적으로 회원의 개인정보를 회원 탈퇴 시 지체없이
+            파기합니다.
+            <br /> 전자적 파일 형태로 저장된 개인정보는 복구할 수 없는 기술적
+            방법을 사용하여 파기하며, 출력물 등은 분쇄하는 방식으로 파기합니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>5. 개인정보의 제공</p>
+          <p className={paragraphStyle}>
+            사이트는 회원의 개인정보를 본 개인정보 처리방침에서 고지한 범위를
+            넘어 이용하거나 타인 또는 타 기업, 기관에 제공하지 않습니다. 다만,
+            다음 경우는 예외로 합니다.
+            <br /> 관계법령에 의거하여 개인정보 제공 의무가 있는 경우
+            이용자로부터 별도의 동의를 받은 경우
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>
+            6. 정보주체 및 법정대리인의 권리와 그 행사 방법
+          </p>
+          <p className={paragraphStyle}>
+            회원은 언제든지 등록된 개인정보를 열람하거나 정정할 수 있습니다.
+            <br />
+            회원가입 등을 통한 개인정보의 수집, 이용, 제공과 관련해 귀하는
+            동의하신 내용을 언제든지 철회할 수 있습니다. 사이트 내 탈퇴 기능을
+            사용하면 즉시 개인정보가 파기됩니다. <br />
+            깃허브를 통해 연동된 개인정보의 정정은 사이트에서 할 수 없습니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>7. 개인정보의 안전성 확보 조치</p>
+          <p className={paragraphStyle}>
+            사이트는 개인정보보호법 제29조에 따라 다음과 같이 안전성 확보에
+            필요한 기술적/관리적 및 물리적 조치를 하고 있습니다.
+            <br /> 개인정보의 암호화: 이용자의 개인정보 중 깃허브 관련 정보는
+            암호화되어 저장 및 관리되고 있어 본인만이 알 수 있습니다. 
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>8. 개인정보에 관한 민원</p>
+          <p className={paragraphStyle}>
+            불만을 처리하기 위하여 아래와 같이 이메일을 통한 민원을 받고
+            있습니다. <br />
+            gitbal2019@gmail.com 을 통한 민원 내용 접수
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>9. 개정 전 고지 의무</p>
+          <p className={paragraphStyle}>
+            이 개인정보 처리방침은 아래 고지된 시행일로부터 적용되며, 법령 및
+            방침에 따른 변경내용의 추가, 삭제 및 정정이 있는 경우에는 변경사항의
+            시행 7일 전부터 공지사항을 통하여 고지할 것입니다.
+          </p>
+        </div>
+        <div>
+          <p className={paragraphStyle}>
+            공고일자: 2024년 0월 0일 <br />
+            시행일자: 2024년 0월 0일
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrivacyPage;

apps/mobile/src/app/privacy/privacyPage.css.ts

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+import { globalTheme } from '@/shared/styles/globalTheme.css';
+
+export const flexColumnCenter = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+export const containerStyle = style([
+  flexColumnCenter,
+  {
+    //width: '100%',
+    marginTop: '4rem',
+    marginBottom: '8.8rem',
+    width: '39.3rem',
+  },
+]);
+
+export const contentStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4.4rem',
+});
+
+export const titleStyle = style({
+  ...globalTheme.fonts.headBold36,
+  color: globalTheme.colors.gray_19,
+});
+
+export const headingStyle = style({
+  ...globalTheme.fonts.subheadBold20,
+  color: globalTheme.colors.gray_19,
+  marginBottom: '1.6rem',
+});
+
+export const paragraphStyle = style({
+  ...globalTheme.fonts.bodyReg16,
+  color: globalTheme.colors.gray_19,
+});

apps/mobile/src/app/tos/page.tsx

@@ -1,8 +1,152 @@
+import {
+  containerStyle,
+  contentStyle,
+  headingStyle,
+  paragraphStyle,
+  titleStyle,
+} from './tosPage.css';
+
 const TosPage = () => {
   return (
-    <div>
-      <h1>Terms of Service</h1>
-      <p>These are the terms of service</p>
+    <div className={containerStyle}>
+      <div className={contentStyle}>
+        <p className={titleStyle}>서비스 이용약관</p>
+
+        <div>
+          <p className={headingStyle}>제1조 목적</p>
+          <p className={paragraphStyle}>
+            이 약관은 팀짜글이(이하 &quot;사이트&quot;라고 합니다)에서 운영하는
+            rankit 홈페이지(이하 &quot;rankit&quot;라고 합니다)에서 제공하는
+            인터넷 관련 서비스를 이용함에 있어 홈페이지와 이용자의 권리·의무 및
+            책임사항을 규정함을 목적으로 합니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제2조 용어의 정리</p>
+          <p className={paragraphStyle}>
+            이 약관에서 사용하는 용어의 정의는 다음과 같습니다.
+            <br />
+            “서비스”란 사이트가 rankit을 통해 제공하는 웹사이트 서비스를
+            말합니다.
+            <br />
+            “회원”이란 이 약관에 따라 회사에서 제공하는 서비스에 접속하여
+            이용하는 사람을 말합니다.
+            <br />
+            “연동”이란 깃허브의 회원정보를 사이트에 개인정보를 제공하여 등록하는
+            것을 말합니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제3조 약관의 명시와 설정 및 개정</p>
+          <p className={paragraphStyle}>
+            1. 사이트는 이 약관의 내용을 사이트 화면에 연동하여 사용자가 볼 수
+            있도록 합니다.
+            <br />
+            2. 회사가 약관을 개정하는 경우에는 적용일자 및 개정사유를 명시하여
+            공고합니다. 적용일자의 7일전 공고를 원칙으로 합니다.
+            <br />
+            3. 제 2항에 의해 공지된 적용일자 이후의 회원이 명시적으로 거부의사를
+            표명하지 않는 경우는 개정된 약관에 동의 하는것으로 간주합니다.변경된
+            약관에 거부하는 회원은 회원탈퇴를 요청할 수 있습니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제4조 서비스의 제공 및 변경</p>
+          <p className={paragraphStyle}>
+            사이트는 회원에게 아래와 같은 서비스를 제공합니다. 회원들의 깃허브
+            활동을 통한 점수 계산 회원들간의 등수 제공 학교별 점수와 순위 제공
+            지역별 점수와 순위 제공 칭호 설정과 회득 미션 제공
+            <br />
+            1. 서비스는 회사의 업무상 혹은 기술상 특별 사항이 없는 한 연중무휴,
+            1일 24시간 운영을 원칙으로 합니다.
+            <br />
+            2. 서비스는 이용가능 시간을 별도로 정할 수 있습니다. 이 경우 서비스
+            이용안내를 통해 공지합니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제5조 서비스의 중단</p>
+          <p className={paragraphStyle}>
+            천재지변 혹은 이에 준하는 불가항력, 서버의 문제 발생 등의 경우에는
+            서비스를 중단할 수 있습니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제6조 연동 및 회원가입</p>
+          <p className={paragraphStyle}>
+            회원가입을 희망하는 사람은 깃허브 로그인을 통해 연동을 마치고, 이
+            약관에 동의 한다는 의사를 표함으로 회원가입을 신청합니다.
+            <br />
+            회원가입의 성립시기는 서비스의 가입 절차에 따라 승인이 완료되는
+            시점으로 합니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제7조 회원탈퇴</p>
+          <p className={paragraphStyle}>
+            회원은 서비스의 언제든지 탈퇴를 요청할 수 있습니다.
+            <br />
+            서비스는 회원의 탈퇴 요청시 즉시 탈퇴 처리를 합니다.
+            <br />
+            제5조의 상황에서는 회원탈퇴가 지연될 수 있습니다.
+            <br />
+            서비스가 정상적으로 이용할 수 있을때, 즉시 탈퇴처리를 합니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제8조 서비스의 의무</p>
+          <p className={paragraphStyle}>
+            서비스는 이 약관이 금하거나, 관련 법령 기타 공서양속에 반하는 행위를
+            하지 않으며, 서비스를 안정적으로 제공하는데에 최선을
+            다합니다.서비스는 회원이 동의하지 않는 영리목적의 광고성
+            전자우편등을 발송하지 않습니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제9조 회원의 의무</p>
+          <p className={paragraphStyle}>
+            회원은 이 약관이 금하거나, 관련 법령 기타 공횡서양속에 반하는 행위를
+            하지 않습니다.
+            <br />
+            회원은 아래 사항의 행위를 행해서는 안 됩니다.
+            <br />
+            신청 혹은 변경시 타인의 정보를 도용 타인의 정보 도용 서비스와 기타
+            제3자의 저작권 등 지적재산권에 대한 침해 행위 서비스와 회원이 명예를
+            손상시키거나 업무를 방해하는 행위 외설 또는 폭력적인 문구, 이미지 등
+            기타 공서양속에 반하는 정보를 서비스에 공개 또는 게시하는 행위
+            깃허브 계정을 통해 외설 또는 폭력적인 문구, 이미지 등 기타
+            공서양속에 반하는 정보를 서비스에 노출 시키는 행위 영리를 목적으로
+            서비스를 사용하는 행위
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제10조 개인정보 보호</p>
+          <p className={paragraphStyle}>
+            서비스는 회원의 개인정보 수집 시 서비스 제공을 위해 필요한 범위에서
+            최소한의 개인정보를 수집합니다.
+            <br />
+            서비스는 회원의 개인정보를 수집, 이용 하는 때에 회원에게 그 목적과
+            동의를 받습니다.
+            <br />
+            서비스는 회원의 정보를 제3자에게 제공하지 않습니다. 다만 관령 법령에
+            달리 정함이 있는 경우에는 예외로 합니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>제11조 분쟁의 해결</p>
+          <p className={paragraphStyle}>
+            서비스는 회원의 귀책사유로 발생한 서비스의 이용장애에 대해서는
+            책임을 지지 않습니다.서비스는 이용되는 서비스 이외의 문제로 발생된
+            분쟁에는 책임지지 않습니다.
+          </p>
+        </div>
+        <div>
+          <p className={headingStyle}>부칙</p>
+          <p className={paragraphStyle}>
+            이 약관은 2024년 11월 1일부터 적용됩니다.
+          </p>
+        </div>
+      </div>
     </div>
   );
 };

apps/mobile/src/app/tos/tosPage.css.ts

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+import { globalTheme } from '@/shared/styles/globalTheme.css';
+
+export const flexColumnCenter = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+export const containerStyle = style([
+  flexColumnCenter,
+  {
+    //width: '100%',
+    marginTop: '4rem',
+    marginBottom: '8.8rem',
+    width: '39.3rem',
+  },
+]);
+
+export const contentStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4.4rem',
+});
+
+export const titleStyle = style({
+  ...globalTheme.fonts.headBold36,
+  color: globalTheme.colors.gray_19,
+});
+
+export const headingStyle = style({
+  ...globalTheme.fonts.subheadBold20,
+  color: globalTheme.colors.gray_19,
+  marginBottom: '1.6rem',
+});
+
+export const paragraphStyle = style({
+  ...globalTheme.fonts.bodyReg16,
+  color: globalTheme.colors.gray_19,
+});