[#4] feat : add login modal

src/components/LoginModal/index.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Container,
+  GoogleButton,
+  KakaoButton,
+  NonmemberButton,
+} from "./styled";
+import google from "../../assets/images/google.png";
+import kakao from "../../assets/images/kakao.png";
+
+const LoginModal = () => {
+  const navigate = useNavigate();
+
+  const handleNonmemberButtonClick = () => {
+    navigate("/test/0");
+  };
+
+  return (
+    <Container>
+      <GoogleButton>
+        <img src={google} alt="google" />
+        &nbsp;Google 계정으로 로그인
+      </GoogleButton>
+      <KakaoButton>
+        <img src={kakao} alt="kakao" />
+        &nbsp;카카오톡으로 로그인
+      </KakaoButton>
+      <NonmemberButton onClick={handleNonmemberButtonClick}>
+        &nbsp;비회원으로 테스트 하기&nbsp;
+      </NonmemberButton>
+    </Container>
+  );
+};
+
+export default LoginModal;

src/components/LoginModal/styled.js

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%);
+  width: 85vw;
+  height: 27vh;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+`;
+export const GoogleButton = styled.button`
+  border-radius: 10px;
+  border: 1px solid rgba(19, 69, 96, 0.5);
+  background: #e2e8ec;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(2px);
+  display: flex;
+  width: 80%;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+`;
+export const KakaoButton = styled.button`
+  display: flex;
+  width: 80%;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  border: 1px solid rgba(19, 69, 96, 0.5);
+  background: #fae64c;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(2px);
+`;
+export const NonmemberButton = styled.button`
+  display: flex;
+  width: 80%;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  border: 1px solid rgba(19, 69, 96, 0.5);
+  background: white;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(2px);s
+`;

src/components/index.js

@@ -1,3 +1,6 @@
 export { default as Button } from "./Button";
 export { default as TestHeader } from "./TestHeader";
 export { default as TestBox } from "./TestBox";
+export { default as SnowAnimation } from "./SnowAnimation";
+export { default as SideMenu } from "./SideMenu";
+export { default as LoginModal } from "./LoginModal";