Skip to content

[fix] 둘러보기 프로그레스 바 미작동 오류 해결 #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maylh merged 2 commits into from
Sep 12, 2025
Merged

[fix] 둘러보기 프로그레스 바 미작동 오류 해결 #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95762b0
fix: progress bar, pause button 오류 해결 (#102)
maylh Sep 11, 2025
df79391
fix: anonymous_token 세션 스토리지로 관리하도록 수정 (#102)
maylh Sep 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@
// 비회원일 경우 API 호출을 위한 익명 토큰 발급
// TODO: 토큰 만료됐을 경우 응답 체크해서 해당 값일 경우 토큰 재발급
const checkAnonymousLogin = () => {
if (!isLogin) {
const token = sessionStorage.getItem('anonymous_token')
if (!isLogin && !token) {
mutate(undefined, {
onSuccess: (response) => {
localStorage.setItem('anonymous_token', response)
sessionStorage.setItem('anonymous_token', response)
},
})
}
Expand Down Expand Up @@ -82,14 +83,14 @@

// 익명 토큰 발급
if (['/login', '/login/callback'].includes(pathname)) {
localStorage.removeItem('anonymous_token')
sessionStorage.removeItem('anonymous_token')
} else {
checkAnonymousLogin()
}

// 네비게이션 미노출 여부 확인
setIsNavVisible(!getHideNav(pathname))
}, [location.pathname])

Check warning on line 93 in src/App.tsx

View workflow job for this annotation

GitHub Actions / Build and Lint 

React Hook useEffect has missing dependencies: 'checkAnonymousLogin' and 'location'. Either include them or remove the dependency array

return (
<RootWrapper>
Expand Down
2 changes: 1 addition & 1 deletion src/entities/playlist/model/usePlaylists.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const useShufflePlaylists = (size: number = 5) => {
}
return undefined
},
enabled: !!useAuthStore.getState().accessToken || !!localStorage.getItem('anonymous_token'),
enabled: !!useAuthStore.getState().accessToken || !!sessionStorage.getItem('anonymous_token'),
})
}

Expand Down
2 changes: 1 addition & 1 deletion src/features/auth/store/authStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const useAuthStore = create<AuthState>()(
accessToken: '',

setLogin: (response) => {
localStorage.removeItem('anonymous_token')
sessionStorage.removeItem('anonymous_token')
const { userId, username, userProfileImageUrl, jwtAccessToken } = response
set({
userInfo: { userId, username, userProfileImageUrl },
Expand Down
53 changes: 8 additions & 45 deletions src/pages/discover/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useParams } from 'react-router-dom'
import type { YouTubeEvent } from 'react-youtube'

import styled from 'styled-components'
Expand Down Expand Up @@ -34,8 +34,6 @@
const playerRef = useRef<YT.Player | null>(null)
const [showCoachmark, setShowCoachmark] = useState(false)
const [isMuted, setIsMuted] = useState<boolean | null>(null)
const [, setCurrentIndex] = useState(0)
const navigate = useNavigate()

// 코치마크
useEffect(() => {
Expand All @@ -62,7 +60,7 @@
} = useShufflePlaylists()

// shuffleData에서 실제 playlist 배열만 추출
const shufflePlaylists = shuffleData?.pages.flatMap((page) => page.content) ?? []

Check warning on line 63 in src/pages/discover/index.tsx

View workflow job for this annotation

GitHub Actions / Build and Lint 

The 'shufflePlaylists' logical expression could make the dependencies of useMemo Hook (at line 97) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'shufflePlaylists' in its own useMemo() Hook

// PlaylistDetailResponse → PlaylistInfo 변환
const playlistAsInfo = useMemo(() => {
Expand All @@ -86,6 +84,7 @@
if (!playlistAsInfo) {
return shufflePlaylists
}

// URL에서 가져온 플레이리스트를 playlistsData 배열에 추가
// 기존에 shufflePlaylists에 있는 경우, 순서를 변경하지 않고 추가
const existingPlaylist = shufflePlaylists.find(
Expand All @@ -97,13 +96,7 @@
return [playlistAsInfo, ...shufflePlaylists]
}, [playlistAsInfo, shufflePlaylists])

// 플레이리스트 ID로 인덱스를 찾는 함수를 추가합니다.
const getPlaylistIndexById = useCallback(
(id: number) => {
return playlistsData.findIndex((p) => p.playlistId === id)
},
[playlistsData]
)
console.log(playlistsData)

Check warning on line 99 in src/pages/discover/index.tsx

View workflow job for this annotation

GitHub Actions / Build and Lint 

Unexpected console statement. Only these console methods are allowed: warn, error
Copy link

@gemini-code-assist gemini-code-assist bot Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

디버깅을 위해 사용하신 것으로 보이는 console.log가 코드에 남아있습니다. 불필요한 로그는 프로덕션 빌드에 포함되지 않도록 제거하는 것이 좋습니다.


const videoId = currentPlaylist
? getVideoId(currentPlaylist.songs[currentTrackIndex]?.youtubeUrl)
Expand All @@ -113,28 +106,16 @@

// 최초 playlist 초기화
useEffect(() => {
if (playlistsData.length > 0 && isReady) {
const initialIndex = getPlaylistIndexById(Number(playlistId))
const initialPlaylist = playlistsData[initialIndex > -1 ? initialIndex : 0]
if (!currentPlaylist && playlistsData.length > 0 && isReady) {
const initialPlaylist =
playlistsData.find((p) => p.playlistId === Number(playlistId)) || playlistsData[0]

setCurrentIndex(initialIndex > -1 ? initialIndex : 0)
setPlaylist(initialPlaylist, 0, 0)
}
}, [playlistsData, playlistId, getPlaylistIndexById, setPlaylist])

// // URL을 현재 선택된 플레이리스트로 동기화
// useEffect(() => {
// if (currentPlaylist) {
// const id = currentPlaylist.playlistId
// if (Number(playlistId) !== id) {
// navigate(`/discover/${id}`, { replace: true })
// }
// }
// }, [currentPlaylist, playlistId, navigate])
}, [playlistsData, currentPlaylist, playlistId, setPlaylist])

Check warning on line 115 in src/pages/discover/index.tsx

View workflow job for this annotation

GitHub Actions / Build and Lint 

React Hook useEffect has a missing dependency: 'isReady'. Either include it or remove the dependency array

useEffect(() => {
if (!currentPlaylist || !isPlaying) return

startPlaylist(currentPlaylist.playlistId)

const confirmTimer = setTimeout(() => {
Expand Down Expand Up @@ -172,34 +153,16 @@
// 캐러셀 스와이프 시 현재 플레이리스트 업데이트
const handleSelectPlaylist = useCallback(
(index: number) => {
// 현재 인덱스 상태를 업데이트
setCurrentIndex(index)

const selectedPlaylist = playlistsData[index]
if (selectedPlaylist && currentPlaylist?.playlistId !== selectedPlaylist.playlistId) {
setPlaylist(selectedPlaylist, 0, 0)

// URL을 동기화
const newId = selectedPlaylist.playlistId
if (Number(playlistId) !== newId) {
navigate(`/discover/${newId}`, { replace: true })
}
}

if (index === playlistsData.length - 1 && hasNextPage && !isFetchingNextPage) {
fetchNextPage()
}
},
[
setPlaylist,
currentPlaylist,
playlistsData,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
navigate,
playlistId,
]
[setPlaylist, currentPlaylist, playlistsData, fetchNextPage, hasNextPage, isFetchingNextPage]
)

const handlePlayerStateChange = useCallback(
Expand Down
4 changes: 2 additions & 2 deletions src/shared/api/instance.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const axiosInstance = axios.create({
axiosInstance.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
const { isLogin, accessToken } = useAuthStore.getState()
const token = isLogin ? accessToken : localStorage.getItem('anonymous_token')
const token = isLogin ? accessToken : sessionStorage.getItem('anonymous_token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
Expand Down Expand Up @@ -57,7 +57,7 @@ axiosInstance.interceptors.response.use(

// 서버 응답 형태 확인 (string vs object)
const token = typeof res.data === 'string' ? res.data : res.data.token
localStorage.setItem('anonymous_token', token)
sessionStorage.setItem('anonymous_token', token)

// 원래 요청 재시도
if (error.config) {
Expand Down
Loading