From ccf3999a93f99a6767c93f4a5b6cf79ddee3bd5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=89=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=92=E1=85=B1?= <whistle_js@naver.com>
Date: Mon, 19 Feb 2024 02:41:05 +0900
Subject: [PATCH] =?UTF-8?q?feature-074:=20=EB=AA=A8=EB=8D=B8=EB=A7=81=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EC=A7=84=ED=96=89=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   7 +-
 package.json                                  |   1 +
 src/assets/icons/pause.svg                    |   5 +
 src/components/Home/SearchYoutube.tsx         |   9 +-
 .../SummaryDetailBox/SummaryDetailBox.tsx     | 104 +++++++++++++++---
 .../ScriptViewer/ScriptViewer.tsx             |  50 +++++++--
 .../SummaryScriptBox/ToolBox/ToolBox.tsx      |   5 +-
 .../ModelController/ModelController.tsx       |  34 ++++--
 .../layout/header/alarm/AlarmItem.tsx         |  30 ++++-
 .../layout/header/alarm/AlarmList.tsx         |   4 +-
 src/components/layout/header/alarm/index.tsx  |  22 +++-
 src/models/video.ts                           |   5 +-
 src/stores/summary.ts                         |  10 ++
 src/styles/SummaryPage.ts                     |  31 +++++-
 src/utils/date.ts                             |  19 ++++
 yarn.lock                                     |   5 +
 16 files changed, 292 insertions(+), 49 deletions(-)
 create mode 100644 src/assets/icons/pause.svg

diff --git a/index.html b/index.html
index 8769ef3..5b45a52 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,11 @@
     <div id="root"></div>
 
     <script type="module" src="/src/main.tsx"></script>
-    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
+    <script
+      src="https://developers.kakao.com/sdk/js/kakao.js"
+      async
+      defer
+    ></script>
+    <script src="https://www.youtube.com/iframe_api" async defer></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index 0a19650..70b7584 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^20.11.17",
     "@types/react-modal": "^3.16.3",
+    "@types/youtube": "^0.0.50",
     "axios": "^1.6.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg
new file mode 100644
index 0000000..d30f950
--- /dev/null
+++ b/src/assets/icons/pause.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 18C32 25.732 25.732 32 18 32C10.268 32 4 25.732 4 18C4 10.268 10.268 4 18 4C25.732 4 32 10.268 32 18Z" fill="#E9FF3F"/>
+<path d="M13 12H17V24H13V12Z" fill="#1E1E1E"/>
+<path d="M19 12H23V24H19V12Z" fill="#1E1E1E"/>
+</svg>
diff --git a/src/components/Home/SearchYoutube.tsx b/src/components/Home/SearchYoutube.tsx
index 0ef4b36..779cb9b 100644
--- a/src/components/Home/SearchYoutube.tsx
+++ b/src/components/Home/SearchYoutube.tsx
@@ -91,6 +91,13 @@ const SearchYoutube = ({ searchRef }: Props) => {
     }
   };
 
+  const handleChangeInput: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setInputLink(e.target.value);
+    setVideoLink(null);
+    setStatus('NONE');
+    setProgress(0);
+  };
+
   const handleClickCreateVideoButton = async () => {
     if (!modelingData) return;
 
@@ -153,7 +160,7 @@ const SearchYoutube = ({ searchRef }: Props) => {
                 type="text"
                 value={inputLink}
                 disabled={status === 'CONTINUE'}
-                onChange={(e) => setInputLink(e.target.value)}
+                onChange={handleChangeInput}
                 placeholder="https://youtube.com/..."
               />
             </div>
diff --git a/src/components/SummaryPage/SummaryDetailBox/SummaryDetailBox.tsx b/src/components/SummaryPage/SummaryDetailBox/SummaryDetailBox.tsx
index 4714388..8358d15 100644
--- a/src/components/SummaryPage/SummaryDetailBox/SummaryDetailBox.tsx
+++ b/src/components/SummaryPage/SummaryDetailBox/SummaryDetailBox.tsx
@@ -1,4 +1,5 @@
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useEffect, useRef } from 'react';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { updateVideoCategoryIdAPI } from '@/apis/videos';
 
@@ -6,8 +7,10 @@ import { IVideo } from '@/models/video';
 
 import {
   summaryIsEditingViewState,
+  summaryPlaySubHeadingIdState,
   summaryUpdateVideoState,
   summaryVideoState,
+  summaryVideoTimeState,
 } from '@/stores/summary';
 import { toastListState } from '@/stores/toast';
 
@@ -24,9 +27,15 @@ type Props = {
 };
 
 const SummaryDetailBox = ({ onRefresh }: Props) => {
+  const player = useRef<YT.Player>();
+
   const summaryVideo = useRecoilValue(summaryVideoState) as IVideo;
   const summaryUpdateVideo = useRecoilValue(summaryUpdateVideoState);
+  const setSummaryVideoTime = useSetRecoilState(summaryVideoTimeState);
   const isEditingView = useRecoilValue(summaryIsEditingViewState);
+  const [playSubHeadingId, setPlaySubHeadingId] = useRecoilState(
+    summaryPlaySubHeadingIdState,
+  );
   const [toastList, setToastList] = useRecoilState(toastListState);
 
   const subHeading = isEditingView
@@ -50,6 +59,75 @@ const SummaryDetailBox = ({ onRefresh }: Props) => {
     }
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleMessage = (e: any) => {
+    if (e.origin === 'https://www.youtube.com') {
+      try {
+        const { info } = JSON.parse(e.data);
+
+        if (!info) return;
+
+        setPlaySubHeadingId((id) => {
+          const item = subHeading.find((s) => s.id === id);
+
+          // END or PAUSE
+          if ([0, 2].includes(info.playerState)) {
+            return -1;
+          }
+
+          if (item) {
+            if (
+              item.start_time > info.currentTime ||
+              info.currentTime > item.end_time
+            )
+              return -1;
+          }
+
+          return id;
+        });
+
+        setSummaryVideoTime(info.currentTime);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (player.current) return;
+
+    player.current = new YT.Player('player', {
+      videoId: summaryVideo.youtube_id,
+    });
+
+    window.onmessage = handleMessage;
+
+    return () => {
+      setSummaryVideoTime(0);
+      setPlaySubHeadingId(-1);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [summaryVideo]);
+
+  useEffect(() => {
+    if (player.current) {
+      if (playSubHeadingId > -1) {
+        const item = subHeading.find((s) => s.id === playSubHeadingId);
+
+        if (item) {
+          player.current.seekTo(item.start_time, true);
+          player.current.playVideo();
+        }
+      } else if (playSubHeadingId === -2) {
+        // 영상 멈추기
+        player.current.pauseVideo();
+
+        setPlaySubHeadingId(-1);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playSubHeadingId]);
+
   return (
     <div
       style={{
@@ -73,19 +151,7 @@ const SummaryDetailBox = ({ onRefresh }: Props) => {
           ))}
         </div>
 
-        <iframe
-          src={`https://www.youtube.com/embed/QXDiRtANAzA?${
-            isEditingView && 'start=10&end=18&autoplay=1&disablekb=0'
-          }`}
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowFullScreen
-          style={{
-            margin: '20px 0',
-            width: '100%',
-            aspectRatio: '16 / 9',
-            borderRadius: 16,
-          }}
-        />
+        <div id="player" />
 
         <CategorySelectBox
           disabled={isEditingView}
@@ -104,7 +170,15 @@ const SummaryDetailBox = ({ onRefresh }: Props) => {
           }}
         >
           {subHeading.map((item, i) => (
-            <div key={item.id} className="subtitle">
+            <div
+              key={item.id}
+              className={`subtitle ${
+                playSubHeadingId > -1 &&
+                playSubHeadingId !== item.id &&
+                'disabled'
+              }`}
+              onClick={() => setPlaySubHeadingId(item.id)}
+            >
               <span className="subtitle-index">{i + 1}</span>
               <span className="subtitle-text">{item.name}</span>
             </div>
diff --git a/src/components/SummaryPage/SummaryScriptBox/ScriptViewer/ScriptViewer.tsx b/src/components/SummaryPage/SummaryScriptBox/ScriptViewer/ScriptViewer.tsx
index 9a85f68..ecbbefe 100644
--- a/src/components/SummaryPage/SummaryScriptBox/ScriptViewer/ScriptViewer.tsx
+++ b/src/components/SummaryPage/SummaryScriptBox/ScriptViewer/ScriptViewer.tsx
@@ -1,15 +1,20 @@
 import { useMemo } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
+import PauseIcon from '@/assets/icons/pause.svg?react';
 import PlayIcon from '@/assets/icons/play.svg?react';
 
 import { IVideo } from '@/models/video';
 
 import { summarySearchIsOpenState } from '@/stores/ui';
 import { summaryTransformModalState } from '@/stores/modal';
-import { summaryVideoState } from '@/stores/summary';
+import {
+  summaryPlaySubHeadingIdState,
+  summaryVideoState,
+} from '@/stores/summary';
 
 import { escapeHTML } from '@/utils/string';
+import { formatTime } from '@/utils/date';
 
 type Props = {
   keyword: string;
@@ -19,6 +24,9 @@ const ScriptViewer = ({ keyword }: Props) => {
   const summaryVideo = useRecoilValue(summaryVideoState) as IVideo;
   const searchIsOpen = useRecoilValue(summarySearchIsOpenState);
   const transformModalIsOpen = useRecoilValue(summaryTransformModalState);
+  const [playSubHeadingId, setPlaySubHeadingId] = useRecoilState(
+    summaryPlaySubHeadingIdState,
+  );
 
   const scriptList = useMemo(() => {
     return summaryVideo.subHeading.map(({ name, content, ...others }) => {
@@ -48,6 +56,14 @@ const ScriptViewer = ({ keyword }: Props) => {
     });
   }, [summaryVideo, keyword, searchIsOpen, transformModalIsOpen]);
 
+  const handleClickPlayButton = (id: number) => {
+    if (playSubHeadingId === id) {
+      setPlaySubHeadingId(-2);
+    } else {
+      setPlaySubHeadingId(id);
+    }
+  };
+
   return (
     <div className="script-container">
       {scriptList.map((script) => (
@@ -55,13 +71,21 @@ const ScriptViewer = ({ keyword }: Props) => {
           <div
             style={{
               display: 'flex',
-              alignItems: 'center',
+              alignItems: 'flex-start',
               justifyContent: 'space-between',
+              gap: 4,
             }}
           >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-              <span className="play-button">
-                <PlayIcon width={36} height={36} />
+            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4 }}>
+              <span
+                className="play-button"
+                onClick={() => handleClickPlayButton(script.id)}
+              >
+                {script.id === playSubHeadingId ? (
+                  <PauseIcon width={36} height={36} />
+                ) : (
+                  <PlayIcon width={36} height={36} />
+                )}
               </span>
 
               <span
@@ -70,9 +94,17 @@ const ScriptViewer = ({ keyword }: Props) => {
               />
             </div>
 
-            <span className="script-badge">
-              {script.start_time}-{script.end_time}
-            </span>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                minHeight: 36,
+              }}
+            >
+              <span className="script-badge">
+                {formatTime(script.start_time)}-{formatTime(script.end_time)}
+              </span>
+            </div>
           </div>
 
           <div
diff --git a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx
index 541c0e5..1967139 100644
--- a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx
+++ b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { getVideoAPI, updateVideoAPI } from '@/apis/videos';
 
@@ -9,6 +9,7 @@ import { IVideo } from '@/models/video';
 
 import {
   summaryIsEditingViewState,
+  summaryPlaySubHeadingIdState,
   summaryUpdateVideoState,
   summaryVideoState,
 } from '@/stores/summary';
@@ -25,6 +26,7 @@ type Props = {
 
 const ToolBox = ({ onRefresh, onChangeKeyword }: Props) => {
   const summaryVideo = useRecoilValue(summaryVideoState) as IVideo;
+  const setPlaySubHeadingId = useSetRecoilState(summaryPlaySubHeadingIdState);
   const [summaryUpdateVideo, setSummaryUpdateVideo] = useRecoilState(
     summaryUpdateVideoState,
   );
@@ -40,6 +42,7 @@ const ToolBox = ({ onRefresh, onChangeKeyword }: Props) => {
   };
 
   const handleClickModifyIcon = () => {
+    setPlaySubHeadingId(-1);
     setIsEditingView(true);
     setSummaryUpdateVideo({ ...summaryVideo });
   };
diff --git a/src/components/common/ModelController/ModelController.tsx b/src/components/common/ModelController/ModelController.tsx
index b8e9e10..90de4ea 100644
--- a/src/components/common/ModelController/ModelController.tsx
+++ b/src/components/common/ModelController/ModelController.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import {
@@ -16,11 +16,20 @@ import {
 import { createVideoAlarmAPI } from '@/apis/user';
 
 const ModelController = () => {
+  const interval = useRef<NodeJS.Timeout>();
   const [videoLink, setVideoLink] = useRecoilState(videoLinkState);
   const setModelingStatus = useSetRecoilState(modelingStatusState);
   const setModelingProgress = useSetRecoilState(modelingProgressState);
   const setModelingData = useSetRecoilState(modelingDataState);
 
+  const startInterval = () => {
+    interval.current = setInterval(() => {
+      setModelingProgress((progress) =>
+        Math.min(95, progress + Math.ceil(Math.random() * 3)),
+      );
+    }, 1000 * 5);
+  };
+
   const handleError = async () => {
     try {
       await createVideoAlarmAPI(0, 'fail', {
@@ -32,6 +41,10 @@ const ModelController = () => {
       console.error(e);
     }
 
+    if (interval.current) {
+      clearInterval(interval.current);
+    }
+
     setModelingStatus('ERROR');
     setVideoLink(null);
   };
@@ -41,10 +54,8 @@ const ModelController = () => {
 
     const callProcess1API = async () => {
       try {
-        const { videoId, progress } = (await modelingProcess1(videoLink)).data
-          .result;
+        const { videoId } = (await modelingProcess1(videoLink)).data.result;
 
-        setModelingProgress(Number(progress));
         callProcess2API(videoId);
       } catch (e) {
         console.error(e);
@@ -55,14 +66,10 @@ const ModelController = () => {
 
     const callProcess2API = async (videoId: string) => {
       try {
-        const { progress } = await (
-          await modelingProcess2({ videoId })
-        ).data.result;
-
-        setModelingProgress(Number(progress));
+        await modelingProcess2({ videoId });
 
         setTimeout(() => {
-          setModelingProgress(70);
+          setModelingProgress((progress) => Math.max(progress, 40));
           callProcess3API(videoId);
         }, 1000 * 30);
       } catch (e) {
@@ -76,6 +83,10 @@ const ModelController = () => {
       try {
         const { finalData } = (await modelingProcess3({ videoId })).data.result;
 
+        if (interval.current) {
+          clearInterval(interval.current);
+        }
+
         setModelingData(finalData);
         setModelingProgress(100);
         setModelingStatus('COMPLETE');
@@ -87,8 +98,9 @@ const ModelController = () => {
     };
 
     setModelingStatus('CONTINUE');
-    setModelingProgress(10);
+    setModelingProgress(Math.ceil(Math.random() * 5));
     callProcess1API();
+    startInterval();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [videoLink]);
 
diff --git a/src/components/layout/header/alarm/AlarmItem.tsx b/src/components/layout/header/alarm/AlarmItem.tsx
index 7a5816a..d026ac1 100644
--- a/src/components/layout/header/alarm/AlarmItem.tsx
+++ b/src/components/layout/header/alarm/AlarmItem.tsx
@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router-dom';
+
 import { IAlarm } from '@/models/alarm';
 
 import CheckIcon from '@/assets/icons/checked.svg?react';
@@ -14,9 +16,16 @@ type Props = {
   alarm: IAlarm;
   selectIdList: number[];
   onUpdateSelectIdList: (list: number[]) => void;
+  onClose: () => void;
 };
 
-const AlarmItem = ({ alarm, selectIdList, onUpdateSelectIdList }: Props) => {
+const AlarmItem = ({
+  alarm,
+  selectIdList,
+  onUpdateSelectIdList,
+  onClose,
+}: Props) => {
+  const navigate = useNavigate();
   const isSelected = selectIdList.indexOf(alarm.alarm_id) > -1;
 
   const type = () => {
@@ -49,7 +58,18 @@ const AlarmItem = ({ alarm, selectIdList, onUpdateSelectIdList }: Props) => {
     return `${second}초`;
   };
 
-  const handleClickRemoveButton = () => {
+  const handleClick = () => {
+    if (alarm.type === 'notice') {
+      navigate('/guide');
+      onClose();
+    }
+  };
+
+  const handleClickRemoveButton: React.MouseEventHandler<HTMLButtonElement> = (
+    e,
+  ) => {
+    e.stopPropagation();
+
     if (selectIdList.indexOf(alarm.alarm_id) < 0) {
       onUpdateSelectIdList([...selectIdList, alarm.alarm_id]);
     } else {
@@ -58,7 +78,11 @@ const AlarmItem = ({ alarm, selectIdList, onUpdateSelectIdList }: Props) => {
   };
 
   return (
-    <Container className={`${alarm.is_confirm && 'read'}`}>
+    <Container
+      className={`${alarm.is_confirm && 'read'}`}
+      style={{ cursor: alarm.type === 'notice' ? 'pointer' : 'default' }}
+      onClick={handleClick}
+    >
       <div className="top">
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <div className={`color ${alarm.state === 'fail' && 'error'}`} />
diff --git a/src/components/layout/header/alarm/AlarmList.tsx b/src/components/layout/header/alarm/AlarmList.tsx
index 8f04e4c..72336a5 100644
--- a/src/components/layout/header/alarm/AlarmList.tsx
+++ b/src/components/layout/header/alarm/AlarmList.tsx
@@ -12,9 +12,10 @@ import AlarmItem from './AlarmItem';
 type Props = {
   alarmList: IAlarm[];
   onRefresh: () => void;
+  onClose: () => void;
 };
 
-const AlarmList = ({ alarmList, onRefresh }: Props) => {
+const AlarmList = ({ alarmList, onRefresh, onClose }: Props) => {
   const [selectIdList, setSelectIdList] = useState<number[]>([]);
   const count = alarmList.filter((item) => !item.is_confirm).length;
 
@@ -73,6 +74,7 @@ const AlarmList = ({ alarmList, onRefresh }: Props) => {
                 alarm={alarm}
                 selectIdList={selectIdList}
                 onUpdateSelectIdList={setSelectIdList}
+                onClose={onClose}
               />
             ))}
           </div>
diff --git a/src/components/layout/header/alarm/index.tsx b/src/components/layout/header/alarm/index.tsx
index 81d7239..365177c 100644
--- a/src/components/layout/header/alarm/index.tsx
+++ b/src/components/layout/header/alarm/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
 
 import { getAlarmAPI } from '@/apis/user';
 
@@ -9,6 +10,8 @@ import useOutsideClick from '@/hooks/useOutsideClick';
 
 import { IAlarm } from '@/models/alarm';
 
+import { modelingStatusState } from '@/stores/model-controller';
+
 import * as HeaderStyle from '@/styles/layout/header';
 
 import AlarmList from './AlarmList';
@@ -18,9 +21,12 @@ type Props = {
 };
 
 const Alarm = ({ isDark }: Props) => {
-  const [alarmRef] = useOutsideClick<HTMLDivElement>(() => setIsOpen(false));
+  const status = useRecoilValue(modelingStatusState);
   const [isOpen, setIsOpen] = useState(false);
   const [alarmList, setAlarmList] = useState<IAlarm[]>([]);
+
+  const [alarmRef] = useOutsideClick<HTMLDivElement>(() => setIsOpen(false));
+
   const hasNotReadAlarm = alarmList.find((item) => !item.is_confirm);
 
   const callAPI = async () => {
@@ -33,6 +39,12 @@ const Alarm = ({ isDark }: Props) => {
     callAPI();
   }, []);
 
+  useEffect(() => {
+    if (status === 'ERROR') {
+      callAPI();
+    }
+  }, [status]);
+
   return (
     <div ref={alarmRef}>
       <HeaderStyle.Button
@@ -46,7 +58,13 @@ const Alarm = ({ isDark }: Props) => {
         )}
       </HeaderStyle.Button>
 
-      {isOpen && <AlarmList alarmList={alarmList} onRefresh={callAPI} />}
+      {isOpen && (
+        <AlarmList
+          alarmList={alarmList}
+          onRefresh={callAPI}
+          onClose={() => setIsOpen(false)}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/models/video.ts b/src/models/video.ts
index cceca7e..c7e2074 100644
--- a/src/models/video.ts
+++ b/src/models/video.ts
@@ -2,8 +2,8 @@ export type VideoVersionType = 'original' | 'revision';
 
 export interface IVideoSubHeading {
   id: number;
-  start_time: string;
-  end_time: string;
+  start_time: number;
+  end_time: number;
   content: string;
   name: string;
 }
@@ -25,6 +25,7 @@ export interface IVideo {
   image: string;
   link: string;
   youtube_created_at: string;
+  youtube_id: string;
   created_at: string;
   updated_at: string;
   subHeading: IVideoSubHeading[];
diff --git a/src/stores/summary.ts b/src/stores/summary.ts
index fac9231..a6538de 100644
--- a/src/stores/summary.ts
+++ b/src/stores/summary.ts
@@ -26,3 +26,13 @@ export const summaryIsEditingViewState = atom({
   key: 'summary-is-editing-view',
   default: false,
 });
+
+export const summaryPlaySubHeadingIdState = atom({
+  key: 'summary-play-subheading-id',
+  default: -1,
+});
+
+export const summaryVideoTimeState = atom({
+  key: 'summary-video-time',
+  default: 0,
+});
diff --git a/src/styles/SummaryPage.ts b/src/styles/SummaryPage.ts
index 2dd62a6..b93ee7c 100644
--- a/src/styles/SummaryPage.ts
+++ b/src/styles/SummaryPage.ts
@@ -13,7 +13,7 @@ export const DetailBox = styled.div`
   flex-direction: column;
   padding: 60px 58px 29.5px 60px;
   min-width: 535px;
-  max-width: 760px;
+  /* max-width: 760px; */
 
   & span.created_at {
     color: ${(props) => props.theme.color.gray300};
@@ -93,6 +93,17 @@ export const DetailBox = styled.div`
     display: flex;
     align-items: center;
     gap: 12px;
+
+    &.disabled {
+      & > span.subtitle-index {
+        background-color: ${(props) => props.theme.color.green100};
+        color: ${(props) => props.theme.color.gray200};
+      }
+
+      & > span.subtitle-text {
+        color: ${(props) => props.theme.color.gray300};
+      }
+    }
   }
 
   & span.subtitle-index {
@@ -197,6 +208,14 @@ export const DetailBox = styled.div`
     transform: translateX(calc(100% + 24px));
   }
 
+  & #player {
+    margin: 20px 0;
+    width: 100%;
+    height: auto;
+    border-radius: 16px;
+    aspect-ratio: 16 / 9;
+  }
+
   &.disabled {
     & span.youtube-video-title {
       color: ${(props) => props.theme.color.gray300};
@@ -312,12 +331,18 @@ export const ScriptBox = styled.div`
     gap: 60px;
   }
 
-  & span.script-title,
-  & input.script-title {
+  & .script-title {
     color: ${(props) => props.theme.color.gray500};
     ${(props) => props.theme.typography.Subheader1};
   }
 
+  & span.script-title {
+    display: inline-flex;
+    align-items: center;
+    min-height: 36px;
+    word-break: keep-all;
+  }
+
   & input.script-title {
     padding: 4px 12px;
     width: 100%;
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 9c39fe5..d7d55fb 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -40,3 +40,22 @@ export const getDate = (dateString?: string) => {
 
   return result;
 };
+
+export const formatTime = (time: number) => {
+  const hour = Math.floor(time / 60 / 60);
+  const minute = Math.floor(time / 60);
+  const second = Math.floor(time % 60);
+
+  if (hour > 0) {
+    return [
+      String(hour).padStart(2, '0'),
+      String(minute).padStart(2, '0'),
+      String(second).padStart(2, '0'),
+    ].join(':');
+  }
+
+  return [
+    String(minute).padStart(2, '0'),
+    String(second).padStart(2, '0'),
+  ].join(':');
+};
diff --git a/yarn.lock b/yarn.lock
index 340452c..40ea0f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -880,6 +880,11 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/youtube@^0.0.50":
+  version "0.0.50"
+  resolved "https://registry.yarnpkg.com/@types/youtube/-/youtube-0.0.50.tgz#c28cefde8e3f17ac3564bd83952eacf806d96eea"
+  integrity sha512-d4GpH4uPYp9W07kc487tiq6V/EUHl18vZWFMbQoe4Sk9LXEWzFi/BMf9x7TI4m7/j7gU3KeX8H6M8aPBgykeLw==
+
 "@typescript-eslint/eslint-plugin@^6.14.0":
   version "6.17.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.17.0.tgz"