diff --git a/react/src/pages/PrivacyPage.js b/react/src/pages/PrivacyPage.js
new file mode 100644
index 000000000..af3d2ee4c
--- /dev/null
+++ b/react/src/pages/PrivacyPage.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import raw from 'raw.macro';
+import ReactMarkdown from 'react-markdown';
+
+import { appBoundClassNames as classNames } from '../common/boundClassNames';
+
+const privacyMarkdown = raw('../../PRIVACY.md');
+
+const markdownComponents = {
+ h1: (props) =>
,
+ h2: (props) =>
,
+};
+
+class PrivacyPage extends Component {
+ render() {
+ return (
+
+
+
+
+ {privacyMarkdown}
+
+
+
+ );
+ }
+}
+
+export default PrivacyPage;
diff --git a/react/src/styles/App.module.scss b/react/src/styles/App.module.scss
index 368cdea91..a4f270bb2 100644
--- a/react/src/styles/App.module.scss
+++ b/react/src/styles/App.module.scss
@@ -803,7 +803,7 @@ a {
+ (#{$line-height-normal} + 4px)
+ (#{$line-height-small} + 6px)
+ (#{$line-height-big} + 6px)
-
+
+ #{$section-padding}
)
) !important;
@@ -818,7 +818,7 @@ a {
+ (#{$line-height-normal} + 4px)
+ (#{$line-height-small} + 6px)
+ (#{$line-height-big} + 6px)
-
+
+ (#{$section-padding} * 2 + 1px)
+ #{$line-height-normal}
+ #{$section-padding}
@@ -1375,7 +1375,7 @@ a {
@media #{$media-portrait} {
width: 94px;
}
-
+
}
}
@@ -1386,7 +1386,7 @@ a {
55px
+ #{$section-padding}
+ (#{$line-height-big} + 10px)
-
+
+ #{$section-padding}
+ #{$section-margin-bottom}
)
@@ -1399,7 +1399,7 @@ a {
+ #{$section-margin-top}
+ #{$section-padding}
+ (#{$line-height-big} + 10px)
-
+
+ #{$section-padding}
+ (#{$section-margin-bottom} * 2)
)
@@ -1596,6 +1596,35 @@ a {
line-height: $line-height-normal + 4px;
}
}
+
+ &--privacy {
+ line-height: $line-height-big;
+
+ a {
+ text-decoration: underline;
+ }
+
+ ul {
+ padding-left: 8px;
+ list-style-position: inside;
+ }
+
+ & > p, & > ul {
+ margin-bottom: 4px;
+ }
+
+ & > ul {
+ list-style-type: disc;
+
+ & > li > ul {
+ list-style-type: circle;
+
+ & > li > ul {
+ list-style-type: square;
+ }
+ }
+ }
+ }
}
@@ -1653,11 +1682,11 @@ a {
&.block--completed {
&:not(.block--raised) {
color: rgba($color-text-normal, 0.35);
-
+
& i.icon {
opacity: 0.45;
}
-
+
& .block--lecture-group__elem__texts__sub {
color: rgba($color-text-lighter, 0.35);
}
@@ -2147,7 +2176,7 @@ a {
}
}
- &__occupied-area {
+ &__occupied-area {
background-color: #888;
position: absolute;
left: 0;
@@ -2319,6 +2348,7 @@ a {
}
.section-content--license &,
+ .section-content--privacy &,
.section-content--account & {
text-align: center;
margin-bottom: 10px;
@@ -2436,6 +2466,11 @@ a {
.section-content--license & {
padding-bottom: 8px;
}
+
+ .section-content--privacy & {
+ padding: 0;
+ margin: 8px 0 4px;
+ }
}
diff --git a/react/src/translations/translation.en.json b/react/src/translations/translation.en.json
index ae19a270e..d55f20f2d 100644
--- a/react/src/translations/translation.en.json
+++ b/react/src/translations/translation.en.json
@@ -289,7 +289,8 @@
"notifications": "Notifications",
"signIn": "Sign In",
"credit": "Credit",
- "licences": "Licences"
+ "licences": "Licences",
+ "privacy": "Privacy (Korean only)"
}
}
}
diff --git a/react/src/translations/translation.ko.json b/react/src/translations/translation.ko.json
index f1b897a1c..41cda03fd 100644
--- a/react/src/translations/translation.ko.json
+++ b/react/src/translations/translation.ko.json
@@ -283,7 +283,8 @@
"notifications": "알림",
"signIn": "로그인",
"credit": "만든 사람들",
- "licences": "라이선스"
+ "licences": "라이선스",
+ "privacy": "개인정보취급방침"
}
}
}