add

front/package.json

@@ -11,12 +11,15 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.15",
+    "@mui/material": "^5.14.16",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.4",
     "next": "14.0.1",
     "next-auth": "^4.24.4",
     "react": "^18",
     "react-dom": "^18",
-    "sharp": "^0.32.6"
+    "react-hook-form": "^7.47.0",
+    "sharp": "^0.32.6",
+    "styled-components": "^6.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",

front/src/app/Header.tsx

@@ -33,10 +33,14 @@ export async function Header() {
           </div>
         </div>
         <div className="flex justify-center w-full border-0 bg-white">
-          <div className="w-11/12 h-[3px] bg-gray-300 px-20 rounded-full"></div>
+          <div className="w-11/12 h-[1px] bg-gray-300 px-20"></div>
+        </div>
+        <div className="flex justify-center w-full border-0 bg-transparent">
+          <div className="w-11/12 h-[1px] bg-gray-300 px-20"></div>
         </div>
         {/*<div className="flex justify-center w-full border-0 bg-gradient-to-b from-white to-transparent h-1"></div>*/}
       </header>
+      <div className="header-space h-20" />
     </>
   );
 }

front/src/app/[userid]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page({ params }: { params: { userid: string } }) {
+  return <div>My Post: {params.userid}</div>;
+}

front/src/app/authbuttons.tsx

@@ -1,22 +1,32 @@
 "use client";
 import { signIn, signOut } from "next-auth/react";
+import { usePathname } from "next/navigation";
 
 export const LoginButton = () => {
+  const pathname = usePathname();
+  const isSignin = pathname === "/signin";
+
   return (
-    <button
-      className="bg-[#f9842c] hover:bg-[#FA6C28] rounded-full  text-white px-4 py-1 border-[#f9842c] border-2 hover:border-[#FA6C28] font-Noto font-semibold text-xl"
-      style={{ marginRight: 10 }}
-      onClick={() => signIn()}
-    >
-      ログイン / 新規登録
-    </button>
+    <>
+      {isSignin ? (
+        <div />
+      ) : (
+        <button
+          className="bg-primary-default hover:bg-primary-dark rounded-full  text-white px-4 py-1 border-primary-default border-2 hover:border-primary-dark font-Noto font-semibold text-xl"
+          style={{ marginRight: 10 }}
+          onClick={() => signIn()}
+        >
+          ログイン / 新規登録
+        </button>
+      )}
+    </>
   );
 };
 
 export const LogoutButton = () => {
   return (
     <button
-      className="bg-white hover:bg-gray-100 rounded-full  text-[#f9842c] px-4 py-1 border-[#f9842c] border-2 font-Noto font-semibold text-xl"
+      className="bg-white hover:bg-gray-100 rounded-full  text-primary-default px-4 py-1 border-primary-default border-2 font-Noto font-semibold text-xl"
       onClick={() => signOut()}
     >
       ログアウト