Merge pull request #130 from dnd-side-project/fix/#129/1sp-qa-mobile

Author: maylh

src/App.tsx

@@ -24,18 +24,21 @@ import { useAuthStore } from '@/features/auth/store/authStore'
 import { GlobalErrorModal } from '@/shared/ui'
 import NavBar, { NAV_HEIGHT } from '@/widgets/layout/NavBar'
 
-const LAYOUT_BOTTOM_GAP = 34
-
 const App = () => {
   const deviceType = useDevice()
   const location = useLocation()
+  const isMobile = deviceType === 'mobile'
 
   const { isLogin } = useAuthStore()
   const { mutate } = useAnonymousLogin()
 
   const [isNavVisible, setIsNavVisible] = useState(true)
 
-  const LAYOUT_WIDTH = deviceType === 'mobile' ? 'clamp(320px, 100dvw, 430px)' : '430px'
+  const LAYOUT_WIDTH = isMobile ? 'clamp(320px, 100dvw, 430px)' : '430px'
+
+  const isMobileView =
+    isMobile && (location.pathname.startsWith('/mycd') || location.pathname.startsWith('/discover'))
+  const LAYOUT_BOTTOM_GAP = isMobileView ? 16 : 34
 
   // 비회원일 경우 API 호출을 위한 익명 토큰 발급
   // TODO: 토큰 만료됐을 경우 응답 체크해서 해당 값일 경우 토큰 재발급

src/entities/playlist/types/playlist.ts

@@ -66,8 +66,7 @@ export interface PlaylistInfo extends PlaylistDetail {
   totalTime?: string
   creator: Creator
 
-  // TODO : 타입 맞춰달라고 수정 요청 해야 함
-  onlyCdResponse?: {
+  cdResponse?: {
     cdItems: CdCustomData[]
   }
   cdItems?: CdCustomData[]

src/features/chat/model/sendMessage.ts

@@ -8,7 +8,7 @@ export interface ChatMessage {
   messageId: string
   username: string | null
   content: string
-  sentAt?: string
+  sentAt: string
   profileImage: string | null
   systemMessage?: boolean
   roomId: string

src/features/share/ui/ShareButton.tsx

@@ -27,7 +27,7 @@ const ShareButton = ({ playlistId, stickers, type = 'DISCOVER' }: ShareButtonPro
   const shareRefs = useRef<(HTMLDivElement | null)[]>([])
 
   const slides = [
-    { id: 'cd', content: <Cd variant="share" bgColor="none" stickers={stickers} /> },
+    { id: 'cd', content: <Cd variant="customize" bgColor="none" stickers={stickers} /> },
     {
       id: 'member',
       content: <img src={MemberCharacter} alt="Member Character" width={220} height={220} />,
@@ -59,7 +59,6 @@ const ShareButton = ({ playlistId, stickers, type = 'DISCOVER' }: ShareButtonPro
     <>
       <ButtonWrapper $isMy={type === 'MY'} onClick={handleShare}>
         <SvgButton icon={Share} width={type === 'MY' ? 16 : 24} height={type === 'MY' ? 16 : 24} />
-        {type === 'MY' && <p>공유</p>}
       </ButtonWrapper>
 
       <BottomSheet

src/features/swipe/ui/SwipeCarousel.tsx

@@ -66,7 +66,7 @@ const SwipeCarousel = ({
         </div>
       ) : (
         <EmblaViewport ref={emblaRef}>
-          <VerticaContainer>{children}</VerticaContainer>
+          <VerticalContainer>{children}</VerticalContainer>
         </EmblaViewport>
       )}
     </>
@@ -80,7 +80,7 @@ const EmblaViewport = styled.div`
   overflow: hidden;
 `
 
-const VerticaContainer = styled.div`
+const VerticalContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;

src/pages/discover/index.tsx

@@ -164,7 +164,7 @@ const DiscoverPage = () => {
               currentPlaylist={currentPlaylist}
               currentTrackIndex={currentTrackIndex}
               currentTime={currentTime}
-              isPlaying={isPlaying}
+              isPlaying={isPlaying && !showCoachmark}
               onPlayPause={() => (isPlaying ? pause() : play())}
               onNext={nextTrack}
               onPrev={prevTrack}
@@ -179,14 +179,16 @@ const DiscoverPage = () => {
         ))}
       </SwipeCarousel>
 
-      {videoId && (
+      {!showCoachmark && videoId && (
         <YoutubePlayer
           videoId={videoId}
           onReady={(event) => {
             playerRef.current = event.target
             playerRef.current?.seekTo(currentTime, true)
-            if (isPlaying) playerRef.current?.playVideo()
-            else playerRef.current?.pauseVideo()
+            if (!isPlaying) {
+              playerRef.current?.pauseVideo()
+            }
+
             setIsMuted(playerRef.current?.isMuted() ?? null)
           }}
           onStateChange={handlePlayerStateChange}
@@ -200,6 +202,7 @@ export default DiscoverPage
 
 const Slide = styled.div`
   flex: 0 0 100%;
+  position: relative;
 `
 const Page = styled.div`
   position: relative;

src/pages/home/index.tsx

@@ -9,7 +9,7 @@ import {
   useRecommendedGenres,
 } from '@/features/recommend'
 import { FirstSection } from '@/pages/home/ui'
-import { ScrollCarousel } from '@/shared/ui'
+import { CategoryButton, ScrollCarousel } from '@/shared/ui'
 import { Playlist, PlaylistWithSong } from '@/widgets/playlist'
 
 const HomePage = () => {
@@ -67,13 +67,13 @@ const HomePage = () => {
         <h1>오늘은 이런 기분</h1>
         <ScrollCarousel gap={12}>
           {GenreData?.map((item) => (
-            <Slide
+            <CategoryButton
               key={item.code}
-              $bgImage={CARD_IMAGES_LARGE[item.code as keyof typeof CARD_IMAGES_LARGE]}
+              size="large"
+              text={item.displayName}
+              bgImage={CARD_IMAGES_LARGE[item.code as keyof typeof CARD_IMAGES_LARGE]}
               onClick={() => handleKeywordSearch(item.code)}
-            >
-              {item.displayName}
-            </Slide>
+            />
           ))}
         </ScrollCarousel>
       </FourthSection>
@@ -83,22 +83,6 @@ const HomePage = () => {
 
 export default HomePage
 
-const Slide = styled.button<{ $bgImage?: string }>`
-  border-radius: 10px;
-  width: 160px;
-  height: 200px;
-  color: ${({ theme }) => theme.COLOR['gray-100']};
-  ${({ theme }) => theme.FONT['body1-normal']};
-  background-color: ${({ theme }) => theme.COLOR['gray-600']};
-  background-image: url(${({ $bgImage }) => $bgImage});
-  background-size: cover;
-  background-position: center;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`
-
 const PageLayout = styled.div`
   display: flex;
   flex-direction: column;

src/pages/mycd/index.tsx

@@ -4,7 +4,9 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { usePlaylist } from '@/app/providers/PlayerProvider'
+import { NoLike } from '@/assets/icons'
 import { MemberCharacter } from '@/assets/images'
+import { usePlaylistDetail } from '@/entities/playlist'
 import { useMyCdActions, useMyCdList, useMyLikedCdList } from '@/entities/playlist/model/useMyCd'
 import { useAuthStore } from '@/features/auth/store/authStore'
 import { useChatSocket } from '@/features/chat/model/sendMessage'
@@ -13,7 +15,7 @@ import type { MyCdTab } from '@/pages/mycd/ui/HeaderTab'
 import { getVideoId } from '@/shared/lib'
 import { useDevice } from '@/shared/lib/useDevice'
 import { flexColCenter, flexRowCenter } from '@/shared/styles/mixins'
-import { Button, LiveInfo } from '@/shared/ui'
+import { Button, LiveInfo, Loading } from '@/shared/ui'
 import { ActionBar, ControlBar, ProgressBar, VolumeButton, YoutubePlayer } from '@/widgets/playlist'
 
 const MyCdPage = () => {
@@ -45,10 +47,11 @@ const MyCdPage = () => {
   const likedCdPlaylist = useMyLikedCdList('RECENT')
 
   const playlistQuery = selectedTab === 'MY' ? myCdPlaylist : likedCdPlaylist
-
   const playlistData = useMemo(() => playlistQuery.data ?? [], [playlistQuery.data])
-
+  const isLoading = playlistQuery.isLoading
   const isError = playlistQuery.isError
+  const isMyEmpty = !myCdPlaylist.isLoading && (myCdPlaylist.data?.length ?? 0) === 0
+  const isLikedEmpty = !likedCdPlaylist.isLoading && (likedCdPlaylist.data?.length ?? 0) === 0
 
   const [centerItem, setCenterItem] = useState<{
     playlistId: number | null
@@ -112,9 +115,15 @@ const MyCdPage = () => {
   )
 
   /* 플레이리스트 세팅 */
-  const { tracklist: playlistDetail } = useMyCdActions(Number(centerItem.playlistId), {
-    enabled: !!centerItem.playlistId,
+  const myCdDetail = useMyCdActions(Number(centerItem.playlistId), {
+    enabled: selectedTab === 'MY' && !!centerItem.playlistId,
+  })
+
+  const likedCdDetail = usePlaylistDetail(centerItem.playlistId, {
+    enabled: selectedTab === 'LIKE' && !!centerItem.playlistId,
   })
+
+  const playlistDetail = selectedTab === 'MY' ? myCdDetail.tracklist : likedCdDetail.data
   useEffect(() => {
     if (playlistDetail && userInfo) {
       if (currentPlaylist?.playlistId === playlistDetail.playlistId) return
@@ -162,21 +171,41 @@ const MyCdPage = () => {
     ? getVideoId(currentPlaylist.songs[currentTrackIndex]?.youtubeUrl)
     : null
 
+  if (isLoading) {
+    return <Loading isLoading />
+  }
+
   if (isError) {
     navigate('/error')
     return null
   }
 
-  const isEmpty = playlistData && playlistData.length === 0
+  if (selectedTab === 'MY' && isMyEmpty) {
+    return (
+      <EmptyPage>
+        <HeaderTab selectedTab={selectedTab} onSelect={handleTabSelect} />
+        <CenterContent>
+          <img src={MemberCharacter} alt="Guest Character" width={160} height={160} />
+          <NavigateBtn onClick={() => navigate('/mypage/customize')}>
+            새로운 CD에 취향 담기
+          </NavigateBtn>
+        </CenterContent>
+      </EmptyPage>
+    )
+  }
 
-  if (isEmpty) {
+  if (selectedTab === 'LIKE' && isLikedEmpty) {
     return (
-      <ViewContainer>
-        <img src={MemberCharacter} alt="Guest Character" width={160} height={160} />
-        <NavigateBtn onClick={() => navigate('/mypage/customize')}>
-          새로운 CD에 취향 담기
-        </NavigateBtn>
-      </ViewContainer>
+      <EmptyPage>
+        <HeaderTab selectedTab={selectedTab} onSelect={handleTabSelect} />
+        <CenterContent>
+          <NoLike width={160} height={160} />
+          <SubText>
+            아직 좋아요한 CD가 없어요. <br /> 새로운 음악을 찾아볼까요?
+          </SubText>
+          <NavigateBtn onClick={() => navigate('/discover')}>둘러보기로 가기</NavigateBtn>
+        </CenterContent>
+      </EmptyPage>
     )
   }
 
@@ -204,18 +233,18 @@ const MyCdPage = () => {
               </Button>
             )}
           </Container>
-
           <PlaylistCarousel data={playlistData ?? []} onCenterChange={handleCenterChange} />
-
           <ActionBar
             playlistId={centerItem.playlistId ?? 0}
             creatorId={currentPlaylist.creator.creatorId}
             stickers={playlistDetail?.cdResponse?.cdItems || []}
             type="MY"
             selectedTab={selectedTab}
           />
-
-          <Title>{centerItem.playlistName}</Title>
+          <Title $isMobile={isMobile}> {centerItem.playlistName}</Title>
+          {selectedTab === 'LIKE' && playlistDetail?.creatorNickname && (
+            <Creator>{playlistDetail.creatorNickname}</Creator>
+          )}
 
           <BottomWrapper>
             <ProgressBar
@@ -259,24 +288,18 @@ const Container = styled.div`
   height: 30px;
 `
 
-const Title = styled.p`
+const Title = styled.p<{ $isMobile?: boolean }>`
   ${({ theme }) => theme.FONT.headline1};
-  padding-top: 40px;
+  padding-top: ${({ $isMobile }) => ($isMobile ? '24px' : '40px')};
 `
 
 const BottomWrapper = styled.div`
-  padding-top: 24px;
+  padding-top: 20px;
   display: flex;
   flex-direction: column;
   gap: 20px;
 `
 
-const ViewContainer = styled.div`
-  ${flexColCenter}
-  height: 100%;
-  gap: 16px;
-`
-
 const NavigateBtn = styled.button`
   ${flexRowCenter}
   background-color: ${({ theme }) => theme.COLOR['primary-normal']};
@@ -285,4 +308,27 @@ const NavigateBtn = styled.button`
   padding: 6px 20px;
   height: 32px;
   ${({ theme }) => theme.FONT['body2-normal']};
+  margin-top: 16px;
+`
+const Creator = styled.p`
+  ${({ theme }) => theme.FONT['body2-normal']};
+  color: ${({ theme }) => theme.COLOR['gray-300']};
+`
+
+const SubText = styled.p`
+  ${({ theme }) => theme.FONT['body1-normal']}
+  color: ${({ theme }) => theme.COLOR['gray-50']};
+`
+
+const EmptyPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: ${({ theme }) => theme.COLOR['gray-900']};
+`
+
+const CenterContent = styled.div`
+  flex: 1;
+  ${flexColCenter};
+  text-align: center;
 `