Merge pull request #18 from su-its/feat/home-screen/buttons

Feat/home screen/buttons

typing-app/src/components/molecules/GameStartButton.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import { Button, useDisclosure } from "@chakra-ui/react";
+import LoginModal from "./LoginModal"; // LoginModalコンポーネントをインポート
+
+const GameStartButton = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Button colorScheme="green" size="lg" onClick={onOpen}>
+        Game Start
+      </Button>
+
+      <LoginModal isOpen={isOpen} onClose={onClose} />
+    </>
+  );
+};
+
+export default GameStartButton;

typing-app/src/components/molecules/LoginModal.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  Input,
+} from "@chakra-ui/react";
+
+interface LoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
+  const [studentId, setStudentId] = useState("");
+  const router = useRouter();
+
+  const handleLogin = async () => {
+    // TODO:ログイン済みかどうかを判別
+    // TODO:学籍番号を使用したログイン処理
+    console.log(studentId);
+    router.push("/game");
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>続けるにはログインが必要です</ModalHeader>
+        <ModalBody>
+          <Input
+            placeholder="学籍番号を入力してください"
+            value={studentId}
+            onChange={(e) => setStudentId(e.target.value)}
+          />
+        </ModalBody>
+
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={handleLogin}>
+            ログインして続行
+          </Button>
+          <Button variant="ghost" onClick={onClose}>
+            閉じる
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LoginModal;

typing-app/src/components/molecules/LogoutButton.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { Button, useDisclosure } from "@chakra-ui/react";
+import LogoutModal from "./LogoutModal"; // 正しいパスに変更してください
+
+const LogoutButton: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    // TODO:ログアウト処理を実装
+    onOpen();
+  };
+
+  return (
+    <>
+      <Button colorScheme="blue" size="lg" onClick={handleLogout}>
+        Logout
+      </Button>
+
+      <LogoutModal isOpen={isOpen} onClose={onClose} />
+    </>
+  );
+};
+
+export default LogoutButton;

typing-app/src/components/molecules/LogoutModal.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from "@chakra-ui/react";
+
+interface LogoutModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const LogoutModal: React.FC<LogoutModalProps> = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>ログアウトしました</ModalHeader>
+        <ModalBody>ご利用ありがとうございました。</ModalBody>
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={onClose}>
+            OK
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LogoutModal;

typing-app/src/components/molecules/RankingButton.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "@chakra-ui/react";
+
+const RankingButton = () => {
+  const router = useRouter();
+
+  const handleRouteRanking = async () => {
+    //TODO:ログインの維持を実装
+    router.push("/ranking");
+  };
+
+  return (
+    <Button colorScheme="orange" size="lg" onClick={handleRouteRanking}>
+      Ranking
+    </Button>
+  );
+};
+
+export default RankingButton;

typing-app/src/components/organism/HomeMenuContainer.tsx

@@ -0,0 +1,19 @@
+import { Flex, VStack } from "@chakra-ui/react";
+import GameStartButton from "../molecules/GameStartButton";
+import RankingButton from "../molecules/RankingButton";
+import LogoutButton from "../molecules/LogoutButton";
+
+const HomeMenuContainer = () => {
+  return (
+    <Flex justify="center" align="center" h="65vh">
+      <VStack spacing={8} align="stretch" width="50%" maxWidth="md" mx="auto">
+        {/* TODO: ログイン状況に応じて表示を切り替え */}
+        <GameStartButton />
+        <RankingButton />
+        <LogoutButton />
+      </VStack>
+    </Flex>
+  );
+};
+
+export default HomeMenuContainer;

typing-app/src/components/pages/Home.tsx

@@ -1,13 +1,10 @@
 import React from "react";
-import { Text, VStack } from "@chakra-ui/react";
+import HomeMenuContainer from "../organism/HomeMenuContainer";
 
 const HomePage: React.FC = () => {
   return (
     <>
-      <VStack>
-        <Text fontSize="2xl">Hello, World!</Text>
-        <Text fontSize="xl">Welcome to the ITS Room</Text>
-      </VStack>
+      <HomeMenuContainer />
     </>
   );
 };