[퍼블리싱] 디테일 페이지

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;

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);
+    }
+  }
+}

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 (
+    <div className="circle-list flex column">
+      <div className="circle-list-header flex justify-space-between">
+        <div className="circle-list-header__title inline-block fs-18">
+          {`${getCounts(300)} ${title}`}
+        </div>
+        <button className="circle-list-header__more-btn fs-14">더보기</button>
+      </div>
+      <ul className="circle-list-ul">
+        {dummys.map((dummy, index) => (
+          // index 부분 차후 유저 id나 특정값으로 변경
+          <Link
+            to={`/main/profile/${dummy.id}`}
+            title={`${dummy.id} 유저로 이동`}
+            key={uuidv4()}
+          >
+            <img
+              src={dummy.img}
+              className={`circle-list-ul__li${index}`}
+              alt="유저 프로필 이미지"
+            ></img>
+          </Link>
+        ))}
+      </ul>
+      <div className="circle-list__empty"></div>
+    </div>
+  );
+};
+
+export default CircleList;

src/components/Common/CircleList/index.ts

@@ -0,0 +1,3 @@
+import CircleList from "./CircleList";
+
+export default CircleList;

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 (
     <div className="in-play-list mont">
@@ -13,7 +15,7 @@ const InPlayList = () => {
       <ul className="mini-play-list-ul">
         {[1, 2, 3].map(list => {
           return (
-            <li>
+            <li key={uuidv4()}>
               <MiniPlayList />
             </li>
           );

src/components/Common/InlinePlayLists/InlinePlayLists.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import InlinePlayList from "./InlinePlayLIst";
 import "./InlinePlayLists.scss";
+import { v4 as uuidv4 } from "uuid";
+
 const InlinePlayLists = () => {
   return (
     <ul className="inline-play-lists">
       {[1, 2, 3, 4, 5].map(() => {
         return (
-          <li>
+          <li key={uuidv4()}>
             <InlinePlayList />
           </li>
         );

src/components/Common/MiniPlayList/MiniPlayList.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import "./MiniPlayList.scss";
 import testImg from "@images/background.png";
 import emptyHeartIcon from "@ico/heart.svg";
+import getCounts from "@utils/getCounts";
 
 const MiniPlayList = () => {
   return (
@@ -26,7 +26,9 @@ const MiniPlayList = () => {
               className="mini-play-list-info__icon"
             />
           </button>
-          <p className="mini-play-list-info__likes-count fs-14">102</p>
+          <p className="mini-play-list-info__likes-count fs-14">
+            {getCounts(1239999)}
+          </p>
         </div>
       </div>
     </div>

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"
               />
             </button>
-            <p className="mini-track-info__likes-count fs-14">102</p>
+            <p className="mini-track-info__likes-count fs-14">
+              {getCounts(123)}
+            </p>
           </li>
           <li className="mini-track-info__icon-item flex align-center">
             <button
@@ -43,11 +45,17 @@ const MiniTrack = () => {
                 className="mini-track-info__icon"
               />
             </button>
-            <p className="mini-track-info__play-count fs-14">102</p>
+            <p className="mini-track-info__play-count fs-14">
+              {getCounts(1239999)}
+            </p>
           </li>
         </ul>
       </div>
-      <button className="mini-track__play-btn">
+      <button
+        className="mini-track__play-btn flex align-center justify-center"
+        title="해당 트랙 재생하기"
+      >
+        {/* 차후 변경 ~ 트랙으로 재생*/}
         <img
           src={fullPlayIcon}
           alt="fullPlayIcon"

src/components/Common/RelateTrackList/RelateTrackList.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { MiniTrack } from "@components/Common";
 import "./RelateTrackList.scss";
+import { v4 as uuidv4 } from "uuid";
+
 const RelateTrackList = () => {
   return (
     <div className="relate-track-list mont">
@@ -16,7 +18,7 @@ const RelateTrackList = () => {
       <ul>
         {[1, 2, 3].map(list => {
           return (
-            <li>
+            <li key={uuidv4()}>
               <MiniTrack />
             </li>
           );

src/components/Common/index.ts

@@ -5,12 +5,14 @@ import MiniTrack from "./MiniTrack";
 import InPlayList from "./InPlayLIst";
 import InlineTrackList from "./InlineTrackList";
 import InlinePlayLists from "./InlinePlayLists";
+import CircleList from "./CircleList";
 export {
   TopNav,
   RelateTrackList,
   MiniPlayList,
   MiniTrack,
   InPlayList,
   InlineTrackList,
-  InlinePlayLists
+  InlinePlayLists,
+  CircleList
 };

src/components/Detail/MusicAbout/MusicAbout.scss

@@ -0,0 +1,24 @@
+.music-about-container {
+  margin-top: vw(28px);
+
+  width: vw(865px);
+}
+
+@media screen and (max-width: $TABLET_CRITERIA) {
+  .music-about-container {
+    margin: vw-t(18px) vw-t(41px) vw-t(28px) vw-t(40px);
+
+    width: vw-t(683px);
+  }
+}
+
+@media screen and (max-width: $PHONE_CRITERIA) {
+  .music-about-container {
+    display: flex;
+    flex-direction: column;
+
+    margin: 0 vw-p(18px);
+
+    width: vw-p(355px);
+  }
+}

src/components/Detail/MusicAbout/MusicAbout.tsx

@@ -0,0 +1,20 @@
+import "./MusicAbout.scss";
+import MusicCommentList from "./MusicCommentList";
+import MusicDescription from "./MusicDescription";
+import UserAbout from "./UserAbout";
+
+const MusicAbout = () => {
+  return (
+    <div className="music-about-container flex mont">
+      <div className="music-about-container__left">
+        <UserAbout />
+      </div>
+      <div className="music-about-container__right">
+        <MusicDescription />
+        <MusicCommentList />
+      </div>
+    </div>
+  );
+};
+
+export default MusicAbout;

src/components/Detail/MusicAbout/MusicCommentList/CommentTextArea/CommentTextArea.scss

@@ -0,0 +1,3 @@
+.music-comment-list__input {
+  resize: none;
+}

src/components/Detail/MusicAbout/MusicCommentList/CommentTextArea/CommentTextArea.tsx

@@ -0,0 +1,29 @@
+import { useRef } from "react";
+import "./CommentTextArea.scss";
+
+const CommentTextArea = () => {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const autoResizeTextarea = () => {
+    if (textAreaRef.current) {
+      let fs = document.defaultView
+        ?.getComputedStyle(textAreaRef.current!)
+        .getPropertyValue("font-size");
+      textAreaRef.current!.style.height = "auto";
+      let height = textAreaRef.current!.scrollHeight;
+      textAreaRef.current!.style.height = `${
+        height + parseInt(fs !== undefined ? fs : "0")
+      }px`;
+    }
+  };
+  return (
+    <textarea
+      id="autoTextarea"
+      className="music-comment-list__input fc-white"
+      maxLength={500}
+      onKeyPress={autoResizeTextarea}
+      ref={textAreaRef}
+    />
+  );
+};
+
+export default CommentTextArea;

src/components/Detail/MusicAbout/MusicCommentList/CommentTextArea/index.ts

@@ -0,0 +1,3 @@
+import CommentTextArea from "./CommentTextArea";
+
+export default CommentTextArea;