サインアウトモーダルの作成

backend/api/controller/auth_controller.go

@@ -63,6 +63,13 @@ func (ac AuthController) SignIn(c *gin.Context) {
 	})
 }
 
+func (ac AuthController) SignUp(c *gin.Context) {
+	c.JSON(200, map[string]string{
+		"status": "success",
+	})
+}
+
+
 func (ac AuthController) SignOut(c *gin.Context) {
 	c.SetCookie("token", "", -1, "/", config.GetDomainName(), config.GetIsSecured(), true)
 	c.Status(200)

backend/api/router/router.go

@@ -174,6 +174,20 @@ func SetupRoutes(i *do.Injector, app *gin.Engine) error {
 		return err
 	}
 
+	// signUpOpe /signup POST
+	app.POST("/signup", authController.SignUp)
+	signUpOpe, _ := appDoc.NewOperationContext(http.MethodPost, "/signup")
+	signUpOpe.SetID("signUp")
+	signUpOpe.SetSummary("ユーザのアカウント登録を実行")
+	signUpOpe.SetTags("auth")
+	signUpOpe.AddReqStructure(new(schema.SignupRequest))
+	signUpOpe.AddRespStructure(new(schema.UserResponse), openapi.WithHTTPStatus(http.StatusOK))
+	signUpOpe.AddRespStructure(new(schema.ErrorResponse), openapi.WithHTTPStatus(http.StatusBadRequest))
+	signUpOpe.AddRespStructure(new(schema.ErrorResponse), openapi.WithHTTPStatus(http.StatusInternalServerError))
+	if err := appDoc.AddOperation(signUpOpe); err != nil {
+		return err
+	}
+
 	// createPostComments /posts/{postId}/comments POST
 	authRequired.PUT("/posts/:postid/comments/:commentId", postController.UpdateComment)
 	putCommnetsOpe, _ := appDoc.NewOperationContext(http.MethodPost, "posts/{postId}/comments/{commentId}")

backend/api/schema/auth_schema.go

@@ -10,3 +10,8 @@ type LoginRequest struct {
 	UserName string `json:"user_name"`
 	Password string `json:"password"`
 }
+
+type SignupRequest struct {
+	UserName string `json:"user_name"`
+	Password string `json:"password"`
+}

docs/api.yaml

@@ -148,6 +148,36 @@ paths:
       summary: ユーザのログアウトを実行
       tags:
       - auth
+  /signup:
+    post:
+      operationId: signUp
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SchemaSignupRequest'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SchemaUserResponse'
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SchemaErrorResponse'
+          description: Bad Request
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SchemaErrorResponse'
+          description: Internal Server Error
+      summary: ユーザのアカウント登録を実行
+      tags:
+      - auth
   /user:
     get:
       operationId: getCurrentUser
@@ -576,6 +606,13 @@ components:
         user_name:
           type: string
       type: object
+    SchemaSignupRequest:
+      properties:
+        password:
+          type: string
+        user_name:
+          type: string
+      type: object
     SchemaUpdateCommentRequest:
       properties:
         body:

frontend/src/api/hooks.msw.ts

@@ -407,6 +407,7 @@ export const getWeb6APIMock = () => [
   getCreatePostMockHandler(),
   getSignInMockHandler(),
   getSignOutMockHandler(),
+  getSignUpMockHandler(),
   getGetCurrentUserMockHandler(),
   getGetPostMockHandler(),
   getListPostCommentsMockHandler(),

frontend/src/api/hooks.ts

@@ -23,6 +23,7 @@ import type {
   SchemaLoginRequest,
   SchemaMutationSchema,
   SchemaPostResponse,
+  SchemaSignupRequest,
   SchemaUpdateCommentRequest,
   SchemaUpdatePostRequest,
   SchemaUserResponse
@@ -266,6 +267,64 @@ export const useSignOut = <TError = SchemaErrorResponse, TContext = unknown>(opt
   return useMutation(mutationOptions)
 }
 
+/**
+ * @summary ユーザのアカウント登録を実行
+ */
+export const signUp = (
+    schemaSignupRequest: SchemaSignupRequest,
+ options?: SecondParameter<typeof customInstance>,) => {
+
+
+      return customInstance<SchemaUserResponse>(
+      {url: `/signup`, method: 'POST',
+      headers: {'Content-Type': 'application/json', },
+      data: schemaSignupRequest
+    },
+      options);
+    }
+
+
+
+export const getSignUpMutationOptions = <TError = SchemaErrorResponse,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof signUp>>, TError,{data: SchemaSignupRequest}, TContext>, request?: SecondParameter<typeof customInstance>}
+): UseMutationOptions<Awaited<ReturnType<typeof signUp>>, TError,{data: SchemaSignupRequest}, TContext> => {
+const {mutation: mutationOptions, request: requestOptions} = options ?? {};
+
+
+
+
+      const mutationFn: MutationFunction<Awaited<ReturnType<typeof signUp>>, {data: SchemaSignupRequest}> = (props) => {
+          const {data} = props ?? {};
+
+          return  signUp(data,requestOptions)
+        }
+
+
+
+
+  return  { mutationFn, ...mutationOptions }}
+
+    export type SignUpMutationResult = NonNullable<Awaited<ReturnType<typeof signUp>>>
+    export type SignUpMutationBody = SchemaSignupRequest
+    export type SignUpMutationError = SchemaErrorResponse
+
+    /**
+ * @summary ユーザのアカウント登録を実行
+ */
+export const useSignUp = <TError = SchemaErrorResponse,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof signUp>>, TError,{data: SchemaSignupRequest}, TContext>, request?: SecondParameter<typeof customInstance>}
+): UseMutationResult<
+        Awaited<ReturnType<typeof signUp>>,
+        TError,
+        {data: SchemaSignupRequest},
+        TContext
+      > => {
+
+      const mutationOptions = getSignUpMutationOptions(options);
+
+      return useMutation(mutationOptions);
+    }
+
 /**
  * @summary 現在ログインしているユーザを取得
  */

frontend/src/api/model/schemaSignupRequest.ts

@@ -0,0 +1,12 @@
+/**
+ * Generated by orval v6.30.2 🍺
+ * Do not edit manually.
+ * Web開発研修6班 API
+ * FY24卒Web開発研修6班のAPI仕様書です
+ * OpenAPI spec version: 1.0.0
+ */
+
+export interface SchemaSignupRequest {
+  password?: string;
+  user_name?: string;
+}

frontend/src/app/Header/Header.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { Box, Button, Loading, Text, useDisclosure } from '@yamada-ui/react'
+import { useNavigate } from 'react-router-dom'
+import { usePostSignout, useGetUser } from '../../api/api'
+import { SignoutModal } from './SignoutModal'
+
+export const Header = () => {
+  const navigate = useNavigate()
+  const { data: user, isError, refetch, isFetching } = useGetUser()
+  const [currentUser, setCurrentUser] = useState(user)
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const { mutate: signoutMutate } = usePostSignout({
+    mutation: {
+      onSuccess: () => {
+        setCurrentUser(undefined)
+        navigate('/signin')
+      }
+    }
+  })
+
+  useEffect(() => {
+    if (isError) {
+      setCurrentUser(undefined)
+    } else {
+      setCurrentUser(user)
+    }
+  }, [user, isError])
+
+  return (
+    <>
+      <header className="app-header">
+        サンプルアプリケーション
+        <Box display="flex" alignItems="center">
+          {isFetching ? (
+            <Loading variant="circles" size="6xl" color="cyan.500" />
+          ) : isError || !currentUser ? (
+            <Button onClick={() => signoutMutate()}>サインイン</Button>
+          ) : (
+            <>
+              <Text mr={2}>{currentUser.user_name}</Text>
+              <Button onClick={onOpen}>サインアウト</Button>
+            </>
+          )}
+        </Box>
+      </header>
+      <SignoutModal isOpen={isOpen} onClose={onClose} signoutMutate={signoutMutate} refetch={refetch} />
+    </>
+  )
+}

frontend/src/app/Header/SignoutModal.tsx

@@ -0,0 +1,39 @@
+import { Button, Center, Divider, Modal, ModalBody, ModalFooter, ModalHeader } from '@yamada-ui/react'
+import { Link } from 'react-router-dom'
+
+interface props {
+  isOpen: boolean
+  onClose: () => void
+  signoutMutate: () => void
+  refetch: () => void
+}
+
+export const SignoutModal = ({ isOpen, onClose, signoutMutate, refetch }: props) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <Center>
+        <ModalHeader>警告</ModalHeader>
+      </Center>
+      <Divider variant="solid" my={2} />
+      <ModalBody>サインアウトを行います。よろしいですか？</ModalBody>
+      <Divider variant="solid" my={2} />
+      <ModalFooter>
+        <Button variant="ghost" onClick={onClose}>
+          とじる
+        </Button>
+        <Link to="/">
+          <Button
+            onClick={() => {
+              signoutMutate()
+              refetch()
+              onClose()
+            }}
+            colorScheme="primary"
+          >
+            サインアウト
+          </Button>
+        </Link>
+      </ModalFooter>
+    </Modal>
+  )
+}

frontend/src/app/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header'

frontend/src/pages/posts/detail/PostDetailRoute.tsx

@@ -71,28 +71,24 @@ export const PostDetailRoute = () => {
             <Button onClick={onOpen} colorScheme="primary">
               削除
             </Button>
-            <>
-              <Modal isOpen={isOpen} onClose={onClose}>
-                <Center>
-                  <ModalHeader>警告</ModalHeader>
-                </Center>
-                <Divider variant="solid" />
-                <ModalBody>削除したら元に戻せません。削除しますか？</ModalBody>
-                <Divider variant="solid" />
-                <ModalFooter>
-                  <Button variant="ghost" onClick={onClose}>
-                    とじる
+            <Modal isOpen={isOpen} onClose={onClose}>
+              <Center>
+                <ModalHeader>警告</ModalHeader>
+              </Center>
+              <Divider variant="solid" my={2} />
+              <ModalBody>削除したら元に戻せません。削除しますか？</ModalBody>
+              <Divider variant="solid" my={2} />
+              <ModalFooter>
+                <Button variant="ghost" onClick={onClose}>
+                  とじる
+                </Button>
+                <Link to="/">
+                  <Button onClick={handleDelete} colorScheme="primary">
+                    削除
                   </Button>
-                  <>
-                    <Link to="/">
-                      <Button onClick={handleDelete} colorScheme="primary">
-                        削除
-                      </Button>
-                    </Link>
-                  </>
-                </ModalFooter>
-              </Modal>
-            </>
+                </Link>
+              </ModalFooter>
+            </Modal>
           </>
         ) : null}
       </HStack>