Fix: 플리 더보기 페이지 불러오기 에러 해결 #237

- state 누락
- 컴포넌트 재사용에 따른 playlistType 조건부 렌더링

src/components/Home/MyPlayListTable.tsx

@@ -5,6 +5,7 @@ import PlayList from '../../components/common/PlayList/PlayList';
 import PlayListItem from '../../components/common/PlayList/PlayListItem';
 import PlayIcon from '../../img/play-icon.svg';
 import * as S from '../../pages/Home/HomeStyle';
+import { IPlaylistType } from '../../types/playlist';
 
 interface IPlaylistItem {
   id: string;
@@ -14,18 +15,21 @@ interface IPlaylistItem {
 }
 
 interface Props {
+  playlistType: IPlaylistType;
   playlistData: IPlaylistItem[];
 }
 
-export default function MyPlayListTable({ playlistData }: Props) {
+export default function MyPlayListTable({ playlistType, playlistData }: Props) {
   return (
     <MyPlayListTableWrap>
-      <Link to='/user/profile/my'>
-        <S.PlaylistNameBox>
-          <h2>내가 생성한 플레이리스트</h2>
-          <S.MoreBtn aria-label='더보기' />
-        </S.PlaylistNameBox>
-      </Link>
+      {playlistType === 'my' && (
+        <Link to='/user/profile/my'>
+          <S.PlaylistNameBox>
+            <h2>내가 생성한 플레이리스트</h2>
+            <S.MoreBtn aria-label='더보기' />
+          </S.PlaylistNameBox>
+        </Link>
+      )}
       {playlistData && playlistData.length > 0 ? (
         <PlayListBox>
           <PlayList>
@@ -57,7 +61,7 @@ export default function MyPlayListTable({ playlistData }: Props) {
         <S.MyPlayListNoneInfo>
           <p>앗! 아직 비어있어요.</p>
           <Link to='/playlist/create1'>
-            <button>플레이리스트 생성하러 가기</button>
+            <Link to='/playlist/create1'>플레이리스트 생성하러 가기</Link>
           </Link>
         </S.MyPlayListNoneInfo>
       )}

src/components/Home/PlayListTable.tsx

@@ -33,7 +33,7 @@ export default function PlayListTable({
       {/* 섹션 타이틀과 "더 보기" 버튼 */}
       <S.PlaylistNameBox>
         <h2>{title}</h2>
-        <Link to={moreLink}>
+        <Link to={moreLink} state={{ data: playlistData }}>
           <S.MoreBtn />
         </Link>
       </S.PlaylistNameBox>

src/pages/Home/Home.tsx

@@ -40,7 +40,7 @@ export default function Home() {
           />
 
           {/* 내가 생성한 플레이리스트 섹션 */}
-          <MyPlayListTable playlistData={my_playlist} />
+          <MyPlayListTable playlistType='my' playlistData={my_playlist} />
 
           {/* 신규 플레이리스트 섹션 */}
           <PlayListTable

src/pages/Home/MorePlaylist.tsx

@@ -2,13 +2,12 @@ import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { userInfoAtom } from '../../library/atom';
+import { IPlaylistType } from '../../types/playlist';
 import * as S from './HomeStyle';
 import MyPlayListTable from '../../components/Home/MyPlayListTable';
 import NotFound from '../NotFound/NotFound';
 
 // playlistType의 타입 정의
-type IPlaylistType = 'recommend' | 'hot' | 'new';
-
 export default function MorePlaylist() {
   const location = useLocation();
   const state = location?.state;
@@ -17,12 +16,16 @@ export default function MorePlaylist() {
   const { playlistType } = useParams<{ playlistType: IPlaylistType }>();
   const userInfo = useRecoilValue(userInfoAtom);
 
+  if (!playlistData) return null;
   // 컴포넌트 공통 렌더링 로직
   const renderCommonContent = (title: string) => (
     <S.MorePlaylistWrap>
       <S.BackButton onClick={() => navigate(-1)}></S.BackButton>
       <h2 className='morePlaylistName'>{title}</h2>
-      <MyPlayListTable playlistData={playlistData} />
+      <MyPlayListTable
+        playlistType={playlistType as IPlaylistType}
+        playlistData={playlistData}
+      />
     </S.MorePlaylistWrap>
   );
 

src/types/playlist.ts

@@ -61,3 +61,5 @@ export interface ICreatePlaylist {
   year?: string;
   backAnimation?: boolean;
 }
+
+export type IPlaylistType = 'recommend' | 'hot' | 'new' | 'my';