Merge pull request #100 from LikeLionHGU/#99/fixIntroModal-임종현

style:fixIntroModalCss
LikeLionHGU · Jun 8, 2024 · 115fc2a · 115fc2a
2 parents ff12dc2 + 6deb2ce
commit 115fc2a
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 108 deletions.
diff --git a/src/pages/MainPage/Intro/KeyModal.jsx b/src/pages/MainPage/Intro/KeyModal.jsx
@@ -4,7 +4,6 @@ import { KeyModalState, uploadModalState } from "../../../atom";
 import { useSetRecoilState } from "recoil";
 import { useRecoilState } from "recoil";
 
-
 const modalStyles = `
   width: 100vw;
   height: 100vh;
@@ -22,17 +21,16 @@ const Modal = styled.div`
 
 const Overlay = styled.div`
   ${modalStyles}
-
 `;
 
 const ModalContent = styled.div`
   position: absolute;
   top: 7%;
-  left: 60%;
+  left: 53%;
   transform: translate(-50%, -50%);
   height: 100px;
   width: 247px;
-  background-color: #AEC3DE;
+  background-color: #aec3de;
   border: none;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   display: flex;
@@ -42,39 +40,37 @@ const ModalContent = styled.div`
   font-size: 16px;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
-    top: 100%; 
+    top: 100%;
     left: 50%;
     border-width: 30px;
     border-style: solid;
-    border-color: #aec3de transparent transparent transparent; 
+    border-color: #aec3de transparent transparent transparent;
     transform: translateX(-50%) scaleX(0.4);
   }
 `;
 
 const TopText = styled.div`
-    margin-top: 16px;
-`
-
+  margin-top: 16px;
+`;
 
 const NextButton = styled.div`
-    width: 48px;
-    height: 26px;
-    border-radius: 10px;
-    background-color: #8197bf;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    font-size: 12px;
-    cursor: pointer;
-`
-
-export default function KeyModal(){
+  width: 48px;
+  height: 26px;
+  border-radius: 10px;
+  background-color: #8197bf;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  font-size: 12px;
+  cursor: pointer;
+`;
 
-    const [KeyModal,setKeyModal] = useRecoilState(KeyModalState);
-    const setUploadModal = useSetRecoilState(uploadModalState);
+export default function KeyModal() {
+  const [KeyModal, setKeyModal] = useRecoilState(KeyModalState);
+  const setUploadModal = useSetRecoilState(uploadModalState);
 
   const closeKeyModal = () => {
     setKeyModal(false);
@@ -83,28 +79,28 @@ export default function KeyModal(){
   const openUploadModal = () => {
     setKeyModal(false);
     setUploadModal(true);
-  }
+  };
 
   useEffect(() => {
-    if (KeyModal) { 
+    if (KeyModal) {
       document.body.style.overflow = "hidden";
     } else {
       document.body.style.overflow = "auto";
     }
-  }, [KeyModal]); 
+  }, [KeyModal]);
 
-  return ( 
+  return (
     <>
-    {KeyModal && (
+      {KeyModal && (
         <Modal>
-            <Overlay onClick={closeKeyModal}/>
-            <ModalContent>
+          <Overlay onClick={closeKeyModal} />
+          <ModalContent>
             <TopText>원하는 Key를 입력해서 악보를</TopText>
             <div>쉽게 찾아보세요 !</div>
             <NextButton onClick={openUploadModal}>다음</NextButton>
-            </ModalContent>
-            </Modal>
-    )}
+          </ModalContent>
+        </Modal>
+      )}
     </>
   );
-}
+}
diff --git a/src/pages/MainPage/Intro/SearchBarModal.jsx b/src/pages/MainPage/Intro/SearchBarModal.jsx
@@ -4,7 +4,6 @@ import { KeyModalState, searchBarModalState } from "../../../atom";
 import { useSetRecoilState } from "recoil";
 import { useRecoilState } from "recoil";
 
-
 const modalStyles = `
   width: 100vw;
   height: 100vh;
@@ -22,17 +21,16 @@ const Modal = styled.div`
 
 const Overlay = styled.div`
   ${modalStyles}
-
 `;
 
 const ModalContent = styled.div`
   position: absolute;
   top: 33%;
-  left: 26%;
+  left: 23%;
   transform: translate(-50%, -50%);
   height: 122px;
   width: 248px;
-  background-color: #AEC3DE;
+  background-color: #aec3de;
   border: none;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   display: flex;
@@ -42,69 +40,67 @@ const ModalContent = styled.div`
   /* font-family: "GmarketSansLight"; */
   font-size: 16px;
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     bottom: 100%;
     left: 50%;
     border-width: 30px;
     border-style: solid;
     border-color: transparent transparent #aec3de transparent;
-    transform: translateX(-50%) scaleX(0.4);;
+    transform: translateX(-50%) scaleX(0.4);
   }
 `;
 const FirstText = styled.div`
-  margin-top:16px;
-`
+  margin-top: 16px;
+`;
 
 const NextButton = styled.div`
-    width: 48px;
-    height: 26px;
-    border-radius: 10px;
-    background-color: #8197bf;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    font-size: 12px;
-    cursor: pointer;
-`
-
-export default function SearchBarModal(){
+  width: 48px;
+  height: 26px;
+  border-radius: 10px;
+  background-color: #8197bf;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  font-size: 12px;
+  cursor: pointer;
+`;
 
-  const [searchBarModal,setSearchBarModal] = useRecoilState(searchBarModalState);
+export default function SearchBarModal() {
+  const [searchBarModal, setSearchBarModal] = useRecoilState(searchBarModalState);
   const setKeyModal = useSetRecoilState(KeyModalState);
 
   const closeSearchBarModal = () => {
-    setSearchBarModal(false); 
+    setSearchBarModal(false);
   };
-  
+
   const openKeyModal = () => {
     closeSearchBarModal();
     setKeyModal(true);
-  }
+  };
 
   useEffect(() => {
-    if (searchBarModal) { 
+    if (searchBarModal) {
       document.body.style.overflow = "hidden";
     } else {
       document.body.style.overflow = "auto";
     }
-  }, [searchBarModal]); 
+  }, [searchBarModal]);
 
-  return ( 
+  return (
     <>
-
-    {searchBarModal && (
+      {searchBarModal && (
         <Modal>
-            <Overlay onClick={closeSearchBarModal}/>
-            <ModalContent>
+          <Overlay onClick={closeSearchBarModal} />
+          <ModalContent>
             <FirstText>검색 기능을 통해 모든 악보를</FirstText>
             <div>한 눈에 볼 수 있습니다 ! 손 쉽게</div>
             <div>찾고 싶은 악보를 찾아보세요 !</div>
             <NextButton onClick={openKeyModal}>다음</NextButton>
-            </ModalContent>
-            </Modal>
-    )}
+          </ModalContent>
+        </Modal>
+      )}
     </>
   );
-}
+}
diff --git a/src/pages/MainPage/Intro/UploadModal.jsx b/src/pages/MainPage/Intro/UploadModal.jsx
@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import styled from "styled-components";
-import {  uploadModalState } from "../../../atom";
+import { uploadModalState } from "../../../atom";
 import { useRecoilState } from "recoil";
 
-
 const modalStyles = `
   width: 100vw;
   height: 100vh;
@@ -21,17 +20,16 @@ const Modal = styled.div`
 
 const Overlay = styled.div`
   ${modalStyles}
-
 `;
 
 const ModalContent = styled.div`
   position: absolute;
   top: 33%;
-  left: 70%;
+  left: 62%;
   transform: translate(-50%, -50%);
   height: 122px;
   width: 235px;
-  background-color: #AEC3DE;
+  background-color: #aec3de;
   border: none;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   display: flex;
@@ -41,64 +39,61 @@ const ModalContent = styled.div`
   /* font-family: "GmarketSansLight"; */
   font-size: 16px;
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     bottom: 100%;
     left: 50%;
     border-width: 30px;
     border-style: solid;
     border-color: transparent transparent #aec3de transparent;
-    transform: translateX(-50%) scaleX(0.4);;
+    transform: translateX(-50%) scaleX(0.4);
   }
 `;
 const FirstText = styled.div`
-  margin-top:16px;
-`
+  margin-top: 16px;
+`;
 
 const NextButton = styled.div`
-    width: 48px;
-    height: 26px;
-    border-radius: 10px;
-    background-color: #8197bf;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    font-size: 12px;
-    cursor: pointer;
-`
-
-export default function UploadModal(){
+  width: 48px;
+  height: 26px;
+  border-radius: 10px;
+  background-color: #8197bf;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  font-size: 12px;
+  cursor: pointer;
+`;
 
-  const [UploadModal,setUploadModal] = useRecoilState(uploadModalState);
+export default function UploadModal() {
+  const [UploadModal, setUploadModal] = useRecoilState(uploadModalState);
 
   const closeUploadModal = () => {
     setUploadModal(false);
-  }
+  };
 
   useEffect(() => {
-    if (UploadModal) { 
+    if (UploadModal) {
       document.body.style.overflow = "hidden";
     } else {
       document.body.style.overflow = "auto";
     }
-  }, [UploadModal]); 
+  }, [UploadModal]);
 
-
-  return ( 
+  return (
     <>
-
-    {UploadModal && (
+      {UploadModal && (
         <Modal>
-            <Overlay onClick={closeUploadModal}/>
-            <ModalContent>
+          <Overlay onClick={closeUploadModal} />
+          <ModalContent>
             <FirstText>새로운 악보를 추가해보세요 !</FirstText>
             <div>당신만의 악보 보관함을 생성</div>
             <div>할 수 있습니다 !</div>
             <NextButton onClick={closeUploadModal}>다음</NextButton>
-            </ModalContent>
-            </Modal>
-    )}
+          </ModalContent>
+        </Modal>
+      )}
     </>
   );
-}
+}