Merge pull request #121 from dnd-side-project/refactor/#120/cd-crud

Author: hansololiviakim

src/App.tsx

@@ -304,7 +304,6 @@ const LogoContainer = styled.div`
   gap: 17px;
   & > img:first-child {
     width: 186px;
-    height: 45px;
   }
   & > p {
     font-size: 46px;

src/entities/playlist/model/useMyCd.ts

@@ -13,6 +13,7 @@ export const useMyCdList = (sort: string) => {
     queryKey: ['myCdList', sort],
     queryFn: () => getMyCdList(sort),
     refetchOnMount: 'always',
+    placeholderData: undefined, // 이전 데이터 즉시 제거
   })
 }
 
@@ -21,6 +22,7 @@ export const useMyLikedCdList = (sort: string) => {
     queryKey: ['myLikeList', sort],
     queryFn: () => getLikedCdList(sort),
     refetchOnMount: 'always',
+    placeholderData: undefined,
   })
 }
 
@@ -31,6 +33,7 @@ export const useMyCdActions = (cdId: number, options?: { enabled?: boolean }) =>
   const {
     data: tracklist,
     isLoading,
+    isFetching,
     isError,
   } = useQuery({
     queryKey: ['getTracklist', cdId],
@@ -57,6 +60,7 @@ export const useMyCdActions = (cdId: number, options?: { enabled?: boolean }) =>
   return {
     tracklist,
     isLoading,
+    isFetching,
     isError,
     deleteMutation,
     togglePublicMutation,

src/pages/mycd/index.tsx

@@ -198,7 +198,9 @@ const MyCdPage = () => {
                 size="S"
                 state="primary"
                 onClick={() =>
-                  navigate(`/mypage/customize?playlistId=${currentPlaylist?.playlistId}`)
+                  navigate(`/mypage/customize`, {
+                    state: { cdId: currentPlaylist?.playlistId },
+                  })
                 }
               >
                 편집

src/pages/mypage/mock/likeUser.json

@@ -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 || isFetching} />
   if (isError) {
     navigate('/error')
     return null

src/pages/mypage/mock/myPlaylist.json

@@ -397,13 +397,14 @@ const GenreDropdown = styled.button<{ $isSelected: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 11px;
+  padding: 16px 12px;
   width: 100%;
   height: 42px;
   border-radius: 10px;
   color: ${({ theme, $isSelected }) =>
     $isSelected ? theme.COLOR['gray-10'] : theme.COLOR['gray-300']};
-  background-color: ${({ theme }) => theme.COLOR['gray-800']};
+  background-color: ${({ theme }) => theme.COLOR['gray-700']};
+  ${({ theme }) => theme.FONT['body2-normal']}
 `
 
 const EachGenre = styled.button<{ $currentGenre: boolean }>`

src/pages/mypage/mock/playlistLinks.json

@@ -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/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']}
 `