From 92a81fd2d3c0f0f4a4665b900e7ad9f60e760dca Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 16:26:56 +0900 Subject: [PATCH 1/7] =?UTF-8?q?style:=20=EC=9D=B8=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MainPage/Intro/IntroModal.jsx | 40 +++++++++++++++---------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/src/pages/MainPage/Intro/IntroModal.jsx b/src/pages/MainPage/Intro/IntroModal.jsx index 117ecd7..04428a3 100644 --- a/src/pages/MainPage/Intro/IntroModal.jsx +++ b/src/pages/MainPage/Intro/IntroModal.jsx @@ -50,7 +50,7 @@ const ModalContent = styled.div` top: 50%; left: 50%; transform: translate(-50%, -50%); - height: 590px; + height: 630px; width: 1050px; background-color: white; border: none; @@ -68,11 +68,17 @@ const HeaderContainer = styled.div` grid-template-columns: 1fr 11fr 1fr; `; +const GroomText = styled.div` + color: #0d2040; +`; + const WelcomeTOGroom = styled.div` - font-size: 35px; - margin-top: 75px; + font-family: "GmarketSansLight"; + font-size: 38px; + margin-top: 62px; display: flex; justify-content: center; + color: #514642; `; const Exit = styled.img` @@ -82,13 +88,14 @@ const Exit = styled.img` `; const HaveYouTriedItBefore = styled.div` - font-size: 17px; + font-size: 20px; margin-top: 30px; + font-family: "GmarketSansLight"; `; const CardContainer = styled.div` display: flex; - margin-top: 25px; + margin-top: 50px; width: 591px; justify-content: space-between; /* border: 1px solid red; */ @@ -97,8 +104,8 @@ const CardContainer = styled.div` const Card = styled.div` display: flex; flex-direction: column; - width: 224px; - height: 280px; + width: 244px; + height: 300px; box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.25); border-radius: 10px; cursor: pointer; @@ -109,25 +116,26 @@ const CardText = styled.div` justify-content: center; align-items: center; border-radius: 0 0 10px 10px; - height: 40px; + height: 47px; background-color: #0d2040; margin-top: auto; - color: white; + color: #ededed; + font-size: 20px; `; const ConfirmButton = styled.div` - width: 95px; - height: 35px; + /* border: 1px solid red; */ + width: 103px; + height: 45px; border-radius: 14px; color: white; background-color: #3e5692; display: flex; justify-content: center; align-items: center; - font-size: 20px; - margin-top: 47px; + font-size: 22px; + margin-top: 50px; cursor: pointer; - padding-top: 5px; `; export default function IntroModal() { @@ -162,7 +170,9 @@ export default function IntroModal() {
- Groom에 오신 것을 환영합니다 ! + + groom에 오신 것을 환영합니다 ! + From 83f54b475dde9104083d07e45885df4d1773cc51 Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 16:55:25 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=97=AC=20=EC=95=85=EB=B3=B4=20=EB=B3=B4=EA=B4=80=ED=95=A8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=95=85=EB=B3=B4=20=EC=97=86?= =?UTF-8?q?=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=EA=B8=B0=EB=B3=B8=20=EB=94=94?= =?UTF-8?q?=ED=8F=B4=ED=8A=B8=20=EB=AC=B8=EA=B5=AC=20=ED=91=9C=EC=8B=9C,?= =?UTF-8?q?=20=EC=95=85=EB=B3=B4=20=EC=B6=94=EA=B0=80=EC=8B=9C=20=EB=AC=B8?= =?UTF-8?q?=EA=B5=AC=20=ED=91=9C=EC=8B=9C=EB=90=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Icons/DefaultGroom.svg | 3 + src/components/MainPage/MainContent.jsx | 211 +++++++++++++----------- 2 files changed, 122 insertions(+), 92 deletions(-) create mode 100644 src/assets/Icons/DefaultGroom.svg diff --git a/src/assets/Icons/DefaultGroom.svg b/src/assets/Icons/DefaultGroom.svg new file mode 100644 index 0000000..69588c7 --- /dev/null +++ b/src/assets/Icons/DefaultGroom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/MainPage/MainContent.jsx b/src/components/MainPage/MainContent.jsx index 513bb8e..75f9378 100644 --- a/src/components/MainPage/MainContent.jsx +++ b/src/components/MainPage/MainContent.jsx @@ -10,6 +10,7 @@ import IntroModal from "../../pages/MainPage/Intro/IntroModal"; import SearchBarModal from "../../pages/MainPage/Intro/SearchBarModal"; import KeyModal from "../../pages/MainPage/Intro/KeyModal"; import UploadModal from "../../pages/MainPage/Intro/UploadModal"; +import DefaultGroomImg from "../../assets/Icons/DefaultGroom.svg"; const Wrapper = styled.div` /* border: 2px solid pink; */ @@ -46,6 +47,27 @@ const Contents = styled.div` flex-wrap: wrap; `; +const DefaultSection = styled.div` + /* border: 1px solid #3e5692; */ + width: 322px; + height: 316px; + margin-top: 173px; + margin-left: 360px; + + img { + margin-left: 17px; + height: 209; + width: 288px; + } +`; + +const DefaultText = styled.div` + font-size: 30px; + color: #aec3de; + margin-left: 4px; + margin-top: 64px; +`; + const SheetMusicContainer = styled.div` position: relative; /* border: 1px solid #3e5692; */ @@ -102,97 +124,97 @@ function MainContent() { // 악보이미지 더미 const sheetMusicData = [ - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "주님 말씀하시면", - version: "마커스", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, - { - imageUrl: - "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", - key: "C", - title: "기쁨의 옷을 입은", - version: "어노인팅", - }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "주님 말씀하시면", + // version: "마커스", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, + // { + // imageUrl: + // "https://mblogthumb-phinf.pstatic.net/MjAxODA2MDZfMTc4/MDAxNTI4MjY3MzQ0NDM0.y2pvrCJr79epCxzn2zResj-6HBlmC5FbzH233jBUXZIg.jiikNEE7d1Jg6xQv4eWRyI5C7Zfg1t3ohmQuge-OZMsg.JPEG.lhy21ch/6773cda6c41114d62ed77d8bb8301588.jpg?type=w800", + // key: "C", + // title: "기쁨의 옷을 입은", + // version: "어노인팅", + // }, ]; const filteredData = sheetMusicData.filter((sheetMusic) => { @@ -238,7 +260,12 @@ function MainContent() { - {isListView ? ( + {sheetMusicData.length === 0 && filteredData.length === 0 ? ( + + 디폴트 구름 이미지 + 악보를 업로드 해보세요! + + ) : isListView ? ( ) : ( filteredData.map((sheetMusic, index) => ( From ec1f1042670786b8025a7f73534de421e73c23df Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 17:00:14 +0900 Subject: [PATCH 3/7] =?UTF-8?q?style:=20=EA=B3=A1=20=EC=A0=9C=EB=AA=A9,=20?= =?UTF-8?q?=EB=B2=84=EC=A0=84=20=EA=B2=80=EC=83=89=EC=B0=BD=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MainPage/SearchBar.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MainPage/SearchBar.jsx b/src/components/MainPage/SearchBar.jsx index cd18408..098433c 100644 --- a/src/components/MainPage/SearchBar.jsx +++ b/src/components/MainPage/SearchBar.jsx @@ -7,9 +7,9 @@ const Search = styled.div` margin-right: 20px; input { - padding-left: 25px; + padding-left: 16px; font-family: "GmarketSansLight"; - width: 234px; + width: 220px; height: 42px; border: 1px solid #9d9d9d; /* box-shadow: 0px 0px 7px #c0bfbf; */ @@ -29,7 +29,7 @@ const Search = styled.div` const SearchBtn = styled.button` position: absolute; - left: 220px; + left: 198px; top: 0; border: none; background: transparent; From b9366f0a1f510731cac1dfa441f253e83b86f5f1 Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 17:03:57 +0900 Subject: [PATCH 4/7] =?UTF-8?q?style:=20Key=20=EC=84=A0=ED=83=9D=20?= =?UTF-8?q?=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EA=B0=84=EA=B2=A9=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MainPage/KeySelectDropdown.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MainPage/KeySelectDropdown.jsx b/src/components/MainPage/KeySelectDropdown.jsx index d8d9508..adbddd7 100644 --- a/src/components/MainPage/KeySelectDropdown.jsx +++ b/src/components/MainPage/KeySelectDropdown.jsx @@ -36,7 +36,7 @@ const Wrapper = styled.div` const KeyDropdown = styled.div` font-family: "GmarketSansMedium"; - width: 107px; + width: 97px; height: 31px; padding-left: 10px; padding-top: 11px; @@ -51,7 +51,7 @@ const KeyDropdown = styled.div` img { height: 8px; padding-top: 7px; - padding-right: 22px; + padding-right: 20px; float: right; } `; From 2c92edbff66dfc06f1465052b695def0f016a737 Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 17:09:49 +0900 Subject: [PATCH 5/7] =?UTF-8?q?style:=20=ED=97=A4=EB=8D=94=20=EC=9C=A0?= =?UTF-8?q?=EC=A0=80=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=82=AD=EC=A0=9C,?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=83=89=EC=83=81=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Icons/bell.svg | 4 ++-- src/assets/Icons/setting.svg | 2 +- src/components/MainPage/Header.jsx | 7 +++---- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/assets/Icons/bell.svg b/src/assets/Icons/bell.svg index 1160a77..f1c4187 100644 --- a/src/assets/Icons/bell.svg +++ b/src/assets/Icons/bell.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/Icons/setting.svg b/src/assets/Icons/setting.svg index 453f71e..c2784ae 100644 --- a/src/assets/Icons/setting.svg +++ b/src/assets/Icons/setting.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/MainPage/Header.jsx b/src/components/MainPage/Header.jsx index 399a600..79ebc97 100644 --- a/src/components/MainPage/Header.jsx +++ b/src/components/MainPage/Header.jsx @@ -2,7 +2,6 @@ import React from "react"; import styled from "styled-components"; import bellIcon from "../../assets/Icons/bell.svg"; import settingIcon from "../../assets/Icons/setting.svg"; -import userImgIcon from "../../assets/Icons/userImg.svg"; import { BlueText } from "../CreateGroupPage/Text"; import ReadContiModal from "../Modal/ReadContiModal"; import ContiStepModal from "../Modal/ContiStepModal"; @@ -46,7 +45,8 @@ const Icons = styled.div` img { cursor: pointer; height: 24px; - margin-right: 20px; + margin-right: 12px; + padding-top: 2px; vertical-align: middle; } `; @@ -66,9 +66,8 @@ function Header({ menu }) { {menu} - 벨아이콘 환경설정 아이콘 - 유저 이미지 아이콘 + 벨아이콘 김교회 | 인도자 From 57856050fac411e9b9902a279861354658a93da2 Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 17:15:52 +0900 Subject: [PATCH 6/7] =?UTF-8?q?style:=20=EC=95=85=EB=B3=B4=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MainPage/UploadMusicModal.jsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pages/MainPage/UploadMusicModal.jsx b/src/pages/MainPage/UploadMusicModal.jsx index 52d0a23..d81c50c 100644 --- a/src/pages/MainPage/UploadMusicModal.jsx +++ b/src/pages/MainPage/UploadMusicModal.jsx @@ -2,8 +2,8 @@ import React, { useEffect, useRef, useState } from "react"; import styled from "styled-components"; import OpenUploadMusic from "../../assets/Icons/OpenUploadMusicLogo.svg"; import ImageUploadLogo from "../../asset/Images/Logos/ImageUploadLogo.svg"; -import UploadMusicDropdown from "./UploadMusicDropdown.jsx" -import ExitButton from "../../asset/Images/Buttons/ExitButton.svg" +import UploadMusicDropdown from "./UploadMusicDropdown.jsx"; +import ExitButton from "../../asset/Images/Buttons/ExitButton.svg"; const modalStyles = ` width: 100vw; @@ -37,14 +37,14 @@ const ModalOpen = styled.div` cursor: pointer; border: 1px solid #9d9d9d; border-radius: 10px; - padding-right: 10px; + padding-right: 6px; &:hover { background-color: #dfdfdf; } img { - padding: 10px; + padding: 5px; } `; @@ -129,7 +129,7 @@ const InputKeyValue = styled.div` padding-left: 10px; font-size: 13px; cursor: pointer; - img{ + img { margin-right: 10px; } `; @@ -235,7 +235,11 @@ export default function UploadMusicModal() { - + From ef7edb7e65932efe6625dd0270f6fcb5b7c25910 Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 17:21:43 +0900 Subject: [PATCH 7/7] =?UTF-8?q?style:=20Key=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MainPage/KeySelectDropdown.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MainPage/KeySelectDropdown.jsx b/src/components/MainPage/KeySelectDropdown.jsx index adbddd7..0b78780 100644 --- a/src/components/MainPage/KeySelectDropdown.jsx +++ b/src/components/MainPage/KeySelectDropdown.jsx @@ -6,10 +6,11 @@ const KeyItems = styled.div` margin-top: 6px; border: 1px solid #9d9d9d; font-size: 18px; - width: 266px; + width: 280px; height: 88px; border-radius: 10px; background-color: white; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.08); display: ${({ isActive }) => (isActive ? "block" : "none")}; `; @@ -57,7 +58,7 @@ const KeyDropdown = styled.div` `; const KeyItemTop = styled.div` - margin: 14px 0 10px 20px; + margin: 14px 0 10px 25px; /* border: 1px solid red; */ height: 28px; width: 215px; @@ -79,7 +80,7 @@ const KeyItemTop = styled.div` `; const KeyItemBottom = styled.div` - margin: 11px 0 10px 20px; + margin: 11px 0 10px 25px; /* border: 1px solid red; */ height: 28px; width: 226px;