Skip to content

Commit

Permalink
Merge pull request #52 from LikeLionHGU/#51/UIStyleModify-최예라
Browse files Browse the repository at this point in the history 
#51/UI style modify 최예라
  • Loading branch information
@YearaChoi
YearaChoi authored Jun 4, 2024
2 parents 31323cc + ef7edb7 commit 199142e
Show file tree
Hide file tree
Showing 9 changed files with 172 additions and 128 deletions.
3 changes: 3 additions & 0 deletions src/assets/Icons/DefaultGroom.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/assets/Icons/bell.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/Icons/setting.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 3 additions & 4 deletions src/components/MainPage/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
}
`;
Expand All @@ -66,9 +66,8 @@ function Header({ menu }) {
<Wrapper>
<Menu>{menu}</Menu>
<Icons>
<img src={bellIcon} alt="벨아이콘"></img>
<img src={settingIcon} alt="환경설정 아이콘"></img>
<img src={userImgIcon} alt="유저 이미지 아이콘"></img>
<img src={bellIcon} alt="벨아이콘"></img>
</Icons>
<PersonInfo>
김교회 | <BlueText>인도자</BlueText>
Expand Down
11 changes: 6 additions & 5 deletions src/components/MainPage/KeySelectDropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")};
`;
Expand All @@ -36,7 +37,7 @@ const Wrapper = styled.div`

const KeyDropdown = styled.div`
font-family: "GmarketSansMedium";
width: 107px;
width: 97px;
height: 31px;
padding-left: 10px;
padding-top: 11px;
Expand All @@ -51,13 +52,13 @@ const KeyDropdown = styled.div`
img {
height: 8px;
padding-top: 7px;
padding-right: 22px;
padding-right: 20px;
float: right;
}
`;

const KeyItemTop = styled.div`
margin: 14px 0 10px 20px;
margin: 14px 0 10px 25px;
/* border: 1px solid red; */
height: 28px;
width: 215px;
Expand All @@ -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;
Expand Down
211 changes: 119 additions & 92 deletions src/components/MainPage/MainContent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; */
Expand Down Expand Up @@ -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; */
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -238,7 +260,12 @@ function MainContent() {
</Icons>
</FunctionWrapper>
<Contents>
{isListView ? (
{sheetMusicData.length === 0 && filteredData.length === 0 ? (
<DefaultSection>
<img src={DefaultGroomImg} alt="디폴트 구름 이미지"></img>
<DefaultText>악보를 업로드 해보세요!</DefaultText>
</DefaultSection>
) : isListView ? (
<SheetListView sheetMusicData={filteredData} />
) : (
filteredData.map((sheetMusic, index) => (
Expand Down
6 changes: 3 additions & 3 deletions src/components/MainPage/SearchBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; */
Expand All @@ -29,7 +29,7 @@ const Search = styled.div`
const SearchBtn = styled.button`
position: absolute;
left: 220px;
left: 198px;
top: 0;
border: none;
background: transparent;
Expand Down
Loading

0 comments on commit 199142e

Please sign in to comment.