Feature/main page 메인 페이지 퍼블리싱

src/components/form/Input.style.ts

@@ -0,0 +1,20 @@
+import { InputProps } from "./Input";
+import styled from "@emotion/styled";
+
+export const InputElement = styled.input<InputProps>`
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+
+    border-radius: 12px;
+    border: none;
+    padding:5px;
+
+    background-color: ${(props) => {
+        switch (props.variants) {
+            case "primary":
+                return "#ECECEC";
+            case "secondary":
+                return "#fff";
+        }
+    }};
+`;

src/components/form/Input.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+
+import { InputElement } from "./Input.style";
+
+export interface InputProps extends React.ComponentPropsWithoutRef<"input"> {
+    variants: "primary" | "secondary";
+    width: string;
+    height: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+    ({ width, height, variants, ...rest }, ref) => {
+        return (
+            <InputElement ref={ref} width={width} height={height} variants={variants} {...rest} />
+        );
+    },
+);

src/components/navigation/SideBar.style.ts

@@ -0,0 +1,32 @@
+import styled from "@emotion/styled";
+
+export const SideBarWrapper = styled.div`
+    z-index: 5;  
+    padding: 20px;  
+    border-radius: 0 0 15px 15px;
+    height: auto;
+    max-height: 100%;
+    overflow-y: auto;
+    width:100%;
+    top: -80%;
+    backdrop-filter: blur(5px);
+    position: fixed;  
+    align-items: flex-end;
+    transition: 0.5s ease; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    &.open {    
+        top: 0;    
+        transition: 0.5s ease;  
+    }
+    img {
+        display: block;
+        margin-left: auto; /* Align the image to the right */
+        cursor: pointer; /* Add a pointer cursor for better UX */
+    }
+`
+
+export const Menu = styled.li`  
+    margin: 20px 8px;
+    list-style-type: none;
+    cursor: pointer;
+`;

src/components/navigation/SideBar.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import {SideBarWrapper, Menu} from "./SideBar.style"
+import closeIcon from "@/assets/icons/close.svg";
+
+interface SideBarProps {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const SideBar = ({isOpen, setIsOpen} : SideBarProps) => {
+    const outside = React.useRef<any>();
+
+    React.useEffect(() => {    
+        document.addEventListener('mousedown', handlerOutsie);    
+        return () => {      
+            document.removeEventListener('mousedown', handlerOutsie);    
+        };  
+    });   
+
+    const handlerOutsie = (e: any) => {    
+        if (!outside.current.contains(e.target)) {      
+            handleSideBar();    
+        }  
+    };   
+
+    const handleSideBar = () => {    
+        setIsOpen(false);  
+    };
+
+  return (
+
+      <SideBarWrapper id="sidebar" ref={outside} className={isOpen ? "open" : ""}>
+        <img src = {closeIcon} onClick = {handleSideBar}/>
+
+        <ul>
+          <Menu>테스트</Menu>
+          <Menu>통계</Menu>
+          <Menu>만든이들</Menu>
+        </ul>
+      </SideBarWrapper>
+
+)
+}
+

src/components/typography/Text.style.ts

@@ -2,6 +2,8 @@ import { TextProps } from "./Text";
 import styled from "@emotion/styled";
 
 export const TextElement = styled.span<TextProps>`
+    font-weight: ${(props) => props.weight ?? "normal"};
+
     font-size: ${(props) => {
         switch (props.size) {
             case "xs":

src/components/typography/Text.tsx

@@ -3,7 +3,8 @@ import { forwardRef } from "react";
 import { TextElement } from "./Text.style";
 
 export interface TextProps extends React.ComponentProps<"span"> {
-    size: "xs" | "s" | "m" | "l" | "xl";
+    size: "xs" | "s" | "m" | "l" | "xl" | string;
+    color?: "primary" | string;
     weight?: "light" | "regular" | "bold" | "extrabold" | "heavy";
     children: React.ReactNode;
 }

src/pages/HomePage.style.ts

@@ -1,6 +1,67 @@
 import styled from "@emotion/styled";
 
 export const HomePageWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    position: relative;
     width: 100%;
     height: 100vh;
 `;
+
+export const Header = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-top:50px;
+`;
+
+export const TextContainer = styled.div`
+    margin : 10px;
+`
+
+export const MiddleSection = styled.div`
+    flex-grow: 0.8;
+`
+
+export const Main = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+`
+
+export const InputContainer = styled.div`
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap:15px;
+`
+
+export const ButtonContainer = styled.div`
+    display:flex;
+    justify-content: center;
+    align-items: center;
+
+    margin-top:50px;
+`
+
+export const Footer = styled.div`
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin:20px;
+`
+
+export const MenuContainer = styled.div`
+    display:flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 10px; 
+    right: 10px;
+`

src/pages/HomePage.tsx

@@ -1,27 +1,71 @@
+import React from 'react';
 import { Text } from "@/components/typography/Text";
 
-import { HomePageWrapper } from "./HomePage.style";
+import {SideBar} from '@/components/navigation/SideBar';
+import { HomePageWrapper, Header, TextContainer, InputContainer, ButtonContainer, Main, Footer, MiddleSection, MenuContainer} from "./HomePage.style";
 
-import { useNavigate } from "react-router-dom";
-import { Button } from "@/components/form/Button";
+import menuIcon from '@/assets/icons/menu.svg';
+import dongari from '@/assets/images/dongari.png';
+import likelion from '@/assets/images/likelion.png';
+
+import {Input} from "@/components/form/Input";
+import {Button} from "@/components/form/Button";
+
+
+// import { useNavigate } from "react-router-dom";
 
 export default function HomePage() {
+    const name = React.useRef<HTMLInputElement>(null);
+    const major = React.useRef<HTMLInputElement>(null);
 
-    const navigate = useNavigate();
-    const goToLoadingPage = () => {
-        navigate("/loading");
+    const [isOpen, setIsOpen] = React.useState(false);
+    const handleSideBar = () => {
+        setIsOpen(!isOpen);
     };
 
     return (
         <HomePageWrapper>
-            <Text size="xl">XL</Text>
-            <Text size="l">L</Text>
-            <Text size="m">M</Text>
-            <Text size="s">S</Text>
-            <Text size="xs">XS</Text>
-            <Button width="150px" height="50px" variants="primary" onClick={goToLoadingPage}>
-                로딩페이지 테스트
-            </Button>
+            <MenuContainer role="button" onClick={handleSideBar}>
+                <img src = {menuIcon} />
+            </MenuContainer>
+            <SideBar isOpen = {isOpen} setIsOpen = {setIsOpen} />
+
+            <Header>
+                <img src = {dongari} alt = "동BTI" width="75px" height="75px"></img>
+                <Text size = '60px' weight='bold'>동BTI</Text>
+
+                <TextContainer>
+                    <Text size="m">나에게 딱! 맞는 </Text>
+                    <Text size="m" color="primary" weight="bold">동아리</Text>
+                    <Text size="m">를 추천드려용</Text>
+                </TextContainer>
+            </Header>
+
+            <MiddleSection />
+
+            <Main>
+                <InputContainer>
+                    <Input variants = "primary" width="242px" height = "30px" placeholder='이름을 입력하세용' ref = {name}/>
+                    <Input variants = "primary" width="242px" height = "30px" placeholder='학과를 입력하세용' ref = {major} />
+                    <Text size = "xs" color = '#6E6E6E'>개인정보는 외부에 공유되지 않으니 안심하세용</Text>
+                </InputContainer>
+
+                <ButtonContainer>
+                    <Button variants = "primary" width="242px" height="55px" children = "테스트 시작하기" />
+                </ButtonContainer>
+
+                <TextContainer>
+                    <Text size = "xs">오늘까지 </Text>
+                    <Text size = "xs" color="primary" weight="bold">39,239명</Text>
+                    <Text size = "xs">이 참여했어요!</Text>
+                </TextContainer> 
+            </Main>
+
+            <Footer>
+                <img src = {likelion} alt = "멋쟁이사자처럼" width="20px" height="20px"></img>
+                <Text size = "xs">X</Text>
+                <img src = {dongari} alt = "총동아리연합회 미르" width="20px" height="20px"></img>
+            </Footer>
         </HomePageWrapper>
     );
 }

src/styles/global.ts

@@ -21,7 +21,7 @@ export const GlobalStyle = css`
     a {
         text-decoration: none;
     }
-
+        
     :root {
         --font-size-xl: 24px;
         --font-size-l: 22px;