Merge pull request #43 from ut-code/user_data

NISHIYAMA-Takuki · web-flow · commit 6a0c9afcaee0 · 2025-01-25T22:59:24.000+09:00
user管理クラス
diff --git 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
@@ -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<UserContextValue | null>(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
@@ -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<ThemeType>("light");
+
+  const userInstance = new User();
+  const [user, setUserState] = useState<RegisterType | undefined>(
+    userInstance.getUser(),
+  );
+
+  const setUser = (newUser: RegisterType) => {
+    userInstance.setUser(newUser);
+    setUserState(newUser);
+  };
+
+  const userContextValue: UserContextValue = {
+    user,
+    setUser,
+  };
+
   return (
-    // ライト/ダークモードで背景色と文字色を変更
-    <ThemeContext.Provider value={{ theme: theme, setTheme: setTheme }}>
-      <html
-        lang="ja"
-        className={`bg-surface-container text-text-default ${theme}`}
-      >
-        <body className={inter.className}>{children}</body>
-      </html>
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <UserContext.Provider value={userContextValue}>
+        <html
+          lang="ja"
+          className={`bg-surface-container text-text-default ${theme}`}
+        >
+          <body className={inter.className}>{children}</body>
+        </html>
+      </UserContext.Provider>
     </ThemeContext.Provider>
   );
 }
diff --git 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 (
     <div>
       <Header />
-
       {/* バックグラウンド画像 */}
       <div className={`absolute right-0 bottom-0 w-[800px] h-full`}>
         <Image
diff --git a/src/app/utils/user.ts b/src/app/utils/user.ts
@@ -5,18 +5,41 @@ import { ClassDataType, RegisterType } from "@/app/type";
 
 const MODE = process.env.NEXT_PUBLIC_MODE;
 
-export const fetchClasses = (): ClassDataType[] | undefined => {
-  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));
+    }
   }
-};
+}
