Refactor/#244 기존 SongDetailPage 컴포넌트에 새로운 플로우와 시안을 적용한다.

frontend/src/features/comments/components/CommentList.tsx

@@ -16,11 +16,12 @@ interface Comment {
 }
 
 interface CommentListProps {
-  songId: string;
+  songId: number;
   partId: number;
 }
 
 const CommentList = ({ songId, partId }: CommentListProps) => {
+  const { showToast } = useToastContext();
   const [newComment, setNewComment] = useState('');
 
   const { data: comments, fetchData: getComment } = useFetch<Comment[]>(() =>
@@ -30,7 +31,6 @@ const CommentList = ({ songId, partId }: CommentListProps) => {
   const { mutateData } = useMutation(() =>
     fetcher(`/songs/${songId}/parts/${partId}/comments`, 'POST', { content: newComment.trim() })
   );
-  const { showToast } = useToastContext();
 
   const resetNewComment = () => setNewComment('');
 
@@ -52,15 +52,11 @@ const CommentList = ({ songId, partId }: CommentListProps) => {
     getComment();
   }, [partId]);
 
-  if (!comments) {
-    return null;
-  }
-
   return (
     <>
       <Spacing direction="vertical" size={24} />
       <SRHeading as="h3">댓글 목록</SRHeading>
-      <p>댓글 {comments.length}개</p>
+      <p>댓글 {comments?.length ?? 0}개</p>
       <Spacing direction="vertical" size={24} />
       <form onSubmit={submitNewComment}>
         <Flex>
@@ -86,7 +82,7 @@ const CommentList = ({ songId, partId }: CommentListProps) => {
       </form>
       <Spacing direction="vertical" size={20} />
       <Comments>
-        {comments.map(({ id, content, createdAt }) => (
+        {comments?.map(({ id, content, createdAt }) => (
           <Comment key={id} content={content} createdAt={createdAt} />
         ))}
       </Comments>

frontend/src/features/songs/components/KillingPartInterface.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react';
+import { styled } from 'styled-components';
+import CommentList from '@/features/comments/components/CommentList';
+import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext';
+import Spacing from '@/shared/components/Spacing';
+import ToggleSwitch from '@/shared/components/ToggleSwitch/ToggleSwitch';
+import KillingPartTrackList from './KillingPartTrackList';
+import type { KillingPart, SongDetail } from '@/shared/types/song';
+
+interface KillingPartInterfaceProps {
+  killingParts: SongDetail['killingParts'];
+  songId: number;
+}
+
+const DEFAULT_PART_ID = -1;
+
+const KillingPartInterface = ({ killingParts, songId }: KillingPartInterfaceProps) => {
+  const [nowPlayingTrack, setNowPlayingTrack] = useState<KillingPart['id']>(DEFAULT_PART_ID);
+  const [isRepeat, setIsRepeat] = useState(false);
+  const { videoPlayer, playerState, seekTo, pause } = useVideoPlayerContext();
+
+  const timerRef = useRef<number | null>(null);
+
+  const toggleRepetition = () => {
+    setIsRepeat(!isRepeat);
+  };
+
+  useEffect(() => {
+    if (document.activeElement === videoPlayer.current?.getIframe()) {
+      setNowPlayingTrack(DEFAULT_PART_ID);
+    }
+  }, [videoPlayer, playerState]);
+
+  useEffect(() => {
+    const part = killingParts.find((part) => part.id === nowPlayingTrack);
+    if (!part) return;
+
+    seekTo(part.start);
+
+    const interval = (part.end - part.start) * 1000;
+
+    if (isRepeat) {
+      timerRef.current = window.setInterval(() => seekTo(part.start), interval);
+    } else {
+      timerRef.current = window.setTimeout(() => {
+        pause();
+        setNowPlayingTrack(DEFAULT_PART_ID);
+      }, interval);
+    }
+
+    return () => {
+      if (!timerRef.current) return;
+      window.clearInterval(timerRef.current);
+    };
+  }, [isRepeat, nowPlayingTrack, seekTo, pause, killingParts]);
+
+  return (
+    <>
+      <FlexContainer>
+        <TitleWrapper aria-label="Top 3 킬링파트 듣기">
+          <ItalicTitle aria-hidden="true">Top 3</ItalicTitle>
+          <NormalTitle aria-hidden="true"> Killing part</NormalTitle>
+        </TitleWrapper>
+        <SwitchWrapper>
+          <SwitchLabel htmlFor="repetition">구간 반복</SwitchLabel>
+          <ToggleSwitch
+            id="repetition"
+            on={toggleRepetition}
+            off={toggleRepetition}
+            defaultToggle={isRepeat}
+          />
+        </SwitchWrapper>
+      </FlexContainer>
+      <Spacing direction="vertical" size={16} />
+      <KillingPartTrackList
+        killingParts={killingParts}
+        nowPlayingTrack={nowPlayingTrack}
+        setNowPlayingTrack={setNowPlayingTrack}
+      />
+      {nowPlayingTrack !== DEFAULT_PART_ID && (
+        <CommentList songId={songId} partId={nowPlayingTrack} />
+      )}
+    </>
+  );
+};
+
+export default KillingPartInterface;
+
+const SwitchWrapper = styled.div`
+  display: flex;
+  column-gap: 8px;
+`;
+
+const SwitchLabel = styled.label`
+  font-size: 12px;
+  color: ${({ theme: { color } }) => color.white};
+`;
+
+const TitleWrapper = styled.div`
+  font-size: 22px;
+  font-weight: 700;
+  color: ${({ theme: { color } }) => color.white};
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    font-size: 18px;
+  }
+`;
+
+const ItalicTitle = styled.span`
+  font-style: italic;
+  color: ${({ theme: { color } }) => color.primary};
+`;
+
+const NormalTitle = styled.span`
+  color: ${({ theme: { color } }) => color.white};
+`;
+
+const FlexContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;

frontend/src/features/songs/components/KillingPartTrack.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { VideoPlayerProvider } from '@/features/youtube/components/VideoPlayerProvider';
+import TimerProvider from '@/shared/components/Timer/TimerProvider';
 import ToastProvider from '@/shared/components/Toast/ToastProvider';
 import KillingPartTrack from './KillingPartTrack';
 import type { KillingPart } from '@/shared/types/song';
@@ -13,7 +14,9 @@ const meta = {
       return (
         <ToastProvider>
           <VideoPlayerProvider>
-            <Story />
+            <TimerProvider time={killingPart.end - killingPart.start}>
+              <Story />
+            </TimerProvider>
           </VideoPlayerProvider>
         </ToastProvider>
       );
@@ -36,21 +39,15 @@ const killingPart: KillingPart = {
 };
 
 const KillingPartTrackWithHook = () => {
-  const [nowPlayingTrack, setNowPlayingTrack] = useState(-1);
+  const [nowPlayingTrack, setNowPlayingTrack] = useState<KillingPart['id']>(-1);
 
-  const changePlayingTrack: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
-    const newTrack = Number(currentTarget.value);
-
-    setNowPlayingTrack(newTrack);
-  };
-
-  const isPlaying = killingPart.rank === nowPlayingTrack;
+  const isNowPlayingTrack = killingPart.rank === nowPlayingTrack;
 
   return (
     <KillingPartTrack
       killingPart={killingPart}
-      isPlaying={isPlaying}
-      changePlayingTrack={changePlayingTrack}
+      isNowPlayingTrack={isNowPlayingTrack}
+      setNowPlayingTrack={setNowPlayingTrack}
     />
   );
 };