메인화면 작업중인부분가지 커밋

Author: 4roring

src/App.tsx

@@ -21,7 +21,7 @@ function App() {
         <CssBaseline />
         <Container className="App">
           <Header />
-          <Routes>
+          <Routes> 
             <Route path="/" Component={Home} />
             <Route path="/builder" element={<IntroduceBuilder />} />
             <Route path="/runner" element={<Test />} />

src/modules/Header/Header.tsx

@@ -11,7 +11,6 @@ import {
   Button,
   Drawer,
   IconButton,
-  Typography,
 } from "@mui/material";
 import { Menu, Close } from "@mui/icons-material";
 import PseudoLabLogo from "../../components/common/PseudoLabLogo";

src/modules/Home/Home.tsx

@@ -1,5 +1,6 @@
 import MainBanner from "./components/MainBanner";
-import { Container, Typography, Theme, Input } from "@mui/material";
+import { Container, Typography, Theme, Input, Button } from "@mui/material";
+import { toast, ToastContainer } from "react-toastify";
 import PseudoLabLogo from "../../components/common/PseudoLabLogo";
 import { styled } from "@mui/system";
 
@@ -20,50 +21,115 @@ const Description = styled(Typography)({
   marginBottom: (theme: Theme) => theme.spacing(4),
 });
 
-
-
 const InputBox = styled(Input)({
   marginTop: "1rem",
 });
 
 const Home = () => {
-  let loginId = ""
-  let password = ""
+  let loginId = "";
+  let password = "";
   const handLogin = () => {
-
-  }
+    console.log(loginId);
+    console.log(password);
+  };
 
   return (
     <StyledContainer>
-      <Typography sx={{ whiteSpace: "pre-wrap", fontSize: "5vw", textAlign: "left", fontFamily: "Spoqa Han Sans Neo", fontWeight: "bold" }}>
+      <Typography
+        sx={{
+          whiteSpace: "pre-wrap",
+          fontSize: "5vw",
+          textAlign: "left",
+          fontFamily: "Spoqa Han Sans Neo",
+          fontWeight: "bold",
+        }}
+      >
         빙고 네트워킹
       </Typography>
 
-      <Typography sx={{ whiteSpace: "pre-wrap", fontSize: "4vw", textAlign: "left", fontFamily: "Spoqa Han Sans Neo", fontWeight: "bold" }}>
+      <Typography
+        sx={{
+          whiteSpace: "pre-wrap",
+          fontSize: "4vw",
+          textAlign: "left",
+          fontFamily: "Spoqa Han Sans Neo",
+          fontWeight: "bold",
+        }}
+      >
         Sudo Pseudo Explore
       </Typography>
 
-      <Typography sx={{ whiteSpace: "pre-wrap", fontSize: "3.5vw", textAlign: "left", fontFamily: "Spoqa Han Sans Neo", fontWeight: "bold" }}>
+      <Typography
+        sx={{
+          whiteSpace: "pre-wrap",
+          fontSize: "3.5vw",
+          textAlign: "left",
+          fontFamily: "Spoqa Han Sans Neo",
+          fontWeight: "bold",
+        }}
+      >
         1st Grand Gathering
       </Typography>
 
-      <Typography sx={{ whiteSpace: "pre-wrap", fontSize: "3vw", textAlign: "left", fontFamily: "Spoqa Han Sans Neo", fontWeight: "bold" }}>
+      <Typography
+        sx={{
+          whiteSpace: "pre-wrap",
+          fontSize: "3vw",
+          textAlign: "left",
+          fontFamily: "Spoqa Han Sans Neo",
+          fontWeight: "bold",
+        }}
+      >
         2024.11.23
       </Typography>
 
+      <br />
+
       <InputBox
         placeholder="아이디 입력"
         value={loginId}
-        onChange={handLogin}
+        onChange={async (event: React.ChangeEvent<HTMLInputElement>) => {
+          loginId = event.target.value;
+        }}
       ></InputBox>
 
       <InputBox
         placeholder="비밀번호 입력"
         value={password}
-        onChange={handLogin}
+        onChange={async (event: React.ChangeEvent<HTMLInputElement>) => {
+          password = event.target.value;
+        }}
       ></InputBox>
-
-    </StyledContainer >
+      <br />
+      <br />
+      <Button
+        onClick={async () => {
+          if (loginId === "") {
+            toast.error("아이디를 입력해주세요.");
+            return;
+          } else if (password === "") {
+            toast.error("비밀번호를 입력해주세요.");
+            return;
+          } else {
+            await handLogin();
+          }
+        }}
+      >
+        계정 생성 or 로그인
+      </Button>
+      <ToastContainer
+        position="top-right" // 알람 위치 지정
+        autoClose={3000} // 자동 off 시간
+        hideProgressBar={false} // 진행시간바 숨김
+        closeOnClick // 클릭으로 알람 닫기
+        rtl={false} // 알림 좌우 반전
+        pauseOnFocusLoss // 화면을 벗어나면 알람 정지
+        draggable // 드래그 가능
+        pauseOnHover // 마우스를 올리면 알람 정지
+        theme="light"
+        // limit={1} // 알람 개수 제한
+      />
+    </StyledContainer>
   );
 };