Refactor/#505 댓글 기능을 임시 중단하고 킬링파트 듣기 페이지의 디자인을 수정한다. (#526)

* design: 반응형 디자인 수정

- 킬링파트 인터페이스 데스크탑 너비 314px로 고정
- SongDetailItem 전체 크기 모바일 padding 8px
- SongDetailItem 세로 중앙 정렬

* feat: 댓글 기능 임시적으로 중단

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

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { styled } from 'styled-components';
-import CommentList from '@/features/comments/components/CommentList';
+// NOTE: 댓글 기능 임시 중단
+// import CommentList from '@/features/comments/components/CommentList';
 import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext';
 import Flex from '@/shared/components/Flex/Flex';
 import Spacing from '@/shared/components/Spacing';
@@ -19,6 +20,8 @@ const DEFAULT_PART_ID = -1;
 
 const KillingPartInterface = ({ killingParts, songId, memberPart }: KillingPartInterfaceProps) => {
   const [nowPlayingTrack, setNowPlayingTrack] = useState(DEFAULT_PART_ID);
+  // NOTE: 댓글 기능 임시 중단
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [commentsPartId, setCommentsPartId] = useState<KillingPart['id']>(DEFAULT_PART_ID);
   const [isRepeat, setIsRepeat] = useState(false);
   const { videoPlayer, playerState, seekTo, pause } = useVideoPlayerContext();
@@ -144,9 +147,10 @@ const KillingPartInterface = ({ killingParts, songId, memberPart }: KillingPartI
         setNowPlayingTrack={setNowPlayingTrack}
         setCommentsPartId={setCommentsPartId}
       />
-      {commentsPartId !== DEFAULT_PART_ID && (
+      {/* NOTE: 댓글 기능 임시 중단 */}
+      {/* {commentsPartId !== DEFAULT_PART_ID && (
         <CommentList songId={songId} partId={commentsPartId} />
-      )}
+      )} */}
     </Flex>
   );
 };

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

@@ -83,6 +83,11 @@ export const TrackList = styled.div`
   display: flex;
   flex-direction: column;
   gap: 10px;
+  width: 314px;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    width: 100%;
+  }
 `;
 
 const PartRegisterButton = styled.button`

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

@@ -47,6 +47,7 @@ const SongDetailItem = forwardRef<HTMLDivElement, SongDetailItemProps>(
           <Flex
             $gap={16}
             $md={{ $direction: 'column' }}
+            $xs={{ $css: { padding: '8px' } }}
             $css={{ padding: '16px', background: '#121212c8', borderRadius: '8px' }}
           >
             <Flex $direction="column" $css={{ flex: '3 1 0' }}>
@@ -82,6 +83,8 @@ export default SongDetailItem;
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: center;
+
   height: 100vh;
   padding-top: ${({ theme: { headerHeight } }) => headerHeight.desktop};