diff --git a/public/sw.js.map b/public/sw.js.map
index cd138b35..3b984282 100644
--- a/public/sw.js.map
+++ b/public/sw.js.map
@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../private/var/folders/qc/d50qbm6d0xx190b3sx_6dfdc0000gn/T/4ef232c0c038fb1e25454bc6bfb93927/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/hwang-yulim/Documents/cos-frontend/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/hwang-yulim/Documents/cos-frontend/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/hwang-yulim/Documents/cos-frontend/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/hwang-yulim/Documents/cos-frontend/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAa,EAEZ,CAAA;EAQDC,CAAI,CAAA,CAAA,CAAA,CAACC,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAE,CAAA;AAElBC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAyB,EAAE,CAAA;AAI3BC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAA6B,CAAC,CAAA,CAAA,CAAG,CAAE,CAAA,CAAA,CAAA,CAAA,CAAIC,oBAA+B,CAAC,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAC,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAO,EAAE,CAAC,CAAA;GAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAe,EAAE,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;AAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAIF,QAAQ,CAAIA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAQ,CAACG,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,gBAAgB,CAAE,CAAA,CAAA;AAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAO,CAAIC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAQ,CAACJ,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAACK,IAAI,CAAE,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAM,EAAE,CAAG,CAAA,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAU,EAAE,CAAI,CAAA,CAAA,CAAA,CAAA;YAAEC,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAER,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAACQ,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAC,CAAA;EAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAOR,QAAQ,CAAA;EAAC,CAAA,CAAA,CAAA,CAAA,CAAA;KAAG,CAAA;AAAE,CAAA,CAAA,CAAC,CAAC,CAAA,CAAE,CAAK,CAAA,CAAA,CAAA,CAAA,CAAC,CAAA;AACxWL,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAA6B,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAE,CAAA,CAAA,CAAA,CAAA,CAAIc,mBAA8B,CAAC,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;EAAEZ,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAO,EAAE,CAAA,CAAA;EAAG,CAAC,CAAC,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA;;"}
\ No newline at end of file
+{"version":3,"file":"sw.js","sources":["../../../../private/var/folders/qc/d50qbm6d0xx190b3sx_6dfdc0000gn/T/19d5159a7b51aa081388a2ce399674d5/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/hwang-yulim/Documents/cos-frontend/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/hwang-yulim/Documents/cos-frontend/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/hwang-yulim/Documents/cos-frontend/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/hwang-yulim/Documents/cos-frontend/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":"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"}
\ No newline at end of file
diff --git a/src/app/(main)/mypage/page.tsx b/src/app/(main)/mypage/page.tsx
index 3c0d8423..92992503 100644
--- a/src/app/(main)/mypage/page.tsx
+++ b/src/app/(main)/mypage/page.tsx
@@ -59,8 +59,8 @@ export default function MyPage() {
           {/* 기타 */}
           {/*<MyPageItem contents={etcContents} category={'기타'}></MyPageItem>*/}
         </div>
+        <div className={'h-[100px] bg-gray0'} />
       </div>
-      <div className={'h-[60px] bg-gray0'} />
       <NavBar />
     </>
   );
diff --git a/src/app/(main)/mypage/profile/page.tsx b/src/app/(main)/mypage/profile/page.tsx
index bc594c31..91bb15dc 100644
--- a/src/app/(main)/mypage/profile/page.tsx
+++ b/src/app/(main)/mypage/profile/page.tsx
@@ -77,6 +77,7 @@ const ProfileSettings = () => {
             <div className="relative w-fit">
               <div className="relative w-[100px] h-[100px] object-cover overflow-hidden rounded-full">
                 <Image
+                  unoptimized
                   alt={userProfile ? userProfile.userId?.toString() || '' : ''}
                   src={
                     typeof uploadImage === 'string'
diff --git a/src/app/(main)/stopwatch/page.tsx b/src/app/(main)/stopwatch/page.tsx
index fd2729f9..19160796 100644
--- a/src/app/(main)/stopwatch/page.tsx
+++ b/src/app/(main)/stopwatch/page.tsx
@@ -5,23 +5,21 @@ import { useState } from 'react';
 import { useRecoilState } from 'recoil';
 
 import Header from '@/components/common/Header';
+import NavBar from '@/components/common/NavBar';
+import AccumulatedTime from '@/components/stopwatch/AccumulatedTime';
+import StopwatchAlert from '@/components/stopwatch/StopwatchAlert';
 import {
   hStopwatchTimeState,
   isResetState,
   isStartState,
   isStopState,
   mStopwatchTimeState,
-  nowTimeState,
   sStopwatchTimeState,
-  startTimeState,
   stringLocationState,
   timeBoolState,
 } from '@/recoil/stopwatch/atom';
 
 export default function StopWatch() {
-  const [startTime, setStartTime] = useRecoilState(startTimeState); //시작 시간
-  const [now, setNow] = useRecoilState(nowTimeState); //현재 시간
-
   const [timebool, setTimebool] = useRecoilState(timeBoolState); // true: 시작 버튼/ false: 일시정지 버튼
   const [onModal, setOnModal] = useState<boolean>(false); //기록하기 알림창 onoff조절
   const [onAccumulatedModal, setOnAccumulatedModal] = useState<boolean>(false); //기록완료 알림창 onoff조절
@@ -33,160 +31,33 @@ export default function StopWatch() {
   const [mStopwatchTime, setMStopwatchTime] = useRecoilState(mStopwatchTimeState); //분 기록
   const [sStopwatchTime, setSStopwatchTime] = useRecoilState(sStopwatchTimeState); //초 기록
 
-  const ratateStyle = useMemo(() => {
+  const rotateStyle = useMemo(() => {
     return { transform: `rotate(${stringLocation}deg)` }; //원의 위치가 변경될 수 있도록 함
   }, [stringLocation]);
 
-  function StopwatchAlert() {
-    //기록하기 알림창
-    return (
-      <>
-        <div className="">
-          <div className="absolute z-40 w-full h-full px-5 py-8 bg-black bg-opacity-60 flex-col justify-center items-center gap-2 inline-flex ">
-            <div className="relative self-stretch px-2 justify-center items-center inline-flex">
-              <div className="w-64"></div>
-              <div
-                className="flex cursor-pointer"
-                onClick={() => {
-                  setOnModal(false);
-                }}>
-                <div className="text-center text-white text-base font-medium font-['Pretendard Variable'] leading-normal">
-                  닫기
-                </div>
-                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none" viewBox="0 0 25 24">
-                  <mask id="a" width="25" height="24" x="0" y="0" maskUnits="userSpaceOnUse">
-                    <path fill="#D9D9D9" d="M.646 0h24v24h-24z" />
-                  </mask>
-                  <g mask="url(#a)">
-                    <path
-                      fill="#fff"
-                      d="M12.646 12.708 7.4 17.954a.503.503 0 0 1-.345.15.467.467 0 0 1-.363-.15.49.49 0 0 1-.16-.354.49.49 0 0 1 .16-.354L11.938 12 6.692 6.754a.504.504 0 0 1-.15-.344.467.467 0 0 1 .15-.364.49.49 0 0 1 .354-.16.49.49 0 0 1 .354.16l5.246 5.246 5.246-5.246a.503.503 0 0 1 .344-.15.467.467 0 0 1 .364.15.49.49 0 0 1 .16.354.49.49 0 0 1-.16.354L13.353 12l5.247 5.246a.504.504 0 0 1 .15.344.467.467 0 0 1-.15.364.491.491 0 0 1-.354.16.49.49 0 0 1-.354-.16l-5.246-5.246Z"
-                    />
-                  </g>
-                </svg>
-              </div>
-            </div>
-            <div className="px-5 py-6 bg-white rounded-[32px] flex-col justify-center gap-2 flex">
-              <div className="self-stretch flex-col gap-4 flex">
-                <div className="self-stretch text-center flex-col gap-1 flex">
-                  <div className="self-stretch text-neutral-900 text-h6 font-bold font-['Pretendard Variable'] leading-[30px]">
-                    누적 시간
-                  </div>
-                  <div className="self-stretch text-primary text-h2 font-bold font-['Pretendard Variable'] leading-[30px]">
-                    {hStopwatchTime}시간 {mStopwatchTime}분 {sStopwatchTime}초
-                  </div>
-                  <div className="self-stretch text-neutral-950 text-h6 font-normal font-['Pretendard Variable'] leading-[21px]">
-                    기록하시겠습니까?
-                  </div>
-                </div>
-                <div className="justify-end items-center gap-2 inline-flex">
-                  <div
-                    className="h-9 px-4 py-1 bg-gray1 cursor-pointer rounded-[999px] justify-center items-center gap-2 flex"
-                    onClick={() => {
-                      setStartTime(Date.now());
-                      setNow(Date.now());
-                      setOnModal(false); //현재창 닫기
-                      setIsReset(true); //테스트
-                      setIsReset(false); //테스트
-                    }}>
-                    <div className="text-gray4 text-h6 font-medium font-['Pretendard Variable'] leading-[21px]">
-                      아니요, 괜찮아요
-                    </div>
-                  </div>
-                  <div className="h-9 px-4 py-1 cursor-pointer bg-black rounded-[999px] justify-center items-center gap-2 flex">
-                    <div
-                      className="text-white text-h6 font-medium font-['Pretendard Variable'] leading-[21px]"
-                      onClick={() => {
-                        setOnAccumulatedModal(true); //모달창 열기
-                        setOnModal(false); //현재창 닫기
-                        setStartTime(Date.now());
-                        setNow(Date.now());
-                        setIsReset(true); //테스트
-                        setIsReset(false); //테스트
-                      }}>
-                      네, 기록할게요
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  function AccumulatedTime() {
-    //기록 완료 알림창
-    return (
-      <>
-        <div className="">
-          <div className="absolute z-40 w-full h-full px-5 py-8 bg-black bg-opacity-60 flex-col justify-center items-center gap-2 inline-flex ">
-            <div className="relative self-stretch px-2 justify-center items-center inline-flex">
-              <div className="w-52"></div>
-              <div
-                className="flex cursor-pointer"
-                onClick={() => {
-                  setOnAccumulatedModal(false); //현재창 닫기
-                }}>
-                <div className="text-center text-white text-base font-medium font-['Pretendard Variable'] leading-normal">
-                  닫기
-                </div>
-                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none" viewBox="0 0 25 24">
-                  <mask id="a" width="25" height="24" x="0" y="0" maskUnits="userSpaceOnUse">
-                    <path fill="#D9D9D9" d="M.646 0h24v24h-24z" />
-                  </mask>
-                  <g mask="url(#a)">
-                    <path
-                      fill="#fff"
-                      d="M12.646 12.708 7.4 17.954a.503.503 0 0 1-.345.15.467.467 0 0 1-.363-.15.49.49 0 0 1-.16-.354.49.49 0 0 1 .16-.354L11.938 12 6.692 6.754a.504.504 0 0 1-.15-.344.467.467 0 0 1 .15-.364.49.49 0 0 1 .354-.16.49.49 0 0 1 .354.16l5.246 5.246 5.246-5.246a.503.503 0 0 1 .344-.15.467.467 0 0 1 .364.15.49.49 0 0 1 .16.354.49.49 0 0 1-.16.354L13.353 12l5.247 5.246a.504.504 0 0 1 .15.344.467.467 0 0 1-.15.364.491.491 0 0 1-.354.16.49.49 0 0 1-.354-.16l-5.246-5.246Z"
-                    />
-                  </g>
-                </svg>
-              </div>
-            </div>
-            <div className="px-5 py-6 w-[257px] bg-white rounded-[32px] flex-col justify-center gap-2 flex">
-              <div className="self-stretch flex-col gap-4 flex">
-                <div className="self-stretch flex-col gap-1 flex">
-                  <div className="self-stretch text-neutral-900 text-h4 font-bold font-['Pretendard Variable'] leading-[30px]">
-                    전체 누적 시간
-                  </div>
-                  <div className="self-stretch text-primary text-h1 font-bold font-['Pretendard Variable'] leading-[30px]">
-                    {hStopwatchTime}시간 {mStopwatchTime}분 {sStopwatchTime}초
-                  </div>
-                  <div className="self-stretch text-neutral-900 text-h4 font-bold font-['Pretendard Variable'] leading-[30px]">
-                    <br />
-                    목표 기간 동안의 누적 시간
-                  </div>
-                  <div className="self-stretch text-primary text-h1 font-bold font-['Pretendard Variable'] leading-[30px]">
-                    {hStopwatchTime}시간 {mStopwatchTime}분 {sStopwatchTime}초{' '}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       {onModal ? ( //기록하기 알림창 열림OnOff
-        <StopwatchAlert></StopwatchAlert>
+        <StopwatchAlert setOnAccumulatedModal={setOnAccumulatedModal} setOnModal={setOnModal} />
       ) : null}
       {onAccumulatedModal ? ( //기록완료 알림창OnOff
-        <AccumulatedTime></AccumulatedTime>
+        <AccumulatedTime setOnAccumulatedModal={setOnAccumulatedModal} />
       ) : null}
-      <Header headerType={'second'}></Header>
+      <Header />
+      <Header headerType={'second'} />
       <div className="relative flex justify-center items-center mt-[100px]">
         <div className="w-80 h-[449px] flex-col justify-start items-center gap-6 flex">
           {/* <div className={twMerge('h-[320px] w-[320px] border border-gray2 rounded-full', className)}> */}
-          <div style={ratateStyle} className="h-[320px] w-[320px] border border-gray2 rounded-full">
+          <div style={rotateStyle} className="h-[320px] w-[320px] border border-gray2 rounded-full">
             <div className="absolute z-10 left-1/2 -top-2 h-4 w-4 bg-second rounded-full"></div>
           </div>
           <div className="absolute justify-center items-center gap-2 inline-flex w-full h-[290px]">
-            <h1 className=" text-[48px] font-['Pretendard Variable']">
+            <h1
+              className={
+                hStopwatchTime === 0 && mStopwatchTime === 0 && sStopwatchTime === 0
+                  ? 'pt-5 text-[48px] text-gray3'
+                  : 'pt-5 text-[48px]'
+              }>
               {/* 스톱워치 시간 */}
               {/* <div class="text-neutral-950 text-5xl font-medium font-['Pretendard Variable'] leading-[48px]">01 : 20 : 35</div> */}
               {hStopwatchTime.toString().padStart(2, '0')} : {mStopwatchTime.toString().padStart(2, '0')} :{' '}
@@ -205,9 +76,7 @@ export default function StopWatch() {
                 className="w-20 h-20 p-2 bg-gray0 rounded-[999px] justify-center items-center gap-2 inline-flex">
                 <div className="w-[18px] h-[18px] bg-gray4 rounded-sm"></div>
               </button>
-              <div className="text-neutral-500 text-sm font-normal font-['Pretendard Variable'] leading-[21px]">
-                재설정
-              </div>
+              <div className="text-gray4 text-h6 leading-[21px]">재설정</div>
             </div>
             <div className="flex-col justify-start items-center gap-1 inline-flex">
               {timebool ? (
@@ -227,9 +96,7 @@ export default function StopWatch() {
                       />
                     </svg>
                   </button>
-                  <div className="text-neutral-500 text-sm font-normal font-['Pretendard Variable'] leading-[21px]">
-                    시작
-                  </div>
+                  <div className="text-gray4 text-h6 leading-[21px]">시작</div>
                 </div>
               ) : (
                 <div className="flex-col justify-start items-center gap-1 inline-flex">
@@ -245,15 +112,14 @@ export default function StopWatch() {
                       <div className="w-1.5 h-[18px] bg-white rounded-sm"></div>
                     </div>
                   </button>
-                  <div className="text-neutral-500 text-sm font-normal font-['Pretendard Variable'] leading-[21px]">
-                    일시정지
-                  </div>
+                  <div className="text-gray4 text-h6 leading-[21px]">일시정지</div>
                 </div>
               )}
             </div>
           </div>
         </div>
       </div>
+      <NavBar />
     </>
   );
 }
diff --git a/src/components/community/NormalAndTipBoardList.tsx b/src/components/community/NormalAndTipBoardList.tsx
index 7bc570b1..519ac074 100644
--- a/src/components/community/NormalAndTipBoardList.tsx
+++ b/src/components/community/NormalAndTipBoardList.tsx
@@ -125,17 +125,9 @@ const NormalAndTipBoardList = (props: Props) => {
                 title={postResponse.postContent?.title || ''}
                 commentCount={postResponse.postStatus?.commentCount || 0}
                 createdAt={formatDate(postResponse.dateTime?.createdAt || '')}
-                imageUrl={
-                  postResponse.postContent?.images?.length
-                    ? postResponse.postContent.images[0].imageUrl
-                    : null
-                }
+                imageUrl={postResponse.postContent?.images?.length ? postResponse.postContent.images[0].imageUrl : null}
                 likeCount={postResponse.postStatus?.likeCount || 0}
-                topElement={
-                  postResponse.recommendTags
-                    ? tipTopElement(postResponse.postId)
-                    : undefined
-                }
+                topElement={postResponse.recommendTags ? tipTopElement(postResponse.postId) : undefined}
               />
             </div>
           );
diff --git a/src/components/mypage/MyPageHeader.tsx b/src/components/mypage/MyPageHeader.tsx
index 9dbaf3fa..1dcd0415 100644
--- a/src/components/mypage/MyPageHeader.tsx
+++ b/src/components/mypage/MyPageHeader.tsx
@@ -34,6 +34,7 @@ const MyPageHeader = () => {
               src={userProfile?.profileImage || '/person.png'}
               alt={userProfile?.profileImage || '/person.png'}
               fill
+              unoptimized
               className={'object-cover rounded-full'}></Image>
           </div>
           <div className={'flex items-center'}>
diff --git a/src/components/stopwatch/AccumulatedTime.tsx b/src/components/stopwatch/AccumulatedTime.tsx
new file mode 100644
index 00000000..608314d0
--- /dev/null
+++ b/src/components/stopwatch/AccumulatedTime.tsx
@@ -0,0 +1,81 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+import { useRecoilState } from 'recoil';
+
+import { hStopwatchTimeState, mStopwatchTimeState, sStopwatchTimeState } from '@/recoil/stopwatch/atom';
+
+interface Props {
+  setOnAccumulatedModal: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function AccumulatedTime(props: Props) {
+  const { setOnAccumulatedModal } = props;
+
+  const [hStopwatchTime, setHStopwatchTime] = useRecoilState(hStopwatchTimeState); //시 기록
+  const [mStopwatchTime, setMStopwatchTime] = useRecoilState(mStopwatchTimeState); //분 기록
+  const [sStopwatchTime, setSStopwatchTime] = useRecoilState(sStopwatchTimeState); //초 기록
+
+  //기록 완료 알림창
+  return (
+    <>
+      <div className="">
+        <div className="absolute z-40 w-full h-full px-[39px] py-8 bg-black bg-opacity-60 flex-col justify-center items-center gap-2 inline-flex ">
+          <div className="relative self-stretch px-2 justify-end items-center inline-flex">
+            <div
+              className="flex cursor-pointer"
+              onClick={() => {
+                setOnAccumulatedModal(false); //현재창 닫기
+              }}>
+              <div className="text-center text-white text-base font-medium font-['Pretendard Variable'] leading-normal">
+                닫기
+              </div>
+              <DeleteIcon />
+            </div>
+          </div>
+          <section className="px-5 py-6 bg-white rounded-[32px] flex-col justify-center gap-2 flex w-full">
+            <div className="self-stretch flex-col gap-4 flex">
+              <div className="self-stretch flex-col gap-1 flex">
+                <div className="self-stretch text-h4 leading-[30px] font-medium">전체 누적 시간</div>
+                <div className="self-stretch text-primary text-h1 font-bold font-['Pretendard Variable'] leading-[30px]">
+                  {hStopwatchTime}시간 {mStopwatchTime}분 {sStopwatchTime}초
+                </div>
+                <div className="self-stretch  text-h4 font-medium leading-[30px]">
+                  <br />
+                  목표 기간 동안의 누적 시간
+                </div>
+                <div className="self-stretch text-primary text-h1 font-bold font-['Pretendard Variable'] leading-[30px]">
+                  {/*TODO: 백엔드 수정되면 변경*/}
+                  {hStopwatchTime}시간 {mStopwatchTime}분 {sStopwatchTime}초{' '}
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </>
+  );
+}
+export default AccumulatedTime;
+
+const DeleteIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={25} height={24} fill="none" {...props}>
+    <mask
+      id="a"
+      width={25}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: 'alpha',
+      }}>
+      <path fill="#D9D9D9" d="M.974 0h24v24h-24z" />
+    </mask>
+    <g mask="url(#a)">
+      <path
+        fill="#fff"
+        d="m12.974 12.708-5.246 5.246a.5.5 0 0 1-.344.15.47.47 0 0 1-.364-.15.5.5 0 0 1-.16-.354.5.5 0 0 1 .16-.354L12.266 12 7.02 6.754a.5.5 0 0 1-.15-.344.47.47 0 0 1 .15-.364.5.5 0 0 1 .354-.16.5.5 0 0 1 .354.16l5.246 5.246 5.246-5.246a.5.5 0 0 1 .344-.15.47.47 0 0 1 .364.15.5.5 0 0 1 .16.354.5.5 0 0 1-.16.354L13.682 12l5.246 5.246a.5.5 0 0 1 .15.344.47.47 0 0 1-.15.364.5.5 0 0 1-.354.16.5.5 0 0 1-.354-.16z"
+      />
+    </g>
+  </svg>
+);
diff --git a/src/components/stopwatch/StopwatchAlert.tsx b/src/components/stopwatch/StopwatchAlert.tsx
new file mode 100644
index 00000000..714d5a08
--- /dev/null
+++ b/src/components/stopwatch/StopwatchAlert.tsx
@@ -0,0 +1,135 @@
+import React, { type SVGProps } from 'react';
+import { useRecoilState } from 'recoil';
+
+import {
+  hStopwatchTimeState,
+  isResetState,
+  mStopwatchTimeState,
+  nowTimeState,
+  sStopwatchTimeState,
+  startTimeState,
+} from '@/recoil/stopwatch/atom';
+import { postStudyTimes } from '@/lib/api/stopwatch';
+import { selectedPrepareTimeState } from '@/recoil/home/atom';
+
+interface Props {
+  setOnModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setOnAccumulatedModal: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function StopwatchAlert(props: Props) {
+  const { setOnModal, setOnAccumulatedModal } = props;
+  const [now, setNow] = useRecoilState(nowTimeState); //현재 시간
+  const [startTime, setStartTime] = useRecoilState(startTimeState); //시작 시간
+  const [hStopwatchTime, setHStopwatchTime] = useRecoilState(hStopwatchTimeState); //시 기록
+  const [mStopwatchTime, setMStopwatchTime] = useRecoilState(mStopwatchTimeState); //분 기록
+  const [sStopwatchTime, setSStopwatchTime] = useRecoilState(sStopwatchTimeState); //초 기록
+  const [isReset, setIsReset] = useRecoilState(isResetState); //리셋 여부
+  const [selectedPrepareTime, setSelectedPrepareTime] = useRecoilState(selectedPrepareTimeState);
+
+  const convertToMilliseconds = (hours: number, minutes: number, seconds: number): number => {
+    const hoursInMs = hours * 60 * 60 * 1000; // 시를 밀리초로 변환
+    const minutesInMs = minutes * 60 * 1000; // 분을 밀리초로 변환
+    const secondsInMs = seconds * 1000; // 초를 밀리초로 변환
+
+    return hoursInMs + minutesInMs + secondsInMs; // 모두 더해서 반환
+  };
+
+  //기록하기 알림창
+  return (
+    <>
+      <div className="">
+        <div className="absolute z-40 w-full h-full px-[36px] py-8 bg-black bg-opacity-60 flex-col justify-center items-center gap-2 inline-flex ">
+          {/* 닫기 버튼 */}
+          <div className="relative self-stretch px-2 items-center inline-flex justify-end mr-2">
+            <div
+              className=" flex cursor-pointer"
+              onClick={() => {
+                setOnModal(false);
+              }}>
+              <div className="text-center text-white text-base font-medium font-['Pretendard Variable'] leading-normal">
+                닫기
+              </div>
+              <DeleteIcon />
+            </div>
+          </div>
+
+          {/* 모달창 */}
+          <section className="px-5 py-6 bg-white rounded-[32px] flex flex-col gap-2 w-full">
+            <div className="self-stretch flex-col gap-4 flex">
+              <div className={'flex text-h2 font-bold gap-x-1'}>
+                <div className="self-stretch leading-[30px]">누적시간</div>
+                <div className="self-stretch text-primary leading-[30px]">
+                  {hStopwatchTime}시간 {mStopwatchTime}분 {sStopwatchTime}초
+                </div>
+              </div>
+              <div>
+                <div className="text-h6 leading-[21px]">기록할까요?</div>
+                <div className="text-h6 leading-[21px]">기록하지 않으면 타이머의 시간이 초기화됩니다.</div>
+              </div>
+              <div className="justify-end items-center gap-2 inline-flex">
+                <div
+                  className="h-9 px-4 py-1 bg-gray1 cursor-pointer rounded-[999px] justify-center items-center gap-2 flex"
+                  onClick={() => {
+                    setStartTime(Date.now());
+                    setNow(Date.now());
+                    setOnModal(false); //현재창 닫기
+                    setIsReset(true); //테스트
+                    setIsReset(false); //테스트
+                  }}>
+                  <div className="text-gray4 text-h6 font-medium font-['Pretendard Variable'] leading-[21px]">
+                    아니요
+                  </div>
+                </div>
+                <div className="h-9 px-4 py-1 cursor-pointer bg-black rounded-[999px] justify-center items-center gap-2 flex">
+                  <div
+                    className="text-white text-h6 font-['Pretendard Variable'] leading-[21px]"
+                    onClick={() => {
+                      postStudyTimes(
+                        selectedPrepareTime.goalId,
+                        convertToMilliseconds(hStopwatchTime, mStopwatchTime, sStopwatchTime),
+                      ).then(() => {
+                        setOnAccumulatedModal(true); //모달창 열기
+                        setOnModal(false); //현재창 닫기
+                        setStartTime(Date.now());
+                        setNow(Date.now());
+                        setIsReset(true); //테스트
+                        setIsReset(false); //테스트
+                      });
+                    }}>
+                    기록하기
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default StopwatchAlert;
+
+const DeleteIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={25} height={24} fill="none" {...props}>
+    <mask
+      id="a"
+      width={25}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: 'alpha',
+      }}>
+      <path fill="#D9D9D9" d="M.974 0h24v24h-24z" />
+    </mask>
+    <g mask="url(#a)">
+      <path
+        fill="#fff"
+        d="m12.974 12.708-5.246 5.246a.5.5 0 0 1-.344.15.47.47 0 0 1-.364-.15.5.5 0 0 1-.16-.354.5.5 0 0 1 .16-.354L12.266 12 7.02 6.754a.5.5 0 0 1-.15-.344.47.47 0 0 1 .15-.364.5.5 0 0 1 .354-.16.5.5 0 0 1 .354.16l5.246 5.246 5.246-5.246a.5.5 0 0 1 .344-.15.47.47 0 0 1 .364.15.5.5 0 0 1 .16.354.5.5 0 0 1-.16.354L13.682 12l5.246 5.246a.5.5 0 0 1 .15.344.47.47 0 0 1-.15.364.5.5 0 0 1-.354.16.5.5 0 0 1-.354-.16z"
+      />
+    </g>
+  </svg>
+);
diff --git a/src/lib/api/stopwatch.ts b/src/lib/api/stopwatch.ts
new file mode 100644
index 00000000..5ee3b198
--- /dev/null
+++ b/src/lib/api/stopwatch.ts
@@ -0,0 +1,20 @@
+import { sendRequest } from '@/lib/axios';
+
+export const postStudyTimes = async (goalId: number, studyTime: number) => {
+  try {
+    // 액세스 토큰을 헤더에 담아 요청 보내기
+    const response = await sendRequest({
+      headers: {
+        'Access-Token': localStorage.getItem('accessToken'),
+      },
+      method: 'POST',
+      url: `/api/v2/goals/${goalId}/study-times?studyTime=${studyTime}`,
+    });
+    // 성공적인 응답 처리
+    return response.data;
+  } catch (error: any) {
+    if (error) {
+      console.log('error', error);
+    }
+  }
+};
\ No newline at end of file