#32 利用規約・個人情報保護方針の追加

frontend/src/App.css

@@ -3,11 +3,36 @@
     margin: 0;
     padding: 0;
 }
-#root {
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+/* -----------------------------
+   2) 他の要素がナビゲーションバーに隠れないための余白
+   ----------------------------- */
+body {
   width:100%;
-  text-align: start;
+}
+#root {
+    width:100%;
+    text-align: start;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+main {
+  flex: 1 0 auto;
+  width: 100%;
+}
+
+footer {
+  flex-shrink: 0;
 }
 
+
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -101,12 +126,4 @@
   background-color: #d32f2f;
 }
 
-/* -----------------------------
-   2) 他の要素がナビゲーションバーに隠れないための余白
-   ----------------------------- */
-body {
-  margin: 0;
-  padding: 0;
-  width:100%;
-}
 

frontend/src/App.tsx

@@ -4,11 +4,15 @@ import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
 import DocsListPage from "./pages/DocsListPage";
 import DocPage from "./pages/DocPage";
 import PublicDocumentPage from "./pages/PublicDocumentPage";
+import PrivacyPolicyPage from "./pages/PrivacyPolicyPage";
 
 import { CombinedAuthProvider } from "./context/AuthContext.bridge";
 import { useAuthContextSwitch as useAuthContext} from "./context/useAuthContextSwitch.ts";
 import "./App.css"; // 必要に応じて、追加CSSをApp.cssなどに追記
 
+import footerStyles from "./styles/Footer.module.scss";
+import TermsOfUsePage from "./pages/TermsOfUsePage";
+
 const App: React.FC = () => {
     return (
         <CombinedAuthProvider>
@@ -36,7 +40,7 @@ const MainRouter: React.FC = () => {
                     {isSignedIn ? (
                         <>
                             {/* メールアドレスを右寄せ表示 */}
-                            <span className="user-email">{ isSignedIn ? accountDisplay : ""}</span>
+                            <span className="user-email">{isSignedIn ? accountDisplay : ""}</span>
                             <button className="logout-btn" onClick={logout}>
                                 Logout
                             </button>
@@ -48,14 +52,34 @@ const MainRouter: React.FC = () => {
                     )}
                 </div>
             </header>
-
+            <main>
             {/* ルーティング */}
             <Routes>
-                <Route path="/" element={<DocsListPage />} />
-                <Route path="/docs/:slug" element={<DocPage />} />
-                <Route path="/docs/new" element={<DocPage />} />
-                <Route path="/documents/:slug" element={<PublicDocumentPage />} />
+                <Route path="/" element={<DocsListPage/>}/>
+                <Route path="/docs/:slug" element={<DocPage/>}/>
+                <Route path="/docs/new" element={<DocPage/>}/>
+                <Route path="/documents/:slug" element={<PublicDocumentPage/>}/>
+                <Route path="/privacy-policy" element={<PrivacyPolicyPage/>}/>
+                <Route path="/terms-of-use" element={<TermsOfUsePage />} />
             </Routes>
+            </main>
+
+            {/* Footer */}
+            <footer className={footerStyles.footerContainer}>
+                <div className={footerStyles.footerContent}>
+                    <p>© 2025 Markdown Portal</p>
+
+                    <div>
+                        <Link to="/privacy-policy" className={footerStyles.footerLink}>
+                            プライバシーポリシー
+                        </Link>
+                        <span className={footerStyles.linkDivider}>|</span>
+                        <Link to="/terms-of-use" className={footerStyles.footerLink}>
+                            利用規約
+                        </Link>
+                    </div>
+                </div>
+            </footer>
         </Router>
     );
 };

frontend/src/pages/PrivacyPolicyPage.tsx

@@ -0,0 +1,65 @@
+// frontend/src/pages/PrivacyPolicyPage.tsx
+import React from "react";
+import policyStyles from "../styles/PrivacyPolicyPage.module.scss";
+import tableStyles from "../styles/tableCommon.module.scss"; // ← テーブル共通スタイルをインポート
+
+const PrivacyPolicyPage: React.FC = () => {
+    return (
+        <div className={policyStyles.privacyContainer}>
+            <h1 className={policyStyles.privacyTitle}>プライバシーポリシー</h1>
+
+            <p>
+                本アプリケーションでは、認証やサービス提供のためにユーザーの個人情報
+                （例: ユーザーID、メールアドレスなど）を取得・保存します。
+            </p>
+
+            <h2 className={policyStyles.privacySubtitle}>1. 個人情報の取得と利用目的</h2>
+            <ul className={policyStyles.sectionList}>
+                <li>ユーザー認証を行うため（AWS Cognitoなどを使用）</li>
+                <li>ユーザー自身が作成したドキュメントを本人のみが管理・編集できるようにするため</li>
+                <li>ご本人へ連絡が必要な場合のため（パスワードリセットなど）</li>
+            </ul>
+
+            <h2 className={policyStyles.privacySubtitle}>2. 保存期間・利用停止について</h2>
+            <p>
+                ユーザーが長期間（6カ月以上）ログインを行っていない場合、管理者は
+                当該ユーザーの個人情報と関連データを削除する場合があります。
+                削除は事前に通知などは行わずに行われる場合があり、ユーザーに関する情報がすべて削除されることを予めご了承ください。
+                ただし詳細はサービス運営方針に準じます。
+            </p>
+
+            <h2 className={policyStyles.privacySubtitle}>3. 削除される主な個人情報</h2>
+            <ul className={policyStyles.sectionList}>
+                <li>ユーザーID</li>
+                <li>メールアドレス</li>
+                <li>ユーザーが作成したドキュメント</li>
+            </ul>
+
+            {/* ▼ 更新履歴セクションを追加 ▼ */}
+            <h2 className={policyStyles.privacySubtitle}>4. 更新履歴</h2>
+            <table className={tableStyles.historyTable}>
+                <thead>
+                <tr>
+                    <th>バージョン</th>
+                    <th>更新日</th>
+                    <th>変更内容</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>1.0.0</td>
+                    <td>2025-01-12</td>
+                    <td>初版を作成</td>
+                </tr>
+                {/* 必要に応じて追加 */}
+                </tbody>
+            </table>
+
+            <p style={{ marginTop: "20px" }}>
+                以上の内容は予告なく変更される場合があります。最新の情報は当ページにて告知します。
+            </p>
+        </div>
+    );
+};
+
+export default PrivacyPolicyPage;

frontend/src/pages/TermsOfUsePage.tsx

@@ -0,0 +1,76 @@
+// frontend/src/pages/TermsOfUsePage.tsx
+import React from "react";
+import termsStyles from "../styles/TermsOfUsePage.module.scss";
+import tableStyles from "../styles/tableCommon.module.scss"; // ← テーブル共通スタイルをインポート
+
+const TermsOfUsePage: React.FC = () => {
+    return (
+        <div className={termsStyles.termsContainer}>
+            <h1 className={termsStyles.termsTitle}>利用規約 (Terms of Use)</h1>
+
+            <p>
+                この利用規約（以下「本規約」といいます）は、「Markdown Portal」
+                （以下「本サービス」といいます）を利用される方（以下「ユーザー」といいます）
+                との間で適用されます。
+            </p>
+
+            <h2 className={termsStyles.termsSubtitle}>1. 総則</h2>
+            <p>
+                ユーザーは、本サービスを利用することで、本規約に同意したものとみなされます。
+                ユーザーは本規約を確認・承諾のうえご利用ください。
+            </p>
+
+            <h2 className={termsStyles.termsSubtitle}>2. 禁止事項</h2>
+            <ul className={termsStyles.sectionList}>
+                <li>他者のプライバシーや知的財産権、その他の権利を侵害する行為</li>
+                <li>違法行為または公序良俗に反する行為</li>
+                <li>本サービスの運営を妨げる行為</li>
+                {/* 必要に応じて追加 */}
+            </ul>
+
+            <h2 className={termsStyles.termsSubtitle}>3. 免責事項</h2>
+            <p>
+                本サービスの提供者は、サービス内容やユーザー投稿コンテンツ等に関して、いかなる
+                保証も行いません。サービス利用に起因する損害について、一切の責任を負わない
+                ものとします。
+            </p>
+
+            <h2 className={termsStyles.termsSubtitle}>4. 規約の変更</h2>
+            <p>
+                本規約は、事前の通知なく変更される場合があります。変更後の規約は、本サービス
+                内で掲載された時点から効力を有します。
+            </p>
+
+            <h2 className={termsStyles.termsSubtitle}>5. 準拠法および管轄裁判所</h2>
+            <p>
+                本規約の解釈や適用は日本法に準拠し、本サービスまたは本規約に関連して紛争が
+                生じた場合、開発者または管理者の所在地を管轄する裁判所を専属的合意管轄裁判所
+                とします。
+            </p>
+
+            {/* ▼ 更新履歴セクションを追加 ▼ */}
+            <h2 className={termsStyles.termsSubtitle}>6. 更新履歴</h2>
+            <table className={tableStyles.historyTable}>
+                <thead>
+                <tr>
+                    <th>バージョン</th>
+                    <th>更新日</th>
+                    <th>変更内容</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>1.0.0</td>
+                    <td>2025-01-12</td>
+                    <td>初版を作成</td>
+                </tr>
+                {/* 必要に応じて追加 */}
+                </tbody>
+            </table>
+
+            <p style={{ marginTop: "1.5rem" }}>以上</p>
+        </div>
+    );
+};
+
+export default TermsOfUsePage;

frontend/src/styles/Footer.module.scss

@@ -0,0 +1,31 @@
+/* Footer.module.scss */
+
+.footerContainer {
+  width:100%;
+  background-color: #f8f9fa;
+  border-top: 1px solid #ccc;
+  text-align: center;
+  padding: 1rem 0;
+}
+
+.footerContent {
+  width: 90%;
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .footerLink {
+    color: #007bff;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .linkDivider {
+    margin: 0 0.5rem;
+    color: #666;
+  }
+}

frontend/src/styles/PrivacyPolicyPage.module.scss

@@ -0,0 +1,22 @@
+/* PrivacyPolicyPage.module.scss */
+.privacyContainer {
+  max-width: 800px;
+  margin: 20px auto;
+  font-family: sans-serif;
+  line-height: 1.6;
+}
+
+.privacyTitle {
+  font-size: 1.6rem;
+  margin-bottom: 1rem;
+}
+
+.privacySubtitle {
+  font-size: 1.3rem;
+  margin: 1.2rem 0 0.5rem;
+}
+
+.sectionList {
+  margin: 0.5rem 0 1rem 1.5rem;
+  list-style-type: disc;
+}

frontend/src/styles/TermsOfUsePage.module.scss

@@ -0,0 +1,23 @@
+/* frontend/src/styles/TermsOfUsePage.module.scss */
+
+.termsContainer {
+  max-width: 800px;
+  margin: 20px auto;
+  font-family: sans-serif;
+  line-height: 1.6;
+}
+
+.termsTitle {
+  font-size: 1.6rem;
+  margin-bottom: 1rem;
+}
+
+.termsSubtitle {
+  font-size: 1.3rem;
+  margin: 1.2rem 0 0.5rem;
+}
+
+.sectionList {
+  margin: 0.5rem 0 1rem 1.5rem;
+  list-style-type: disc;
+}

frontend/src/styles/tableCommon.module.scss

@@ -0,0 +1,26 @@
+/* frontend/src/styles/tableCommon.module.scss */
+
+/* テーブル全体のベース */
+.historyTable {
+  width: 100%;
+  max-width: 800px;
+  margin: 1rem 0;
+  border-collapse: collapse;
+  font-size: 0.95rem;
+
+  /* 枠線や背景など、お好みで */
+  th,
+  td {
+    border: 1px solid #ccc;
+    padding: 0.6rem 0.8rem;
+    text-align: left;
+  }
+
+  thead {
+    background-color: #f0f0f0;
+
+    th {
+      font-weight: 600;
+    }
+  }
+}