diff --git a/src/assets/images/ico/comment.svg b/src/assets/images/ico/comment.svg new file mode 100644 index 0000000..4815d45 --- /dev/null +++ b/src/assets/images/ico/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/ico/play-fill-black.svg b/src/assets/images/ico/play-fill-black.svg new file mode 100644 index 0000000..83508bc --- /dev/null +++ b/src/assets/images/ico/play-fill-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss index eae59e8..cee05a7 100644 --- a/src/assets/styles/_variables.scss +++ b/src/assets/styles/_variables.scss @@ -18,6 +18,8 @@ $DARK_GRAY: #4a4954; $M_GRAY: #6c6a78; $GRAY_96: #969696; $GRAY_C2: #c2c2c2; +$GRAY_DB: #dbdbdb; +$GARY_BC: #bcbcbc; $GARY_32: #323232; $BORDER_COLOR: #232323; @@ -26,8 +28,7 @@ $DIMMBER_BACK: #00000050; $BLUE_2A6F: #2a66ff; $BLUE_2461: #2461ff; $BLUE_1472: #1472ff; -$WHITE_FF: #ffffff; - +$BLUE_5887: #5887ff; $BLUE_2A6F: #2a66ff; $YELLOW_FFC9: #ffc93e; diff --git a/src/components/Common/CircleList/CircleList.scss b/src/components/Common/CircleList/CircleList.scss new file mode 100644 index 0000000..729e451 --- /dev/null +++ b/src/components/Common/CircleList/CircleList.scss @@ -0,0 +1,89 @@ +@for $i from 0 to 7 { + .circle-list-ul__li#{$i} { + position: absolute; + width: vw(74px); + height: vw(74px); + border-radius: 50%; + transform: translateX(vw($i * 50px)); + } +} +@for $i from 7 to 13 { + .circle-list-ul__li#{$i} { + display: none; + } +} +.circle-list { + margin: vw(38px) 0 vw(59px) vw(28px); + + &-header { + margin-bottom: vw(39px); + &__more-btn { + margin-right: vw(20px); + } + } + &__empty { + height: vw(74px); + } +} + +@media screen and (max-width: $TABLET_CRITERIA) { + @for $i from 0 to 13 { + .circle-list-ul__li#{$i} { + position: absolute; + left: vw-t(67px); + width: vw-t(74px); + height: vw-t(74px); + border-radius: 50%; + transform: translateX(vw-t($i * 50px)); + } + } + + .circle-list { + margin: vw-t(46px) 0 vw-t(59px) vw-t(28px); + + &-header { + margin-bottom: vw-t(39px); + &__more-btn { + margin-right: vw-t(20px); + } + } + &__empty { + height: vw-t(74px); + } + } +} + +@media screen and (max-width: $PHONE_CRITERIA) { + @for $i from 0 to 7 { + .circle-list-ul__li#{$i} { + left: vw-p(20px); + width: vw-p(71px); + height: vw-p(71px); + transform: translateX(vw-p($i * 45px)); + } + } + @for $i from 7 to 13 { + .circle-list-ul__li#{$i} { + display: none; + } + } + + .circle-list { + margin: vw-p(54px) vw-p(20px) vw-p(65px) vw-p(20px); + + &-header { + margin-bottom: vw-p(25px); + &__title { + font-size: vw-p(16px); + } + &__more-btn { + margin-right: 0; + + font-size: vw-p(14px); + } + } + &__empty { + height: vw-p(71px); + } + } +} diff --git a/src/components/Common/CircleList/CircleList.tsx b/src/components/Common/CircleList/CircleList.tsx new file mode 100644 index 0000000..30d399f --- /dev/null +++ b/src/components/Common/CircleList/CircleList.tsx @@ -0,0 +1,59 @@ +import "./CircleList.scss"; +import { v4 as uuidv4 } from "uuid"; +import dummyImg1 from "@images/dummys/dummy-album-art-big.png"; +import dummyImg2 from "@images/dummys/dummy-album-art.png"; +import dummyImg3 from "@images/dummys/dummy-playlist.png"; +import dummyImg4 from "@images/dummys/dummy-profile.jpeg"; +import { Link } from "react-router-dom"; +import getCounts from "@utils/getCounts"; +const CircleList = ({ title }: any) => { + let dummys = [ + { id: 1, img: dummyImg1 }, + { id: 2, img: dummyImg2 }, + { id: 3, img: dummyImg3 }, + { id: 4, img: dummyImg4 }, + { id: 1, img: dummyImg1 }, + { id: 2, img: dummyImg2 }, + { id: 3, img: dummyImg3 }, + { id: 4, img: dummyImg4 }, + { id: 1, img: dummyImg1 }, + { id: 2, img: dummyImg2 }, + { id: 3, img: dummyImg3 }, + { id: 4, img: dummyImg4 }, + { id: 1, img: dummyImg1 }, + { id: 2, img: dummyImg2 }, + { id: 3, img: dummyImg3 }, + { id: 4, img: dummyImg4 } + ].splice(0, 13); + //최대 13개 + + return ( +
+
+
+ {`${getCounts(300)} ${title}`} +
+ +
+ +
+
+ ); +}; + +export default CircleList; diff --git a/src/components/Common/CircleList/index.ts b/src/components/Common/CircleList/index.ts new file mode 100644 index 0000000..80c1230 --- /dev/null +++ b/src/components/Common/CircleList/index.ts @@ -0,0 +1,3 @@ +import CircleList from "./CircleList"; + +export default CircleList; diff --git a/src/components/Common/InPlayLIst/InPlayList.tsx b/src/components/Common/InPlayLIst/InPlayList.tsx index 8c50859..64f5a14 100644 --- a/src/components/Common/InPlayLIst/InPlayList.tsx +++ b/src/components/Common/InPlayLIst/InPlayList.tsx @@ -1,6 +1,8 @@ import React from "react"; import "./InPlayList.scss"; import MiniPlayList from "@components/Common/MiniPlayList"; +import { v4 as uuidv4 } from "uuid"; + const InPlayList = () => { return (
@@ -13,7 +15,7 @@ const InPlayList = () => {
diff --git a/src/components/Common/MiniTrack/MiniTrack.tsx b/src/components/Common/MiniTrack/MiniTrack.tsx index d74a1b9..b2663f3 100644 --- a/src/components/Common/MiniTrack/MiniTrack.tsx +++ b/src/components/Common/MiniTrack/MiniTrack.tsx @@ -1,9 +1,9 @@ -import React from "react"; import "./MiniTrack.scss"; import testImg from "@images/background.png"; import emptyPlayIcon from "@ico/play.svg"; import emptyHeartIcon from "@ico/heart.svg"; import fullPlayIcon from "@ico/play-fill.svg"; +import getCounts from "@utils/getCounts"; const MiniTrack = () => { return ( @@ -29,7 +29,9 @@ const MiniTrack = () => { className="mini-track-info__icon" /> -

102

+

+ {getCounts(123)} +

  • -

    102

    +

    + {getCounts(1239999)} +

    • -