🔀 포크레포 -> 메인레포

src/api/music.ts

@@ -43,3 +43,33 @@ export const deleteMusic = async (role: string, musicId: number) => {
     return false;
   }
 };
+
+export const likeMusic = async ({
+  role,
+  musicId,
+}: {
+  role: string;
+  musicId: number;
+}) => {
+  const response = await apiClient.patch(
+    SongController.likeMusic(role, musicId),
+  );
+  return response.data;
+};
+
+export const getLikeMusic = async ({
+  role,
+  date,
+}: {
+  role: string;
+  date: string;
+}) => {
+  try {
+    const { data } = await apiClient.get(SongController.getlikeMusic(role), {
+      params: {
+        date: date,
+      },
+    });
+    return data;
+  } catch (e: any) {}
+};

src/assets/svg/ArrowDown.tsx

@@ -0,0 +1,21 @@
+const ArrowDown = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.33301 5.6665L7.99967 10.3332L12.6663 5.6665"
+        stroke="#656B80"
+        strokeWidth="1.33333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowDown;

src/assets/svg/HeartIcon.tsx

@@ -0,0 +1,31 @@
+import { Palette } from 'styles/globals';
+
+interface HeartIconProps {
+  heartState: boolean;
+}
+
+const HeartIcon = ({ heartState }: HeartIconProps) => {
+  const fillColor = heartState ? `${Palette.PRIMARY_P10}` : 'none';
+  const strokeColor = heartState ? `${Palette.PRIMARY_P10}` : '#656B80';
+
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.667 8.25C21.667 5.765 19.568 3.75 16.979 3.75C15.044 3.75 13.382 4.876 12.667 6.483C11.952 4.876 10.29 3.75 8.35399 3.75C5.76699 3.75 3.66699 5.765 3.66699 8.25C3.66699 15.47 12.667 20.25 12.667 20.25C12.667 20.25 21.667 15.47 21.667 8.25Z"
+        stroke={strokeColor}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill={fillColor}
+      />
+    </svg>
+  );
+};
+
+export default HeartIcon;

src/assets/svg/index.ts

@@ -47,8 +47,9 @@ export { default as EyeIcon } from './EyeIcon';
 export { default as EyeSelectedIcon } from './EyeSelectedIcon';
 export { default as MusicalNoteIcon } from './MusicNoteIcon';
 export { default as EllipsisVerticalIcon } from './EllipsisVerticalIcon';
-export { default as NewPageIcon } from './NewPageIcon';
 export { default as TrashcanIcon } from './TrashcanIcon';
 export { default as SettingIcon } from './SettingIcon';
 export { default as CircleDefaultProfile } from './CircleDefaultProfile';
 export { default as BookBenIcon } from './BookBenIcon';
+export { default as HeartIcon } from './HeartIcon';
+export { default as ArrowDown } from './ArrowDown';

src/components/Song/atoms/MusicItemThumbnail/index.tsx

@@ -1,11 +1,52 @@
 import Image from 'next/image';
+import { preventEvent } from 'utils/Libs/preventEvent';
+import { likeMusic } from 'api/music';
+import { HeartIcon } from 'assets/svg';
+import { toast } from 'react-toastify';
 import * as S from './style';
 
-const MusicItemThumbnail = ({ thumbnail }: { thumbnail: string }) => {
+interface MusicItemThumbnailProps {
+  thumbnail: string;
+  heartState: boolean;
+  setHeartState: React.Dispatch<React.SetStateAction<boolean>>;
+  musicId: number;
+  role: string;
+  setLikeCount: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const MusicItemThumbnail = ({
+  thumbnail,
+  heartState,
+  setHeartState,
+  musicId,
+  role,
+  setLikeCount,
+}: MusicItemThumbnailProps) => {
+  const handleHeart = async (e: React.MouseEvent<HTMLDivElement>) => {
+    preventEvent(e);
+    try {
+      const data = await likeMusic({ role, musicId });
+      setLikeCount(data.likeCount);
+      setHeartState(!heartState);
+    } catch (error) {
+      console.error('Error liking music:', error);
+      toast.error('음악을 찾지 못했습니다');
+    }
+  };
   return (
-    <S.ImgBox>
-      <Image src={thumbnail} alt="thumbnail" layout="fill" objectFit="cover" />
-    </S.ImgBox>
+    <div>
+      <S.ImgBox>
+        <S.HeartContainer onClick={handleHeart}>
+          <HeartIcon heartState={heartState} />
+        </S.HeartContainer>
+        <Image
+          src={thumbnail}
+          alt="thumbnail"
+          layout="fill"
+          objectFit="cover"
+        />
+      </S.ImgBox>
+    </div>
   );
 };
 

src/components/Song/atoms/MusicItemThumbnail/style.ts

@@ -1,5 +1,5 @@
-import styled from "@emotion/styled";
-import { Palette } from "styles/globals";
+import styled from '@emotion/styled';
+import { Palette } from 'styles/globals';
 
 export const ImgBox = styled.div`
   position: relative;
@@ -17,4 +17,15 @@ export const ImgBox = styled.div`
   span {
     min-height: 72px;
   }
-`;
+`;
+
+export const HeartContainer = styled.div`
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 1;
+
+  @media (min-width: 420px) {
+    display: none;
+  }
+`;

src/components/Song/atoms/MusicItemTitle/style.ts

@@ -24,7 +24,7 @@ export const Title = styled.h4`
 
 export const Info = styled.div`
   display: none;
-  font-size: 1em;
+  font-size: 0.75em;
   color: ${Palette.NEUTRAL_N20};
 
   @media (max-width: 800px) {

src/components/Song/atoms/MusicListButton/index.tsx

@@ -1,35 +1,63 @@
-import { NewPageIcon, TrashcanIcon } from 'assets/svg';
 import { preventEvent } from 'utils/Libs/preventEvent';
+import { HeartIcon, TrashcanIcon } from 'assets/svg';
+import { likeMusic } from 'api/music';
+import { toast } from 'react-toastify';
 import * as S from './style';
 
 interface MusicListButtonProps {
   role: string;
   songStuNum: number;
   userStuNum?: string;
   setDeleteModal: React.Dispatch<React.SetStateAction<boolean>>;
+  heartState: boolean;
+  setHeartState: React.Dispatch<React.SetStateAction<boolean>>;
+  musicId: number;
+  likeCount: number;
+  setLikeCount: React.Dispatch<React.SetStateAction<number>>;
 }
 
 const MusicListButton = ({
   role,
   songStuNum,
   userStuNum,
   setDeleteModal,
+  heartState,
+  setHeartState,
+  musicId,
+  likeCount,
+  setLikeCount,
 }: MusicListButtonProps) => {
+  const handleHeart = async (e: React.MouseEvent<HTMLDivElement>) => {
+    preventEvent(e);
+    try {
+      const data = await likeMusic({ role, musicId });
+      setLikeCount(data.likeCount);
+      setHeartState(!heartState);
+    } catch (error) {
+      console.error('Error liking music:', error);
+      toast.error('음악을 찾지 못했습니다');
+    }
+  };
   return (
     <S.ButtonContainer>
-      {(role !== 'member' || String(songStuNum) === userStuNum) && (
-        <button
-          onClick={(e) => {
-            preventEvent(e);
-            setDeleteModal(true);
-          }}
-        >
-          <TrashcanIcon />
-        </button>
-      )}
-      <div>
-        <NewPageIcon />
-      </div>
+      <S.ButtonTestContainer>
+        {(role !== 'member' || String(songStuNum) === userStuNum) && (
+          <S.ButtonStyle
+            onClick={(e) => {
+              preventEvent(e);
+              setDeleteModal(true);
+            }}
+          >
+            <TrashcanIcon />
+          </S.ButtonStyle>
+        )}
+        <S.LikeContainer onClick={handleHeart}>
+          <S.ButtonStyle>
+            <HeartIcon heartState={heartState} />
+          </S.ButtonStyle>
+          <S.LikeNum>{likeCount}</S.LikeNum>
+        </S.LikeContainer>
+      </S.ButtonTestContainer>
     </S.ButtonContainer>
   );
 };

src/components/Song/atoms/MusicListButton/style.ts

@@ -1,34 +1,51 @@
-import styled from "@emotion/styled";
-import { Palette } from "styles/globals";
+import styled from '@emotion/styled';
+import { Palette } from 'styles/globals';
+
+export const ButtonStyle = styled.div`
+  border: none;
+  border-radius: 0.5em;
+  background: ${Palette.BACKGROUND_BG};
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 
 export const ButtonContainer = styled.div`
+  display: flex;
+  height: 100%;
+  align-items: flex-end;
+`;
+
+export const ButtonTestContainer = styled.div`
   display: flex;
   gap: 1em;
   justify-content: end;
 
   button,
   div {
-    border: none;
-    border-radius: 0.5em;
-    background: ${Palette.BACKGROUND_BG};
-    width: 40px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @media (max-width: 800px) {
-      :last-child {
-        display: none;
-      }
-    }
+    ${ButtonStyle}
   }
 
-  svg path {
+  & > div:first-of-type svg path {
     stroke: ${Palette.NEUTRAL_N20};
   }
-
   @media (max-width: 420px) {
     display: none;
   }
-`;
+`;
+
+export const LikeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const LikeNum = styled.p`
+  font-family: SUIT;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 17.47px;
+  text-align: center;
+  color: ${Palette.NEUTRAL_N20};
+`;