From c928a5e03500f7ebb2b03b9cff2683b3f492bb0e Mon Sep 17 00:00:00 2001 From: bru37 Date: Sat, 2 Dec 2023 22:16:34 +0900 Subject: [PATCH 1/4] =?UTF-8?q?FEAT(phill)12/02StyledComponents=EC=9D=84?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C=EC=83=88=EB=A1=9C=EB=A7=8C?= =?UTF-8?q?=EB=93=A4=EC=96=B4=EB=B3=B4=EC=95=98=EC=8A=B5=EB=8B=88=EB=8B=A4?= =?UTF-8?q?.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/components/MelonCharts/Charts.js | 154 ++++++++---------- 1 file changed, 69 insertions(+), 85 deletions(-) diff --git a/src/pages/main/components/MelonCharts/Charts.js b/src/pages/main/components/MelonCharts/Charts.js index 25eaee4..bf06f77 100644 --- a/src/pages/main/components/MelonCharts/Charts.js +++ b/src/pages/main/components/MelonCharts/Charts.js @@ -7,91 +7,37 @@ import chartData from '../../../../mock/chartData.json'; // 2페어 차필우 허진욱 const Charts = () => { return ( - <> -
-
-
-

- 멜론 차트 -

-
2023.11.27 23:00 기준
-
- - {/* 멜론차트 TOP100 POP 아티스트 */} -
- - - -
- {/* 멜론차트 1~10 */} -
-
    - {chartData.chartdata.map((el, index) => ( -
  • - - {chartData.chartdata[index].ranking} - - - { - chartData.chartdata[index] - .rankingChange - } - - - {chartData.chartdata[index].title} - - - {chartData.chartdata[index].singer} - -
    • - ))} -
-
- {/* 더보기 */} -
- -
더보기
-
-
-
- +
+ + + 멜론차트 + +

2030.12.02 18:00 기준

+ + + + + + + {chartData.chartdata.map((el, index) => ( + +
  • {chartData.chartdata[index].ranking}
    • +
  • {chartData.chartdata[index].title}
    • +
  • {chartData.chartdata[index].singer}
    • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +     + ))} + + + 더보기 + +
    ); }; export default Charts; @@ -110,3 +56,41 @@ const VISITED = styled.div` color: #1a1a1a; text-decoration: none; `; +// 제일 상단 멜론타트와 시간기준 +const ChartTop = styled.div` + display: flex; + justify-content: space-between; + position: relative; + bottom: 100px; +`; +//제일 상단 멜론차트버튼 +const MelonCartBtn = styled.button` + border: none; + background-color: white; + font-weight: 700; + font-size: 16px; +`; +//제일 상단 멜론차트 클릭버튼 +const MelonCartClickBtn = () => {}; +//TOP100,POP,아티스트 3개 버튼 +const ChartTopBtn = styled.div` + display: flex; +`; +//1~10까지 순위리스트 +const ChartList = styled.div` + list-style-type: none; + display: flex; + border: 1px solid; +`; +const ChartLowBtn = styled.div` + display: flex; + justify-content: space-between; +`; + +const Styled = { + ChartTop, + ChartTopBtn, + ChartList, + MelonCartBtn, + ChartLowBtn, +}; From ebca7abda61660b737b68bc4dbcfae30f6be51f8 Mon Sep 17 00:00:00 2001 From: bru37 Date: Sun, 3 Dec 2023 19:08:25 +0900 Subject: [PATCH 2/4] =?UTF-8?q?FEAT(phill)12/03=20hover=EB=A1=9C=20?= =?UTF-8?q?=EB=A7=88=EC=9A=B0=EC=8A=A4=EC=9D=B4=EB=B2=A4=ED=8A=B8=EC=99=80?= =?UTF-8?q?=20=EC=B0=A8=ED=8A=B8=ED=81=AC=EA=B8=B0=EC=A0=95=EB=A6=AC?= =?UTF-8?q?=EB=A5=BC=20=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/components/MelonCharts/Charts.js | 70 +++++++++++++------ 1 file changed, 50 insertions(+), 20 deletions(-) diff --git a/src/pages/main/components/MelonCharts/Charts.js b/src/pages/main/components/MelonCharts/Charts.js index bf06f77..1e8cb79 100644 --- a/src/pages/main/components/MelonCharts/Charts.js +++ b/src/pages/main/components/MelonCharts/Charts.js @@ -4,33 +4,41 @@ import styled from 'styled-components'; import chartData from '../../../../mock/chartData.json'; -// 2페어 차필우 허진욱 +// 2페어 차필우 허진욱.. +//제일 상단 멜론차트 클릭버튼 + const Charts = () => { + const onMelonCartClickBtn = () => {}; return (
    - - 멜론차트 - +

    2030.12.02 18:00 기준

     - - - + TOP100 + POP + 아티스트 {chartData.chartdata.map((el, index) => ( -
  • {chartData.chartdata[index].ranking}
    • -
  • {chartData.chartdata[index].title}
    • -
  • {chartData.chartdata[index].singer}
    • -
  • -
  • -
  • -
  • -
  • -
  • -
  • + + {chartData.chartdata[index].ranking} + + + {chartData.chartdata[index].title} + + + {chartData.chartdata[index].singer} + + + + + + + + +     ))} @@ -61,7 +69,7 @@ const ChartTop = styled.div` display: flex; justify-content: space-between; position: relative; - bottom: 100px; + bottom: 20px; `; //제일 상단 멜론차트버튼 const MelonCartBtn = styled.button` @@ -70,21 +78,41 @@ const MelonCartBtn = styled.button` font-weight: 700; font-size: 16px; `; -//제일 상단 멜론차트 클릭버튼 -const MelonCartClickBtn = () => {}; + //TOP100,POP,아티스트 3개 버튼 const ChartTopBtn = styled.div` display: flex; `; +//상단 3개에 버튼 +const Button = styled.div` + padding: 5px 30px 5px 30px; + position: relative; + border: 1px solid; + bottom: 30px; +`; +//1~10까지 각각 순위리스트 +const ChartListPart = styled.div` + &:hover { + cursor: pointer; + } +`; //1~10까지 순위리스트 const ChartList = styled.div` list-style-type: none; display: flex; border: 1px solid; + height: 30px; + position: relative; + bottom: 30px; + padding: 3px 3px 3px 3px; `; +//하단 셔플 과 더보기 버튼 const ChartLowBtn = styled.div` display: flex; justify-content: space-between; + border: 1px solid; + position: relative; + bottom: 30px; `; const Styled = { @@ -93,4 +121,6 @@ const Styled = { ChartList, MelonCartBtn, ChartLowBtn, + Button, + ChartListPart, }; From ff47c274b699b3069d7b2cd2364998b7950ae0b9 Mon Sep 17 00:00:00 2001 From: bru37 Date: Sun, 3 Dec 2023 19:11:25 +0900 Subject: [PATCH 3/4] =?UTF-8?q?FEAT(phill)12/03=20hover=EB=A1=9C=20?= =?UTF-8?q?=EB=A7=88=EC=9A=B0=EC=8A=A4=EC=9D=B4=EB=B2=A4=ED=8A=B8=EC=99=80?= =?UTF-8?q?=20=EC=B0=A8=ED=8A=B8=ED=81=AC=EA=B8=B0=EC=A0=95=EB=A6=AC?= =?UTF-8?q?=EC=99=80=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EC=83=88=EB=A1=AD?= =?UTF-8?q?=EA=B2=8C=20=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/components/MelonCharts/Charts.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/main/components/MelonCharts/Charts.js b/src/pages/main/components/MelonCharts/Charts.js index 1e8cb79..aae8d48 100644 --- a/src/pages/main/components/MelonCharts/Charts.js +++ b/src/pages/main/components/MelonCharts/Charts.js @@ -88,15 +88,15 @@ const Button = styled.div` padding: 5px 30px 5px 30px; position: relative; border: 1px solid; - bottom: 30px; + bottom: 31px; `; -//1~10까지 각각 순위리스트 +//1~10까지 각각 순위리스트.. const ChartListPart = styled.div` &:hover { cursor: pointer; } `; -//1~10까지 순위리스트 +//1~10까지 순위리스트.. const ChartList = styled.div` list-style-type: none; display: flex; From 27ed63cb95ecdbc0f7c19b3438c99a90c67b8ed1 Mon Sep 17 00:00:00 2001 From: bru37 Date: Tue, 5 Dec 2023 00:09:55 +0900 Subject: [PATCH 4/4] =?UTF-8?q?FEAT(Phill)=2012/04=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9E=91=EB=8F=99=EC=9D=B4=20=EC=95=88?= =?UTF-8?q?=EB=90=98=EC=96=B4=EC=84=9C=20=EB=B3=B4=EB=8D=94=EB=A5=BC=20?= =?UTF-8?q?=EC=97=86=EC=95=A0=EB=8B=88=20=EA=B5=AC=ED=98=84=EC=9D=B4?= =?UTF-8?q?=EB=90=8C=20=EA=B7=BC=EB=8D=B0=20=EB=B3=B4=EB=8D=94=EB=A5=BC=20?= =?UTF-8?q?=EB=84=A3=EA=B3=A0=EC=8B=B6=EC=9D=80=EB=8D=B0=20=EC=96=B4?= =?UTF-8?q?=EB=96=BB=EA=B2=8C=ED=95=98=EB=A9=B4=20=EB=90=A0=EA=B9=8C?= =?UTF-8?q?=EC=9A=94=3F=20map=EC=A0=95=EB=A6=AC=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mock/chartData.json | 18 ++--- .../main/components/MelonCharts/Charts.js | 69 ++++++++++++------- 2 files changed, 52 insertions(+), 35 deletions(-) diff --git a/src/mock/chartData.json b/src/mock/chartData.json index 36b18da..9823f6f 100644 --- a/src/mock/chartData.json +++ b/src/mock/chartData.json @@ -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 (르세라핌)", diff --git a/src/pages/main/components/MelonCharts/Charts.js b/src/pages/main/components/MelonCharts/Charts.js index aae8d48..99813e4 100644 --- a/src/pages/main/components/MelonCharts/Charts.js +++ b/src/pages/main/components/MelonCharts/Charts.js @@ -9,10 +9,13 @@ import chartData from '../../../../mock/chartData.json'; const Charts = () => { const onMelonCartClickBtn = () => {}; + return (
    - + + 멜론차트 +

    2030.12.02 18:00 기준

     @@ -21,25 +24,22 @@ const Charts = () => { 아티스트 {chartData.chartdata.map((el, index) => ( - + // el, index, el은 목데이터에 전체 엘리멘트를 가지고 옮,인덱스도 전체 인덱스를 가지고옮 + + {/* isEven은 함수가 짝수인지홀수인지를 판별하고 반환해줌 */} {chartData.chartdata[index].ranking} - - + {chartData.chartdata[index].title} - - + {chartData.chartdata[index].singer} + + {chartData.chartdata[index].rankingChange} + + {chartData.chartdata[index].image} - - - - - - - - + // 호버로 맵을 돌림->이거를 하나로 만듦 ))} @@ -71,12 +71,11 @@ const ChartTop = styled.div` position: relative; bottom: 20px; `; -//제일 상단 멜론차트버튼 -const MelonCartBtn = styled.button` - border: none; +const BtnChartTop = styled.button` background-color: white; - font-weight: 700; - font-size: 16px; + + font-size: large; + font-weight: 900; `; //TOP100,POP,아티스트 3개 버튼 @@ -84,27 +83,45 @@ const ChartTopBtn = styled.div` display: flex; `; //상단 3개에 버튼 -const Button = styled.div` - padding: 5px 30px 5px 30px; +const Button = styled.button` position: relative; - border: 1px solid; + padding: 5px 30px 5px 30px; + bottom: 31px; + background-color: white; `; //1~10까지 각각 순위리스트.. const ChartListPart = styled.div` + /* padding: 3px; + font-size: 14px; &:hover { - cursor: pointer; - } + 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 3px 3px 3px; + padding: 3px; + font-size: small; + /*ChartListPart에 hover을 주지않고 부모에 hover을줌 */ + &:hover { + /* &특수한 선택자를 나타내며 주로 중첩된 선택자에서 부모선택자를 나타낼떄 사용된다 + 일반적으로 상위선택자(부모)를 참조하여 중첩된 규칙을 생성할떄 사용된다*/ + height: 50px; + padding: 1px; + font-size: medium; + cursor: pointer; + } `; //하단 셔플 과 더보기 버튼 const ChartLowBtn = styled.div` @@ -119,8 +136,8 @@ const Styled = { ChartTop, ChartTopBtn, ChartList, - MelonCartBtn, ChartLowBtn, Button, ChartListPart, + BtnChartTop, };