Merge pull request #110 from dnd-side-project/feat/#109/discover-ui

[feat] 둘러보기 UI 변경사항 반영

Author: maylh

src/App.tsx

@@ -192,7 +192,7 @@ const NavContainer = styled.div<{
   $layoutWidth: string
   $layoutBottomGap: number
 }>`
-  z-index: 100;
+  z-index: ${({ theme }) => theme.Z_INDEX.overlay};
   position: fixed;
   bottom: 0;
   margin: 0 -20px 0 0;

src/app/providers/ToastProvider.tsx

@@ -52,5 +52,5 @@ const ToastContainer = styled.div`
   left: 0;
   right: 0;
   padding: 0 20px;
-  z-index: 20000;
+  z-index: ${({ theme }) => theme.Z_INDEX.topLayer};
 `

src/assets/icons/icn_volume.svg

@@ -46,3 +46,4 @@ export { default as CoachMarkArrow } from './icn_coachmark_arrow.svg?react'
 export { default as BgCd } from './icn_bg_cd.svg?react'
 export { default as BgHeadphone } from './icn_bg_headphone.svg?react'
 export { default as BgMusic } from './icn_bg_music.svg?react'
+export { default as Volume } from './icn_volume.svg?react'

src/assets/icons/index.ts

@@ -150,7 +150,7 @@ const DiscoverPage = () => {
 
   return (
     <Page>
-      {showCoachmark && <DiscoverCoachMark onClick={handleCloseCoachmark} />}
+      {showCoachmark && <DiscoverCoachMark onClose={handleCloseCoachmark} />}
       <SwipeCarousel data={playlistsData} onSelectIndexChange={handleSelectPlaylist}>
         {playlistsData.map((data) => (
           <Slide key={data.playlistId}>

src/pages/discover/index.tsx

@@ -1,47 +1,35 @@
 import Lottie from 'lottie-react'
 import styled from 'styled-components'
 
-import { Cancel, CoachMarkArrow } from '@/assets/icons'
 import { SwipeLottie } from '@/assets/lottie'
-import { useDevice } from '@/shared/lib/useDevice'
-import { Cd, SvgButton } from '@/shared/ui'
+import { flexColCenter } from '@/shared/styles/mixins'
 
 interface DiscoverCoachMarkProps {
-  onClick: () => void
+  onClose: () => void
 }
 
-const DiscoverCoachMark = ({ onClick }: DiscoverCoachMarkProps) => {
-  const deviceType = useDevice()
-  const isMobile = deviceType === 'mobile'
+const DiscoverCoachMark = ({ onClose }: DiscoverCoachMarkProps) => {
+  const handleOverlayClick = (e: React.MouseEvent | React.TouchEvent) => {
+    e.stopPropagation()
 
-  return (
-    <Overlay>
-      <CloseButton>
-        <SvgButton icon={Cancel} onClick={onClick} />
-      </CloseButton>
+    setTimeout(() => {
+      onClose()
+    }, 0)
+  }
 
-      <ContentWrapper $isMobile={isMobile}>
-        {isMobile && (
-          <CoachMarkCdWrapper>
-            <CdText>
-              <Highlight>CD를 클릭</Highlight>하면 <br /> 플레이리스트가 재생돼요
-            </CdText>
-            <CoachMarkCd>
-              <CoachMarkArrow />
-              <Cd variant="xxl" bgColor="none" />
-            </CoachMarkCd>
-          </CoachMarkCdWrapper>
-        )}
-        <Content>
-          <p>
-            더 많은 플레이리스트를 보려면 <br />
-            <Highlight>화면을 위로</Highlight> 올려보세요!
-          </p>
-        </Content>
-        <LottieWrapper>
-          <Lottie animationData={SwipeLottie} loop autoplay style={{ height: 190 }} />
-        </LottieWrapper>
-      </ContentWrapper>
+  return (
+    <Overlay
+      onClick={handleOverlayClick}
+      onTouchStart={handleOverlayClick}
+      onMouseDown={handleOverlayClick}
+    >
+      <Content>
+        <p>
+          더 많은 플레이리스트를 보려면 <br />
+          <Highlight>화면을 위로</Highlight> 올려보세요!
+        </p>
+      </Content>
+      <Lottie animationData={SwipeLottie} loop autoplay style={{ height: 220 }} />
     </Overlay>
   )
 }
@@ -54,73 +42,18 @@ const Overlay = styled.div`
   left: 0;
   width: 100%;
   height: 100dvh;
-  background: rgba(15, 16, 20, 0.68);
-  z-index: 999;
-`
-
-const CloseButton = styled.div`
-  position: absolute;
-  top: 18px;
-  right: 0;
-  z-index: 1001;
-`
-
-const ContentWrapper = styled.div<{ $isMobile: boolean }>`
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+  background: rgba(15, 16, 20, 0.8);
+  z-index: ${({ theme }) => theme.Z_INDEX.coachMark};
+  ${flexColCenter}
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-
-  top: ${({ $isMobile }) => ($isMobile ? '64px' : '50%')};
-  transform: ${({ $isMobile }) => ($isMobile ? 'translateX(-50%)' : 'translate(-50%, -50%)')};
+  pointer-events: auto;
 `
 
 const Content = styled.div`
   text-align: center;
   ${({ theme }) => theme.FONT.headline1};
-  font-weight: 600;
-
-  margin-top: 20px;
-  white-space: nowrap;
 `
 
 const Highlight = styled.span`
   color: ${({ theme }) => theme.COLOR['primary-normal']};
 `
-
-const CoachMarkCd = styled.div`
-  position: relative;
-
-  & svg {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-`
-
-const LottieWrapper = styled.div`
-  height: 180px;
-  overflow: hidden;
-`
-const CoachMarkCdWrapper = styled.div`
-  position: relative;
-  display: inline-block;
-  padding-top: 40px;
-`
-
-const CdText = styled.p`
-  color: ${({ theme }) => theme.COLOR['gray-50']};
-  ${({ theme }) => theme.FONT['body1-normal']};
-  text-align: right;
-  position: absolute;
-
-  top: -4%;
-  right: 0;
-  margin-bottom: 12px;
-
-  white-space: nowrap;
-`

src/pages/discover/ui/DiscoverCoachMark.tsx

@@ -1,4 +1,3 @@
 export { getVideoId } from './getVideoId'
 export { getGenreLabel } from './getGenreLabel'
-export { getTrackOrderLabel } from './getTrackOrderLabel'
 export { getAccTime } from './getAccTime'

src/shared/lib/getTrackOrderLabel.ts

@@ -113,6 +113,12 @@ export const theme = {
       letter-spacing: 0.0311em;
     `,
   },
+
+  Z_INDEX: {
+    overlay: 100,
+    topLayer: 200,
+    coachMark: 300,
+  },
 }
 
 export type Theme = typeof theme

src/shared/lib/index.ts

@@ -34,14 +34,15 @@ const Wrapper = styled.div`
   align-items: center;
   gap: 8px;
   ${({ theme }) => theme.FONT.caption1};
+  padding: 8px 0;
 `
 
 const OnAirBadge = styled.button<{ $isOnAir: boolean }>`
   background-color: ${({ theme }) => theme.COLOR['gray-600']};
   color: ${({ theme, $isOnAir }) =>
     $isOnAir ? theme.COLOR['primary-normal'] : theme.COLOR['gray-300']};
   font-weight: 600;
-  padding: 6px 11px;
+  padding: 4px 10px;
   border-radius: 6px;
   ${({ theme }) => theme.FONT.label};