Skip to content

FEAT(phill)12/02StyledComponents을사용해서새로만들어보았습니다. #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bru37 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

FEAT(phill)12/02StyledComponents을사용해서새로만들어보았습니다. #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c928a5e
FEAT(phill)12/02StyledComponents을사용해서새로만들어보았습니다.
Dec 2, 2023
ebca7ab
FEAT(phill)12/03 hover로 마우스이벤트와 차트크기정리를 했습니다.
Dec 3, 2023
ff47c27
FEAT(phill)12/03 hover로 마우스이벤트와 차트크기정리와 버튼을 새롭게 했습니다.
Dec 3, 2023
27ed63c
FEAT(Phill) 12/04 클릭버튼 작동이 안되어서 보더를 없애니 구현이됌 근데 보더를 넣고싶은데 어떻게하면 될까요? …
Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/mock/chartData.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,63 +8,63 @@
"image": "/imgs/album/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 2,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
"image": "/imgs/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 3,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
"image": "/imgs/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 4,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
"image": "/imgs/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 5,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
"image": "/imgs/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 6,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
"image": "/imgs/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 7,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
"image": "/imgs/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 8,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
"image": "/imgs/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 9,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
"image": "/imgs/짱구배경.PNG"
},
{
"ranking": 1,
"ranking": 10,
"rankingChange": "-0",
"title": "Perfect Night",
"singer": "LE SSERAFIM (르세라핌)",
Expand Down
201 changes: 116 additions & 85 deletions src/pages/main/components/MelonCharts/Charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,94 +4,48 @@ import styled from 'styled-components';

import chartData from '../../../../mock/chartData.json';

// 2페어 차필우 허진욱
// 2페어 차필우 허진욱..
//제일 상단 멜론차트 클릭버튼

const Charts = () => {
const onMelonCartClickBtn = () => {};

return (
<>
<div class="chart" style={{ marginLeft: '24px' }}>
<div>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<h2>
<a href=""> 멜론 차트 </a>
</h2>
<div>2023.11.27 23:00 기준</div>
</div>
<div>
<Styled.ChartTop>
<BtnChartTop onClick={onMelonCartClickBtn}>
멜론차트
</BtnChartTop>
<p>2030.12.02 18:00 기준</p>
</Styled.ChartTop>
<Styled.ChartTopBtn>
<Styled.Button>TOP100</Styled.Button>
<Styled.Button>POP</Styled.Button>
<Styled.Button>아티스트</Styled.Button>
</Styled.ChartTopBtn>
{chartData.chartdata.map((el, index) => (
// el, index, el은 목데이터에 전체 엘리멘트를 가지고 옮,인덱스도 전체 인덱스를 가지고옮
<Styled.ChartList key={index} isEven={index % 2 == 1}>
{/* isEven은 함수가 짝수인지홀수인지를 판별하고 반환해줌 */}
<Styled.ChartListPart>
{chartData.chartdata[index].ranking}

{chartData.chartdata[index].title}

{chartData.chartdata[index].singer}

{chartData.chartdata[index].rankingChange}

{/* 멜론차트 TOP100 POP 아티스트 */}
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<button
style={{ width: '95.856666px', height: '50px' }}
>
TOP100
</button>
<button style={{ width: '95.856666px' }}>POP</button>
<button style={{ width: '95.856666px' }}>
☆ 아티스트
</button>
</div>
{/* 멜론차트 1~10 */}
<div>
<ul
style={{
padding: '0px 0px 0px 0px',
margin: '0px 0px 0px 0px',
}}
>
{chartData.chartdata.map((el, index) => (
<li
style={{
listStyleType: 'none',
border: '1px solid',
}}
>
<span>
{chartData.chartdata[index].ranking}
</span>
<span>
{
chartData.chartdata[index]
.rankingChange
}
</span>
<span>
{chartData.chartdata[index].title}
</span>
<span>
{chartData.chartdata[index].singer}
</span>
</li>
))}
</ul>
</div>
{/* 더보기 */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
height: '50px',
border: '1px solid',
}}
>
<button style={{ margin: '0px 0px 0px 10px' }}>
셔플듣기
</button>
<div style={{ margin: '0px 10px 0px 0px' }}>더보기</div>
</div>
</div>
</div>
</>
{chartData.chartdata[index].image}
</Styled.ChartListPart>
</Styled.ChartList>
// 호버로 맵을 돌림->이거를 하나로 만듦
))}
<Styled.ChartLowBtn>
<button>셔플듣기</button>
<a>더보기</a>
</Styled.ChartLowBtn>
</div>
);
};
export default Charts;
Expand All @@ -110,3 +64,80 @@ const VISITED = styled.div`
color: #1a1a1a;
text-decoration: none;
`;
// 제일 상단 멜론타트와 시간기준
const ChartTop = styled.div`
display: flex;
justify-content: space-between;
position: relative;
bottom: 20px;
`;
const BtnChartTop = styled.button`
background-color: white;

font-size: large;
font-weight: 900;
`;

//TOP100,POP,아티스트 3개 버튼
const ChartTopBtn = styled.div`
display: flex;
`;
//상단 3개에 버튼
const Button = styled.button`
position: relative;
padding: 5px 30px 5px 30px;

bottom: 31px;
background-color: white;
`;
//1~10까지 각각 순위리스트..
const ChartListPart = styled.div`
/* padding: 3px;
font-size: 14px;
&:hover {
padding: 10px;
margin: 10px;
font-size: medium;
cursor: pointer; */
/* } */
`;
//1~10까지 순위리스트..
const ChartList = styled.div`
background-color: ${({ isEven }) => (isEven ? '#e9ecef' : 'white')};
/* $위에서 isEven을 가지고 온다,$템플릿리터럴을 뜻하며 변수 나 표현식을 문자열에 삽입할떄 사용한다 */
list-style-type: none;
display: flex;
border: 1px solid;
height: 30px;
position: relative;
bottom: 30px;
padding: 3px;
font-size: small;
/*ChartListPart에 hover을 주지않고 부모에 hover을줌 */
&:hover {
/* &특수한 선택자를 나타내며 주로 중첩된 선택자에서 부모선택자를 나타낼떄 사용된다
일반적으로 상위선택자(부모)를 참조하여 중첩된 규칙을 생성할떄 사용된다*/
height: 50px;
padding: 1px;
font-size: medium;
cursor: pointer;
}
`;
//하단 셔플 과 더보기 버튼
const ChartLowBtn = styled.div`
display: flex;
justify-content: space-between;
border: 1px solid;
position: relative;
bottom: 30px;
`;

const Styled = {
ChartTop,
ChartTopBtn,
ChartList,
ChartLowBtn,
Button,
ChartListPart,
BtnChartTop,
};