Merge pull request #116 from Devminjeong-eum/feat/DEV-136

[DEV-136] TTS 적용

Author: nyoung113

next.config.mjs

@@ -22,6 +22,12 @@ const nextConfig = {
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'dev-malssami-bucket.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
 };

public/sw.js.map

@@ -9,6 +9,7 @@ import PronunciationDetail from '@/components/pages/detail/PronunciationDetail.t
 import { ResolvingMetadata } from 'next';
 import { DetailKoreanAlertIconSvg } from '@/components/svg-component/DetailKoreanAlertIconSvg.tsx';
 import React from 'react';
+import DetailTTSButton from '@/components/pages/detail/DetailTTSButton.tsx';
 
 // eslint-disable-next-line react-refresh/only-export-components
 export async function generateMetadata(
@@ -103,19 +104,24 @@ export default async function WordsPage({
         <div>
           <div className="flex items-start justify-between pt-[18px] pb-[26px]">
             <div className="flex flex-col">
-              <h1 className="text-[30px] align-bottom font-normal text-white">
-                {name}
-              </h1>
+              <div className="flex items-center">
+                <h1 className="text-[30px] align-bottom font-normal text-white">
+                  {name}
+                </h1>
+                <DetailTTSButton id={id} />
+              </div>
               <span className="text-[#E1E2F8] font-normal">
                 {/*{NOTE: 대표 발음은 스프레드시트의 첫 번째 발음으로 합니다}*/}
                 {pronunciation[0]}
               </span>
             </div>
-            <LikeButton
-              initialLike={isLike}
-              initialLikeCount={likeCount}
-              wordId={id}
-            />
+            <div className="self-center">
+              <LikeButton
+                initialLike={isLike}
+                initialLikeCount={likeCount}
+                wordId={id}
+              />
+            </div>
           </div>
           <div className="text-[#F4F5FF] text-xs flex gap-[5px] pb-2.5">
             <DetailKoreanAlertIconSvg />

src/app/words/[wordName]/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import useGetTTSUrl from '@/hooks/query/useGetTTSUrl.ts';
+import DetailSoundIconSvg from '@/components/svg-component/DetailSoundIconSvg.tsx';
+
+import React from 'react';
+import clsx from 'clsx';
+import useAudioPlayer from '@/hooks/useAudioPlayer.ts';
+
+interface Props {
+  id: string;
+}
+export default function DetailTTSButton({ id }: Props) {
+  const { data: audioUrl } = useGetTTSUrl(id);
+  const { audioRef, startAudio, isPlaying } = useAudioPlayer(id);
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+
+    if (audioUrl) {
+      startAudio(audioUrl);
+    }
+  };
+
+  return (
+    <div
+      className="ml-2 flex items-center justify-center w-[34px] h-[34px]"
+      onClick={handleClick}
+    >
+      <DetailSoundIconSvg />
+      <audio ref={audioRef} loop={false} />
+      <div
+        className={clsx(
+          'absolute opacity-25 w-[34px] h-[34px] rounded-full cursor-pointer border bg-[#6C71E2] hover:bg-[#A19AF9]',
+          isPlaying ? 'border-[#FFFFFF]' : 'border-[#A19AF9]',
+        )}
+      />
+    </div>
+  );
+}

src/components/pages/detail/DetailTTSButton.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import DetailLikeSvg from '@/components/svg-component/DetailLikeSvg.tsx';
-import DetailLikeActiveSvg from '@/components/svg-component/DetailLikeActiveSvg.tsx';
 import { useOptimisticLike } from '@/hooks/useOptimisticLike.ts';
 import useAuthQuery from '@/hooks/query/useAuthQuery.ts';
 import { useState } from 'react';
 import LoginAlertModal from '@/components/common/LoginAlertModal.tsx';
+import DetailLikeSvg from '@/components/svg-component/DetailLikeSvg.tsx';
 
 interface Props {
   wordId: string;
@@ -47,13 +46,9 @@ export default function LikeButton({
     <>
       <div className="flex flex-col justify-center items-center cursor-pointer">
         <button onClick={() => handleClick(optimisticLikeState.isLike)}>
-          {optimisticLikeState.isLike ? (
-            <DetailLikeActiveSvg />
-          ) : (
-            <DetailLikeSvg />
-          )}
+          <DetailLikeSvg isLike={optimisticLikeState.isLike} />
         </button>
-        <span className="text-xs text-[#E1E2F8] pt-1">
+        <span className="text-xs font-medium text-[#E1E2F8] pt-1">
           {optimisticLikeState.likeCount}
         </span>
       </div>

src/components/pages/detail/LikeButton.tsx

@@ -1,17 +1,25 @@
-export default function DetailLikeSvg() {
+interface Props {
+  isLike: boolean;
+}
+export default function DetailLikeSvg({ isLike }: Props) {
   return (
     <svg
-      width="23"
-      height="21"
-      viewBox="0 0 23 21"
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M2.8722 11.7978L10.8066 19.3408L10.8066 19.3408C10.9987 19.5234 11.0948 19.6148 11.1982 19.6635C11.3893 19.7535 11.6107 19.7535 11.8018 19.6635C11.9052 19.6148 12.0013 19.5234 12.1934 19.3408L20.1278 11.7978C22.3296 9.70463 22.5977 6.28762 20.7493 3.87662L20.3613 3.37057C18.1322 0.463033 13.6159 0.946756 12.0532 4.26042C11.8326 4.72804 11.1674 4.72804 10.9468 4.26042C9.38407 0.946755 4.86775 0.463033 2.63865 3.37057L2.25068 3.87662C0.402263 6.28762 0.670368 9.70463 2.8722 11.7978Z"
+        d="M7.45067 16.9082L14.4033 23.4395C14.5078 23.5376 14.56 23.5867 14.6116 23.6205C14.8474 23.7751 15.1526 23.7751 15.3884 23.6205C15.44 23.5867 15.4922 23.5376 15.5967 23.4395L22.5493 16.9082C24.5055 15.0706 24.743 12.0466 23.0978 9.92607L22.7885 9.52734C20.8203 6.99058 16.8696 7.41601 15.4867 10.3137C15.2913 10.723 14.7087 10.723 14.5133 10.3137C13.1304 7.41601 9.17972 6.99058 7.21154 9.52735L6.90219 9.92607C5.25695 12.0466 5.4945 15.0706 7.45067 16.9082Z"
         fill="#4752CD"
         stroke="#4752CD"
       />
+      <path
+        d="M7.45067 16.9082L14.4033 23.4395C14.5078 23.5376 14.56 23.5867 14.6116 23.6205C14.8474 23.7751 15.1526 23.7751 15.3884 23.6205C15.44 23.5867 15.4922 23.5376 15.5967 23.4395L22.5493 16.9082C24.5055 15.0706 24.743 12.0466 23.0978 9.92607L22.7885 9.52734C20.8203 6.99058 16.8696 7.41601 15.4867 10.3137C15.2913 10.723 14.7087 10.723 14.5133 10.3137C13.1304 7.41601 9.17972 6.99058 7.21154 9.52735L6.90219 9.92607C5.25695 12.0466 5.4945 15.0706 7.45067 16.9082Z"
+        fill={isLike ? '#858EEA' : '#4752CD'}
+        stroke="#4752CD"
+      />
     </svg>
   );
 }

src/components/svg-component/DetailLikeActiveSvg.tsx

@@ -0,0 +1,26 @@
+export default function DetailSoundIconSvg() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.46532 11.6089C2.87114 10.6186 2.87114 9.38143 3.46532 8.39114C3.64663 8.08895 3.94701 7.87726 4.29258 7.80815L5.70344 7.52598C5.78749 7.50917 5.86326 7.46409 5.91814 7.39824L7.52449 5.47061C8.55923 4.22893 9.07659 3.60809 9.5383 3.77524C10 3.9424 10 4.75056 10 6.36687L10 13.6331C10 15.2494 10 16.0576 9.5383 16.2248C9.0766 16.3919 8.55923 15.7711 7.52449 14.5294L5.91814 12.6018C5.86326 12.5359 5.78749 12.4908 5.70344 12.474L4.29258 12.1918C3.94701 12.1227 3.64663 11.9111 3.46532 11.6089Z"
+        fill="#FBFCFE"
+      />
+      <path
+        d="M12.9464 7.05376C13.7238 7.83114 14.1625 8.88425 14.1668 9.98363C14.1711 11.083 13.7408 12.1395 12.9696 12.923"
+        stroke="#FBFCFE"
+        strokeLinecap="round"
+      />
+      <path
+        d="M15.5472 5.28599C16.791 6.5298 17.4929 8.21478 17.4998 9.97378C17.5067 11.7328 16.8182 13.4232 15.5842 14.6768"
+        stroke="#FBFCFE"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}