Merge pull request #11 from itizaworld/feature/implement-terms-and-po…

…licy-page

利用規約とプライバシーポリシーを実装した

.env

@@ -1 +1,2 @@
+NEXT_PUBLIC_FRONT_URL=http://localhost:3000
 NEXT_PUBLIC_SERVER_URL=http://localhost:8000

src/app/_components/domains/User/LoginModal/LoginModal.tsx

@@ -23,8 +23,7 @@ export const LoginModal: FC<Props> = ({ isOpen, onOpenChange }) => {
           <Link href={URLS.LOGIN_TO_BACKEND}>
             <Image className="mx-auto" src="/images/sign-in-google.png" width={200} />
           </Link>
-          {/* TODO: ページが作成されたら有効にする */}
-          {/* <p className="text-slate-600">
+          <p className="text-slate-600">
             ログインする前に、
             <Link href="https://nippo.wiscro.app/terms" className="text-sky-500" target="_blank" rel="noreferrer">
               利用規約
@@ -34,7 +33,7 @@ export const LoginModal: FC<Props> = ({ isOpen, onOpenChange }) => {
               プライバシーポリシー
             </Link>
             に同意してください。
-          </p> */}
+          </p>
         </ModalBody>
       </ModalContent>
     </Modal>

src/app/_components/layouts/NippoFooter/NippoFooter.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from '@nextui-org/link';
+import { URLS } from '~/app/_constants/urls';
 
 export const NippoFooter = () => {
   return (
@@ -9,15 +10,14 @@ export const NippoFooter = () => {
           みんなの日報
         </Link>
         <p className="mt-[8px] text-slate-50 text-sm">目標達成に向けて一歩を踏み出そう</p>
-        {/* TODO: ページができたら有効にする */}
-        {/* <div className="mt-[24px] flex gap-[16px]">
-          <Link href="https://www.wiscro.app/terms" className="text-slate-50">
+        <div className="mt-[24px] flex gap-[16px]">
+          <Link href={URLS.TERM} className="text-slate-50">
             利用規約
           </Link>
-          <Link href="https://www.wiscro.app/policy" className="text-slate-50">
+          <Link href={URLS.POLICY} className="text-slate-50">
             プライバシーポリシー
           </Link>
-        </div> */}
+        </div>
       </div>
     </div>
   );

src/app/_components/layouts/NippoNavbar/NippoNavbar.tsx

@@ -16,7 +16,6 @@ export const NippoNavbar: FC = async () => {
         </Link>
       </NavbarBrand>
       <NavbarContent justify="end">
-        {/* TODO: 型アサーションを修正する */}
         <NavbarItem>{currentUser ? <PersonalDropdown user={currentUser} /> : <LoginButton />}</NavbarItem>
       </NavbarContent>
     </Navbar>

src/app/_constants/urls.ts

@@ -1,6 +1,9 @@
+const frontUrl = process.env.NEXT_PUBLIC_FRONT_URL;
 const serverUrl = process.env.NEXT_PUBLIC_SERVER_URL;
 export const URLS = {
   TOP: '/',
   NOTE_NEW: '/notes/new',
+  TERM: `${frontUrl}/terms`,
+  POLICY: `${frontUrl}/policy`,
   LOGIN_TO_BACKEND: `${serverUrl}/auth/google`,
 };

src/app/policy/page.tsx

@@ -0,0 +1,30 @@
+// app/page.tsx
+import { Card } from '@nextui-org/card';
+
+export default async function Page() {
+  return (
+    <div className="max-w-[600px] mx-auto justify-center gap-[16px] py-[24px] p-[16px]">
+      <Card className="w-[100%] md:p-[24px] p-[16px] flex flex-col" shadow="sm">
+        <p className="text-2xl mb-[40px]">プライバシーポリシー</p>
+        <p className="mb-[16px]">
+          本サービスの利用に際してユーザーから収集される情報の取り扱いについて説明します。
+          <br />
+          ユーザーが本サービスを利用することで、以下の情報の収集・利用についてのポリシーを理解し、同意したものとみなします。
+        </p>
+        <p className="mb-[16px]">本サービスの一部はアカウントを作成せずに利用可能です。</p>
+        <p className="mb-[16px]">
+          ただし、アカウント作成を行う場合、ユーザーから一定の個人情報を収集する必要があります。
+          <br />
+          収集する情報にはユーザー名とメールアドレスが含まれます。
+          <br />
+          ユーザー名は公開情報として扱われますが、実名、仮名のいずれも選択することができます。
+          <br />
+          また、ユーザーは複数のアカウントを持つことが許可されています。
+        </p>
+        <p className="mb-[16px]">
+          メールアドレスなどの連絡先情報は、ユーザーアカウントの認証、安全性の確保、およびスパムや詐欺行為からの保護を目的として利用されます。
+        </p>
+      </Card>
+    </div>
+  );
+}

src/app/terms/page.tsx

@@ -0,0 +1,50 @@
+// app/page.tsx
+import { Card } from '@nextui-org/card';
+import { Link } from '@nextui-org/link';
+import { URLS } from '../_constants/urls';
+
+export default async function Page() {
+  return (
+    <div className="min-h-[500px] max-w-[600px] mx-auto justify-center gap-[16px] py-[24px] p-[16px]">
+      <Card className="w-[100%] md:p-[24px] p-[16px] flex flex-col" shadow="sm">
+        <p className="text-2xl">利用規約</p>
+        <h3 className="mt-[24px] mb-[16px]">第1条(はじめに)</h3>
+        <p>
+          「みんなの日報」運営チーム(以下「運営チーム」といいます。)が提供する「みんなの日報」は、ユーザーに心から満足していただけるサービスを目指しています。以下の利用規約(以下「本規約」といいます。)にご同意の上での利用をお願いします。
+          <br />
+          本規約は、運営チームとユーザー間の本サービスの利用条件を定めるものです。運営チームは、予告なく本規約を改定する権利を有します。改定された規約は本サービスに掲載することで発効します。
+        </p>
+        <h3 className="mt-[24px] mb-[16px]">第2条(本サービス上のコンテンツ)</h3>
+        <p>
+          ユーザーは、法令や規則を遵守するとともに、自身の提供するコンテンツに全責任を負います。他者に対して差し支えない内容のみを投稿してください。
+          <br />
+          本サービスを通じて取得または公開されるコンテンツに対する利用や依存は、ユーザーの責任とします。運営チームはコンテンツの完全性、真実性、正確性、または信頼性については一切の保証をしません。
+          <br />
+          ユーザーは、不適切なコンテンツに接するリスクを理解し、承知したものとします。運営チームは利用規約違反のコンテンツを削除する権利を保有します。
+        </p>
+        <h3 className="mt-[24px] mb-[16px]">第3条(本サービスの利用)</h3>
+        <p>
+          本サービスは、運営チームの判断により変更されることがあります。
+          <br />
+          また、サービスの一時停止や終了、利用制限の設定も予告なく行われる場合があります。
+        </p>
+        <h3 className="mt-[24px] mb-[16px]">第4条(本規約の終了)</h3>
+        <p>
+          ユーザーは、アカウントの削除により本規約を終了できます。
+          <br />
+          運営チームは、本規約違反やその他の理由で、ユーザーのアカウントを一時停止または削除する権利を保有します。
+        </p>
+        <h3 className="mt-[24px] mb-[16px]">第5条(一般条件)</h3>
+        <p>
+          本規約は随時改定されることがあり、最新版は
+          <Link href={URLS.TERM} className="text-sky-500">
+            {URLS.TERM}
+          </Link>
+          にて確認できます。
+          <br />
+          改定後の本規約は、ユーザーがサービスを継続して利用することで同意したものとみなされます。
+        </p>
+      </Card>
+    </div>
+  );
+}