[fix]audio url을 클릭 시에만 생성하도록 변경

[fix]audio url을 클릭 시에만 생성하도록 변경

Author: nyoung113

.gitignore

@@ -48,3 +48,9 @@ next-env.d.ts
 .env.production.local
 .env.local
 
+# workbox 캐싱 파일 무시
+/public/workbox-*
+
+# 서비스 워커 소스맵 무시
+/public/sw.js.map
+

.husky/pre-push

@@ -1,6 +1,3 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 # push하기 전에 빌드 실행
 npm run build
 if [ $? -eq 0 ]; then

next.config.mjs

@@ -7,6 +7,7 @@ const withPWA = nextPWA({
 
 const nextConfig = {
   reactStrictMode: true,
+  productionBrowserSourceMaps: false,
   output: 'standalone',
   images: {
     remotePatterns: [

public/sw.js

@@ -4,7 +4,9 @@ import useDeviceType from '@/hooks/useDeviceType';
 import clsx from 'clsx';
 import SpeakerSvg from '../svg-component/SpeakerSvg';
 import useAudioPlayer from '@/hooks/useAudioPlayer';
-import useGetTTSUrl from '@/hooks/query/useGetTTSUrl';
+import { getTTSUrl } from '@/fetcher';
+import { useQueryClient } from '@tanstack/react-query';
+import QUERY_KEYS from '@/constants/queryKey';
 
 type Props = {
   id: string;
@@ -13,14 +15,27 @@ type Props = {
 
 export default function TTSPlayer({ diacritic, id }: Props) {
   const deviceType = useDeviceType();
-  const { data: audioUrl } = useGetTTSUrl(id);
+  const queryClient = useQueryClient();
   const { audioRef, startAudio, isPlaying } = useAudioPlayer(id);
 
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleClick = async (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
 
-    if (audioUrl) {
-      startAudio(audioUrl);
+    try {
+      // Fixme: 타입 추론되도록 만들고 싶어요
+      const audioUrl = await queryClient.fetchQuery({
+        queryKey: [QUERY_KEYS.TTS_KEY, id],
+        queryFn: () => getTTSUrl(id),
+        gcTime: Infinity,
+        staleTime: Infinity,
+      });
+      if (audioUrl) {
+        startAudio(audioUrl);
+      }
+    } catch {
+      // Note: 오디오 에러는 서비스에 큰 지장을 주지 않기 때문에 에러 전파 X
+      // Todo: 추후 여러번 발생할 때 리포팅 할 수 있는 Sentry를 연동하면 좋겠다.
+      console.error('오디오 url 생성 중 에러');
     }
   };
 

public/sw.js.map

@@ -36,7 +36,7 @@ export default function QuizResult({
   const router = useRouter();
   const { data } = useAuthQuery();
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const isLoggedIn = !data?.error ?? false;
+  const isLoggedIn = data?.error ?? false;
   const isGuest = quizResultId === 'guest';
   const isScrolled = useScroll();
   const [isOpen, setIsOpen] = useState(

public/workbox-e43f5367.js public/workbox-bd7e3b9b.js

@@ -19,7 +19,7 @@ export default function QuizResultDetailWord({ data, correctWords }: Props) {
 
   const { data: authData } = useAuthQuery();
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const isLoggedIn = !authData?.error ?? false;
+  const isLoggedIn = authData?.error ?? false;
   const { optimisticLikeState, handleSubLike, handleAddLike } =
     useOptimisticLike({
       wordId: data.wordId,

public/workbox-e43f5367.js.map public/workbox-bd7e3b9b.js.map

@@ -6,6 +6,8 @@ const useGetTTSUrl = (id: string) => {
   return useQuery({
     queryKey: [QUERY_KEYS.TTS_KEY, id],
     queryFn: () => getTTSUrl(id),
+    gcTime: Infinity,
+    staleTime: Infinity,
   });
 };