diff --git a/README.md b/README.md index 1eef93e..370fc46 100644 --- a/README.md +++ b/README.md @@ -1,231 +1,223 @@ # markdown-portal -このリポジトリは、Markdown ドキュメントの作成・編集・閲覧を行うためのポータルアプリケーションです。 -フロントエンドとバックエンドを別ディレクトリで管理しています。 +本リポジトリは、Markdown ドキュメントの作成・編集・公開を行うための **フロントエンド + バックエンド** プロジェクトです。 +- **フロントエンド**: Vite + React をベースに、Markdownエディタや認証機能、UI等を提供 +- **バックエンド**: AWS Lambda (Node.js) + API Gateway + DynamoDB のサーバーレス構成 --- -## 1. アプリケーションの目的・概要 +## 1. 主な機能と特徴 -1. **Markdown ドキュメントの作成・編集・公開** - - React (フロントエンド) を使用し、Markdown エディタでドキュメントを作成・編集。 - - 仕上がったコンテンツを DynamoDB に保存し、必要に応じて公開（誰でも閲覧できる状態）に設定できます。 +1. **Markdown ドキュメントの作成・編集・公開** + - React (フロントエンド) による WYSIWYG ベースの Markdown エディタを提供 + - 作成した Markdown は DynamoDB に保存され、必要に応じて「公開」(任意URLで誰でも閲覧可) に設定できます。 -2. **ユーザー認証と権限制御** - - ログインしていないユーザーには編集権限を与えず、特定のユーザーのみが自分のドキュメントを編集できるようにしています。 - - Amazon Cognito (User Pool) と JWT (ID トークン) を使った認証を導入。ローカル開発時はモック認証でスキップ可能です。 +2. **ユーザー認証と権限制御** + - ログインしていないユーザーには編集権限を与えず、ログイン済みユーザーが自分のドキュメントを管理可能。 + - Amazon Cognito (User Pool) と JWT (IDトークン) を利用し、バックエンド側で検証・制御。 + - ローカル開発時は「モック認証」(userId固定) で手軽に動作確認ができます。 -3. **サーバーレス構成** - - バックエンドは AWS Lambda + API Gateway + DynamoDB。 - - フロントエンドは Vite + React で開発し、本番運用時は S3/CloudFront あるいは Amplify Hosting を想定。 +3. **サーバーレス構成** + - バックエンドは AWS Lambda + API Gateway + DynamoDB + (Cognito)。 + - Serverless Framework を用いたデプロイフローを想定し、S3/CloudFront や Amplify Hosting 上でフロントエンドを提供できます。 + +4. **ローカル開発が容易** + - Docker 上の DynamoDB Local + serverless-offline + モック認証で完結するため、AWSリソースを消費せずに開発・テストが可能です。 --- -## 2. 環境ごとの立ち上げ手順 +## 2. セットアップ手順 -### 2.1 ローカル環境（ローカル開発モード） +### 2.1 ローカル環境（オフラインモード） -#### 2.1.1 前提 +#### (1) 前提 - Node.js (推奨: v18 以降) -- Docker (推奨: Docker Desktop 最新) +- Docker (推奨: Docker Desktop 最新) + → `amazon/dynamodb-local` イメージを使用 -#### 2.1.2 フロントエンドの起動 (モック認証) -1. **依存パッケージのインストール** - ```bash - cd markdown-portal/frontend - npm install - ``` -2. **ローカルサーバーの起動** - ```bash - npm run dev:offline - ``` - - `VITE_API_STAGE=local` が指定され、モック認証が有効になります。 - - ブラウザで `http://localhost:5173` (ポート番号は環境による) にアクセスするとアプリが確認できます。 +#### (2) フロントエンドの起動 -#### 2.1.3 バックエンドの起動 (Serverless Offline + DynamoDB Local) -1. **DynamoDB Local を起動** +```bash +cd markdown-portal/frontend +npm install +npm run dev:offline +``` + +- `VITE_API_STAGE=local` が指定され、モック認証が有効になります。 +- ブラウザで `http://localhost:5173` にアクセスするとアプリを確認できます。 + +#### (3) バックエンドの起動 (Serverless Offline + DynamoDB Local) + +1. **DynamoDB Local** を起動: ```bash docker run -p 8888:8000 amazon/dynamodb-local ``` - > または、AWS公式の jar ファイルをダウンロードして `java -jar DynamoDBLocal.jar -sharedDb -port 8888` でも OK - > `http://localhost:8888` でローカル DynamoDB が起動します。 -2. **依存パッケージのインストール** +2. **依存パッケージのインストール & ビルド**: ```bash cd markdown-portal/backend npm install + npm run build ``` -3. **ローカルテーブル作成＋サンプルデータ投入** +3. **テーブル作成 + サンプルデータ投入**: ```bash - npm run build npm run create-local-tables ``` - - `dist/scripts/createLocalTables.js` が実行され、テーブルが作られます。 -4. **Serverless Offline 起動** + - `dist/scripts/createLocalTables.js` により DynamoDB テーブルが作成されます。 +4. **Serverless Offline 起動**: ```bash npm run start:offline ``` - - `serverless offline --stage local` が実行され、`http://localhost:3000/local/api/...` でバックエンド API にアクセス可能です。 + - `serverless offline --stage local` により、`http://localhost:3000/local/api/...` でAPIが利用可能です。 -#### 2.1.4 動作確認コマンド例 -- ローカル DynamoDB でテーブル確認 - ```bash - aws dynamodb list-tables --endpoint-url http://localhost:8888 - ``` -- ドキュメント一覧取得 (GET) - ```bash - curl http://localhost:3000/local/api/docs - ``` - > モック認証の場合は強制的に `userId = local-user-1234` として認識するようになっています。 +#### (4) 動作確認 + +```bash +# テーブル一覧を確認 +aws dynamodb list-tables --endpoint-url http://localhost:8888 + +# ドキュメント一覧を取得 (GET) +curl http://localhost:3000/local/api/docs +``` + +- ローカル認証では `userId=local-user-1234` として扱われます。 --- -### 2.2 開発用ステージ（dev 環境）での起動 +### 2.2 開発ステージ (dev) へのデプロイ -#### 2.2.1 前提 -- AWS アカウントにデプロイするための IAM 権限 (DynamoDB / Lambda / API Gateway など) -- `serverless` CLI のインストール (グローバル推奨) +#### (1) 前提 +- AWS アカウントに対して DynamoDB / Lambda / API Gateway 等のIAM権限を所持 +- `serverless` CLI (グローバルインストール推奨) +- `.env.dev` 等のステージ別設定を用意 -#### 2.2.2 フロントエンド (dev 用ビルド・デプロイ例) -1. **dev 用ビルド** - ```bash - cd markdown-portal/frontend - npm install - npm run build - ``` - - `.env` や `VITE_API_STAGE=dev` 等の設定を行う場合は、`--mode develop` などを使ってもよいです。 -2. **成果物を S3 へアップロード (例)** - ```bash - aws s3 sync dist s3:// --delete - ``` - > CloudFront や Amplify Hosting を使う場合は、AWS CLI ではなくそれぞれの方法でデプロイします。 +#### (2) フロントエンド (dev) のビルド & デプロイ -#### 2.2.3 バックエンド (dev デプロイ) -1. **デプロイ設定の確認** - - `serverless.yml` で `stage: dev` が指定されるようにします (または `--stage dev` オプション)。 -2. **デプロイ実行** - ```bash - cd markdown-portal/backend - npm install - npx serverless deploy --stage dev - ``` - - 成功すると API エンドポイントが発行されます。API Gateway の URL をフロントエンドで参照するように設定してください。 +```bash +cd markdown-portal/frontend +npm install +npm run build # --mode develop等を使う場合も可 + +# 出力された dist/ フォルダを S3 にアップロードする例: +aws s3 sync dist s3:// --delete +``` + +- CloudFront などを使う場合は、Invalidation 等が別途必要です。 + +#### (3) バックエンド (dev) デプロイ + +```bash +cd markdown-portal/backend +npm install +npx serverless deploy --stage dev +``` + +- デプロイ成功後に出力される API Endpoint を、フロントエンド `.env.dev` 等で設定します。 --- -### 2.3 本番ステージ（prod 環境）でのデプロイ +### 2.3 本番ステージ (prod) へのデプロイ -1. **フロントエンド** - ```bash - cd markdown-portal/frontend - npm run build - # 例えば S3 へのアップロード - aws s3 sync dist s3:// --delete - ``` - - CloudFront のキャッシュを無効化する場合、`aws cloudfront create-invalidation` などの手順を追加します。 +#### (1) フロントエンド +```bash +cd markdown-portal/frontend +npm install +npm run build:prod +aws s3 sync dist s3:// --delete +# または Amplify Hosting, CloudFront等でホスティング +``` -2. **バックエンド** - ```bash - cd markdown-portal/backend - npx serverless deploy --stage prod - ``` - - デプロイ後、API Gateway の本番 URL が更新されます。フロントエンドから参照しているエンドポイントを間違えないよう注意してください。 +#### (2) バックエンド +```bash +cd markdown-portal/backend +npx serverless deploy --stage prod +``` + +- デプロイ後に本番用の API Endpoint が有効となり、フロントエンドから利用可能です。 --- ## 3. テスト方法 ### 3.1 フロントエンドテスト -- **ユニットテスト / コンポーネントテスト**: + +- React Testing Library + Vitest / Jest 等を使用 ```bash cd markdown-portal/frontend npm run test ``` - - React Testing Library や Vitest / Jest を想定 -- **E2E テスト** (任意): Cypress などを導入し、テスト環境 (dev) へデプロイした上でテストを行う。 ### 3.2 バックエンドテスト -- **単体テスト**: Jest などで service 層や controller のテストを実施 + +- Jest によるユニット/統合テスト ```bash cd markdown-portal/backend npm run test ``` -- **統合テスト**: Serverless Offline で起動し、API を実際に呼んでテスト (supertest など) +- Serverless Offline 環境で `supertest` や `curl` などを使い、実際にAPIを呼ぶテストも可能です。 --- -## 4. 開発上の注意点 +## 4. 環境変数 (.env) について -1. **Cognito 認証** - - オフライン時はモック認証を使い `userId = local-user-1234` 固定で動作します。 - - 本番環境では JWT を検証し、ユーザーごとのデータにしかアクセスできないようにします。 +フロントエンド側では `VITE_` プレフィックス付き変数が中心です: -2. **DynamoDB スキーマ** - - パーティションキー: `userId`、ソートキー: `slug` - - 公開ドキュメント検索用に GSI (SlugIndex) を設定 +- **VITE_API_STAGE** + - `local` → ローカル開発モード (例: `http://localhost:3000/local/api`) + - `dev` → 開発ステージ (API Gatewayの `/dev/api`) + - `prod` → 本番ステージ (API Gatewayの `/prod/api`) -3. **Git フロー** - - **feature ブランチ** → ローカル DynamoDB - - **develop ブランチ** → dev ステージ (AWS) - - **main ブランチ** → prod ステージ (AWS) +- **REACT_APP_USE_MOCK_AUTH** + - `"true"` の場合、オフライン用のモック認証が有効となり、ローカル環境で手軽にログイン状態を再現できます。 -4. **デプロイ前に注意すること** - - `serverless.yml` 内の `stage` や `DYNAMO_TABLE_NAME` が正しいかどうか - - Cognito User Pool ID やクライアント ID などが環境変数で適切に指定されているか (Amplify 設定含む) +- **VITE_COGNITO_DOMAIN / VITE_COGNITO_CLIENT_ID / VITE_COGNITO_USER_POOL_ID / VITE_COGNITO_REGION** + - Cognito User Pool 関連の設定 (ドメイン, クライアントID, ユーザープールID, リージョン等) -5. **セキュリティ** - - 認証が必要なエンドポイントは JWT 検証 (Auth Middleware) を必ず通すこと - - 非公開データは `isPublic=false` の場合、所有ユーザーのみ編集可能とする +- **VITE_SIGNIN_URL / VITE_SIGNOUT_URL** + - Cognito 認証後のリダイレクト先URL (サインイン / サインアウト時) --- -.envファイルについて（frontend） -VITE_API_STAGE +## 5. 開発フロー上の注意点 -local → ローカル開発モード (http://localhost:3000/local/api などに向く) -dev → 開発ステージ (https://{devのAPI Gateway}/dev/api など) -prod → 本番 (https://{本番API Gateway}/prod/api など) -REACT_APP_USE_MOCK_AUTH +1. **Gitブランチとステージ** + - feature ブランチ → ローカルDynamoDB で動作確認 + - develop ブランチ → devステージ (AWS) へ随時デプロイ + - main ブランチ → prodステージ (AWS) へ本番デプロイ -true の場合、フロントエンドでオフライン用のモック認証が動く。ローカルで簡易ログイン状態をエミュレートするためのもの。 -VITE_COGNITO_DOMAIN +2. **デプロイ時の確認事項** + - `serverless.yml` の `stage` / `DYNAMO_TABLE_NAME` や `.env.*` の設定 + - Cognito リソース (User Pool ID / Client ID) が正しいか + - Amplify / S3 / CloudFront の設定見直し -Cognito のドメイン (例: myapp.auth.ap-northeast-1.amazoncognito.com の myapp 部分) を指定することが多い。 -Amplify設定では domain: "${domainPrefix}.auth.${region}.amazoncognito.com" となるため、その domainPrefix が VITE_COGNITO_DOMAIN。 -VITE_COGNITO_CLIENT_ID / VITO_COGNITO_USER_POOL_ID +3. **セキュリティ** + - JWT トークン検証を必ずバックエンドで実行し、所有者以外はドキュメントを操作できないよう制御 + - 公開しないドキュメント (`isPublic=false`) は認証必須として扱う -Cognito ユーザープールの「クライアントID」や「ユーザープールID」。 -例: VITE_COGNITO_CLIENT_ID=abcd1234efgh5678ijkl -例: VITO_COGNITO_USER_POOL_ID=ap-northeast-1_xxxxxxxx -VITE_COGNITO_REGION +--- -Cognito を作成した AWS リージョン (例: ap-northeast-1) -VITE_SIGNIN_URL と VITE_SIGNOUT_URL +## 6. 個人情報の取扱いポリシー -Cognito 認証成功後 / ログアウト後に戻ってくる URL。Amplify の OAuth 設定で redirectSignIn / redirectSignOut に指定されます。 -例: ローカル開発なら http://localhost:5173/ -本番なら https://example.com/ +当プロジェクトでは、以下の個人情報を収集・保持する場合があります。 -## 5. 今後の課題・TODO +- **ユーザーID**: 内部的なユーザー識別・権限管理 +- **メールアドレス**: ログイン通知やパスワードリセットなどで必要な連絡手段 -1. **フロントエンドのデザイン** - - 現状、最低限の UI/UX。Bootstrap や Material-UI, Chakra UI など導入の検討 -2. **コラボレーション機能** - - 複数ユーザーで同一ドキュメントを共同編集するためのロック機能、またはリアルタイム編集検討 -3. **サーチ機能** - - タイトル・本文を全文検索するために、Elasticsearch / OpenSearch 連携 or DynamoDB Streams + Lambda などの構成を検討 -4. **監査ログ・バージョン管理** - - 過去バージョンの参照、差分の確認、ロールバックなど -5. **CI/CD の高度化** - - GitHub Actions で Pull Request ごとに一時環境を自動構築する、など +### 6.1 個人情報の削除 ---- +- **6カ月以上ログインがない場合** + 管理者は、データ保持ポリシーに基づき、6カ月以上ログイン実績のないアカウントを **事前通知なし** で削除できるものとします。 + - 削除には、ユーザーID・メールアドレス・作成したドキュメントを含む関連データがすべて含まれます。 + +### 6.2 問い合わせ窓口 -## 6. まとめ +個人情報の取扱いや削除ポリシーに関して、疑問・要望などありましたら、リポジトリの Issue もしくは管理者宛にご連絡ください。 + +--- -- **ローカル開発**: Docker で DynamoDB Local、Serverless Offline、モック認証を用意し、素早い実装とテストが可能。 -- **本番運用**: Cognito + DynamoDB + Lambda + API Gateway + (S3/CloudFront or Amplify) でサーバーレス構成を実現。 -- **デプロイフロー**: Git ブランチ (feature → develop → main) と対になる環境 (local → dev → prod) を想定。 +## 7. まとめ -> 何か不明点や追加機能のリクエストがあれば、Issue や Pull Request で検討していきましょう。 +- **ローカル開発**: Docker上の DynamoDB Local + serverless-offline + モック認証を利用し、素早い開発・テストが可能 +- **本番運用**: Cognito + DynamoDB + Lambda + API Gateway + (S3/CloudFront / Amplify) を組み合わせたサーバーレス構成 +- **デプロイフロー**: Git ブランチを (local → dev → prod) の各ステージと対応させ、CI/CD を構築して運用 -以上が本プロジェクトの概要と環境別の立ち上げ手順です。 \ No newline at end of file +以上が当プロジェクトの概要と環境別の立ち上げ手順です。ご質問や不明点などあれば、Issue や Pull Request を通じてお寄せください。 \ No newline at end of file diff --git a/frontend/src/App.css b/frontend/src/App.css index fc4b1eb..6058a38 100644 --- a/frontend/src/App.css +++ b/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%; -} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8f0a592..1cab667 100644 --- a/frontend/src/App.tsx +++ b/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 ( @@ -36,7 +40,7 @@ const MainRouter: React.FC = () => { {isSignedIn ? ( <> {/* メールアドレスを右寄せ表示 */} - { isSignedIn ? accountDisplay : ""} + {isSignedIn ? accountDisplay : ""} @@ -48,14 +52,34 @@ const MainRouter: React.FC = () => { )} - +
{/* ルーティング */} - } /> - } /> - } /> - } /> + }/> + }/> + }/> + }/> + }/> + } /> +
+ + {/* Footer */} +
+
+

© 2025 Markdown Portal

+ +
+ + プライバシーポリシー + + | + + 利用規約 + +
+
+
); }; diff --git a/frontend/src/pages/PrivacyPolicyPage.tsx b/frontend/src/pages/PrivacyPolicyPage.tsx new file mode 100644 index 0000000..4ad6b4e --- /dev/null +++ b/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 ( +
+

プライバシーポリシー

+ +

+ 本アプリケーションでは、認証やサービス提供のためにユーザーの個人情報 + （例: ユーザーID、メールアドレスなど）を取得・保存します。 +

+ +

1. 個人情報の取得と利用目的

+
    +
  • ユーザー認証を行うため（AWS Cognitoなどを使用）
    • +
  • ユーザー自身が作成したドキュメントを本人のみが管理・編集できるようにするため
    • +
  • ご本人へ連絡が必要な場合のため（パスワードリセットなど）
    • +
+ +

2. 保存期間・利用停止について

+

+ ユーザーが長期間（6カ月以上）ログインを行っていない場合、管理者は + 当該ユーザーの個人情報と関連データを削除する場合があります。 + 削除は事前に通知などは行わずに行われる場合があり、ユーザーに関する情報がすべて削除されることを予めご了承ください。 + ただし詳細はサービス運営方針に準じます。 +

+ +

3. 削除される主な個人情報

+
    +
  • ユーザーID
    • +
  • メールアドレス
    • +
  • ユーザーが作成したドキュメント
    • +
+ + {/* ▼ 更新履歴セクションを追加 ▼ */} +

4. 更新履歴

+ + + + + + + + + + + + + + + {/* 必要に応じて追加 */} + +
バージョン更新日変更内容
1.0.02025-01-12初版を作成
+ +

+ 以上の内容は予告なく変更される場合があります。最新の情報は当ページにて告知します。 +

+
+ ); +}; + +export default PrivacyPolicyPage; diff --git a/frontend/src/pages/TermsOfUsePage.tsx b/frontend/src/pages/TermsOfUsePage.tsx new file mode 100644 index 0000000..e92de65 --- /dev/null +++ b/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 ( +
+

利用規約 (Terms of Use)

+ +

+ この利用規約（以下「本規約」といいます）は、「Markdown Portal」 + （以下「本サービス」といいます）を利用される方（以下「ユーザー」といいます） + との間で適用されます。 +

+ +

1. 総則

+

+ ユーザーは、本サービスを利用することで、本規約に同意したものとみなされます。 + ユーザーは本規約を確認・承諾のうえご利用ください。 +

+ +

2. 禁止事項

+
    +
  • 他者のプライバシーや知的財産権、その他の権利を侵害する行為
    • +
  • 違法行為または公序良俗に反する行為
    • +
  • 本サービスの運営を妨げる行為
    • + {/* 必要に応じて追加 */} +
+ +

3. 免責事項

+

+ 本サービスの提供者は、サービス内容やユーザー投稿コンテンツ等に関して、いかなる + 保証も行いません。サービス利用に起因する損害について、一切の責任を負わない + ものとします。 +

+ +

4. 規約の変更

+

+ 本規約は、事前の通知なく変更される場合があります。変更後の規約は、本サービス + 内で掲載された時点から効力を有します。 +

+ +

5. 準拠法および管轄裁判所

+

+ 本規約の解釈や適用は日本法に準拠し、本サービスまたは本規約に関連して紛争が + 生じた場合、開発者または管理者の所在地を管轄する裁判所を専属的合意管轄裁判所 + とします。 +

+ + {/* ▼ 更新履歴セクションを追加 ▼ */} +

6. 更新履歴

+ + + + + + + + + + + + + + + {/* 必要に応じて追加 */} + +
バージョン更新日変更内容
1.0.02025-01-12初版を作成
+ +

以上

+
+ ); +}; + +export default TermsOfUsePage; diff --git a/frontend/src/styles/Footer.module.scss b/frontend/src/styles/Footer.module.scss new file mode 100644 index 0000000..3845486 --- /dev/null +++ b/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; + } +} diff --git a/frontend/src/styles/PrivacyPolicyPage.module.scss b/frontend/src/styles/PrivacyPolicyPage.module.scss new file mode 100644 index 0000000..ca8ba4f --- /dev/null +++ b/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; +} diff --git a/frontend/src/styles/TermsOfUsePage.module.scss b/frontend/src/styles/TermsOfUsePage.module.scss new file mode 100644 index 0000000..8899a25 --- /dev/null +++ b/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; +} diff --git a/frontend/src/styles/tableCommon.module.scss b/frontend/src/styles/tableCommon.module.scss new file mode 100644 index 0000000..0c7cbb5 --- /dev/null +++ b/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; + } + } +}