[refactor] CD CRUD 알파테스트 및 리팩토링

src/App.tsx

@@ -90,7 +90,7 @@
 
     // 네비게이션 미노출 여부 확인
     setIsNavVisible(!getHideNav(pathname))
   }, [location.pathname])
 
   return (
     <RootWrapper>
@@ -304,7 +304,6 @@
   gap: 17px;
   & > img:first-child {
     width: 186px;
-    height: 45px;
   }
   & > p {
     font-size: 46px;

src/entities/playlist/model/useMyCd.ts

@@ -31,6 +31,7 @@ export const useMyCdActions = (cdId: number, options?: { enabled?: boolean }) =>
   const {
     data: tracklist,
     isLoading,
+    isFetching,
     isError,
   } = useQuery({
     queryKey: ['getTracklist', cdId],
@@ -57,6 +58,7 @@ export const useMyCdActions = (cdId: number, options?: { enabled?: boolean }) =>
   return {
     tracklist,
     isLoading,
+    isFetching,
     isError,
     deleteMutation,
     togglePublicMutation,

src/pages/mypage/ui/customize/index.tsx

@@ -48,10 +48,11 @@ const Customize = () => {
   const {
     tracklist: prevTracklist,
     isLoading,
+    isFetching,
     isError,
   } = useMyCdActions(isEditMode ? Number(cdId) : -1)
 
-  if (isLoading) return <Loading isLoading={isLoading} />
+  if (isLoading || isFetching) return <Loading isLoading={isLoading} />
   if (isError) {
     navigate('/error')
     return null

src/pages/mypage/ui/customize/step2/index.tsx

@@ -23,6 +23,7 @@ import type {
 import { THEME_PROP_ID_OFFSET } from '@/pages/mypage/types/mypage'
 import { StepHeader } from '@/pages/mypage/ui/components'
 import type { CustomizeStepProps } from '@/pages/mypage/ui/customize'
+import { useDragScroll } from '@/shared/lib/useDragScroll'
 import { flexRowCenter } from '@/shared/styles/mixins'
 import { Loading } from '@/shared/ui'
 import type { ModalProps } from '@/shared/ui/Modal'
@@ -40,6 +41,7 @@ const CustomizeStep2 = ({
   const fileInputRef = useRef<HTMLInputElement>(null)
   const cdContainerRef = useRef<HTMLCanvasElement>(null)
   const imageCache = useRef<{ [key: string]: HTMLImageElement | null }>({})
+  const themeListRef = useRef<HTMLUListElement>(null)
 
   const [currentThemeId, setCurrentThemeId] = useState<StickerThemeType>('deulak')
   const [stickers, setStickers] = useState<StickerInfoType[]>([])
@@ -51,6 +53,8 @@ const CustomizeStep2 = ({
   const { uploadSticker, uploadLoading } = useUserSticker()
   const { createMutation, updateMutation } = useCdFinalSave()
 
+  useDragScroll(themeListRef as React.RefObject<HTMLElement>)
+
   // ===============================
   // 스티커 초기 데이터 세팅
   // ===============================
@@ -934,7 +938,7 @@ const CustomizeStep2 = ({
           </AllDeleteBtn>
         </CdAreaWrap>
         <StickerAreaWrap>
-          <ThemeListContainer>
+          <ThemeListContainer ref={themeListRef}>
             {STICKER_THEME_LIST.map((theme) => (
               <li key={theme.id}>
                 <ThemeButton

src/pages/mypage/ui/customize/step3/index.tsx

@@ -122,5 +122,5 @@ const CtaButton = styled.button`
   background-color: ${({ theme }) => theme.COLOR['primary-normal']};
   border-radius: 20px;
   color: ${({ theme }) => theme.COLOR['gray-900']};
-  ${({ theme }) => theme.FONT['label']}
+  ${({ theme }) => theme.FONT['body2-normal']}
 `

src/pages/mypage/ui/main/index.tsx

@@ -1,4 +1,5 @@
-import { useNavigate } from 'react-router-dom'
+import { useEffect } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
 
 import styled from 'styled-components'
 
@@ -13,6 +14,7 @@ import { flexRowCenter } from '@/shared/styles/mixins'
 
 const Mypage = () => {
   const navigate = useNavigate()
+  const { state } = useLocation()
 
   const { selected: currentTab, onSelect: setCurrentTab } = useSingleSelect<MYPAGE_TAB_TYPE>('cd')
 
@@ -21,6 +23,14 @@ const Mypage = () => {
     { label: '나의 좋아요', value: 'like' },
   ]
 
+  useEffect(() => {
+    if (state?.prevSelectedTab) {
+      setCurrentTab(state?.prevSelectedTab as MYPAGE_TAB_TYPE)
+      // 새로고침 시 값이 남아있지 않도록 일회성 사용 후 히스토리 state 초기화
+      navigate(location.pathname, { replace: true, state: null })
+    }
+  }, [])
+
   return (
     <>
       <Header

src/pages/mypage/ui/tracklist/index.tsx

@@ -51,7 +51,7 @@ const MypageTracklist = () => {
 
   const onCdPlayClick = () => {
     if (!cdMetadata?.playlistId) return
-    navigate(`/mycd?id=${cdMetadata?.playlistId}${isFromMyCdList ? '' : '&type=LIKE'}`)
+    navigate(`/mycd/${cdMetadata?.playlistId}${isFromMyCdList ? '' : '?type=LIKE'}`)
   }
 
   const onCdDeleteClick = () => {
@@ -112,7 +112,14 @@ const MypageTracklist = () => {
     <>
       <Header
         left={
-          <SvgButton icon={LeftArrow} width={24} height={24} onClick={() => navigate('/mypage')} />
+          <SvgButton
+            icon={LeftArrow}
+            width={24}
+            height={24}
+            onClick={() =>
+              navigate('/mypage', { state: { prevSelectedTab: isFromMyCdList ? null : 'like' } })
+            }
+          />
         }
         right={
           <EditButton

src/shared/lib/useDragScroll.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react'
+
+export const useDragScroll = (ref: React.RefObject<HTMLElement>) => {
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    let startX = 0
+    let scrollLeft = 0
+    let isDown = false
+
+    const down = (e: MouseEvent) => {
+      isDown = true
+      startX = e.pageX - el.offsetLeft
+      scrollLeft = el.scrollLeft
+    }
+    const leave = () => (isDown = false)
+    const up = () => (isDown = false)
+    const move = (e: MouseEvent) => {
+      if (!isDown) return
+      e.preventDefault()
+      el.scrollLeft = scrollLeft - (e.pageX - el.offsetLeft - startX)
+    }
+
+    el.addEventListener('mousedown', down)
+    el.addEventListener('mouseleave', leave)
+    el.addEventListener('mouseup', up)
+    el.addEventListener('mousemove', move)
+    return () => {
+      el.removeEventListener('mousedown', down)
+      el.removeEventListener('mouseleave', leave)
+      el.removeEventListener('mouseup', up)
+      el.removeEventListener('mousemove', move)
+    }
+  }, [ref])
+}

src/shared/ui/Cd.tsx

@@ -95,7 +95,7 @@ const Cd = ({ variant, bgColor = 'default', stickers, isPublic = true }: CdProps
             style={{
               position: 'absolute',
               left: xCoordinate * ratio,
-              top: yCoordinate * ratio,
+              top: yCoordinate * ratio - 1,
               width: width * ratio,
               height: height * ratio,
               transform: `scale(${scale}) rotate(${angle}rad)`,