From 50a5d841a63d0eb3b87839353a03af58d308bdb0 Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 20:57:28 +0900 Subject: [PATCH 1/3] =?UTF-8?q?style:=20=EC=95=85=EB=B3=B4=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=AA=A8=EB=8B=AC=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=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/UploadMusicDropdown.jsx | 13 ++++++++----- src/pages/MainPage/UploadMusicModal.jsx | 12 +++++++++--- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/pages/MainPage/UploadMusicDropdown.jsx b/src/pages/MainPage/UploadMusicDropdown.jsx index 361a843..f7d051d 100644 --- a/src/pages/MainPage/UploadMusicDropdown.jsx +++ b/src/pages/MainPage/UploadMusicDropdown.jsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import KeyDropdownIcon from "../../asset/Images/Icons/TeamDropdownIcon.svg"; const KeyItems = styled.div` - margin-top: 6px; + margin-top: 8px; border: 1px solid #9d9d9d; font-size: 18px; width: 308px; @@ -34,13 +34,14 @@ const KeyDropdown = styled.div` align-items: center; justify-content: space-between; border: 1px solid #c0c0c0; - color: ${({ isSelected }) => (isSelected ? "black" : "gray")}; /* Conditional color */ + color: ${({ isSelected }) => + isSelected ? "black" : "gray"}; /* Conditional color */ border-radius: 10px; margin-top: 5px; - height: 38px; + height: 42px; font-family: "GmarketSansLight"; padding-left: 10px; - font-size: 13px; + font-size: 16px; cursor: pointer; img { margin-right: 10px; @@ -141,7 +142,9 @@ function SelectKeyDropdown() { isSelected={selected.label !== ""} onClick={() => setIsActive(!isActive)} > - {selected.label !== "" ? `${selected.label} Key` : "곡의 코드를 선택해주세요"} + {selected.label !== "" + ? `${selected.label} Key` + : "곡의 코드를 선택해주세요"} 키 드롭다운 아이콘 diff --git a/src/pages/MainPage/UploadMusicModal.jsx b/src/pages/MainPage/UploadMusicModal.jsx index d81c50c..552c73b 100644 --- a/src/pages/MainPage/UploadMusicModal.jsx +++ b/src/pages/MainPage/UploadMusicModal.jsx @@ -104,16 +104,21 @@ const InputContainer = styled.div` margin-bottom: 30px; `; const InputText = styled.div` - font-size: 15px; + font-size: 16px; `; const InputValue = styled.input` - border: 1px solid #c0c0c0; + border: 1px solid #a6a6a6; border-radius: 10px; - margin-top: 5px; + margin-top: 8px; height: 38px; font-family: "GmarketSansLight"; + padding-top: 4px; padding-left: 10px; + + &::placeholder { + font-size: 16px; + } `; const InputKeyValue = styled.div` @@ -165,6 +170,7 @@ const SubmitBtn = styled.div` box-shadow: 0 0 6px rgba(80, 80, 80, 0.2); cursor: pointer; padding-top: 2px; + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.05); `; export default function UploadMusicModal() { From dde1d556463bdfc6dc1e6f5142f06136ad904b88 Mon Sep 17 00:00:00 2001 From: YearaChoi <22200750@handong.ac.kr> Date: Tue, 4 Jun 2024 21:46:06 +0900 Subject: [PATCH 2/3] =?UTF-8?q?style:=20=EC=BD=98=ED=8B=B0=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=88=98=EC=A0=95=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Icons/Bin.svg | 4 ++ src/assets/Icons/EditBtn.svg | 10 ++-- src/assets/Icons/ExitBtn.svg | 3 ++ src/assets/Icons/SaveBtn.svg | 10 ++-- src/components/Modal/ContiStepModal.jsx | 4 +- src/components/Modal/ModifyContiModal.jsx | 59 ++++++++++++++++------- 6 files changed, 60 insertions(+), 30 deletions(-) create mode 100644 src/assets/Icons/Bin.svg create mode 100644 src/assets/Icons/ExitBtn.svg diff --git a/src/assets/Icons/Bin.svg b/src/assets/Icons/Bin.svg new file mode 100644 index 0000000..5b20e5d --- /dev/null +++ b/src/assets/Icons/Bin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/Icons/EditBtn.svg b/src/assets/Icons/EditBtn.svg index 0f911d1..47acba4 100644 --- a/src/assets/Icons/EditBtn.svg +++ b/src/assets/Icons/EditBtn.svg @@ -1,18 +1,18 @@ - - + + - + - - + + diff --git a/src/assets/Icons/ExitBtn.svg b/src/assets/Icons/ExitBtn.svg new file mode 100644 index 0000000..001185d --- /dev/null +++ b/src/assets/Icons/ExitBtn.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/Icons/SaveBtn.svg b/src/assets/Icons/SaveBtn.svg index 57336c1..4cc0595 100644 --- a/src/assets/Icons/SaveBtn.svg +++ b/src/assets/Icons/SaveBtn.svg @@ -1,18 +1,18 @@ - - + + - + - - + + diff --git a/src/components/Modal/ContiStepModal.jsx b/src/components/Modal/ContiStepModal.jsx index 5bd809e..13abbd8 100644 --- a/src/components/Modal/ContiStepModal.jsx +++ b/src/components/Modal/ContiStepModal.jsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; import styled from "styled-components"; import saveBtn from "../../assets/Icons/SaveBtn.svg"; -import leftArrow from "../../assets/Icons/leftArrow.svg"; // 왼쪽 화살표 아이콘 -import rightArrow from "../../assets/Icons/rightArrow.svg"; // 오른쪽 화살표 아이콘 +import leftArrow from "../../assets/Icons/leftArrow.svg"; +import rightArrow from "../../assets/Icons/rightArrow.svg"; import { BlueText } from "../CreateGroupPage/Text"; const modalStyles = ` diff --git a/src/components/Modal/ModifyContiModal.jsx b/src/components/Modal/ModifyContiModal.jsx index 4506f6f..f937c00 100644 --- a/src/components/Modal/ModifyContiModal.jsx +++ b/src/components/Modal/ModifyContiModal.jsx @@ -1,5 +1,7 @@ import React, { useEffect, useState } from "react"; import styled from "styled-components"; +import exitBtnIcon from "../../assets/Icons/ExitBtn.svg"; +import binIcon from "../../assets/Icons/Bin.svg"; import shareIcon from "../../assets/Icons/ShareConti.svg"; import printIcon from "../../assets/Icons/printPage.svg"; import editBtn from "../../assets/Icons/EditBtn.svg"; @@ -40,7 +42,7 @@ const ModalTop = styled.div` display: flex; /* border: 1px solid green; */ margin-top: 35px; - margin-bottom: 35px; + margin-bottom: 9px; height: 40px; `; @@ -57,7 +59,7 @@ const Icons = styled.div` img { cursor: pointer; - margin-left: 15px; + margin-right: 15px; } `; @@ -66,10 +68,10 @@ const ModalContent = styled.div` `; const ContiImage = styled.div` - margin-left: 150px; + margin-left: 140px; margin-right: 121px; - width: 350px; - height: 470px; + width: 360px; + height: 480px; /* border: 1px solid #5c39a2; */ @@ -81,19 +83,35 @@ const ContiImage = styled.div` } `; -const ContiInfo = styled.div` - padding-top: 30px; +const Icon2 = styled.div` + /* float: right; */ + display: flex; + justify-content: right; /* border: 1px solid red; */ + margin-bottom: 24px; + padding-right: 35px; +`; + +const Img = styled.img` + height: 24px; + width: 24px; + margin-left: 16px; + cursor: pointer; +`; + +const ContiInfo = styled.div` + /* padding-top: 30px; */ + /* border: 1px solid blue; */ width: 419px; height: 500px; +`; - img { - cursor: pointer; - margin-top: 60px; - margin-left: 355px; - width: 79px; - height: 51px; - } +const ContiInfoImg = styled.img` + cursor: pointer; + margin-top: 75px; + margin-left: 355px; + width: 79px; + height: 51px; `; const BoldText = styled.div` @@ -103,7 +121,7 @@ const BoldText = styled.div` const LightText = styled.div` font-family: "GmarketSansLight"; font-size: 16px; - padding-bottom: 30px; + padding-bottom: 35px; `; export default function ModifyContiModal() { @@ -133,8 +151,7 @@ export default function ModifyContiModal() { 예수로 살리 - 유저 이미지 아이콘 - 유저 이미지 아이콘 + 캔슬 아이콘 @@ -144,7 +161,13 @@ export default function ModifyContiModal() { alt="Conti Image" /> + + + 쓰레기통 아이콘 + 공유 아이콘 + 프린트 아이콘 + 곡 제목 예수로 살리 곡 코드 @@ -155,7 +178,7 @@ export default function ModifyContiModal() { https://github.com/LikeLionHGU/ChurchPlus-front-2024 - 수정버튼 Date: Tue, 4 Jun 2024 22:17:20 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=95=85=EB=B3=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=BD=98=ED=8B=B0=20=EB=AA=A8=EB=8B=AC=20=EC=95=85?= =?UTF-8?q?=EB=B3=B4=20=EC=88=98=EC=A0=95,=20=EC=A0=80=EC=9E=A5=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/ModifyContiModal.jsx | 97 ++++++++++++++++++----- 1 file changed, 78 insertions(+), 19 deletions(-) diff --git a/src/components/Modal/ModifyContiModal.jsx b/src/components/Modal/ModifyContiModal.jsx index f937c00..ee77c65 100644 --- a/src/components/Modal/ModifyContiModal.jsx +++ b/src/components/Modal/ModifyContiModal.jsx @@ -5,6 +5,7 @@ import binIcon from "../../assets/Icons/Bin.svg"; import shareIcon from "../../assets/Icons/ShareConti.svg"; import printIcon from "../../assets/Icons/printPage.svg"; import editBtn from "../../assets/Icons/EditBtn.svg"; +import saveBtn from "../../assets/Icons/SaveBtn.svg"; const modalStyles = ` width: 100vw; @@ -40,14 +41,12 @@ const ContiModal = styled.div` const ModalTop = styled.div` display: flex; - /* border: 1px solid green; */ margin-top: 35px; margin-bottom: 9px; height: 40px; `; const ContiTitle = styled.div` - /* border: 1px solid red; */ margin-left: 480px; font-size: 24px; font-family: "GmarketSansLight"; @@ -73,8 +72,6 @@ const ContiImage = styled.div` width: 360px; height: 480px; - /* border: 1px solid #5c39a2; */ - img { width: 100%; height: 100%; @@ -84,10 +81,8 @@ const ContiImage = styled.div` `; const Icon2 = styled.div` - /* float: right; */ display: flex; justify-content: right; - /* border: 1px solid red; */ margin-bottom: 24px; padding-right: 35px; `; @@ -100,13 +95,11 @@ const Img = styled.img` `; const ContiInfo = styled.div` - /* padding-top: 30px; */ - /* border: 1px solid blue; */ width: 419px; height: 500px; `; -const ContiInfoImg = styled.img` +const Btn = styled.img` cursor: pointer; margin-top: 75px; margin-left: 355px; @@ -118,19 +111,51 @@ const BoldText = styled.div` font-size: 18px; padding-bottom: 12px; `; + const LightText = styled.div` font-family: "GmarketSansLight"; font-size: 16px; padding-bottom: 35px; + color: ${({ isEditable }) => (isEditable ? "gray" : "#0d2030")}; +`; + +const EditableInput = styled.input` + font-family: "GmarketSansLight"; + font-size: 16px; + padding-bottom: 35px; + color: gray; + border: none; + /* border-bottom: 1px solid gray; */ + outline: none; + width: 419px; `; export default function ModifyContiModal() { const [isModalOpen, setIsModalOpen] = useState(false); + const [isEditable, setIsEditable] = useState(false); + const [contiData, setContiData] = useState({ + title: "예수로 살리", + key: "G Key", + version: "마커스", + link: "https://github.com/LikeLionHGU/ChurchPlus-front-2024", + }); const toggleModifyContiModal = () => { setIsModalOpen((prevState) => !prevState); }; + const toggleEditMode = () => { + setIsEditable((prevState) => !prevState); + }; + + const handleChange = (e) => { + const { name, value } = e.target; + setContiData({ + ...contiData, + [name]: value, + }); + }; + useEffect(() => { if (isModalOpen) { document.body.style.overflow = "hidden"; @@ -151,7 +176,11 @@ export default function ModifyContiModal() { 예수로 살리 - 캔슬 아이콘 + 캔슬 아이콘 @@ -169,19 +198,49 @@ export default function ModifyContiModal() { 프린트 아이콘 곡 제목 - 예수로 살리 + {isEditable ? ( + + ) : ( + {contiData.title} + )} 곡 코드 - G Key + {isEditable ? ( + + ) : ( + {contiData.key} + )} 곡 버전 - 마커스 + {isEditable ? ( + + ) : ( + {contiData.version} + )} 영상 링크 - - https://github.com/LikeLionHGU/ChurchPlus-front-2024 - - + ) : ( + {contiData.link} + )} +