From 659d1e62982298afe207250a42e822ec50f46b03 Mon Sep 17 00:00:00 2001
From: "minung.han" <hmu332233@gmail.com>
Date: Wed, 16 Mar 2022 02:25:34 +0900
Subject: [PATCH] =?UTF-8?q?LiveMode=20Toggle=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/useToggle.ts |  9 +++++++++
 pages/index.tsx    | 29 ++++++++++++++++++++---------
 2 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 hooks/useToggle.ts

diff --git a/hooks/useToggle.ts b/hooks/useToggle.ts
new file mode 100644
index 0000000..6153bdc
--- /dev/null
+++ b/hooks/useToggle.ts
@@ -0,0 +1,9 @@
+import { useState, useCallback } from 'react';
+
+function useToggle(initStatus: boolean = false) {
+  const [value, setValue] = useState(initStatus);
+  const toggle = useCallback(() => setValue((v) => !v), []);
+  return [value, toggle, setValue] as const;
+}
+
+export default useToggle;
diff --git a/pages/index.tsx b/pages/index.tsx
index eaf07d4..d7ab5b1 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,13 +6,16 @@ import CopyModal from 'components/CopyModal';
 import Hits from 'components/Hits';
 
 import useDebounce from 'hooks/useDebounce';
+import useToggle from 'hooks/useToggle';
+
 import { objectToQueryString } from 'utils/string';
 
 function Home() {
+  const [isLiveMode, toggleIsLiveMode] = useToggle(true);
   const [dateString, setDateString] = useState('');
   const [size, setSize] = useState('');
   const queryString = useDebounce(
-    objectToQueryString({ date: dateString, size }),
+    objectToQueryString({ date: isLiveMode ? '' : dateString, size }),
     300,
   );
 
@@ -49,15 +52,23 @@ function Home() {
           <img src={svgUrl} alt="moon.svg" />
         </a>
         <div className="form-control w-full max-w-xs">
-          <label className="label">
-            <span className="label-text">Date</span>
+          <label className="label cursor-pointer" onClick={toggleIsLiveMode}>
+            <span className="label-text">Live Mode</span>
+            <input type="checkbox" className="toggle" checked={isLiveMode} />
           </label>
-          <input
-            type="date"
-            className="input input-bordered w-full max-w-xs"
-            value={dateString}
-            onChange={handleDateStringChange}
-          />
+          {!isLiveMode && (
+            <>
+              <label className="label">
+                <span className="label-text">Date</span>
+              </label>
+              <input
+                type="date"
+                className="input input-bordered w-full max-w-xs"
+                value={dateString}
+                onChange={handleDateStringChange}
+              />
+            </>
+          )}
         </div>
         <div className="form-control w-full max-w-xs">
           <label className="label">