diff --git a/src/components/EpisodeList.tsx b/src/components/EpisodeList.tsx index d54493a5c1d43874f687bacc8fb10d2dc96360e6..fae0887817b6f4ebf3f316f32bd633d63d214c61 100644 --- a/src/components/EpisodeList.tsx +++ b/src/components/EpisodeList.tsx @@ -100,7 +100,7 @@ export default function EpisodeList({ return ( <div onClick={handleNavigate} - className="cursor-pointer group/item flex items-center w-[1100px] h-[110px] rounded-xl bg-white hover:bg-NAVY-5 text-black hover:text-white" + className="cursor-pointer group/item flex items-center w-full h-[110px] rounded-xl bg-white hover:bg-NAVY-5 text-black hover:text-white" > <h1 className="h2 ml-[30px] mr-[20px]">{order}</h1> <img diff --git a/src/components/PodcastHeader.tsx b/src/components/PodcastHeader.tsx index a1aaa4819441e8e1bc874f86eab070b7f171bb58..aaac5b040bd4f092722e540130db7b0793da9d81 100644 --- a/src/components/PodcastHeader.tsx +++ b/src/components/PodcastHeader.tsx @@ -32,7 +32,7 @@ export default function PodcastHeader({ const queue = useQueue(); const dispatchQueue = useQueueDispatch(); // const [libraryData, setLibraryData] = useState<cardProps[]>([]); - + // useEffect(() => { // (async () => { // const resLibaryData = await axios.get( @@ -99,7 +99,7 @@ export default function PodcastHeader({ return ( <div className="block"> - <div className="w-[950px] inline-flex mt-[20px]"> + <div className="w-full inline-flex mt-[20px]"> <div className=""> <div className="w-[225px] h-[225px]"> <img @@ -128,7 +128,9 @@ export default function PodcastHeader({ </div> <div className="block"> - <p className="b3 text-gray-600 ">{description}</p> + <p className="b3 text-gray-600 md:max-xl:text-[12px]"> + {description} + </p> </div> </div> </div> diff --git a/src/pages/podcast/index.tsx b/src/pages/podcast/index.tsx index d523b89d9b4870860244cde22353101e05a09a88..9cbf9712831d9aaed7b87cb6ae70a78316363e38 100644 --- a/src/pages/podcast/index.tsx +++ b/src/pages/podcast/index.tsx @@ -30,7 +30,7 @@ export default function PodcastPage(): JSX.Element { import.meta.env.VITE_REST_URL }/podcast/${podcastId}?premium=${searchParams.get("premium")}` ); - if(!resPodcast.data.podcast) { + if (!resPodcast.data.podcast) { navigate(`/`); } setPodcastHeader(resPodcast.data.podcast); @@ -39,7 +39,7 @@ export default function PodcastPage(): JSX.Element { }, [podcastId, searchParams, navigate]); return ( - <div className="ml-[100px]"> + <div className="ml-[32px] xl:ml-[100px]"> {podcastHeader ? ( <PodcastHeader {...podcastHeader} @@ -52,7 +52,7 @@ export default function PodcastPage(): JSX.Element { <hr className="h-px mt-[30px] ml-[-100px] bg-black bg-opacity-40" /> </div> - <section className="mt-[20px] overflow-y-scroll h-[60vh] mb-[60px]"> + <section className="mt-[20px] overflow-y-scroll h-[60vh] pb-[60px] ml-[-16px] xl:ml-0"> {episodes?.map((episode: episodeProps, idx: number) => ( <Episode key={idx}