Skip to content

Commit 9629a80

Browse files
constantly-devconstantly-dev
authored
Merge pull request #233 from Pinback-Team/feat/#230/information-policy-view
Feat(client, landing): 이용약관, 개인정보 처리방침 뷰 구현 및 footer 링크 반영
2 parents 2478303 + 9008384 commit 9629a80

File tree

13 files changed

+621
-22
lines changed

13 files changed

+621
-22
lines changed

‎apps/client/src/layout/Layout.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import { Outlet, useLocation } from 'react-router-dom';
22
import { Sidebar } from '@shared/components/sidebar/Sidebar';
3+
import { ROUTES_CONFIG } from '@routes/routesConfig';
34

45
const Layout = () => {
56
const location = useLocation();
6-
const isOnboarding = location.pathname.startsWith('/onboarding');
7-
const isLogin = location.pathname.startsWith('/login');
7+
8+
const isPolicyPage =
9+
location.pathname === ROUTES_CONFIG.privacyPolicy.path ||
10+
location.pathname === ROUTES_CONFIG.termsOfService.path;
11+
12+
const isSidebarHidden =
13+
location.pathname.startsWith(ROUTES_CONFIG.onBoarding.path) ||
14+
location.pathname.startsWith(ROUTES_CONFIG.login.path) ||
15+
isPolicyPage;
816

917
return (
1018
<>
1119
<div className="flex h-screen">
12-
{!isOnboarding && !isLogin && <Sidebar />}
20+
{!isSidebarHidden && <Sidebar />}
1321
<main className="bg-gray-bg flex-1 overflow-y-auto">
1422
<Outlet />
1523
</main>

‎apps/client/src/pages/login/Login.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { handleGoogleLogin } from '@shared/utils/handleGoogleLogin';
66
import { Link } from 'react-router-dom';
77
import Chippi from '@assets/chippi_extension_popup.svg';
88
import GoogleLogo from '/assets/onBoarding/icons/googleLogo.svg';
9+
import { ROUTES_CONFIG } from '@routes/routesConfig';
910

1011
const Login = () => {
1112
return (
@@ -48,14 +49,14 @@ const Login = () => {
4849
<p className="text-font-gray-3 caption2-m mt-[2.4rem] text-center">
4950
가입 시 pinback의{' '}
5051
<Link
51-
to="/terms"
52+
to={ROUTES_CONFIG.termsOfService.path}
5253
className="underline underline-offset-2 hover:opacity-70"
5354
>
5455
이용 약관
5556
</Link>{' '}
5657
및{' '}
5758
<Link
58-
to="/privacy"
59+
to={ROUTES_CONFIG.privacyPolicy.path}
5960
className="underline underline-offset-2 hover:opacity-70"
6061
>
6162
개인정보처리방침

‎apps/client/src/pages/myBookmark/MyBookmark.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import ArticlesLoadingBoundary from '@shared/components/articlesLoadingBoundary/
1818
import ArticlesErrorBoundary from '@shared/components/articlesErrorBoundary/ArticlesErrorBoundary';
1919
import { ErrorBoundary } from 'react-error-boundary';
2020
import MyBookmarkContent from '@pages/myBookmark/components/myBookmarkContent/MyBookmarkContent';
21+
import Footer from './components/footer/Footer';
2122

2223
const MyBookmark = () => {
2324
const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
@@ -69,7 +70,7 @@ const MyBookmark = () => {
6970
id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
7071

7172
return (
72-
<div className="flex h-screen flex-col py-[5.2rem] pl-[8rem] pr-[5rem]">
73+
<div className="flex h-screen flex-col pl-[8rem] pr-[5rem] pt-[5.2rem]">
7374
<div className="flex items-center gap-[0.4rem]">
7475
<div className="flex items-center gap-[0.4rem]">
7576
<p className="head3">나의 북마크</p>
@@ -102,6 +103,7 @@ const MyBookmark = () => {
102103
/>
103104
</ErrorBoundary>
104105
</Suspense>
106+
<Footer />
105107

106108
<OptionsMenuPortal
107109
open={menu.open}

‎apps/client/src/pages/myBookmark/components/footer/Footer.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Icon } from '@pinback/design-system/icons';
2+
import { ROUTES_CONFIG } from '@routes/routesConfig';
3+
import { Link } from 'react-router-dom';
4+
5+
const Footer = () => {
6+
const currentYear = new Date().getFullYear();
7+
8+
return (
9+
<footer className="mt-auto w-full pb-[1.6rem] pr-[3rem]">
10+
<div className="mt-[2.4rem] flex gap-[0.8rem]">
11+
<Link
12+
to={ROUTES_CONFIG.termsOfService.path}
13+
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
14+
>
15+
이용약관
16+
</Link>
17+
<p className="caption1-sb text-font-gray-2">|</p>
18+
<Link
19+
to={ROUTES_CONFIG.privacyPolicy.path}
20+
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
21+
>
22+
개인정보처리방침
23+
</Link>
24+
</div>
25+
26+
<div className="flex items-center justify-between">
27+
<address className="flex gap-[0.8rem] not-italic">
28+
<p className="caption2-sb text-font-ltgray-4">운영팀 문의</p>
29+
<p className="caption2-m text-font-ltgray-4">
30+
이한비 · pinback0615@gmail.com
31+
</p>
32+
</address>
33+
<p className="caption2-m text-font-ltgray-4">
34+
©{currentYear} pinback All rights reserved.
35+
</p>
36+
37+
<div className="flex items-end gap-[1.2rem]">
38+
<p className="caption2-m text-gray400">TEAM. 도묵이</p>
39+
<a
40+
href="https://instagram.com/pinback.today/"
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
aria-label="Pinback 인스타그램"
44+
className="transition-opacity hover:opacity-80"
45+
>
46+
<Icon name="instagram" width={28} height={28} />
47+
</a>
48+
<a
49+
href="https://pinback.palms.blog/"
50+
target="_blank"
51+
rel="noopener noreferrer"
52+
aria-label="Pinback 블로그"
53+
className="transition-opacity hover:opacity-80"
54+
>
55+
<Icon name="palms" width={28} height={28} />
56+
</a>
57+
</div>
58+
</div>
59+
</footer>
60+
);
61+
};
62+
63+
export default Footer;

‎apps/client/src/pages/onBoarding/components/footer/Footer.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
import { Icon } from '@pinback/design-system/icons';
2+
import { ROUTES_CONFIG } from '@routes/routesConfig';
3+
import { Link } from 'react-router-dom';
24

35
const Footer = () => {
46
const currentYear = new Date().getFullYear();
57

68
return (
79
<footer className="absolute bottom-0 mt-auto w-full px-[8rem] py-[3.2rem]">
810
<div className="mt-[2.4rem] flex gap-[0.8rem]">
9-
<a
10-
href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c80eca220c1de3293e43a?source=copy_link"
11-
target="_blank"
12-
rel="noopener noreferrer"
11+
<Link
12+
to={ROUTES_CONFIG.termsOfService.path}
1313
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
1414
>
1515
이용약관
16-
</a>
16+
</Link>
1717
<p className="caption1-sb text-font-gray-2">|</p>
18-
<a
19-
href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
20-
target="_blank"
21-
rel="noopener noreferrer"
18+
<Link
19+
to={ROUTES_CONFIG.privacyPolicy.path}
2220
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
2321
>
2422
개인정보처리방침
25-
</a>
23+
</Link>
2624
</div>
2725

2826
<div className="flex items-center justify-between">

‎apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Chippi from '@assets/chippi_extension_popup.svg';
22
import GoogleLogo from '/assets/onBoarding/icons/googleLogo.svg';
33
import { Link } from 'react-router-dom';
44
import { handleGoogleLogin } from '@shared/utils/handleGoogleLogin';
5+
import { ROUTES_CONFIG } from '@routes/routesConfig';
56

67
const SocialLoginStep = () => {
78
return (
@@ -31,18 +32,17 @@ const SocialLoginStep = () => {
3132
/>
3233
구글 계정으로 로그인
3334
</button>
34-
{/*TODO: 개인정보처리방침 추가되면 링크 수정*/}
3535
<p className="text-font-gray-3 caption2-m mt-[2.4rem] text-center">
3636
가입 시 pinback의{' '}
3737
<Link
38-
to="/privacy"
38+
to={ROUTES_CONFIG.termsOfService.path}
3939
className="underline underline-offset-2 hover:opacity-70"
4040
>
4141
이용 약관
4242
</Link>{' '}
4343
및{' '}
4444
<Link
45-
to="/privacy"
45+
to={ROUTES_CONFIG.privacyPolicy.path}
4646
className="underline underline-offset-2 hover:opacity-70"
4747
>
4848
개인정보처리방침

‎apps/client/src/pages/policy/PrivacyPolicy.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import HeaderLogo from '/assets/onBoarding/icons/header_logo.svg';
2+
3+
const PrivacyPolicy = () => {
4+
return (
5+
<>
6+
<header className="z-5 bg-white-bg absolute top-0 flex w-full justify-items-start px-[8.2rem] py-[2.5rem]">
7+
<img
8+
src={HeaderLogo}
9+
alt="header logo"
10+
onClick={() => window.location.reload()}
11+
/>
12+
</header>
13+
<div className="scroll-smooth px-[8.2rem] py-[9.6rem]">
14+
<section className="">
15+
<h1 className="head6">Pinback 개인정보처리방침</h1>
16+
<p className="text-font-gray-2 caption1-m mt-[1.2rem] whitespace-pre-line">
17+
Pinback은 이용자의 정보를 안전하게 보호하는 것을 가장 중요한 책임 중
18+
하나로 생각합니다.{'\n'}본 방침은 Pinback이 어떤 정보를 수집하고,
19+
어떻게 사용하며, 어떻게 보호하는지 쉽게 이해할 수 있도록 안내하기
20+
위해 마련되었습니다.
21+
</p>
22+
</section>
23+
24+
<section className="mt-[3.6rem]">
25+
<h2 className="sub2-sb">① 수집하는 개인정보 종류</h2>
26+
<p className="text-font-gray-2 sub4-sb mt-[1.2rem]">
27+
Pinback은 서비스 제공을 위해 다음 정보를 수집합니다.
28+
</p>
29+
<ol className="mt-[1.2rem] list-decimal pl-[2.1rem]">
30+
<li className="caption1-m text-font-gray-2">
31+
계정 생성을 위한 정보: 이메일 주소, 프로필 이름, Google 계정
32+
식별자 (UID)
33+
</li>
34+
<li className="caption1-m text-font-gray-2">
35+
북마크 저장 및 관리 기능을 위한 정보: 저장한 웹페이지 URL 및 제목,
36+
사용자가 작성한 메모, 리마인드 설정 정보, 도토리 적립 내역 및 숲
37+
성장 단계 등 서비스 활동 데이터
38+
</li>
39+
<li className="caption1-m text-font-gray-2">
40+
서비스 이용 기록: 기능 사용 내역, 접속 일시, 브라우저 정보 등 기본
41+
로그
42+
</li>
43+
</ol>
44+
</section>
45+
46+
<section className="mt-[3rem]">
47+
<h2 className="sub2-sb">② 개인정보의 이용 목적</h2>
48+
<p className="text-font-gray-2 sub4-sb mt-[1.2rem]">
49+
Pinback은 수집된 개인정보를 서비스의 핵심 기능을 제공하기 위한 최소
50+
범위에서만 사용합니다.
51+
</p>
52+
<ul className="caption1-m text-font-gray-2 mt-[1.2rem] list-disc pl-[2.1rem]">
53+
<li>
54+
사용자가 저장한 북마크와 메모를 안전하게 보관하고 다시 찾아볼 수
55+
있도록 하기 위함
56+
</li>
57+
<li>
58+
사용자 설정에 따라 리마인드 알림을 제공하여 저장한 콘텐츠를 다시
59+
활용할 수 있도록 돕기 위함
60+
</li>
61+
<li>
62+
도토리 보상 시스템을 통해 서비스 이용 경험을 향상하고, 지속적인
63+
지식 관리 습관 형성을 지원하기 위함
64+
</li>
65+
</ul>
66+
<p className="sub4-sb text-font-gray-2 mt-[1.2rem]">
67+
Pinback은 수집된 모든 정보를 위 목적 이외에 다른 용도로 사용하지
68+
않으며, 개인정보를 제 3자에게 판매하거나 공유하지 않습니다.
69+
</p>
70+
</section>
71+
72+
<section className="mt-[3rem]">
73+
<h2 className="sub2-sb">③ 개인정보의 보유 및 보안</h2>
74+
<div className="sub4-sb text-font-gray-2 mt-[1.2rem]">
75+
<p>
76+
Pinback은 사용자의 개인정보를 안전하게 보호하기 위해 적절한 보안
77+
조치를 취하고 있습니다.
78+
</p>
79+
<p>
80+
개인정보는 무단 접근, 유출, 변경, 파괴를 방지하기 위해 보호되며,
81+
필요한 경우 암호화되어 저장됩니다.
82+
</p>
83+
</div>
84+
</section>
85+
86+
<section className="mt-[3rem]">
87+
<h2 className="sub2-sb">④ 개인정보 관리 및 열람 관리</h2>
88+
<p className="text-font-gray-2 sub4-sb mt-[1.2rem]">
89+
이용자는 언제든지 다음을 요청할 수 있습니다.
90+
</p>
91+
<ul className="caption1-m text-font-gray-2 mt-[1.2rem] list-disc pl-[2.1rem]">
92+
<li>개인정보 조회</li>
93+
<li>개인정보 수정</li>
94+
<li>개인정보 삭제</li>
95+
<li>개인정보 처리 정지</li>
96+
</ul>
97+
<div className="sub4-sb text-font-gray-2 mt-[1.2rem]">
98+
<p>
99+
요청은 서비스에서 지정한 이메일 또는 문의 채널을 통해 접수됩니다.
100+
</p>
101+
<p>
102+
다만, 법적 의무나 요청에 의해 개인정보를 제공해야 할 경우, 해당
103+
법령에 따라 제공할 수 있습니다.
104+
</p>
105+
</div>
106+
</section>
107+
108+
<section className="mt-[3rem]">
109+
<h2 className="sub2-sb">⑤ 개인정보 처리방침 변경</h2>
110+
<div className="sub4-sb text-font-gray-2 mt-[1.2rem]">
111+
<p>
112+
본 방침은 서비스 운영 또는 관련 법령에 따라 변경될 수 있습니다.
113+
</p>
114+
<p>
115+
변경 사항은 최소 7일 전에 공지하며, 이용자에게 불리한 변경의 경우
116+
30일 전에 안내합니다.
117+
</p>
118+
</div>
119+
</section>
120+
121+
<section className="mt-[3rem]">
122+
<h3 className="sub2-sb">부칙</h3>
123+
<div className="sub4-sb text-font-gray-2 mt-[1.2rem]">
124+
<p>본 개인정보 처리방침은 2025년 10월 27일부터 적용됩니다.</p>
125+
<p>
126+
본 개인정보 처리방침은 최근 업데이트된 내용을 반영하고 있으며,
127+
사용자는 pinback 서비스를 이용함으로써 이 개인정보 처리방침에
128+
동의하는 것으로 간주됩니다.
129+
</p>
130+
</div>
131+
</section>
132+
</div>
133+
</>
134+
);
135+
};
136+
137+
export default PrivacyPolicy;

0 commit comments

Comments
 (0)