useAuth関係、そのたスタイリングの修正

package.json

@@ -13,7 +13,7 @@
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,md}": [
-      ""
+      "eslint --fix"
     ]
   },
   "ignorePatterns": [

src/app/followers/page.tsx

@@ -6,7 +6,7 @@ const FollowersPage: React.FC = () => {
   return (
     <div className="w-full flex flex-col">
       <Topbar />
-      <div className="max-w-xl mx-auto">
+      <div className="max-w-[480px] xl:w-[480px] mx-auto">
         <FollowersComponent />
       </div>
     </div>

src/app/followings/page.tsx

@@ -6,7 +6,7 @@ const FollowingUsersPage: React.FC = () => {
   return (
     <div className="w-full flex flex-col">
       <Topbar />
-      <div className="max-w-xl mx-auto">
+      <div className="max-w-[480px] xl:w-[480px] mx-auto">
         <FollowingUsersComponent />
       </div>
     </div>

src/app/post/edit/page.tsx

@@ -34,7 +34,7 @@ const PostEditPage: React.FC = () => {
   return (
     <div className="w-full flex flex-col">
       <Topbar />
-      <div className="max-w-xl mx-auto">
+      <div className="max-w-[480px] xl:w-[480px] mx-auto">
         <Suspense fallback={<LoadingSpinner />}>
           <PostEditContent />
         </Suspense>

src/app/profile/page.tsx

@@ -30,7 +30,7 @@ const ProfilePage: React.FC = () => {
   return (
     <div className="w-full flex flex-col">
       <Topbar />
-      <div className="max-w-md mx-auto">
+      <div className="max-w-[480px] xl:w-[480px] mx-auto">
         <Suspense fallback={<LoadingSpinner />}>
           <ProfileContent />
         </Suspense>

src/app/setting/page.tsx

@@ -6,7 +6,7 @@ const SettingPage: React.FC = () => {
   return (
     <div className="w-full flex flex-col">
       <Topbar />
-      <div className="min-w-96 max-w-xl mx-auto">
+      <div className="max-w-[480px] xl:w-[480px] mx-auto">
         <SettingComponent />
       </div>
     </div>

src/components/layouts/login/LoginForm.tsx

@@ -1,22 +1,24 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
-import { useRouter } from "next/navigation";
+// import { useRouter } from "next/navigation";
 import { loginCall } from "@/app/actionCalls";
-import {
-  loginStart,
-  loginSuccess,
-  loginError,
-} from "@/features/auth/authSlice";
+// import {
+//   loginStart,
+//   loginSuccess,
+//   loginError,
+// } from "@/features/auth/authSlice";
 import { useAppDispatch } from "@/hooks/useDispatch";
 import { User } from "@/types/user";
+import { useAuth } from "@/hooks/useAuth";
 
 const LoginForm: React.FC = () => {
   const emailRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
 
   const dispatch = useAppDispatch();
-  const router = useRouter();
+  const { login } = useAuth();
+  // const router = useRouter();
 
   useEffect(() => {
     // 自動でメールフィールドにフォーカスを当てる
@@ -25,22 +27,24 @@ const LoginForm: React.FC = () => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
     const emailValue = emailRef.current?.value || "";
     const passwordValue = passwordRef.current?.value || "";
     onSubmit(emailValue, passwordValue);
   };
 
   const onSubmit = async (email: string, password: string): Promise<void> => {
-    dispatch(loginStart());
+    // dispatch(loginStart());
 
     try {
       const userData: User = await loginCall({ email, password, dispatch });
-      dispatch(loginSuccess(userData));
-      router.push("/home");
+      login(userData);
+      // dispatch(loginSuccess(userData));
+      // router.push("/home");
     } catch (err) {
-      dispatch(loginError("ログインに失敗しました"));
+      // dispatch(loginError("ログインに失敗しました"));
       alert("エラーが発生しました。");
-      router.refresh();
+      // router.refresh();
     }
   };
 

src/components/layouts/register/RegisterForm.tsx

@@ -1,18 +1,21 @@
 "use client";
 
 import React, { useState } from "react";
-import { useRouter } from "next/navigation";
 import axios from "axios";
 import { AUTH_REGISTER_ENDPOINT } from "@/constants/api";
 import RegisterButton from "./RegisterButton";
+import { User } from "@/types/user";
+import { loginCall } from "@/app/actionCalls";
+import { useAppDispatch } from "@/hooks/useDispatch";
+import { useAuth } from "@/hooks/useAuth";
 
 const RegisterForm: React.FC = () => {
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
-
-  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { login } = useAuth();
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -25,10 +28,10 @@ const RegisterForm: React.FC = () => {
     try {
       await axios.post(AUTH_REGISTER_ENDPOINT, { username, email, password });
       alert("ユーザーを登録しました。");
-      router.push("/login");
+      const userData: User = await loginCall({ email, password, dispatch });
+      login(userData);
     } catch (err) {
       alert("ユーザー登録に失敗しました。もう一度お試しください。");
-      router.refresh();
     }
   };
 

src/components/layouts/timeline/PostButton.tsx

@@ -12,7 +12,7 @@ function PostButton() {
         type="submit"
         disabled={pending}
       >
-        {pending ? "投稿" : "投稿中..."}
+        {pending ? "投稿中..." : "投稿"}
       </button>
     </div>
   );

src/hooks/useAuth.ts

@@ -7,6 +7,7 @@ import {
   logout,
 } from "@/features/auth/authSlice";
 import { User } from "@/types/user";
+import { useRouter } from "next/navigation";
 
 interface UseAuthReturn {
   user: User | null;
@@ -19,18 +20,22 @@ interface UseAuthReturn {
 export const useAuth = (): UseAuthReturn => {
   const dispatch = useAppDispatch();
   const { user, isLoading, error } = useAppSelector((state) => state.auth);
+  const router = useRouter();
 
   const login = async (userData: User) => {
     dispatch(loginStart());
     try {
       dispatch(loginSuccess(userData));
+      router.push("/home");
     } catch (err) {
       dispatch(loginError("ログインに失敗しました"));
+      router.refresh();
     }
   };
 
   const logoutUser = () => {
     dispatch(logout());
+    router.push("/")
   };
 
   return { user, isLoading, error, login, logoutUser };