From e6e0ce30bf24e506ad32e4f7d24ea145ed9296fa Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Thu, 22 Dec 2022 23:46:28 +0900
Subject: [PATCH 01/24] =?UTF-8?q?feat=20:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EC=95=B1=ED=82=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index aa069f2..a165a47 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,16 +5,16 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d2be9d6e5ecbac239e72d3896c0d4363"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

From bd1fe3af9a6948e2a56686bba4b77483fc521c8f Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Thu, 22 Dec 2022 23:46:56 +0900
Subject: [PATCH 02/24] =?UTF-8?q?style=20:=20=ED=8F=B0=ED=8A=B8=201rem->10?=
 =?UTF-8?q?px=EB=A1=9C=20=EC=82=AC=EC=9A=A9=EA=B0=80=EB=8A=A5=ED=95=98?=
 =?UTF-8?q?=EA=B2=8C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/globalStyle.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
index e4846fd..bd6cd8c 100644
--- a/src/styles/globalStyle.ts
+++ b/src/styles/globalStyle.ts
@@ -140,6 +140,8 @@ ${reset}
 #root, body, html {
     width: 100%;
     height: 100vh;
+
+    font-size: 62.5%;
  
 }
 * {

From 2e262186a635fd7bfd4c3344c9a9fa9b52e01746 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Thu, 22 Dec 2022 23:47:19 +0900
Subject: [PATCH 03/24] =?UTF-8?q?feat=20:=201=EC=B0=A8=20=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=20=ED=99=94=EB=A9=B4=20=EA=B5=AC=EC=84=B1=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/KakaoMap.tsx | 51 +++++++++++++++++++++++++++++++++
 src/components/map/index.ts     |  1 +
 src/pages/Map.tsx               |  4 ++-
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/components/map/KakaoMap.tsx
 create mode 100644 src/components/map/index.ts

diff --git a/src/components/map/KakaoMap.tsx b/src/components/map/KakaoMap.tsx
new file mode 100644
index 0000000..9d5b3b1
--- /dev/null
+++ b/src/components/map/KakaoMap.tsx
@@ -0,0 +1,51 @@
+import { Component, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
+
+const KakaoMap = () => {
+  const [map, setMap] = useState({});
+  const [latitude, setLatitude] = useState<number>();
+  const [longtitude, setLongtitude] = useState<number>();
+  //   const latitude = useRef<number>();
+  //   const longtitude = useRef<number>();
+
+  const { kakao } = window;
+
+  useEffect(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((position) => {
+        setLatitude(position.coords.latitude);
+        setLongtitude(position.coords.longitude);
+        // latitude.current = position.coords.latitude;
+        // longtitude.current = position.coords.longitude;
+
+        console.log(latitude, longtitude);
+      });
+    }
+    const container = document.getElementById('map');
+    const options = {
+      center: new kakao.maps.LatLng(latitude, longtitude),
+      level: 3,
+    };
+
+    setMap(new kakao.maps.Map(container, options));
+  }, []);
+
+  console.log('밖', latitude, longtitude);
+  return latitude != undefined && longtitude != undefined ? (
+    <StMapWrapper id="map"></StMapWrapper>
+  ) : (
+    <div>lodiing중...</div>
+  );
+};
+
+export default KakaoMap;
+
+const StMapWrapper = styled.div`
+  width: 39rem;
+  height: 84.4rem;
+`;
diff --git a/src/components/map/index.ts b/src/components/map/index.ts
new file mode 100644
index 0000000..1aafd17
--- /dev/null
+++ b/src/components/map/index.ts
@@ -0,0 +1 @@
+export { default as KakaoMap } from './KakaoMap';
diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 70705bc..96adbb4 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
+import { KakaoMap } from '../components/map';
+
 const Map = () => {
-  return <div>지도화면이다</div>;
+  return <KakaoMap />;
 };
 
 export default Map;

From 7718cf7a284489e1a22ce3ac62d22f76353012a4 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Thu, 22 Dec 2022 23:48:48 +0900
Subject: [PATCH 04/24] =?UTF-8?q?fix=20:=20=ED=99=98=EA=B2=BD=EB=B3=80?=
 =?UTF-8?q?=EC=88=98=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 4d29575..8692cf6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

From b87d1b25a67adace589c8ea08f60f80b7b2b87b6 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 27 Dec 2022 10:03:07 +0900
Subject: [PATCH 05/24] =?UTF-8?q?feat=20:=20=ED=98=84=EC=9E=AC=20=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EB=B0=94=EB=A1=9C=20=EB=B6=88=EB=9F=AC=EC=98=A4?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B0=8F=20=EC=A7=80=EB=8F=84=20=EB=9D=84=EC=9A=B0?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/KakaoMap.tsx | 46 ++++++++++++---------------------
 src/types/map.ts                |  9 +++++++
 2 files changed, 25 insertions(+), 30 deletions(-)
 create mode 100644 src/types/map.ts

diff --git a/src/components/map/KakaoMap.tsx b/src/components/map/KakaoMap.tsx
index 9d5b3b1..b34e464 100644
--- a/src/components/map/KakaoMap.tsx
+++ b/src/components/map/KakaoMap.tsx
@@ -1,46 +1,32 @@
 import { Component, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-declare global {
-  interface Window {
-    kakao: any;
-  }
-}
+
+import { KakaoMapInfo } from '../../types/map';
 
 const KakaoMap = () => {
   const [map, setMap] = useState({});
-  const [latitude, setLatitude] = useState<number>();
-  const [longtitude, setLongtitude] = useState<number>();
-  //   const latitude = useRef<number>();
-  //   const longtitude = useRef<number>();
-
+  const [kakaoMapInfo, setKakaoMapInfo] = useState<KakaoMapInfo>();
   const { kakao } = window;
 
   useEffect(() => {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition((position) => {
-        setLatitude(position.coords.latitude);
-        setLongtitude(position.coords.longitude);
-        // latitude.current = position.coords.latitude;
-        // longtitude.current = position.coords.longitude;
-
-        console.log(latitude, longtitude);
+        setKakaoMapInfo({ latitude: position.coords.latitude, longitude: position.coords.longitude });
       });
     }
-    const container = document.getElementById('map');
-    const options = {
-      center: new kakao.maps.LatLng(latitude, longtitude),
-      level: 3,
-    };
-
-    setMap(new kakao.maps.Map(container, options));
   }, []);
-
-  console.log('밖', latitude, longtitude);
-  return latitude != undefined && longtitude != undefined ? (
-    <StMapWrapper id="map"></StMapWrapper>
-  ) : (
-    <div>lodiing중...</div>
-  );
+  useEffect(() => {
+    if (kakaoMapInfo) {
+      const container = document.getElementById('map');
+      const options = {
+        center: new kakao.maps.LatLng(kakaoMapInfo.latitude, kakaoMapInfo.longitude),
+        level: 3,
+      };
+
+      setMap(new kakao.maps.Map(container, options));
+    }
+  }, [kakaoMapInfo]);
+  return kakaoMapInfo != undefined ? <StMapWrapper id="map"></StMapWrapper> : <div>lodiing중...</div>;
 };
 
 export default KakaoMap;
diff --git a/src/types/map.ts b/src/types/map.ts
new file mode 100644
index 0000000..599b999
--- /dev/null
+++ b/src/types/map.ts
@@ -0,0 +1,9 @@
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
+export interface KakaoMapInfo {
+  latitude: number;
+  longitude: number;
+}

From 38c9b4b9becd4a8b28d57ca3a26d4d244e11c8e8 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 11:17:07 +0900
Subject: [PATCH 06/24] =?UTF-8?q?style=20:=20theme=20=ED=8F=B0=ED=8A=B8=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/style.d.ts |  5 +++++
 src/styles/theme.ts   | 25 ++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/styles/style.d.ts b/src/styles/style.d.ts
index 3f02241..84b44f1 100644
--- a/src/styles/style.d.ts
+++ b/src/styles/style.d.ts
@@ -14,5 +14,10 @@ declare module 'styled-components' {
       gray_02: string;
       gray_bg: string;
     };
+    fonts: {
+      Jupgo_Bold_32: SerializedStyles;
+      Jupgo_SemiBold_32: SerializedStyles;
+      Jupgo_Regular_32: SerializedStyles;
+    };
   }
 }
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index de5315d..91a624f 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -12,7 +12,30 @@ const colors = {
   gray_02: '#E9E8EB',
   gray_bg: '#F8F8F8',
 };
+const fonts = {
+  Jupgo_Bold_32: css`
+    font-family: 'Noto Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 3.2rem;
+    line-height: 4.4rem;
+  `,
+  Jupgo_SemiBold_32: css`
+    font-family: 'Noto Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 3.2rem;
+    line-height: 4.4rem;
+  `,
+  Jupgo_Regular_32: css`
+    font-family: 'Noto Sans';
+    font-style: normal;
+    font-weight: 300;
+    font-size: 3.2rem;
+    line-height: 4.4rem;
+  `,
+};
 
-const theme: DefaultTheme = { colors };
+const theme: DefaultTheme = { colors, fonts };
 
 export default theme;

From 237c3a78e6e21b80474bcbcb8931134bc36e8ff7 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:23:04 +0900
Subject: [PATCH 07/24] =?UTF-8?q?docs=20:=20=EC=98=A4=EB=A5=98=20=EC=8B=AC?=
 =?UTF-8?q?=ED=95=9C=20eslint=20=EC=9E=A0=EC=8B=9C=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 764f52f..8a431eb 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -36,7 +36,6 @@
     "import"
   ],
   "rules": {
-    "indent": ["error", 2, { "SwitchCase": 1 }], // 들여쓰기 몇 칸? 기본 2칸으로 하되, switch문에서는 1칸으로 지정
     "quotes": ["off", "single"], // 쌍따옴표가 아닌 홑따옴표를 사용
     "semi": ["error", "always"], // semi colon을 강제함
     "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],

From d5794e8e66903b5fb81a93dc2a252debe8bceeaf Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:23:21 +0900
Subject: [PATCH 08/24] =?UTF-8?q?docs=20:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/manifest.json | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..b760a84 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,21 +2,7 @@
   "short_name": "React App",
   "name": "Create React App Sample",
   "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
+   
   ],
   "start_url": ".",
   "display": "standalone",

From e1f7aeccf7173c09c08d5e3590705447223fdd52 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:23:34 +0900
Subject: [PATCH 09/24] =?UTF-8?q?docs=20:=20=EB=A6=AC=EC=BD=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  2 ++
 yarn.lock    | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/package.json b/package.json
index e2fafca..4c8c559 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.6",
+    "recoil-persist": "^4.2.0",
     "styled-components": "^5.3.6",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
diff --git a/yarn.lock b/yarn.lock
index cb9b484..de65b38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4804,6 +4804,11 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
+hamt_plus@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -7689,6 +7694,18 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil-persist@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/recoil-persist/-/recoil-persist-4.2.0.tgz#9fbb4a8c158cbb83ceb9dedf795aee24ed15395d"
+  integrity sha512-MHVfML9GxJP3RpkKR4F5rp7DtvzIvjWhowtMao/b7h2k4afMio/4sMAdUtltIrDaeVegH0Iga8Sx5XQ3oD7CzA==
+
+recoil@^0.7.6:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.6.tgz#75297ecd70bbfeeb72e861aa6141a86bb6dfcd5e"
+  integrity sha512-hsBEw7jFdpBCY/tu2GweiyaqHKxVj6EqF2/SfrglbKvJHhpN57SANWvPW+gE90i3Awi+A5gssOd3u+vWlT+g7g==
+  dependencies:
+    hamt_plus "1.0.2"
+
 recursive-readdir@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372"

From 079a4960e9d66903010c067a8f30525694d411cf Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:23:50 +0900
Subject: [PATCH 10/24] =?UTF-8?q?feat:=20=EB=A6=AC=EC=BD=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=B5=9C=EC=83=81=EB=8B=A8=EC=97=90=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Router.tsx | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/common/Router.tsx b/src/components/common/Router.tsx
index 5bc7264..12ed60c 100644
--- a/src/components/common/Router.tsx
+++ b/src/components/common/Router.tsx
@@ -1,4 +1,5 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { RecoilRoot } from 'recoil';
 
 import Authentication from '../../pages/Authentication';
 import DiaryDetail from '../../pages/DiaryDetail';
@@ -12,19 +13,21 @@ import TreeDiary from '../../pages/TreeDiary';
 const Router = () => {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Main />} />
-        <Route path="*" element={<Error404 />} />
-        <Route path="/treediary" element={<TreeDiary />}>
-          <Route path="detail" element={<DiaryDetail />} />
-          <Route path="detailall" element={<DiaryDetailAll />} />
-        </Route>
-        <Route path="/map" element={<Map />}>
-          <Route path="authentication" element={<Authentication />} />
-        </Route>
-        <Route path="/login" element={<Login />} />
-        <Route path="/mypage" element={<Mypage />} />
-      </Routes>
+      <RecoilRoot>
+        <Routes>
+          <Route path="/" element={<Main />} />
+          <Route path="*" element={<Error404 />} />
+          <Route path="/treediary" element={<TreeDiary />}>
+            <Route path="detail" element={<DiaryDetail />} />
+            <Route path="detailall" element={<DiaryDetailAll />} />
+          </Route>
+          <Route path="/map" element={<Map />}>
+            <Route path="authentication" element={<Authentication />} />
+          </Route>
+          <Route path="/login" element={<Login />} />
+          <Route path="/mypage" element={<Mypage />} />
+        </Routes>
+      </RecoilRoot>
     </BrowserRouter>
   );
 };

From 6ffc6bd6377a569393b643fef9c810c640e4afde Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:24:07 +0900
Subject: [PATCH 11/24] =?UTF-8?q?style=20:=20=EC=A7=80=EB=8F=84=20?=
 =?UTF-8?q?=EB=A7=B5=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=ED=8F=B0=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/style.d.ts | 1 +
 src/styles/theme.ts   | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/styles/style.d.ts b/src/styles/style.d.ts
index 84b44f1..6eceb11 100644
--- a/src/styles/style.d.ts
+++ b/src/styles/style.d.ts
@@ -16,6 +16,7 @@ declare module 'styled-components' {
     };
     fonts: {
       Jupgo_Bold_32: SerializedStyles;
+      Jupgo_Bold_20: SerializedStyles;
       Jupgo_SemiBold_32: SerializedStyles;
       Jupgo_Regular_32: SerializedStyles;
     };
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 91a624f..8946f00 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -20,6 +20,13 @@ const fonts = {
     font-size: 3.2rem;
     line-height: 4.4rem;
   `,
+  Jupgo_Bold_20: css`
+    font-family: 'Noto Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 2rem;
+    line-height: 2.7rem;
+  `,
   Jupgo_SemiBold_32: css`
     font-family: 'Noto Sans';
     font-style: normal;

From 2d99f372912246e094d10dfe4b33a8bdf537ac2f Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:24:26 +0900
Subject: [PATCH 12/24] =?UTF-8?q?style=20:=20=ED=95=84=EC=9A=94=ED=95=9C?=
 =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=EB=93=A4=20import?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/asset/icon/IcFlogging.svg  |  3 +++
 src/asset/icon/IcJupgoLogo.svg |  5 +++++
 src/asset/icon/IcPause.svg     |  3 +++
 src/asset/icon/IcRunning.svg   | 11 +++++++++++
 src/asset/icon/IcStop.svg      |  3 +++
 5 files changed, 25 insertions(+)
 create mode 100644 src/asset/icon/IcFlogging.svg
 create mode 100644 src/asset/icon/IcJupgoLogo.svg
 create mode 100644 src/asset/icon/IcPause.svg
 create mode 100644 src/asset/icon/IcRunning.svg
 create mode 100644 src/asset/icon/IcStop.svg

diff --git a/src/asset/icon/IcFlogging.svg b/src/asset/icon/IcFlogging.svg
new file mode 100644
index 0000000..2293787
--- /dev/null
+++ b/src/asset/icon/IcFlogging.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 13.5L0.75 26.9234L0.75 0.0766058L24 13.5Z" fill="white"/>
+</svg>
diff --git a/src/asset/icon/IcJupgoLogo.svg b/src/asset/icon/IcJupgoLogo.svg
new file mode 100644
index 0000000..c325405
--- /dev/null
+++ b/src/asset/icon/IcJupgoLogo.svg
@@ -0,0 +1,5 @@
+<svg width="221" height="82" viewBox="0 0 221 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M121.181 50.9C119.781 50.9 119.081 50.2333 119.081 48.9V39.1C119.081 37.7667 119.781 37.1 121.181 37.1H147.781C149.048 37.1 149.681 37.7667 149.681 39.1V53C149.681 58.4667 148.915 63.0333 147.381 66.7C145.848 70.3667 143.681 73.3 140.881 75.5C138.148 77.7 134.881 79.2333 131.081 80.1C127.281 81.0333 123.148 81.5 118.681 81.5C114.081 81.5 109.881 81.0333 106.081 80.1C102.281 79.1667 98.9813 77.5667 96.1813 75.3C93.448 73.0333 91.3146 70.0333 89.7813 66.3C88.3146 62.5 87.5813 57.7667 87.5813 52.1V29.5C87.5813 23.8333 88.3146 19.1 89.7813 15.3C91.3146 11.5 93.448 8.46667 96.1813 6.2C98.9813 3.93333 102.281 2.33333 106.081 1.4C109.881 0.466667 114.081 0 118.681 0C123.281 0 127.481 0.5 131.281 1.5C135.081 2.43333 138.348 3.96667 141.081 6.1C143.815 8.16667 145.915 10.9 147.381 14.3C148.915 17.6333 149.681 21.6667 149.681 26.4V26.6C149.615 27.9333 148.948 28.6 147.681 28.6H131.381C129.981 28.6 129.281 27.9 129.281 26.5V25.7C129.281 24.5 129.081 23.3667 128.681 22.3C128.348 21.2333 127.748 20.3 126.881 19.5C126.081 18.7 125.015 18.0667 123.681 17.6C122.348 17.0667 120.681 16.8 118.681 16.8C114.748 16.8 111.948 17.7667 110.281 19.7C108.681 21.5667 107.881 24.5667 107.881 28.7V52.8C107.881 56.9333 108.681 59.9667 110.281 61.9C111.948 63.7667 114.748 64.7 118.681 64.7C122.615 64.7 125.348 63.7667 126.881 61.9C128.481 59.9667 129.281 56.9333 129.281 52.8V50.9H121.181Z" fill="#B6E599"/>
+<path d="M176.898 22.7C178.298 22.7 178.998 23.3667 178.998 24.7V51.4C178.998 55.5333 179.798 58.5667 181.398 60.5C182.998 62.3667 185.765 63.3 189.698 63.3C193.632 63.3 196.398 62.3667 197.998 60.5C199.665 58.5667 200.498 55.5333 200.498 51.4V35.2C200.498 32.7333 200.265 30.5333 199.798 28.6C199.332 26.6667 198.432 25.0667 197.098 23.8C195.832 22.4667 194.032 21.4667 191.698 20.8C189.365 20.0667 186.365 19.7 182.698 19.7H158.698C157.298 19.7 156.598 19.0333 156.598 17.7V3.5C156.598 2.16666 157.298 1.5 158.698 1.5H182.198C188.932 1.5 194.732 2.13333 199.598 3.4C204.465 4.66666 208.465 6.63333 211.598 9.3C214.732 11.9 217.032 15.2667 218.498 19.4C220.032 23.5333 220.798 28.4667 220.798 34.2V52.1C220.798 57.7667 220.032 62.5 218.498 66.3C217.032 70.0333 214.898 73.0333 212.098 75.3C209.365 77.5667 206.098 79.1667 202.298 80.1C198.498 81.0333 194.298 81.5 189.698 81.5C185.098 81.5 180.898 81.0333 177.098 80.1C173.298 79.1667 170.032 77.5667 167.298 75.3C164.565 73.0333 162.432 70.0333 160.898 66.3C159.432 62.5 158.698 57.7667 158.698 52.1V24.7C158.698 23.3667 159.365 22.7 160.698 22.7H176.898Z" fill="#B6E599"/>
+<path d="M3.4 80C2.06667 80 1.4 79.3333 1.4 78V54C1.4 52.6667 2.06667 52 3.4 52H17.8C19.1333 52 19.8 52.6667 19.8 54V70.3H59V66.3H24.9C23.5 66.3 22.8 65.6333 22.8 64.3V59.1C22.8 57.7667 23.5 57.1 24.9 57.1H59V54C59 52.6667 59.7 52 61.1 52H75.4C76.8 52 77.5 52.6667 77.5 54V78C77.5 79.3333 76.8 80 75.4 80H3.4ZM1.9 2C1.9 0.666666 2.6 0 4 0H74.9C76.3 0 77 0.666666 77 2V10.4C77 11.7333 76.3 12.4 74.9 12.4H51.6L25.3 31.1C24.9 31.4333 24.4 31.7333 23.8 32C23.2667 32.2 22.7 32.3 22.1 32.3H2C1.2 32.3 0.6 32.0333 0.2 31.5C-0.133333 30.9667 0.0333333 30.4333 0.7 29.9L25.4 12.4H4C2.6 12.4 1.9 11.7333 1.9 10.4V2ZM49.2 47.1V51C49.2 52.3333 48.5333 53 47.2 53H31.8C30.4667 53 29.8 52.3333 29.8 51V47.1H2.1C0.7 47.1 0 46.4 0 45V38.1C0 36.7667 0.7 36.1 2.1 36.1H76.8C78.2 36.1 78.9 36.7667 78.9 38.1V45C78.9 46.4 78.2 47.1 76.8 47.1H49.2ZM43.3 24.6C42.7667 24.2667 42.5333 23.8 42.6 23.2C42.6667 22.6 42.9333 22.1333 43.4 21.8L51.9 15.7C52.5 15.1667 53.0333 14.9333 53.5 15C53.9667 15 54.5 15.2 55.1 15.6L78.4 29.4C79.0667 29.8667 79.2 30.4 78.8 31C78.4667 31.5333 77.9 31.8 77.1 31.8H56.1C55.5 31.8 54.8667 31.6667 54.2 31.4C53.6 31.0667 53.1 30.7333 52.7 30.4L43.3 24.6Z" fill="#6CB88E"/>
+</svg>
diff --git a/src/asset/icon/IcPause.svg b/src/asset/icon/IcPause.svg
new file mode 100644
index 0000000..1bf0ee3
--- /dev/null
+++ b/src/asset/icon/IcPause.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H0V21H8V0ZM18 0H10V21H18V0Z" fill="white"/>
+</svg>
diff --git a/src/asset/icon/IcRunning.svg b/src/asset/icon/IcRunning.svg
new file mode 100644
index 0000000..e1613c6
--- /dev/null
+++ b/src/asset/icon/IcRunning.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_635_1096)">
+<path d="M14.0356 5.10421C13.3702 5.10918 12.7298 4.84331 12.255 4.36497C11.7804 3.8865 11.5102 3.23465 11.5037 2.55217C11.5191 1.63536 12.0051 0.794821 12.7823 0.340916C13.5593 -0.112988 14.5123 -0.112988 15.2893 0.340916C16.0664 0.794821 16.5525 1.63539 16.5679 2.55217C16.5614 3.23462 16.2911 3.88663 15.8164 4.36497C15.3417 4.84344 14.7012 5.10916 14.0356 5.10421H14.0356Z" fill="black"/>
+<path d="M8.59093 19.2406C8.52182 19.2406 8.4527 19.2338 8.38477 19.2204C8.18017 19.1822 7.99116 19.0832 7.84114 18.9354C7.69126 18.7878 7.58707 18.598 7.54178 18.3899C7.49531 18.1851 7.50866 17.9707 7.58026 17.7737C7.65186 17.5765 7.77844 17.4054 7.94441 17.2818L11.5075 14.2851L9.6782 11.5313L7.7345 14.5447V14.5446C7.58541 14.7923 7.35149 14.9739 7.07859 15.054C6.80567 15.134 6.51351 15.1066 6.25931 14.9773L1.22514 12.6937C0.945547 12.5565 0.737545 12.3021 0.65481 11.9958C0.600618 11.7949 0.604807 11.582 0.666983 11.3834C0.72916 11.1849 0.846575 11.0092 1.00483 10.8782C1.16596 10.7405 1.36285 10.6541 1.57121 10.6297C1.7796 10.6051 1.99035 10.6436 2.17767 10.7404L6.43474 12.6454L9.03305 8.24376L10.0031 6.4468L8.51325 5.50693L6.81223 7.90609C6.69049 8.07881 6.52255 8.21142 6.32868 8.28818C6.13482 8.36495 5.92342 8.3824 5.72001 8.33838C5.36451 8.26899 5.06842 8.01801 4.93488 7.6731C4.80136 7.32832 4.84914 6.93736 5.06159 6.63686L7.27349 3.51674C7.4434 3.28039 7.69367 3.11812 7.97472 3.06177C8.25575 3.00554 8.54727 3.05935 8.79138 3.21262L12.1333 5.32107C12.5585 5.5648 12.9925 5.82074 13.4225 6.083L13.7613 6.29143C13.9759 6.42403 14.1907 6.55649 14.4072 6.68441L15.7823 7.49128L17.4115 5.04272V5.04285C17.528 4.8665 17.692 4.72866 17.8835 4.64612C18.0751 4.56358 18.2859 4.53982 18.4902 4.57794C18.8476 4.63632 19.1512 4.87817 19.2948 5.21892C19.4384 5.55969 19.402 5.95199 19.1985 6.25894L17.0797 9.44362C16.9166 9.68493 16.6711 9.85472 16.3916 9.91941C16.1123 9.9841 15.8193 9.93887 15.5709 9.79285L12.9492 8.24554L11.5754 10.6373L13.7628 13.921C13.9243 14.1634 13.9878 14.4606 13.9398 14.7501C13.8917 15.0394 13.736 15.2985 13.5053 15.4724L9.25128 19.0126C9.06082 19.1597 8.82912 19.2397 8.59063 19.2404L8.59093 19.2406Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_635_1096">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/asset/icon/IcStop.svg b/src/asset/icon/IcStop.svg
new file mode 100644
index 0000000..c00f80e
--- /dev/null
+++ b/src/asset/icon/IcStop.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="22" height="22" fill="white"/>
+</svg>

From 43e59b427a2b411d2e1671f0e561588bad25b077 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:24:42 +0900
Subject: [PATCH 13/24] =?UTF-8?q?style=20:=20=EC=95=84=EC=9D=B4=EC=BD=98?=
 =?UTF-8?q?=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/asset/icon/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/asset/icon/index.ts b/src/asset/icon/index.ts
index 8f4a1d6..b38b6a1 100644
--- a/src/asset/icon/index.ts
+++ b/src/asset/icon/index.ts
@@ -1 +1,5 @@
+export { ReactComponent as IcFloggingStart } from './IcFlogging.svg';
 export { ReactComponent as IcLogo } from './IcLogo.svg';
+export { ReactComponent as IcTemporaryPause } from './IcPause.svg';
+export { ReactComponent as IcRunning } from './IcRunning.svg';
+export { ReactComponent as IcStop } from './IcStop.svg';

From 4feb712a926d6b687f5b5cf91f2bca17ff12555b Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:25:13 +0900
Subject: [PATCH 14/24] =?UTF-8?q?fix=20:=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/KakaoMap.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/map/KakaoMap.tsx b/src/components/map/KakaoMap.tsx
index b34e464..81f76ff 100644
--- a/src/components/map/KakaoMap.tsx
+++ b/src/components/map/KakaoMap.tsx
@@ -1,4 +1,4 @@
-import { Component, useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { KakaoMapInfo } from '../../types/map';
@@ -26,12 +26,14 @@ const KakaoMap = () => {
       setMap(new kakao.maps.Map(container, options));
     }
   }, [kakaoMapInfo]);
-  return kakaoMapInfo != undefined ? <StMapWrapper id="map"></StMapWrapper> : <div>lodiing중...</div>;
+
+  if (!kakaoMapInfo) return <div>Loading중...</div>;
+  return <StMapWrapper id="map" />;
 };
 
 export default KakaoMap;
 
 const StMapWrapper = styled.div`
-  width: 39rem;
-  height: 84.4rem;
+  width: 100%;
+  height: 100%;
 `;

From 3686b4c39bafe8d94561c3176605da45e8e9e655 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:25:28 +0900
Subject: [PATCH 15/24] =?UTF-8?q?feat=20:=20=EC=A7=80=EB=8F=84=20=EB=B7=B0?=
 =?UTF-8?q?=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/JupgoButton.tsx | 45 ++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/map/JupgoButton.tsx

diff --git a/src/components/map/JupgoButton.tsx b/src/components/map/JupgoButton.tsx
new file mode 100644
index 0000000..0b5a3de
--- /dev/null
+++ b/src/components/map/JupgoButton.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { IcFloggingStart, IcStop, IcTemporaryPause } from '../../asset/icon';
+
+interface JupgoButtonProps {
+  btnType: string;
+  handleBtnClick: React.MouseEventHandler;
+}
+
+const JupgoButton = (props: JupgoButtonProps) => {
+  const { btnType, handleBtnClick } = props;
+
+  return (
+    <JupgoBtn onClick={handleBtnClick} btnType={btnType}>
+      {btnType === 'floggingPause' ? (
+        <IcTemporaryPause />
+      ) : btnType === 'floggingStart' ? (
+        <IcFloggingStart />
+      ) : (
+        <IcStop />
+      )}
+    </JupgoBtn>
+  );
+};
+
+export default JupgoButton;
+
+const JupgoBtn = styled.button<{ btnType: string }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 45%;
+  height: 100%;
+
+  background-color: ${({ theme, btnType }) =>
+    btnType === 'floggingPause'
+      ? theme.colors.gray_01
+      : btnType === 'floggingStart'
+      ? theme.colors.green_dark
+      : theme.colors.pink};
+  border: none;
+  border-radius: 2rem;
+`;

From 613d607db0d36d38882d00758620132d476c2fcf Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:25:48 +0900
Subject: [PATCH 16/24] =?UTF-8?q?feat=20:=20Map=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Map.tsx | 37 +++++++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 96adbb4..c859608 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -1,9 +1,42 @@
 import React from 'react';
+import styled from 'styled-components';
 
-import { KakaoMap } from '../components/map';
+import { IcLogo } from '../asset/icon';
+import { KakaoMap, RunningControl } from '../components/map';
 
 const Map = () => {
-  return <KakaoMap />;
+  return (
+    <StMapWrapper>
+      <KakaoMap />
+      <IcLogo />
+      <RunningControl />
+    </StMapWrapper>
+  );
 };
 
 export default Map;
+
+const StMapWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+
+  & > svg {
+    position: absolute;
+    top: 2rem;
+    left: 50%;
+
+    height: 3.064rem;
+
+    transform: translate(-50%, 0%);
+
+    z-index: 3;
+  }
+
+  & > section {
+    position: absolute;
+    bottom: 12%;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    z-index: 3;
+  }
+`;

From a881c4392ec6d3867f48161872f0fe4f1d3e765f Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:26:23 +0900
Subject: [PATCH 17/24] =?UTF-8?q?feat=20:=20=EC=B4=88=EB=A5=BC=20=EA=B0=80?=
 =?UTF-8?q?=EC=A7=80=EA=B3=A0=20=EC=A7=80=EC=A0=95=EB=90=9C=20=EB=AC=B8?=
 =?UTF-8?q?=EC=9E=90=EC=97=B4=EB=A1=9C=20=EB=B3=80=ED=99=98=ED=95=98?=
 =?UTF-8?q?=EA=B1=B0=EB=82=98=20=EB=AC=B8=EC=9E=90=EC=97=B4=EC=9D=84=20?=
 =?UTF-8?q?=EC=B4=88=EB=A1=9C=20=EB=B3=80=ED=99=98=ED=95=98=EA=B8=B0=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=B4=20=ED=95=84=EC=9A=94=ED=95=9C=20util?=
 =?UTF-8?q?=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/dateParse.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/utils/dateParse.ts

diff --git a/src/utils/dateParse.ts b/src/utils/dateParse.ts
new file mode 100644
index 0000000..ae0c277
--- /dev/null
+++ b/src/utils/dateParse.ts
@@ -0,0 +1,15 @@
+const numberPad = (num: number) => {
+  const numberStr = num + '';
+  return numberStr.length >= 2 ? numberStr : new Array(2 - numberStr.length + 1).join('0') + numberStr;
+};
+export const getDateParse = (second: number) => {
+  const hours = Math.floor(second / 3600);
+  const minutes = Math.floor((second / 60) % 60);
+  const seconds = Math.floor(second % 60);
+
+  return [numberPad(hours), numberPad(minutes), numberPad(seconds)];
+};
+export const getSecond = (dateStr: string) => {
+  const newDate = new Date(`2021-01-12 ${dateStr}`);
+  return newDate.getHours() * 60 * 60 + newDate.getMinutes() * 60 + newDate.getMinutes();
+};

From 071f40711493d3e133e29c187df1e78c501c409e Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:26:45 +0900
Subject: [PATCH 18/24] =?UTF-8?q?feat=20:=20=ED=94=8C=EB=A1=9C=EA=B9=85=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=EC=97=90=20=EA=B4=80=ED=95=9C=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0atom=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/flogging.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/types/flogging.ts

diff --git a/src/types/flogging.ts b/src/types/flogging.ts
new file mode 100644
index 0000000..b48c6f9
--- /dev/null
+++ b/src/types/flogging.ts
@@ -0,0 +1,7 @@
+export interface FloggingData {
+  date: string;
+  location: string; // 문자열
+  distance: number; // 소숫점 둘째 자리까지 이상의
+  duration: string; // HH:MM:SS 형식의 문자열
+  photo: FormData; // 파일명과 확장자 -> 플로깅 인증 사진
+}

From 2fdd8c15f0774f203473ecdd70f720106462e6db Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:27:02 +0900
Subject: [PATCH 19/24] =?UTF-8?q?feat=20:=20flogging=20atom=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/recoil/atom.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/recoil/atom.ts

diff --git a/src/recoil/atom.ts b/src/recoil/atom.ts
new file mode 100644
index 0000000..6d315b1
--- /dev/null
+++ b/src/recoil/atom.ts
@@ -0,0 +1,18 @@
+import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
+
+import { FloggingData } from '../types/flogging';
+
+const { persistAtom } = recoilPersist();
+
+export const floggingInfoState = atom<FloggingData>({
+  key: 'floggingInfo',
+  default: {
+    date: '2023.01.12',
+    location: '인천',
+    distance: 0,
+    duration: '00:00:00',
+    photo: new FormData(),
+  },
+  effects_UNSTABLE: [persistAtom],
+});

From 8aff05c3817338c59e175ebf8c3ec87cbd119bef Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:27:17 +0900
Subject: [PATCH 20/24] =?UTF-8?q?feat=20:=20=EC=8B=9C=20=EB=B6=84=20?=
 =?UTF-8?q?=EC=B4=88=20=EA=B3=84=EC=82=B0=ED=95=98=EA=B3=A0=20=EC=A0=9C?=
 =?UTF-8?q?=EC=96=B4=ED=95=98=EB=8A=94=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=ED=9B=85=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/hooks/useCouter.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/lib/hooks/useCouter.tsx

diff --git a/src/lib/hooks/useCouter.tsx b/src/lib/hooks/useCouter.tsx
new file mode 100644
index 0000000..a592b5b
--- /dev/null
+++ b/src/lib/hooks/useCouter.tsx
@@ -0,0 +1,20 @@
+import { useCallback, useRef, useState } from 'react';
+
+const useCouter = (initMinutes: number, ms: number) => {
+  const [count, setCount] = useState(initMinutes);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const start = useCallback(() => {
+    if (intervalRef.current) return;
+    intervalRef.current = setInterval(() => {
+      setCount((prev) => prev + 1);
+    }, ms);
+  }, []);
+  const stop = useCallback(() => {
+    if (!intervalRef.current) return;
+    clearInterval(intervalRef.current);
+    intervalRef.current = null;
+  }, []);
+  return { count, start, stop };
+};
+
+export default useCouter;

From e555b8fec605cff4de729f0400ef5b57992628bf Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:27:47 +0900
Subject: [PATCH 21/24] =?UTF-8?q?docs=20:=20=EA=B0=80=EB=8F=85=EC=84=B1=20?=
 =?UTF-8?q?=EA=B0=9C=ED=96=89=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/hooks/useCouter.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/hooks/useCouter.tsx b/src/lib/hooks/useCouter.tsx
index a592b5b..a1b5290 100644
--- a/src/lib/hooks/useCouter.tsx
+++ b/src/lib/hooks/useCouter.tsx
@@ -3,17 +3,20 @@ import { useCallback, useRef, useState } from 'react';
 const useCouter = (initMinutes: number, ms: number) => {
   const [count, setCount] = useState(initMinutes);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
   const start = useCallback(() => {
     if (intervalRef.current) return;
     intervalRef.current = setInterval(() => {
       setCount((prev) => prev + 1);
     }, ms);
   }, []);
+
   const stop = useCallback(() => {
     if (!intervalRef.current) return;
     clearInterval(intervalRef.current);
     intervalRef.current = null;
   }, []);
+
   return { count, start, stop };
 };
 

From a6e746a6bfd80fc698fabdc78da16be204f8e7d5 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Tue, 24 Jan 2023 16:28:09 +0900
Subject: [PATCH 22/24] =?UTF-8?q?feat=20:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=ED=9B=85=EA=B3=BC=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EA=B0=80=EC=A7=80=EA=B3=A0=20?=
 =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EB=9F=AC=EB=8B=9D=20=EC=A0=9C=EC=96=B4=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/RunningControl.tsx | 106 ++++++++++++++++++++++++++
 src/components/map/index.ts           |   1 +
 2 files changed, 107 insertions(+)
 create mode 100644 src/components/map/RunningControl.tsx

diff --git a/src/components/map/RunningControl.tsx b/src/components/map/RunningControl.tsx
new file mode 100644
index 0000000..ee9ad78
--- /dev/null
+++ b/src/components/map/RunningControl.tsx
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { useRecoilState } from 'recoil';
+import styled from 'styled-components';
+
+import { IcRunning } from '../../asset/icon';
+import useCouter from '../../lib/hooks/useCouter';
+import { floggingInfoState } from '../../recoil/atom';
+import { getDateParse } from '../../utils/dateParse';
+import JupgoButton from './JupgoButton';
+
+const RunningControl = () => {
+  const [isFloggingPause, setIsFloggintPause] = useState(false);
+  const [floggingInfo, setFloggingInfo] = useRecoilState(floggingInfoState);
+  const { count, start, stop } = useCouter(0, 1000);
+  const { distance, duration } = floggingInfo;
+
+  const handleFloggingStart = () => {
+    start();
+    setIsFloggintPause(!isFloggingPause);
+  };
+  const handleFloggingPause = () => {
+    stop();
+    setIsFloggintPause(!isFloggingPause);
+  };
+  const handleFloggingStop = () => {
+    stop();
+    setFloggingInfo({ ...floggingInfo });
+  };
+
+  return (
+    <RunningControlWrapper>
+      <HeaderWrapper>
+        <header>
+          <h1>{distance}</h1>
+          <h1>km</h1>
+          <IcRunning />
+        </header>
+        <p>{getDateParse(count).map((data, idx) => (idx !== 2 ? data + ' : ' : data))}</p>
+      </HeaderWrapper>
+
+      <article>
+        {isFloggingPause ? (
+          <JupgoButton btnType={'floggingPause'} handleBtnClick={handleFloggingPause} />
+        ) : (
+          <JupgoButton btnType={'floggingStart'} handleBtnClick={handleFloggingStart} />
+        )}
+
+        <JupgoButton btnType={'floggingStop'} handleBtnClick={handleFloggingStop} />
+      </article>
+    </RunningControlWrapper>
+  );
+};
+
+export default RunningControl;
+
+const RunningControlWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 94%;
+  height: 14%;
+  padding: 4% 8%;
+
+  background-color: rgba(250, 250, 250, 0.9);
+  border-radius: 1rem;
+
+  article {
+    display: flex;
+    justify-content: space-between;
+
+    width: 100%;
+    height: 40%;
+  }
+`;
+const HeaderWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+
+  header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    gap: 0.5rem;
+
+    & > h1 {
+      vertical-align: bottom;
+      ${({ theme }) => theme.fonts.Jupgo_Bold_32}
+      :nth-child(2) {
+        font-size: 2rem;
+      }
+    }
+  }
+
+  p {
+    margin-right: 12%;
+
+    ${({ theme }) => theme.fonts.Jupgo_Bold_20}
+    color:${({ theme }) => theme.colors.gray_01};
+  }
+`;
diff --git a/src/components/map/index.ts b/src/components/map/index.ts
index 1aafd17..36e1708 100644
--- a/src/components/map/index.ts
+++ b/src/components/map/index.ts
@@ -1 +1,2 @@
 export { default as KakaoMap } from './KakaoMap';
+export { default as RunningControl } from './RunningControl';

From 41d16ffead8bff2904708aed6df23d5998a02343 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Fri, 3 Feb 2023 09:42:01 +0900
Subject: [PATCH 23/24] =?UTF-8?q?fix=20:=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/_redirects | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 public/_redirects

diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..f824337
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
\ No newline at end of file

From 069f80afe67112006bc59c1ab54f0e9024d289c4 Mon Sep 17 00:00:00 2001
From: seohee0112 <ghdtj7@naver.com>
Date: Fri, 3 Feb 2023 10:29:00 +0900
Subject: [PATCH 24/24] =?UTF-8?q?fix=20:=20=ED=8F=B0=ED=8A=B8=20=EC=9E=AC?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/index.html b/public/index.html
index a165a47..2b2e55f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet" />
+
     <script
       type="text/javascript"
       src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d2be9d6e5ecbac239e72d3896c0d4363"></script>