Merge pull request #13 from LikeLionHGU/#10/MainPage-최예라

#10/main page 최예라

src/App.js

@@ -9,13 +9,15 @@ import LoginPage from "./pages/HomePage/LoginPage/LoginPage";
 import Loading from "./pages/HomePage/LoginPage/Loading";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import SelectTeamPage from "./pages/HomePage/SelectTeamPage";
+import MainPage from "./pages/MainPage";
 
 function App() {
   return (
     <RecoilRoot>
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Homepage />}></Route>
+          <Route path="/Main" element={<MainPage />}></Route>
           <Route path="/InputGroupCode" element={<InputGroupCode />}></Route>
           <Route path="/InputGroupName" element={<InputGroupName />}></Route>
           <Route path="/InputUserName" element={<InputUserName />}></Route>

src/assets/fonts/GlobalStyle.jsx

@@ -1,17 +1,41 @@
 import { createGlobalStyle } from "styled-components";
-import Pretendard from "./Pretendard-Thin.woff";
-import Pretendard2 from "./Pretendard-Thin.woff2";
-import PretendardTtf from "./Pretendard-Thin.ttf";
+import GmarketSansTTFBold from "./GmarketSansTTF/GmarketSansTTFBold.ttf";
+import GmarketSansTTFLight from "./GmarketSansTTF/GmarketSansTTFLight.ttf";
+import GmarketSansTTFMedium from "./GmarketSansTTF/GmarketSansTTFMedium.ttf";
 
-export default createGlobalStyle`
-  @font-face {
-    font-family: "Pretendard";
-    src: url(${Pretendard}) format("woff"),
-         url(${Pretendard2}) format("woff2"),
-         url(${PretendardTtf}) format("truetype");
+const GlobalStyle = createGlobalStyle`
+  body, html {
+    margin: 0;
+    padding: 0;
+    font-family: "GmarketSansMedium";
   }
 
-  body{
-    font-family: "Pretendard";
-  }
+  @font-face {
+    font-family: 'GmarketSansBold';
+    src: url(${GmarketSansTTFBold}) format('embedded-opentype'),
+         url(${GmarketSansTTFBold}) format('woff2'),
+         url(${GmarketSansTTFBold}) format('woff'),
+         url(${GmarketSansTTFBold}) format("truetype");
+    font-display: swap;
+} 
+
+@font-face {
+    font-family: 'GmarketSansLight';
+    src: url(${GmarketSansTTFLight}) format('embedded-opentype'),
+         url(${GmarketSansTTFLight}) format('woff2'),
+         url(${GmarketSansTTFLight}) format('woff'),
+         url(${GmarketSansTTFLight}) format("truetype");
+    font-display: swap;
+} 
+
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url(${GmarketSansTTFMedium}) format('embedded-opentype'),
+         url(${GmarketSansTTFMedium}) format('woff2'),
+         url(${GmarketSansTTFMedium}) format('woff'),
+         url(${GmarketSansTTFMedium}) format("truetype");
+    font-display: swap;
+} 
 `;
+
+export default GlobalStyle;

src/components/MainPage/AddBtn.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import AddButton from "../../assets/Icons/AddBtn.svg";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  cursor: pointer;
+`;
+
+function AddBtn() {
+  return (
+    <Wrapper>
+      <img src={AddButton} alt="추가버튼" />
+    </Wrapper>
+  );
+}
+
+export default AddBtn;

src/components/MainPage/Header.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import styled from "styled-components";
+import bellIcon from "../../assets/Icons/bell.svg";
+import userIcon from "../../assets/Icons/userIcon.svg";
+
+const Wrapper = styled.div`
+  height: 80px;
+  width: 100%;
+  box-shadow: 0 7px 7px -7px #d2d2d2;
+`;
+
+const Menu = styled.button`
+  font-family: "GmarketSansMedium";
+  font-size: 18px;
+  color: #0d2040;
+  border: none;
+  height: 60px;
+  width: 193px;
+  cursor: pointer;
+  border-radius: 10px;
+  background-color: white;
+  margin-top: 12px;
+  margin-left: 12px;
+
+  &:hover {
+    background-color: rgba(204, 223, 255, 0.2);
+  }
+`;
+
+const Icons = styled.div`
+  float: right;
+  margin-right: 34px;
+  margin-top: 20px;
+
+  img {
+    cursor: pointer;
+    margin-right: 28px;
+    vertical-align: middle;
+  }
+`;
+
+function Header() {
+  return (
+    <Wrapper>
+      <Menu>일정표 관리</Menu>
+      <Menu>팀 관리</Menu>
+      <Menu>악보 보관함</Menu>
+      <Menu>콘티 보관함</Menu>
+      <Icons>
+        <img src={bellIcon} alt="벨아이콘"></img>
+        <img src={userIcon} alt="벨아이콘"></img>
+      </Icons>
+    </Wrapper>
+  );
+}
+
+export default Header;

src/components/MainPage/KeySelectDropdown.jsx

@@ -0,0 +1,176 @@
+import React, { useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import vectorIcons from "../../assets/Icons/Vector.svg";
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: left;
+  flex-direction: column;
+  height: 10vh;
+  margin-right: 20px;
+
+  position: relative;
+  z-index: 1;
+`;
+
+const KeyDropdown = styled.div`
+  background-color: rgba(173, 173, 173, 0.2);
+  width: 6rem;
+  height: 2.2rem;
+  padding-top: 0.5rem;
+  border-radius: 16px;
+  margin-bottom: 0.3rem;
+  text-align: center;
+  font-size: 16px;
+
+  cursor: pointer;
+
+  img {
+    height: 0.4rem;
+    padding-top: 0.6rem;
+    padding-right: 0.7rem;
+    float: right;
+  }
+`;
+
+const KeyItems = styled.div`
+  border: 1px solid #281a47;
+  font-size: 18px;
+  width: 17.5rem;
+  height: 6.8rem;
+  border-radius: 1.4rem;
+  background-color: white;
+
+  display: ${({ isActive }) =>
+    isActive ? "block" : "none"}; /* isActive 상태에 따라 표시 여부 결정 */
+`;
+
+const KeyItemTop = styled.div`
+  padding-left: 1.8rem;
+  padding-top: 1.4rem;
+  padding-bottom: 1.2rem;
+
+  Span {
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.5rem;
+    margin-right: 0.4rem;
+
+    cursor: pointer;
+  }
+
+  Span:hover {
+    background-color: #dfdfdf;
+  }
+`;
+
+const KeyItemBottom = styled.div`
+  padding-left: 1.3rem;
+  Span {
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.5rem;
+    margin-right: 0.4rem;
+
+    cursor: pointer;
+  }
+
+  Span:hover {
+    background-color: #dfdfdf;
+  }
+`;
+
+const Span = styled.span`
+  border: 1px solid #281a47;
+`;
+
+function SelectKeyDropdown({ setSelectedKey }) {
+  const [isActive, setIsActive] = useState(false);
+  const [selected, setSelected] = useState({ label: "", value: "" });
+  const dropdownRef = useRef(null); // 드롭다운 요소에 대한 ref를 생성
+
+  useEffect(() => {
+    // document에 클릭 이벤트 리스너 추가
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      // 컴포넌트 언마운트시 이벤트 리스너 제거
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+
+  const handleClickOutside = (event) => {
+    // 클릭한 요소가 드롭다운 외부에 있을 경우 드롭다운을 닫음
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsActive(false);
+    }
+  };
+
+  const keyOptions1 = [
+    { label: "Db", value: 1 },
+    { label: "Eb", value: 2 },
+    { label: "Gb", value: 3 },
+    { label: "Ab", value: 4 },
+    { label: "Bb", value: 5 },
+  ];
+
+  const keyOptions2 = [
+    { label: "C", value: 6 },
+    { label: "D", value: 7 },
+    { label: "E", value: 8 },
+    { label: "F", value: 9 },
+    { label: "G", value: 10 },
+    { label: "A", value: 11 },
+    { label: "B", value: 12 },
+  ];
+
+  const handleSelect = (keyOption) => {
+    if (selected.label === keyOption.label) {
+      // 이미 선택된 레이블을 다시 선택한 경우 선택을 해제
+      setSelected({ label: "", value: "" });
+      setSelectedKey(""); // 선택이 해제되었음을 상위 컴포넌트에 알림
+    } else {
+      setSelected(keyOption);
+      setSelectedKey(keyOption.label); // 선택한 키 레이블을 상위 컴포넌트로 전달
+    }
+    setIsActive(false);
+  };
+  return (
+    <Wrapper>
+      <div ref={dropdownRef}>
+        <KeyDropdown onClick={(e) => setIsActive(!isActive)}>
+          {selected.label !== "" ? selected.label : ""} Key
+          <span>
+            <img src={vectorIcons} alt="벡터 아이콘" />
+          </span>
+        </KeyDropdown>
+        <KeyItems style={{ display: isActive ? "block" : "none" }}>
+          {isActive && (
+            <KeyItemTop>
+              {keyOptions1.map((keyOption) => (
+                <Span
+                  key={keyOption.value} // key 속성은 고유해야 함.
+                  onClick={(e) => handleSelect(keyOption)}
+                >
+                  {keyOption.label}
+                </Span>
+              ))}
+            </KeyItemTop>
+          )}
+          {isActive && (
+            <KeyItemBottom>
+              {keyOptions2.map((keyOption) => (
+                <Span
+                  key={keyOption.value} // key 속성은 고유해야 하므로 keyOption.value로 변경
+                  onClick={(e) => handleSelect(keyOption)}
+                >
+                  {keyOption.label}
+                </Span>
+              ))}
+            </KeyItemBottom>
+          )}
+        </KeyItems>
+      </div>
+    </Wrapper>
+  );
+}
+
+export default SelectKeyDropdown;