Merge pull request #155 from dnd-side-project/develop

[deploy] release v1.0.1

Author: maylh

.husky/prepare-commit-msg

@@ -8,12 +8,19 @@ COMMIT_MSG_FILE=$1
 # 커밋 메시지 읽기
 COMMIT_MSG=$(cat "$COMMIT_MSG_FILE")
 
+# deploy로 시작하면 이슈 번호 추가하지 않음
+if echo "$COMMIT_MSG" | grep -iq "^deploy:"; then
+  echo "배포 커밋이므로 이슈 번호를 추가하지 않습니다."
+  exit 0
+fi
+
 # 이미 issue 번호가 있는지 확인
 if echo "$COMMIT_MSG" | grep -q "#[0-9]*"; then
   echo "커밋메세지에 이슈 번호가 포함되어 있습니다."
   exit 0
 fi
 
+
 # issue 번호가 없고 브랜치에서 추출한 번호가 있으면 추가
 if [ -n "$ISSUE_NUMBER" ]; then
   # #숫자 형식을 (#숫자) 형식으로 변환

commitlint.config.js

@@ -13,6 +13,7 @@ export default {
         'docs', // README, 주석, 문서 파일 수정
         'revert', // 이전 커밋으로 복구
         'test', // 테스트 코드 추가 및 수정
+        'deploy', // 배포
       ],
     ],
     'subject-case': [0], // 제목 대소문자 규칙 비활성화 (한국어 지원)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dnd-13th-8-frontend",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "engines": {
     "node": "22.12.0"

src/App.tsx

@@ -133,7 +133,7 @@ const App = () => {
                 <BgHeadphone width={60} height={60} />
                 <InnerText>
                   <span>#3. 들락날락, 취향 공유</span>
-                  <span>친구의 뮤직룸에도 늘락, 새로운 취향을 발견해요</span>
+                  <span>친구의 뮤직룸에도 들락, 새로운 취향을 발견해요</span>
                 </InnerText>
               </li>
             </TextListContainer>

src/pages/discover/DiscoverLayout.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router-dom'
 
 import styled from 'styled-components'
 
@@ -30,6 +30,9 @@ const Content = () => {
   const deviceType = useDevice()
   const isMobile = deviceType === 'mobile'
 
+  const location = useLocation()
+  const isTracklistPage = location.pathname.includes('tracklist')
+
   const videoId = currentPlaylist
     ? getVideoId(currentPlaylist.songs[currentTrackIndex]?.youtubeUrl)
     : null
@@ -69,7 +72,7 @@ const Content = () => {
         />
       )}
 
-      {isMobile && isMuted && (
+      {isMobile && isMuted && !isTracklistPage && (
         <ButtonWrapper>
           <VolumeButton playerRef={playerRef} isMuted={isMuted} setIsMuted={setIsMuted} />
         </ButtonWrapper>

src/pages/home/ui/FeedbackBottomSheet.tsx

@@ -42,7 +42,7 @@ const FeedbackBottomSheet = ({ isOpen, onClose }: FeedbackBottomSheetProps) => {
         <img src={FeedbackImg} alt="feedback" width={206} height={206} />
       </Content>
       <ButtonWrapper>
-        <Label>~ 11/20(목)까지</Label>
+        <Label>~ 11/30(일)까지</Label>
         <Button onClick={() => navigate('/feedback')} size="L" state="primary">
           유저테스트 참여하기
         </Button>

src/pages/mycd/index.tsx

@@ -45,7 +45,11 @@ const MyCdPage = () => {
   const likedCdPlaylist = useMyLikedCdList('RECENT')
 
   const playlistQuery = selectedTab === 'MY' ? myCdPlaylist : likedCdPlaylist
-  const playlistData = useMemo(() => playlistQuery.data ?? [], [playlistQuery.data])
+  const playlistData = useMemo(() => {
+    const data = playlistQuery.data ?? []
+    return selectedTab === 'LIKE' ? data.filter((p) => p.isPublic) : data
+  }, [playlistQuery.data, selectedTab])
+
   const isLoading = playlistQuery.isLoading
   const isError = playlistQuery.isError
   const isMyEmpty = !myCdPlaylist.isLoading && (myCdPlaylist.data?.length ?? 0) === 0
@@ -218,48 +222,50 @@ const MyCdPage = () => {
               </Button>
             )}
           </Container>
-          <PlaylistCarousel
-            data={playlistData ?? []}
-            onCenterChange={handleCenterChange}
-            currentPlaylistId={currentPlaylist?.playlistId}
-            isPlaying={isPlaying}
-          />
-          <ActionBar
-            playlistId={centerItem.playlistId ?? 0}
-            creatorId={currentPlaylist.creator.creatorId}
-            stickers={playlistDetail?.cdResponse?.cdItems || []}
-            type="MY"
-            selectedTab={selectedTab}
-          />
-          <Title $isMobile={isMobile}> {centerItem.playlistName}</Title>
-          {selectedTab === 'LIKE' && playlistDetail?.creatorNickname && (
-            <Creator>{playlistDetail.creatorNickname}</Creator>
-          )}
-
-          <BottomWrapper>
-            <ProgressBar
-              trackLengths={currentPlaylist.songs.map((t) => t.youtubeLength) || []}
-              currentIndex={currentTrackIndex}
-              onClick={handleProgressClick}
-            />
-
-            <ControlBar
+          <CenterWrapper>
+            <PlaylistCarousel
+              data={playlistData ?? []}
+              onCenterChange={handleCenterChange}
+              currentPlaylistId={currentPlaylist?.playlistId}
               isPlaying={isPlaying}
-              onTogglePlay={() => {
-                if (isMobile && !isPlaying) {
-                  unmuteOnce()
-                }
-
-                if (isPlaying) {
-                  pause()
-                } else {
-                  play()
-                }
-              }}
-              onNext={nextTrack}
-              onPrev={prevTrack}
             />
-          </BottomWrapper>
+            <ActionBar
+              playlistId={centerItem.playlistId ?? 0}
+              creatorId={currentPlaylist.creator.creatorId}
+              stickers={playlistDetail?.cdResponse?.cdItems || []}
+              type="MY"
+              selectedTab={selectedTab}
+            />
+            <Title $isMobile={isMobile}> {centerItem.playlistName}</Title>
+            {selectedTab === 'LIKE' && playlistDetail?.creatorNickname && (
+              <Creator>{playlistDetail.creatorNickname}</Creator>
+            )}
+
+            <BottomWrapper>
+              <ProgressBar
+                trackLengths={currentPlaylist.songs.map((t) => t.youtubeLength) || []}
+                currentIndex={currentTrackIndex}
+                onClick={handleProgressClick}
+              />
+
+              <ControlBar
+                isPlaying={isPlaying}
+                onTogglePlay={() => {
+                  if (isMobile && !isPlaying) {
+                    unmuteOnce()
+                  }
+
+                  if (isPlaying) {
+                    pause()
+                  } else {
+                    play()
+                  }
+                }}
+                onNext={nextTrack}
+                onPrev={prevTrack}
+              />
+            </BottomWrapper>
+          </CenterWrapper>
         </>
       )}
     </div>
@@ -277,6 +283,10 @@ const Container = styled.div`
 const Title = styled.p<{ $isMobile?: boolean }>`
   ${({ theme }) => theme.FONT.headline1};
   padding-top: ${({ $isMobile }) => ($isMobile ? '24px' : '40px')};
+
+  @media (min-height: 899px) {
+    padding-top: 56px;
+  }
 `
 
 const BottomWrapper = styled.div`
@@ -318,3 +328,13 @@ const CenterContent = styled.div`
   ${flexColCenter};
   text-align: center;
 `
+
+const CenterWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+
+  @media (min-height: 899px) {
+    margin-top: 80px;
+  }
+`

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

@@ -18,8 +18,9 @@ const CustomizeStep3 = ({ currentCdId }: { currentCdId: number | null }) => {
 
   const { data, isLoading, isError } = useFinalCdCustom(currentCdId as number)
 
-  const moveToTracklist = () => {
-    queryClient.invalidateQueries({ queryKey: ['playlistDetail', currentCdId] })
+  const moveToTracklist = async () => {
+    await queryClient.refetchQueries({ queryKey: ['playlistDetail', currentCdId] })
+    await queryClient.refetchQueries({ queryKey: ['myCdList', 'RECENT'] })
     navigate(`/mypage/${currentCdId}/tracklist`, {
       state: { isFromMyCdList: true },
     })

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

@@ -63,7 +63,7 @@ const Unregister = () => {
   }
 
   return (
-    <>
+    <UnregisterWrap>
       <SubHeader title="탈퇴하기" />
       <TermsContainer>
         <li>
@@ -130,7 +130,7 @@ const Unregister = () => {
         </li>
       </TermsContainer>
       <TermsContainer>
-        <li>
+        <LastTerms>
           <h2>제6조 (기타)</h2>
           <TermsItems>
             <li>
@@ -139,7 +139,7 @@ const Unregister = () => {
             </li>
             <li>본 약관은 2025년 11월 7일부터 시행합니다.</li>
           </TermsItems>
-        </li>
+        </LastTerms>
       </TermsContainer>
 
       <BottomCraWrap>
@@ -159,17 +159,25 @@ const Unregister = () => {
         onConfirm={modal.onConfirm}
         onCancel={modal.onCancel}
       />
-    </>
+    </UnregisterWrap>
   )
 }
 
 export default Unregister
 
+const UnregisterWrap = styled.div`
+  position: relative;
+`
+
+const LastTerms = styled.li`
+  margin-bottom: 30px;
+`
+
 const BottomCraWrap = styled.div`
-  position: absolute;
-  left: 50%;
-  bottom: 34px;
-  transform: translateX(-50%);
+  position: sticky;
+  bottom: 0;
   ${flexRowCenter}
   width: 100%;
+  background-color: ${({ theme }) => theme.COLOR['gray-900']};
+  padding-bottom: 34px;
 `

src/widgets/playlist/PlayButton.tsx

@@ -13,7 +13,7 @@ interface PlayButtonProps {
 const PlayButton = ({ onPlayPause, show, isPlaying }: PlayButtonProps) => {
   return (
     <Wrapper $show={show}>
-      <SvgButton icon={isPlaying ? Pause : Start} width={32} height={32} onClick={onPlayPause} />
+      <SvgButton icon={isPlaying ? Start : Pause} width={32} height={32} onClick={onPlayPause} />
     </Wrapper>
   )
 }