Merge pull request #55 from LikeLionHGU/#51/UIStyleModify-최예라

#51/UI style modify 최예라
LikeLionHGU · Jun 4, 2024 · bd394fd · bd394fd
2 parents 147734f + ca4ee46
commit bd394fd
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 50 deletions.
diff --git a/src/assets/Icons/Bin.svg b/src/assets/Icons/Bin.svg
diff --git a/src/assets/Icons/EditBtn.svg b/src/assets/Icons/EditBtn.svg
diff --git a/src/assets/Icons/ExitBtn.svg b/src/assets/Icons/ExitBtn.svg
diff --git a/src/assets/Icons/SaveBtn.svg b/src/assets/Icons/SaveBtn.svg
diff --git 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
@@ -1,8 +1,11 @@
 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";
+import saveBtn from "../../assets/Icons/SaveBtn.svg";
 
 const modalStyles = `
   width: 100vw;
@@ -38,14 +41,12 @@ const ContiModal = styled.div`
 
 const ModalTop = styled.div`
   display: flex;
-  /* border: 1px solid green; */
   margin-top: 35px;
-  margin-bottom: 35px;
+  margin-bottom: 9px;
   height: 40px;
 `;
 
 const ContiTitle = styled.div`
-  /* border: 1px solid red; */
   margin-left: 480px;
   font-size: 24px;
   font-family: "GmarketSansLight";
@@ -57,7 +58,7 @@ const Icons = styled.div`
 
   img {
     cursor: pointer;
-    margin-left: 15px;
+    margin-right: 15px;
   }
 `;
 
@@ -66,12 +67,10 @@ const ModalContent = styled.div`
 `;
 
 const ContiImage = styled.div`
-  margin-left: 150px;
+  margin-left: 140px;
   margin-right: 121px;
-  width: 350px;
-  height: 470px;
-
-  /* border: 1px solid #5c39a2; */
+  width: 360px;
+  height: 480px;
 
   img {
     width: 100%;
@@ -81,38 +80,82 @@ const ContiImage = styled.div`
   }
 `;
 
+const Icon2 = styled.div`
+  display: flex;
+  justify-content: right;
+  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 red; */
   width: 419px;
   height: 500px;
+`;
 
-  img {
-    cursor: pointer;
-    margin-top: 60px;
-    margin-left: 355px;
-    width: 79px;
-    height: 51px;
-  }
+const Btn = styled.img`
+  cursor: pointer;
+  margin-top: 75px;
+  margin-left: 355px;
+  width: 79px;
+  height: 51px;
 `;
 
 const BoldText = styled.div`
   font-size: 18px;
   padding-bottom: 12px;
 `;
+
 const LightText = styled.div`
   font-family: "GmarketSansLight";
   font-size: 16px;
-  padding-bottom: 30px;
+  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";
@@ -133,8 +176,11 @@ export default function ModifyContiModal() {
             <ModalTop>
               <ContiTitle>예수로 살리</ContiTitle>
               <Icons>
-                <img src={shareIcon} alt="유저 이미지 아이콘" />
-                <img src={printIcon} alt="유저 이미지 아이콘" />
+                <img
+                  onClick={toggleModifyContiModal}
+                  src={exitBtnIcon}
+                  alt="캔슬 아이콘"
+                />
               </Icons>
             </ModalTop>
             <ModalContent>
@@ -144,21 +190,57 @@ export default function ModifyContiModal() {
                   alt="Conti Image"
                 />
               </ContiImage>
+
               <ContiInfo>
+                <Icon2>
+                  <Img src={binIcon} alt="쓰레기통 아이콘" />
+                  <Img src={shareIcon} alt="공유 아이콘" />
+                  <Img src={printIcon} alt="프린트 아이콘" />
+                </Icon2>
                 <BoldText>곡 제목</BoldText>
-                <LightText>예수로 살리</LightText>
+                {isEditable ? (
+                  <EditableInput
+                    name="title"
+                    value={contiData.title}
+                    onChange={handleChange}
+                  />
+                ) : (
+                  <LightText>{contiData.title}</LightText>
+                )}
                 <BoldText>곡 코드</BoldText>
-                <LightText>G Key</LightText>
+                {isEditable ? (
+                  <EditableInput
+                    name="key"
+                    value={contiData.key}
+                    onChange={handleChange}
+                  />
+                ) : (
+                  <LightText>{contiData.key}</LightText>
+                )}
                 <BoldText>곡 버전</BoldText>
-                <LightText>마커스</LightText>
+                {isEditable ? (
+                  <EditableInput
+                    name="version"
+                    value={contiData.version}
+                    onChange={handleChange}
+                  />
+                ) : (
+                  <LightText>{contiData.version}</LightText>
+                )}
                 <BoldText>영상 링크</BoldText>
-                <LightText>
-                  https://github.com/LikeLionHGU/ChurchPlus-front-2024
-                </LightText>
-                <img
-                  src={editBtn}
+                {isEditable ? (
+                  <EditableInput
+                    name="link"
+                    value={contiData.link}
+                    onChange={handleChange}
+                  />
+                ) : (
+                  <LightText>{contiData.link}</LightText>
+                )}
+                <Btn
+                  src={isEditable ? saveBtn : editBtn}
                   alt="수정버튼"
-                  onClick={toggleModifyContiModal}
+                  onClick={toggleEditMode}
                 />
               </ContiInfo>
             </ModalContent>

diff --git 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`
+            : "곡의 코드를 선택해주세요"}
           <img src={KeyDropdownIcon} alt="키 드롭다운 아이콘" />
         </KeyDropdown>
         <KeyItems style={{ display: isActive ? "block" : "none" }}>

diff --git 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() {