From 1e7d2b465147fa5da61da76ed646b0767d6113b8 Mon Sep 17 00:00:00 2001
From: Huiju <61102301+Joie-Kim@users.noreply.github.com>
Date: Fri, 1 Mar 2024 16:07:39 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=9C=ED=91=9C=20=EC=97=B0=EC=8A=B5=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20API=20=EC=97=B0=EB=8F=99=20(#39)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 발표 연습 상세 조회 API 연동

* refact: CloseIcon 색상 값으로 분기하도록 수정

* feat: PracticeNav 컴포넌트 내 버튼 로직 구현

- PracticeNav layout에서 제거
- 일시정지 여부에 맞춰서 헤더 컬러 및 버튼 노출 여부 변경되도록 구현
- 버튼 클릭 시 이벤트 바인딩
- 그 외 데이터 바인딩
---
 .../practice/[id]/page.module.scss            |  10 +-
 src/app/(afterlogin)/practice/[id]/page.tsx   | 153 ++++++++++++++----
 .../_components/PracticeNav.module.scss       |  13 +-
 .../practice/_components/PracticeNav.tsx      |  39 +++--
 .../practice/_components/Recorder.tsx         |  53 +-----
 .../practice/_hooks/useRecorder.ts            |  13 ++
 .../practice/_svgs/RecordIcon.tsx             |  95 +++++++++++
 .../practice/_svgs/RecordOnIcon.tsx           |  26 ---
 src/app/(afterlogin)/practice/layout.tsx      |   8 +-
 .../setting/[id]/_components/SettingNav.tsx   |   4 +-
 src/app/_components/_modules/SpeechBubble.tsx |   4 +-
 src/app/_components/_modules/_modal/Modal.tsx |   4 +-
 .../{CloseIconBlack.tsx => CloseIcon.tsx}     |  31 +++-
 src/app/_svgs/CloseIconWhite.tsx              |  20 ---
 src/services/client/practice.ts               |  15 ++
 src/types/service.ts                          | 111 ++++++++++---
 16 files changed, 421 insertions(+), 178 deletions(-)
 create mode 100644 src/app/(afterlogin)/practice/_svgs/RecordIcon.tsx
 delete mode 100644 src/app/(afterlogin)/practice/_svgs/RecordOnIcon.tsx
 rename src/app/_svgs/{CloseIconBlack.tsx => CloseIcon.tsx} (60%)
 delete mode 100644 src/app/_svgs/CloseIconWhite.tsx
 create mode 100644 src/services/client/practice.ts

diff --git a/src/app/(afterlogin)/practice/[id]/page.module.scss b/src/app/(afterlogin)/practice/[id]/page.module.scss
index 36dc5a1..0cd122c 100644
--- a/src/app/(afterlogin)/practice/[id]/page.module.scss
+++ b/src/app/(afterlogin)/practice/[id]/page.module.scss
@@ -2,6 +2,8 @@
 @import '@/styles/mixins';
 
 .container {
+  display: flex;
+  justify-content: center;
   position: relative;
   width: 100%;
   padding: 60px;
@@ -15,8 +17,8 @@
 .presentation {
   width: 900px;
   height: 100%;
+  border: 1px solid $gray-1;
   border-radius: 15px;
-  background: $purple-1;
 
   &__box {
     display: flex;
@@ -58,8 +60,8 @@
     width: 100%;
     height: 100%;
     margin-top: 12px;
+    border: 1px solid $gray-1;
     border-radius: 15px;
-    background: $purple-1;
   }
 
   &__box {
@@ -86,6 +88,6 @@
 
 .bubble {
   position: absolute;
-  top: 8px;
-  left: 30%;
+  top: 75px;
+  left: 35%;
 }
diff --git a/src/app/(afterlogin)/practice/[id]/page.tsx b/src/app/(afterlogin)/practice/[id]/page.tsx
index 62b8aaa..f0752db 100644
--- a/src/app/(afterlogin)/practice/[id]/page.tsx
+++ b/src/app/(afterlogin)/practice/[id]/page.tsx
@@ -7,63 +7,140 @@ import { useEffect, useState } from 'react';
 import useRecorder from '../_hooks/useRecorder';
 import Alert from '@/app/_components/_modules/_modal/Alert';
 import SpeechBubble from '@/app/_components/_modules/SpeechBubble';
+import { useQuery } from '@tanstack/react-query';
+import { PracticeDetail } from '@/types/service';
+import { PracticeService } from '@/services/client/practice';
+import Image from 'next/image';
+import PracticeNav from '../_components/PracticeNav';
+import Confirm from '@/app/_components/_modules/_modal/Confirm';
 
 export default function Page({ params }: { params: { id: string } }) {
+  const id = Number(params.id);
+
+  // #region state
+  const [slideIdx, setSlideIdx] = useState(0);
   const modal = useToggle();
+  const confirm = useToggle();
   const bubble = useToggle();
   const recorder = useRecorder();
+  // #endregion
 
+  //
   const cx = classNames.bind(styles);
 
+  // #region query
+  const { isLoading, data } = useQuery<PracticeDetail>({
+    queryKey: ['practice', id],
+    queryFn: () => PracticeService.getPracticeDetail(Number(id)),
+  });
+
+  /** 발표 이름 */
+  const title = data?.title ?? '';
+
+  /** 슬라이드 페이징 문자열 */
+  const slidePaging = `${slideIdx}/${data?.slides.length ?? 0}`;
+
+  /** 마지막 슬라이드 여부 */
+  const isLastSlide = data?.slides.length === slideIdx + 1;
+  // #endregion
+
   useEffect(() => {
     modal.onOpen();
     recorder.getMedia();
     recorder.processPermission();
   }, []);
 
+  // #region event-handler
   const handleModalAction = () => {
     recorder.startRecording();
     modal.onClose();
     bubble.onOpen();
   };
 
+  const handleNextSlide = () => {
+    console.log('go to next slide');
+  };
+
+  const handleRecordingPause = () => {
+    if (recorder.isRecording) recorder.pauseRecording();
+    else recorder.resumeRecording();
+  };
+
+  const handleClose = () => {
+    console.log('close ... ');
+    confirm.onOpen();
+  };
+  // #endregion
+
+  // #region function
+  const goToPresentationsPage = () => {
+    console.log('go to presentation page...');
+    confirm.onClose();
+  };
+  // #endregion
+
   return (
-    <div className={styles.container}>
-      <div className={styles.contents}>
-        <section className={styles.presentation__box}>
-          <article className={styles.presentation}>img...</article>
-          <section className={styles.helper__box}>
-            <article className={styles.helper}>
-              <h4 className={styles.helper__title}>
-                다음 슬라이드
-                <span className={cx(['helper__subtitle', 'helper__subtitle--next'])}>2/15</span>
-              </h4>
-              <div className={styles.helper__item}>img...</div>
-            </article>
-            <article className={styles.helper}>
-              <h4 className={styles.helper__title}>
-                메모하기
-                <span className={cx(['helper__subtitle', 'helper__subtitle--memo'])}>
-                  발표 연습 중 메모를 입력하면 녹음이 일시정지돼요.
-                </span>
-              </h4>
-              <textarea
-                className={styles.helper__item}
-                placeholder="ex. 발표문 수정 사항, 목소리 크기 등에 대한 메모를 작성해 주세요."
+    <>
+      <PracticeNav
+        title={title}
+        isRecording={recorder.isRecording}
+        goToNext={handleNextSlide}
+        handleRecording={handleRecordingPause}
+        onCloseClick={handleClose}
+      />
+      <div className={styles.container}>
+        <div className={styles.contents}>
+          <section className={styles.presentation__box}>
+            <article className={styles.presentation}>
+              <Image
+                src={`${process.env.NEXT_PUBLIC_BASE_URL_CDN}/${data?.slides[0].imageFilePath}`}
+                alt={`slide-${0}`}
+                width={900}
+                height={510}
+                style={{ objectFit: 'contain', borderRadius: '16px' }}
               />
             </article>
+            <section className={styles.helper__box}>
+              <article className={styles.helper}>
+                <h4 className={styles.helper__title}>
+                  다음 슬라이드
+                  <span className={cx(['helper__subtitle', 'helper__subtitle--next'])}>
+                    {slidePaging}
+                  </span>
+                </h4>
+                <div className={styles.helper__item}>
+                  {isLastSlide ? (
+                    <div>last ... </div>
+                  ) : (
+                    <Image
+                      src={`${process.env.NEXT_PUBLIC_BASE_URL_CDN}/${data?.slides[0].imageFilePath}`}
+                      alt={`slide-${0}`}
+                      width={370}
+                      height={200}
+                      style={{ objectFit: 'contain', borderRadius: '16px' }}
+                    />
+                  )}
+                </div>
+              </article>
+              <article className={styles.helper}>
+                <h4 className={styles.helper__title}>
+                  메모하기
+                  <span className={cx(['helper__subtitle', 'helper__subtitle--memo'])}>
+                    발표 연습 중 메모를 입력하면 녹음이 일시정지돼요.
+                  </span>
+                </h4>
+                <textarea
+                  className={styles.helper__item}
+                  placeholder="ex. 발표문 수정 사항, 목소리 크기 등에 대한 메모를 작성해 주세요."
+                  defaultValue={data?.slides[0].memo ?? ''}
+                />
+              </article>
+            </section>
           </section>
-        </section>
-        <article className={styles.script__box}>
-          <p className={styles.script}>
-            발표 내용 발표 내용 ... 발표 내용 발표 내용 ... 발표 내용 발표 내용 ... 발표 내용 발표
-            내용 ... 발표 내용 발표 내용 ... 발표 내용 발표 내용 ... 발표 내용 발표 내용 ... 발표
-            내용 발표 내용 ... 발표 내용 발표 내용 ...발표 내용 발표 내용 ... 발표 내용 발표 내용
-            ... 발표 내용 발표 내용 ... 발표 내용 발표 내용 ... 발표 내용 발표 내용 ... 발표 내용
-            발표 내용 ... 발표 내용 발표 내용 ... 발표 내용 발표 내용 ... 발표 내용 발표 내용 ...
-            발표 내용 발표 내용 ... 발표 내용 발표 내용 ...
-          </p>
-        </article>
+          <article className={styles.script__box}>
+            <p className={styles.script}>{data?.slides[0].script ?? ''}</p>
+          </article>
+        </div>
       </div>
       <Alert
         context={modal}
@@ -73,6 +150,14 @@ export default function Page({ params }: { params: { id: string } }) {
         isDisabled={!recorder.isPermitted}
         onActionClick={handleModalAction}
       />
+      <Confirm
+        context={confirm}
+        title="연습을 중단하시겠어요?"
+        message={`연습을 중단하시면\n이번 연습에 대한 피드백을 받을 수 없어요.`}
+        okayText="중단하기"
+        cancelText="계속 연습하기"
+        onOkayClick={goToPresentationsPage}
+      />
       <div className={styles.bubble}>
         <SpeechBubble
           context={bubble}
@@ -80,6 +165,6 @@ export default function Page({ params }: { params: { id: string } }) {
           hasCloseBtn
         />
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/app/(afterlogin)/practice/_components/PracticeNav.module.scss b/src/app/(afterlogin)/practice/_components/PracticeNav.module.scss
index 08c798b..6820671 100644
--- a/src/app/(afterlogin)/practice/_components/PracticeNav.module.scss
+++ b/src/app/(afterlogin)/practice/_components/PracticeNav.module.scss
@@ -7,8 +7,15 @@
   justify-content: center;
   width: 100%;
   height: 68px;
-  background: $primary;
   min-width: 1320px;
+
+  &--record-on {
+    background: $primary;
+  }
+
+  &--record-off {
+    background: $pink-4;
+  }
 }
 
 .contents {
@@ -38,6 +45,10 @@
     top: 12px;
     right: 50%;
 
+    .recorder {
+      @include pure-button;
+    }
+
     .division {
       width: 10px;
       height: 10px;
diff --git a/src/app/(afterlogin)/practice/_components/PracticeNav.tsx b/src/app/(afterlogin)/practice/_components/PracticeNav.tsx
index cf82553..b02fcaf 100644
--- a/src/app/(afterlogin)/practice/_components/PracticeNav.tsx
+++ b/src/app/(afterlogin)/practice/_components/PracticeNav.tsx
@@ -1,30 +1,51 @@
 import classNames from 'classnames/bind';
 
 import LogoIcon from '@/app/_svgs/LogoIcon';
-import RecordOnIcon from '../_svgs/RecordOnIcon';
-import CloseIconWhite from '../../../_svgs/CloseIconWhite';
+import RecordIcon from '../_svgs/RecordIcon';
+import CloseIcon from '../../../_svgs/CloseIcon';
 
 import styles from './PracticeNav.module.scss';
 
-const PracticeNav = () => {
+interface Props {
+  /** 발표 제목 */
+  title: string;
+  /** 녹음 진행 여부 */
+  isRecording: boolean;
+  /** 다음 페이지 이동 함수 */
+  goToNext: () => void;
+  /** 녹음 핸들러 */
+  handleRecording: () => void;
+  /** 닫기 버튼 클릭 이벤트 */
+  onCloseClick: () => void;
+}
+
+const PracticeNav = ({ title, isRecording, goToNext, handleRecording, onCloseClick }: Props) => {
   const cx = classNames.bind(styles);
 
   return (
-    <nav className={styles.container}>
+    <nav
+      className={cx('container', isRecording ? 'container--record-on' : 'container--record-off')}
+    >
       <div className={styles.contents__box}>
         <div className={cx(['contents', 'contents--left'])}>
           <LogoIcon />
-          <h3 className={styles.title}>발표이름 발표이름 발표이름 발표이름 발표이름 발표이름</h3>
+          <h3 className={styles.title}>{title}</h3>
         </div>
         <div className={cx(['contents', 'contents--center'])}>
-          <RecordOnIcon />
+          <button className={styles.recorder} onClick={handleRecording}>
+            <RecordIcon isRecording={isRecording} />
+          </button>
           <em className={styles.division}></em>
           <h2>15:00</h2>
         </div>
         <div className={cx(['contents', 'contents--right'])}>
-          <button className={cx('action--next')}>다음 페이지</button>
-          <button className={cx('action--close')}>
-            <CloseIconWhite />
+          {isRecording && (
+            <button className={cx('action--next')} onClick={goToNext}>
+              다음 페이지
+            </button>
+          )}
+          <button className={cx('action--close')} onClick={onCloseClick}>
+            <CloseIcon color="white" />
           </button>
         </div>
       </div>
diff --git a/src/app/(afterlogin)/practice/_components/Recorder.tsx b/src/app/(afterlogin)/practice/_components/Recorder.tsx
index 02a3696..9d11df1 100644
--- a/src/app/(afterlogin)/practice/_components/Recorder.tsx
+++ b/src/app/(afterlogin)/practice/_components/Recorder.tsx
@@ -2,57 +2,6 @@
 
 import React, { useState, useRef } from 'react';
 
-const Recorder = () => {
-  const [isRecording, setIsRecording] = useState(false);
-  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const audioChunks: Blob[] = [];
-
-  const startRecording = () => {
-    navigator.mediaDevices
-      .getUserMedia({ audio: true })
-      .then((stream) => {
-        const mediaRecorder = new MediaRecorder(stream);
-
-        mediaRecorder.ondataavailable = (e) => {
-          if (e.data.size > 0) {
-            audioChunks.push(e.data);
-          }
-        };
-
-        mediaRecorder.onstop = () => {
-          const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' }); // 오디오 파일 형식 확인 필요
-          setAudioBlob(audioBlob);
-        };
-
-        mediaRecorderRef.current = mediaRecorder;
-        mediaRecorder.start();
-        setIsRecording(true);
-      })
-      .catch((error) => {
-        console.error('Error accessing microphone:', error);
-      });
-  };
-
-  const stopRecording = () => {
-    if (mediaRecorderRef.current && isRecording) {
-      mediaRecorderRef.current.stop();
-      setIsRecording(false);
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={isRecording ? stopRecording : startRecording}>
-        {isRecording ? 'Stop Recording' : 'Start Recording'}
-      </button>
-      {audioBlob && (
-        <audio controls>
-          <source src={URL.createObjectURL(audioBlob)} type="audio/mp3" />
-        </audio>
-      )}
-    </div>
-  );
-};
+const Recorder = () => {};
 
 export default Recorder;
diff --git a/src/app/(afterlogin)/practice/_hooks/useRecorder.ts b/src/app/(afterlogin)/practice/_hooks/useRecorder.ts
index e9df777..a38feca 100644
--- a/src/app/(afterlogin)/practice/_hooks/useRecorder.ts
+++ b/src/app/(afterlogin)/practice/_hooks/useRecorder.ts
@@ -15,6 +15,8 @@ interface ReturnType {
   startRecording: () => void;
   /** 녹음 일시정지 함수 */
   pauseRecording: () => void;
+  /** 녹음 재개 함수 */
+  resumeRecording: () => void;
   /** 녹음 종료 함수 */
   stopRecording: () => void;
 }
@@ -101,11 +103,21 @@ const useRecorder = (): ReturnType => {
   /** 녹음 일시정지 함수 */
   const pauseRecording = () => {
     if (mediaRecorderRef.current && isRecording) {
+      console.log('pause ...');
       mediaRecorderRef.current.pause();
       setIsRecording(false);
     }
   };
 
+  /** 녹음 재개 함수 */
+  const resumeRecording = () => {
+    if (mediaRecorderRef.current && !isRecording) {
+      console.log('resume ...!');
+      mediaRecorderRef.current.resume();
+      setIsRecording(true);
+    }
+  };
+
   /** 녹음 멈추는 함수 */
   const stopRecording = () => {
     if (mediaRecorderRef.current && isRecording) {
@@ -122,6 +134,7 @@ const useRecorder = (): ReturnType => {
     getMedia,
     startRecording,
     pauseRecording,
+    resumeRecording,
     stopRecording,
   };
 };
diff --git a/src/app/(afterlogin)/practice/_svgs/RecordIcon.tsx b/src/app/(afterlogin)/practice/_svgs/RecordIcon.tsx
new file mode 100644
index 0000000..bdd0439
--- /dev/null
+++ b/src/app/(afterlogin)/practice/_svgs/RecordIcon.tsx
@@ -0,0 +1,95 @@
+interface Props {
+  /** 녹음 진행 여부 */
+  isRecording: boolean;
+}
+
+const RecordIcon = ({ isRecording }: Props) => {
+  return isRecording ? RecordOnIcon() : RecordOffIcon();
+};
+
+const RecordOnIcon = () => {
+  return (
+    <i>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="40"
+        height="40"
+        viewBox="0 0 40 40"
+        fill="none"
+      >
+        <rect width="40" height="40" rx="20" fill="white" fillOpacity="0.2" />
+        <path
+          d="M22.7096 8.98547C20.9231 8.61943 19.081 8.61943 17.2946 8.98547C16.7398 9.09914 16.3126 9.54322 16.2205 10.102L16.1528 10.5132C15.5949 13.898 15.5949 17.3513 16.1528 20.7362L16.2205 21.1474C16.3126 21.7062 16.7398 22.1502 17.2946 22.2639C19.081 22.6299 20.9231 22.6299 22.7096 22.2639C23.2644 22.1502 23.6915 21.7062 23.7836 21.1474L23.8514 20.7362C24.4092 17.3513 24.4092 13.898 23.8514 10.5132L23.7836 10.102C23.6915 9.54322 23.2644 9.09914 22.7096 8.98547Z"
+          fill="white"
+        />
+        <path
+          d="M11.1186 17.8219C11.6312 17.7493 12.1057 18.106 12.1783 18.6186L12.7415 22.5928C12.8936 23.6665 13.7448 24.506 14.8205 24.6434C18.2597 25.0828 21.7407 25.0828 25.1798 24.6434C26.2554 24.506 27.1067 23.6665 27.2588 22.5928L27.8219 18.6186C27.8945 18.106 28.369 17.7493 28.8817 17.8219C29.3943 17.8945 29.751 18.369 29.6784 18.8816L29.1152 22.8558C28.8445 24.7656 27.3307 26.2589 25.4173 26.5033C23.9295 26.6934 22.4343 26.8048 20.9377 26.8376V31.8751C20.9377 32.3929 20.5179 32.8126 20.0002 32.8126C19.4824 32.8126 19.0627 32.3929 19.0627 31.8751V26.8376C17.566 26.8048 16.0707 26.6934 14.5829 26.5033C12.6696 26.2589 11.1557 24.7656 10.885 22.8558L10.3219 18.8816C10.2493 18.369 10.6059 17.8945 11.1186 17.8219Z"
+          fill="white"
+        />
+        <path d="M15 33H25" stroke="white" strokeWidth="2" strokeLinecap="round" />
+      </svg>
+    </i>
+  );
+};
+
+const RecordOffIcon = () => {
+  return (
+    <i>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="40"
+        height="40"
+        viewBox="0 0 40 40"
+        fill="none"
+      >
+        <g clip-path="url(#clip0_3744_9405)">
+          <g opacity="0.2">
+            <path
+              d="M20 38C29.9411 38 38 29.9411 38 20C38 10.0589 29.9411 2 20 2C10.0589 2 2 10.0589 2 20C2 29.9411 10.0589 38 20 38Z"
+              fill="white"
+            />
+          </g>
+          <path
+            d="M30.116 11L11 29.144"
+            stroke="white"
+            stroke-width="2.25"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+          />
+          <path
+            d="M23.6062 13.1111C23.6062 10.9512 21.9945 9.2002 20.0062 9.2002C18.018 9.2002 16.4062 10.9512 16.4062 13.1111V19.6893C16.4062 21.8492 18.018 23.6002 20.0062 23.6002C21.9945 23.6002 23.6062 21.8492 23.6062 19.6893V13.1111Z"
+            fill="white"
+          />
+          <path
+            d="M27.2125 20C27.2125 23.7057 23.993 26.7029 20.0125 26.7029C16.032 26.7029 12.8125 23.7057 12.8125 20"
+            stroke="white"
+            stroke-width="2.25"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+          />
+          <path
+            d="M15.7812 30.7998H20.0154"
+            stroke="white"
+            stroke-width="2.25"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+          />
+          <path
+            d="M20.0156 27.1235V30.7997H24.2498"
+            stroke="white"
+            stroke-width="2.25"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_3744_9405">
+            <rect width="40" height="40" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </i>
+  );
+};
+
+export default RecordIcon;
diff --git a/src/app/(afterlogin)/practice/_svgs/RecordOnIcon.tsx b/src/app/(afterlogin)/practice/_svgs/RecordOnIcon.tsx
deleted file mode 100644
index f8c9df5..0000000
--- a/src/app/(afterlogin)/practice/_svgs/RecordOnIcon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-const RecordOnIcon = () => {
-  return (
-    <i>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="40"
-        height="40"
-        viewBox="0 0 40 40"
-        fill="none"
-      >
-        <rect width="40" height="40" rx="20" fill="white" fillOpacity="0.2" />
-        <path
-          d="M22.7096 8.98547C20.9231 8.61943 19.081 8.61943 17.2946 8.98547C16.7398 9.09914 16.3126 9.54322 16.2205 10.102L16.1528 10.5132C15.5949 13.898 15.5949 17.3513 16.1528 20.7362L16.2205 21.1474C16.3126 21.7062 16.7398 22.1502 17.2946 22.2639C19.081 22.6299 20.9231 22.6299 22.7096 22.2639C23.2644 22.1502 23.6915 21.7062 23.7836 21.1474L23.8514 20.7362C24.4092 17.3513 24.4092 13.898 23.8514 10.5132L23.7836 10.102C23.6915 9.54322 23.2644 9.09914 22.7096 8.98547Z"
-          fill="white"
-        />
-        <path
-          d="M11.1186 17.8219C11.6312 17.7493 12.1057 18.106 12.1783 18.6186L12.7415 22.5928C12.8936 23.6665 13.7448 24.506 14.8205 24.6434C18.2597 25.0828 21.7407 25.0828 25.1798 24.6434C26.2554 24.506 27.1067 23.6665 27.2588 22.5928L27.8219 18.6186C27.8945 18.106 28.369 17.7493 28.8817 17.8219C29.3943 17.8945 29.751 18.369 29.6784 18.8816L29.1152 22.8558C28.8445 24.7656 27.3307 26.2589 25.4173 26.5033C23.9295 26.6934 22.4343 26.8048 20.9377 26.8376V31.8751C20.9377 32.3929 20.5179 32.8126 20.0002 32.8126C19.4824 32.8126 19.0627 32.3929 19.0627 31.8751V26.8376C17.566 26.8048 16.0707 26.6934 14.5829 26.5033C12.6696 26.2589 11.1557 24.7656 10.885 22.8558L10.3219 18.8816C10.2493 18.369 10.6059 17.8945 11.1186 17.8219Z"
-          fill="white"
-        />
-        <path d="M15 33H25" stroke="white" strokeWidth="2" strokeLinecap="round" />
-      </svg>
-    </i>
-  );
-};
-
-export default RecordOnIcon;
diff --git a/src/app/(afterlogin)/practice/layout.tsx b/src/app/(afterlogin)/practice/layout.tsx
index 43c166b..30da7e6 100644
--- a/src/app/(afterlogin)/practice/layout.tsx
+++ b/src/app/(afterlogin)/practice/layout.tsx
@@ -1,13 +1,7 @@
 import { ReactChildrenProps } from '@/types/common';
-import PracticeNav from './_components/PracticeNav';
 
 const Layout = ({ children }: ReactChildrenProps) => {
-  return (
-    <div>
-      <PracticeNav />
-      {children}
-    </div>
-  );
+  return <div>{children}</div>;
 };
 
 export default Layout;
diff --git a/src/app/(afterlogin)/setting/[id]/_components/SettingNav.tsx b/src/app/(afterlogin)/setting/[id]/_components/SettingNav.tsx
index 401b6bf..67b9157 100644
--- a/src/app/(afterlogin)/setting/[id]/_components/SettingNav.tsx
+++ b/src/app/(afterlogin)/setting/[id]/_components/SettingNav.tsx
@@ -1,7 +1,7 @@
 import LogoIcon from '@/app/_svgs/LogoIcon';
 
 import styles from './SettingNav.module.scss';
-import CloseIconWhite from '@/app/_svgs/CloseIconWhite';
+import CloseIcon from '@/app/_svgs/CloseIcon';
 import classNames from 'classnames';
 import CancelButton from './CancelButton';
 
@@ -21,7 +21,7 @@ const SettingNav = () => {
 
         <div className={styles.right}>
           <CancelButton>
-            <CloseIconWhite />
+            <CloseIcon color="white" />
           </CancelButton>
         </div>
       </div>
diff --git a/src/app/_components/_modules/SpeechBubble.tsx b/src/app/_components/_modules/SpeechBubble.tsx
index 22cf1b6..d269eca 100644
--- a/src/app/_components/_modules/SpeechBubble.tsx
+++ b/src/app/_components/_modules/SpeechBubble.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames/bind';
 import styles from './SpeechBubble.module.scss';
-import CloseIconBlack from '@/app/_svgs/CloseIconBlack';
+import CloseIcon from '@/app/_svgs/CloseIcon';
 import { ToggleContext } from '@/app/_hooks/useToggleContext';
 import { ToggleType } from '@/app/_hooks/useToggle';
 
@@ -32,7 +32,7 @@ const SpeechBubble = ({ context, message, direction = 'up', hasCloseBtn = false
         {message}
         {hasCloseBtn && (
           <button className={cx('close')} onClick={handleClose}>
-            <CloseIconBlack />
+            <CloseIcon />
           </button>
         )}
       </div>
diff --git a/src/app/_components/_modules/_modal/Modal.tsx b/src/app/_components/_modules/_modal/Modal.tsx
index af9ccf0..981b37e 100644
--- a/src/app/_components/_modules/_modal/Modal.tsx
+++ b/src/app/_components/_modules/_modal/Modal.tsx
@@ -4,7 +4,7 @@ import { ToggleContext } from '@/app/_hooks/useToggleContext';
 import ModalLayout from './ModalLayout';
 import classNames from 'classnames/bind';
 import { ReactNode } from 'react';
-import CloseIconBlack from '@/app/_svgs/CloseIconBlack';
+import CloseIcon from '@/app/_svgs/CloseIcon';
 
 interface Props {
   /** 컨텍스트 */
@@ -33,7 +33,7 @@ const Modal = ({ context, size = 'sm', hasCloseBtn = true, children }: Props) =>
           {hasCloseBtn ? (
             <div className={cx('header')}>
               <button onClick={handleClose}>
-                <CloseIconBlack />
+                <CloseIcon />
               </button>
             </div>
           ) : null}
diff --git a/src/app/_svgs/CloseIconBlack.tsx b/src/app/_svgs/CloseIcon.tsx
similarity index 60%
rename from src/app/_svgs/CloseIconBlack.tsx
rename to src/app/_svgs/CloseIcon.tsx
index 8c9b91a..13d2aa6 100644
--- a/src/app/_svgs/CloseIconBlack.tsx
+++ b/src/app/_svgs/CloseIcon.tsx
@@ -1,3 +1,13 @@
+interface Props {
+  color?: 'black' | 'white';
+}
+
+const CloseIcon = ({ color = 'black' }: Props) => {
+  const isBlack = color === 'black';
+
+  return isBlack ? CloseIconBlack() : CloseIconWhite();
+};
+
 const CloseIconBlack = () => {
   return (
     <i>
@@ -24,4 +34,23 @@ const CloseIconBlack = () => {
   );
 };
 
-export default CloseIconBlack;
+const CloseIconWhite = () => {
+  return (
+    <i>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+      >
+        <path
+          d="M17.1693 2.4785L15.5243 0.833496L9.0026 7.35516L2.48094 0.833496L0.835938 2.4785L7.3576 9.00016L0.835938 15.5218L2.48094 17.1668L9.0026 10.6452L15.5243 17.1668L17.1693 15.5218L10.6476 9.00016L17.1693 2.4785Z"
+          fill="white"
+        />
+      </svg>
+    </i>
+  );
+};
+
+export default CloseIcon;
diff --git a/src/app/_svgs/CloseIconWhite.tsx b/src/app/_svgs/CloseIconWhite.tsx
deleted file mode 100644
index 2152e3a..0000000
--- a/src/app/_svgs/CloseIconWhite.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const CloseIconWhite = () => {
-  return (
-    <i>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-      >
-        <path
-          d="M17.1693 2.4785L15.5243 0.833496L9.0026 7.35516L2.48094 0.833496L0.835938 2.4785L7.3576 9.00016L0.835938 15.5218L2.48094 17.1668L9.0026 10.6452L15.5243 17.1668L17.1693 15.5218L10.6476 9.00016L17.1693 2.4785Z"
-          fill="white"
-        />
-      </svg>
-    </i>
-  );
-};
-
-export default CloseIconWhite;
diff --git a/src/services/client/practice.ts b/src/services/client/practice.ts
new file mode 100644
index 0000000..25a63da
--- /dev/null
+++ b/src/services/client/practice.ts
@@ -0,0 +1,15 @@
+import { PracticeDetail } from '@/types/service';
+import { fetch_ClientAuth } from './fetchClient';
+
+export const PracticeService = {
+  getPracticeDetail: async (presentationId: number) => {
+    const response = await fetch_ClientAuth(`/api/practices/presentation/${presentationId}`, {
+      method: 'GET',
+      cache: 'no-store',
+    });
+
+    if (response.ok) return await response.json();
+
+    throw new Error('데이터를 불러오는 도중 문제가 발생했습니다');
+  },
+};
diff --git a/src/types/service.ts b/src/types/service.ts
index 5859ddb..4c2ad04 100644
--- a/src/types/service.ts
+++ b/src/types/service.ts
@@ -1,6 +1,7 @@
 type ValuePiece = Date | null;
 
 export type Value = ValuePiece | [ValuePiece, ValuePiece];
+export type PracticeMode = 'SHOW' | 'HIDE';
 
 // # Mock
 
@@ -33,8 +34,27 @@ export interface MockUploadDataType {
   }[];
 }
 
-// # Service
+//
 
+// #region Account API
+/** 유저 정보를 나타내는 객체
+ * @property email - 소셜 이메일
+ * @property nickName - 소셜 닉네임
+ * @property socialProvider - 네이버, 카카오, 구글
+ */
+export interface UserInfoType {
+  email: string;
+  nickName: string;
+  socialProvider: string;
+}
+
+/** 세션 id 조회 res */
+export interface SessionId {
+  sessionId: string;
+}
+// #endregion
+
+// #region Presentation API
 /** 발표 자료 업로드 객체 - 발표 상세 조회, 생성 및 수정
  *  기본타입 - 생성 및 수정에 사용되는 요소들
  *  옵셔널타입 - 발표 상세 조회시, 추가되는 요소들
@@ -60,7 +80,7 @@ export interface UploadDataType {
     hours: number | null;
     minutes: number | null;
   };
-  /** 발표 날짜  */
+  /** 발표 날짜 */
   deadlineDate: Value;
   /** ppt 슬라이드 리스트 */
   slides: {
@@ -77,21 +97,10 @@ export interface UploadDataType {
   }[];
 }
 
-/** 유저 정보를 나타내는 객체
- * @property email - 소셜 이메일
- * @property nickName - 소셜 닉네임
- * @property socialProvider - 네이버, 카카오, 구글
- */
-export interface UserInfoType {
-  email: string;
-  nickName: string;
-  socialProvider: string;
-}
-
 /** ppt 주요 문장 설정 정보 - 발표 설정 후 최종적으로 PATCH */
 export interface SlidesSettingType {
   /** SHOW: 모든 문장 보기 HIDE: 외울 문장 가리기 */
-  practiceMode: 'SHOW' | 'HIDE';
+  practiceMode: PracticeMode;
   /** ppt 슬라이드 리스트 */
   slides: {
     /** DB Identity Sequence. 백엔드 조회용 */
@@ -123,7 +132,7 @@ export interface SettingDataType {
     minutes: number | null;
   };
   /** SHOW: 모든 문장 보기 HIDE: 외울 문장 가리기 (default: 'SHOW')*/
-  practiceMode: 'SHOW' | 'HIDE';
+  practiceMode: PracticeMode;
   /** 다음 슬라이드 넘어가기 모달 표시 여부 (default: true)*/
   activateNextSlideModal: boolean;
   /** ppt 슬라이드 리스트 */
@@ -153,8 +162,74 @@ export interface SettingDataType {
   /** 마지막 수정 시간  */
   modifiedAt: Date;
 }
+// #endregion
 
-/** 세션 id 조회 res */
-export interface SessionId {
-  sessionId: string;
+// #region Practice API
+
+/** 발표 연습 상세 조회 res */
+export interface PracticeDetail {
+  /** 발표 ID */
+  presentationId: number;
+  /** 발표 제목 */
+  title: string;
+  /** 타이머 정보 */
+  timeLimit: PracticeTime;
+  /** 종료 전 알림 정보 */
+  alertTime: PracticeTime;
+  /** 발표 모드 */
+  practiceMode: PracticeMode;
+  /** 다음 슬라이드 넘어가기 모달 표시 여부 */
+  activateNextSlideModal: boolean;
+  /** 슬라이드 리스트 */
+  slides: PracticeSlide[];
+
+  createdAt: string;
+  modifiedAt: string;
+}
+
+/** 발표연습 상세 조회 - 시간 정보 */
+export interface PracticeTime {
+  hours: number;
+  minutes: number;
+}
+
+/** 발표연습 상세 조회 - 슬라이드 정보 */
+export interface PracticeSlide {
+  /** 슬라이드 ID */
+  id: number;
+  /** 슬라이드 이미지 파일 ID */
+  imageFilePath: string | null;
+  /** 발표 스크립트 */
+  script: string;
+  /** 메모 */
+  memo: string | null;
+  /** 외울 문장 리스트 */
+  memorizationSentences: Memorization[];
+}
+
+/** 발표연습 상세 조회 - 외울문장 정보 */
+export interface Memorization {
+  /** 외울 문장 시작점  */
+  offset: number;
+  /** 외울 문장 끝점 */
+  end: number;
+  /** 외울 문장 길이 */
+  length: number;
+  /** 외울 문장 텍스트 */
+  text: string;
+}
+
+/** 발표 연습 완료된 슬라이드 저장 req */
+export interface SavePracticeParams {
+  memo: string | null;
+  audioFileId: number | null;
+}
+// #endregion
+
+// #region File API
+/** 파일 업로드 res */
+export interface UploadFile {
+  id: number;
+  path: string;
 }
+// #endregion