diff --git a/readme/developer_readme.md b/readme/developer_readme.md index d406aa5..3148634 100644 --- a/readme/developer_readme.md +++ b/readme/developer_readme.md @@ -1,38 +1,51 @@ -## setup +## セットアップ -After cloning the repository, you need to install the required packages. -Please run the following command in the root directory of the repository +リポジトリをクローンした後、必要なパッケージをインストールする必要があります。 +リポジトリのルートディレクトリで以下のコマンドを実行してください。 ```bash npm install ``` -## development +## 開発 -To run the development mode, run the following command. +開発モードを実行するには、以下のコマンドを実行してください。 ```bash npm run dev ``` -Before pushing the code, please run the following command to check the code quality. +コードをプッシュする前に、コード品質をチェックするために以下のコマンドを実行してください。 ```bash npm run lint ``` -if there are any prettier errors, please run the following command to fix them. +もし `prettier` のエラーがある場合は、以下のコマンドを実行して修正してください。 ```bash npx prettier . --write ``` -## mock mode +## モックモード -To run the mock mode, run the following command. +モックモードを実行するには、以下のコマンドを実行してください。 ```bash npm run dev:mock ``` -It will run the application with the mock data. +このコマンドを実行すると、モックデータを使用してアプリケーションが実行されます。 + +## 関数やクラスの説明 + +### 1. Userのデータを扱う場合 (src/app/utils/user.ts) + +Userのデータは`User`クラスを使用して扱います。Userのデータは以下の場合があります。 + +- `npm run dev:mock`を実行した場合 + - Userはモックのデータが使用されます。 +- `npm run dev`を実行した場合 + - UserはlocalStorageに保存されたデータが使用されます。 + +ただ、まだユーザを登録する機能がないので、mockでユーザを作成する必要があります。 diff --git a/src/app/UserContext.ts b/src/app/UserContext.ts new file mode 100644 index 0000000..618eaae --- /dev/null +++ b/src/app/UserContext.ts @@ -0,0 +1,29 @@ +"use client"; + +import { createContext, useContext } from "react"; +import { RegisterType } from "@/app/type"; + +/** + * UserContext で管理するデータの型定義 + */ +export type UserContextValue = { + user: RegisterType | undefined; + setUser: (newUser: RegisterType) => void; +}; + +/** + * ユーザー情報を提供するContext + */ +export const UserContext = createContext(null); + +/** + * カスタムフック: useUser + * @returns UserContextValue - ユーザー情報とその更新関数を提供するオブジェクト + */ +export const useUser = () => { + const context = useContext(UserContext); + if (!context) { + throw new Error("useUser must be used within a UserProvider"); + } + return context; +}; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 29ec5e6..8af4aca 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,32 +4,58 @@ import { Inter } from "next/font/google"; import { useState } from "react"; import "./globals.css"; -import { ThemeType, ThemeProviderValue } from "@/app/type"; +import { ThemeType, RegisterType } from "@/app/type"; import { ThemeContext } from "@/app/context"; +import { UserContext, UserContextValue } from "@/app/UserContext"; + +import { User } from "@/app/utils/user"; const inter = Inter({ subsets: ["latin"] }); /** * RootLayout コンポーネントは、アプリケーション全体のレイアウトを定義します。 - * @param props - コンポーネントのプロパティ。 - * @param props.children - レイアウト内に表示する子要素。 - * @returns HTMLドキュメントのルート要素としてのJSX要素。 + * + * - テーマ（light/dark）の切り替え機能を提供します。 + * - ユーザー情報を管理し、アプリ全体で利用可能にします。 + * @param props コンポーネントのプロパティ + * @param props.children レイアウト内に表示する子要素 + * @returns HTMLドキュメントのルート要素としてのJSX要素 */ export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { + /** + * テーマ管理 + */ const [theme, setTheme] = useState("light"); + + const userInstance = new User(); + const [user, setUserState] = useState( + userInstance.getUser(), + ); + + const setUser = (newUser: RegisterType) => { + userInstance.setUser(newUser); + setUserState(newUser); + }; + + const userContextValue: UserContextValue = { + user, + setUser, + }; + return ( - // ライト/ダークモードで背景色と文字色を変更 - - - {children} - + + + + {children} + + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 0d0a1e6..92f2c7b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,17 +1,23 @@ +"use client"; + import Header from "@/app/components/Header"; import Footer from "@/app/components/Footer"; import Logo from "@/../../public/syllabus_icon.svg"; import Image from "next/image"; +import { useUser } from "@/app/UserContext"; +import { RegisterType } from "@/app/type"; + +import { useEffect } from "react"; /** * Home コンポーネントは、ホームページの内容を表示します。 * @returns HTMLを生成するReactコンポーネント。 */ export default function Home(): JSX.Element { + const { user, setUser } = useUser(); return (
- {/* バックグラウンド画像 */}
{ - if (MODE === "mock") { - return SampleClasses; - } else { - localStorage.getItem("classes"); +export class User { + private user: RegisterType | undefined; + + constructor() { + if (typeof window !== "undefined") { + if (MODE === "mock") { + this.user = SampleUser; + } else { + const storedUser = localStorage.getItem("user"); + this.user = storedUser ? JSON.parse(storedUser) : undefined; + } + } else { + this.user = undefined; + } + } + + /** + * ユーザー情報を取得します。 + * undefinedの場合は、未登録とみなします。 + * @returns 現在のユーザー情報 + */ + getUser(): RegisterType | undefined { + return this.user; } -}; -export const fetchUser = (): RegisterType | undefined => { - if (MODE == "mock") { - return SampleUser; - } else { - localStorage.getItem("user"); + /** + * ユーザー情報を更新します。 + * クライアントサイドのみで localStorage を更新します。 + * @param newUser 新しいユーザー情報 + */ + setUser(newUser: RegisterType): void { + this.user = newUser; + + if (typeof window !== "undefined" && MODE !== "mock") { + localStorage.setItem("user", JSON.stringify(newUser)); + } } -}; +}