fix: 메인페이지 구현, 화면 width, height 통일

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/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;

src/components/MainPage/MainContent.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import SearchBar from "./SearchBar";
+import KeySelectDropdown from "./KeySelectDropdown";
+import VersionSelectDropdown from "./VersionSelectDropdown";
+import AddBtn from "./AddBtn";
+
+const Wrapper = styled.div`
+  /* border: 2px solid pink; */
+  height: 100%;
+  padding-left: 56px;
+`;
+
+const ShowMonth = styled.div`
+  margin-top: 45px;
+  margin-bottom: 27px;
+  font-size: 27px;
+  width: calc(100% - 64px);
+  /* border: 1px solid #3e5692; */
+  color: #3e5692;
+`;
+
+const FunctionWrapper = styled.div`
+  display: flex;
+  height: 42px;
+  margin-bottom: 34px;
+  width: calc(100% - 64px);
+  /* border: 1px solid #3e5692; */
+`;
+
+const Contents = styled.div`
+  height: 75%;
+  width: calc(100% - 64px);
+  border: 1px solid #3e5692;
+`;
+
+function MainContent() {
+  const [, setSearch] = useState("");
+
+  return (
+    <Wrapper>
+      <ShowMonth>3월</ShowMonth>
+      <FunctionWrapper>
+        <SearchBar setSearch={setSearch} />
+        <KeySelectDropdown />
+        <VersionSelectDropdown />
+        <AddBtn />
+      </FunctionWrapper>
+      <Contents>폴더, 악보</Contents>
+    </Wrapper>
+  );
+}
+
+export default MainContent;

src/components/MainPage/SearchBar.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import searchIcons from "../../assets/Icons/search.svg";
+
+const Search = styled.div`
+  position: relative;
+  margin-right: 20px;
+
+  input {
+    padding-left: 25px;
+    font-family: "GmarketSansBold";
+    width: 298px;
+    height: 42px;
+    border: none;
+    box-shadow: 0px 0px 7px #c0bfbf;
+    border-radius: 16px;
+    font-size: 20px;
+  }
+
+  input:focus {
+    outline: none;
+  }
+`;
+
+const SearchBtn = styled.button`
+  position: absolute;
+
+  left: 285px;
+  top: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+
+  img {
+    padding-top: 8px;
+    height: 30px;
+  }
+`;
+
+function SearchBar({ setSearch }) {
+  const [searchInput, setSearchInput] = useState("");
+
+  const handleInputChange = (e) => {
+    const inputValue = e.target.value;
+    setSearchInput(inputValue);
+    setSearch(inputValue);
+  };
+
+  return (
+    <div>
+      <Search>
+        <input
+          type="text"
+          name="searchMusicName"
+          value={searchInput}
+          onChange={handleInputChange}
+        />
+        <SearchBtn type="submit">
+          <img src={searchIcons} alt="검색 아이콘" />
+        </SearchBtn>
+      </Search>
+    </div>
+  );
+}
+
+export default SearchBar;