clean 全体的な修正

Sea10wood · May 21, 2023 · 60385b1 · 60385b1
1 parent 572bb57
commit 60385b1
Show file tree

Hide file tree

Showing 17 changed files with 93 additions and 156 deletions.
diff --git a/public/cat.mp3 b/public/cat.mp3
diff --git a/public/cat2.mp3 b/public/cat2.mp3
diff --git a/public/images/catTumaguro.png b/public/images/catTumaguro.png
diff --git a/src/components/Signinbutton.tsx b/src/components/Signinbutton.tsx
diff --git a/src/components/Signupbutton.tsx b/src/components/Signupbutton.tsx
diff --git a/src/components/Todo/AddTodo.tsx b/src/components/Todo/AddTodo.tsx
@@ -17,12 +17,12 @@ export default function AddTodo() {
     return (
         <div>
             <CustomButton
-                onClick={() => {
+                onclick={() => {
                     setIsOpen(!isOpen);
                 }}
-                primaryColor="#C5956B"
-                secondaryColor="#C37349"
-                buttonName="Open"
+                primarycolor="#C5956B"
+                secondarycolor="#C37349"
+                buttonname="Open"
             />
             <Modal
                 open={isOpen}

diff --git a/src/components/Todo/Cat.tsx b/src/components/Todo/Cat.tsx
@@ -47,7 +47,6 @@ const Cat = ({ cats }: { cats: Task[] }) => {
                     Math.random() * 30 - 15,
                 ];
                 const rotation = [0, Math.random() * Math.PI, 0];
-                console.log(position);
                 const animationName =
                     randomAnimation[Math.floor(Math.random() * 2)];
                 return (

diff --git a/src/components/Todo/TodoView.tsx b/src/components/Todo/TodoView.tsx
@@ -16,7 +16,6 @@ export default function TodoView() {
         const getTasks = async () => {
             try {
                 const token = localStorage.getItem("jwt");
-                console.log(token);
                 const response = await axios.get(
                     `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/task/my`,
                     { headers: { Authorization: `Bearer ${token}` } }

diff --git a/src/components/common/CustomButton.tsx b/src/components/common/CustomButton.tsx
@@ -5,14 +5,21 @@ import {
     CircularProgress,
     Typography,
 } from "@mui/material";
-
+import { MouseEventHandler } from "react";
+const randomSeBox = ["/cat.mp3", "/cat2.mp3"];
 export const CustomButton = (
     props: {
-        buttonName: string;
-        primaryColor: string;
-        secondaryColor: string;
+        buttonname: string;
+        primarycolor: string;
+        secondarycolor: string;
+        onclick?: MouseEventHandler<HTMLButtonElement>;
     } & ButtonProps
 ) => {
+    const meow = () => {
+        const index = Math.floor(Math.random() * 2);
+        const audio = new Audio(randomSeBox[index]);
+        audio.play().catch((error) => console.warn(error));
+    };
     return (
         <Box component="div" position="relative" padding={1}>
             <Button
@@ -22,19 +29,25 @@ export const CustomButton = (
                     textTransform: "none",
                     paddingLeft: 0.8,
                     zIndex: 100,
-                    backgroundColor: props.primaryColor,
+                    backgroundColor: props.primarycolor,
                     ":hover": {
-                        backgroundColor: props.primaryColor,
+                        backgroundColor: props.primarycolor,
                     },
                 }}
+                onClick={(event) => {
+                    meow();
+                    if (props.onclick != undefined) {
+                        props.onclick(event);
+                    }
+                }}
                 {...props}
                 variant="contained"
             >
                 <Box
                     position="absolute"
                     component="div"
                     sx={{
-                        backgroundColor: props.secondaryColor,
+                        backgroundColor: props.secondarycolor,
                         width: "5px",
                         height: "15px",
                         left: 40,
@@ -48,7 +61,7 @@ export const CustomButton = (
                     position="absolute"
                     component="div"
                     sx={{
-                        backgroundColor: props.secondaryColor,
+                        backgroundColor: props.secondarycolor,
                         width: "5px",
                         height: "15px",
                         left: 50,
@@ -62,7 +75,7 @@ export const CustomButton = (
                     position="absolute"
                     component="div"
                     sx={{
-                        backgroundColor: props.secondaryColor,
+                        backgroundColor: props.secondarycolor,
                         width: "5px",
                         height: "15px",
                         left: 60,
@@ -76,7 +89,7 @@ export const CustomButton = (
                     position="absolute"
                     component="div"
                     sx={{
-                        backgroundColor: props.secondaryColor,
+                        backgroundColor: props.secondarycolor,
                         width: "5px",
                         height: "15px",
                         left: 70,
@@ -97,7 +110,7 @@ export const CustomButton = (
                 >
                     ・ω・
                 </Typography>
-                {props.buttonName}
+                {props.buttonname}
                 <CircularProgress
                     value={60}
                     thickness={15}
@@ -110,9 +123,9 @@ export const CustomButton = (
                         rotate: "200deg",
                         zIndex: 95,
                         borderRadius: "999px",
-                        color: props.primaryColor,
+                        color: props.primarycolor,
                         ":hover": {
-                            color: props.primaryColor,
+                            color: props.primarycolor,
                         },
                     }}
                 />
@@ -126,9 +139,9 @@ export const CustomButton = (
                         right: -15,
                         rotate: "20deg",
                         zIndex: 95,
-                        color: props.primaryColor,
+                        color: props.primarycolor,
                         ":hover": {
-                            color: props.primaryColor,
+                            color: props.primarycolor,
                         },
                     }}
                 />
@@ -138,7 +151,7 @@ export const CustomButton = (
                 position="absolute"
                 component="div"
                 sx={{
-                    borderBottom: `20px solid ${props.primaryColor}`,
+                    borderBottom: `20px solid ${props.primarycolor}`,
                     borderLeft: "12px solid transparent",
                     borderRight: "12px solid transparent",
                     width: 0,
@@ -152,7 +165,7 @@ export const CustomButton = (
                 position="absolute"
                 component="div"
                 sx={{
-                    borderBottom: `20px solid ${props.primaryColor}`,
+                    borderBottom: `20px solid ${props.primarycolor}`,
                     borderLeft: "12px solid transparent",
                     borderRight: "12px solid transparent",
                     width: 0,

diff --git a/src/components/common/layout.tsx b/src/components/common/layout.tsx
@@ -3,9 +3,14 @@ import React from "react";
 import { Header } from "./Header";
 export const Layout = ({ children }: { children: React.ReactNode }) => {
     return (
-        <Stack>
+        <Stack p={0}>
             <Header />
-            <Box component="div">{children}</Box>
+            <Box
+                component="div"
+                sx={{ height: "92vh", backgroundColor: "#FFFDE2" }}
+            >
+                {children}
+            </Box>
         </Stack>
     );
 };
diff --git a/src/components/schedule/ScheduleCalender.tsx b/src/components/schedule/ScheduleCalender.tsx
@@ -17,7 +17,6 @@ export const ScheduleCalendar = () => {
                     `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/schedule/my`,
                     { headers: { Authorization: `Bearer ${token}` } }
                 );
-                console.log(response);
                 setEvent(response.data.schedules);
             } catch (err) {
                 console.log(err);
@@ -26,7 +25,6 @@ export const ScheduleCalendar = () => {
         getEvent();
     }, []);
     const handleScheduleClick = (schedule: any) => {
-        console.log(schedule);
         setSchedule({
             ...schedule.event.extendedProps,
             start: schedule.event.startStr,

diff --git a/src/pages/font.css b/src/pages/font.css
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,3 +1,50 @@
-export default function App() {
-    return <>this is top</>;
+import { CustomButton } from "@/components/common/CustomButton";
+import { Box, Stack, Typography } from "@mui/material";
+import Image from "next/image";
+export default function TopPage() {
+    return (
+        <Stack
+            sx={{
+                margin: "auto",
+                marginY: "auto",
+                p: 3,
+            }}
+        >
+            <Box component="div" p={10}>
+                <Typography
+                    color="primary"
+                    sx={{
+                        textAlign: "center",
+                        fontWeight: "bold",
+                    }}
+                    variant="h4"
+                    fontWeight=""
+                >
+                    にゃーーーーーん
+                </Typography>
+            </Box>
+            <Stack direction="row" justifyContent="center" spacing={5}>
+                <Image
+                    src="/images/catTumaguro.png"
+                    alt="catTumaguro.png"
+                    height={300}
+                    width={300}
+                />
+                <Stack alignSelf="center">
+                    <CustomButton
+                        buttonname="サインイン"
+                        href="/signin"
+                        primarycolor="#C37349"
+                        secondarycolor="#C5956B"
+                    />
+                    <CustomButton
+                        buttonname="サインアップ"
+                        href="/signup"
+                        primarycolor="#C37349"
+                        secondarycolor="#C5956B"
+                    />
+                </Stack>
+            </Stack>
+        </Stack>
+    );
 }
diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx
@@ -87,9 +87,9 @@ const Signin = () => {
                     <Box component="div" p={2} alignSelf="center">
                         <CustomButton
                             onClick={handleSubmit}
-                            buttonName="送信"
-                            primaryColor="gray"
-                            secondaryColor="black"
+                            buttonname="送信"
+                            primarycolor="gray"
+                            secondarycolor="black"
                         />
                     </Box>
                 </Stack>

diff --git a/src/pages/todo.tsx b/src/pages/todo.tsx
@@ -18,7 +18,6 @@ export default function Todo() {
                     `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/task/my`,
                     { headers: { Authorization: `Bearer ${token}` } }
                 );
-                console.log(response);
                 setTasks(response.data.tasks);
             } catch (err) {
                 console.log(err);

diff --git a/src/pages/toppage.tsx b/src/pages/toppage.tsx