LiveMode Toggle 추가

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;

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">