From 9f6650629034397efd11def212819b6f05bd8c94 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Mon, 31 Jul 2023 00:18:23 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A7=88=EC=A7=80=EB=A7=89=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=9C=BC=EB=A1=9C=20=EB=B6=80=ED=84=B0=2060?=
 =?UTF-8?q?=EB=B6=84=20=EC=9D=B4=EB=82=B4=EC=97=90=20=EC=9E=AC=EC=A0=91?=
 =?UTF-8?q?=EC=86=8D=20=ED=95=98=EB=8A=94=20=EA=B2=BD=EC=9A=B0=EC=97=90?=
 =?UTF-8?q?=EB=8A=94=20api=20key=EB=A5=BC=20=EB=AC=BC=EC=96=B4=EB=B3=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EA=B8=B0=EB=8A=A5=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

- 키 저장 여부 묻지 않고 자동으로 브라우저에 저장하게 변경
- 브라우저에 저장된 키 삭제 기능 추가
---
 .../google-maps/map/ApiKeyChecker.tsx         | 49 +++++++------------
 frontend/src/constants/index.ts               |  1 -
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/google-maps/map/ApiKeyChecker.tsx b/frontend/src/components/google-maps/map/ApiKeyChecker.tsx
index 3c004a627..a7543ccc9 100644
--- a/frontend/src/components/google-maps/map/ApiKeyChecker.tsx
+++ b/frontend/src/components/google-maps/map/ApiKeyChecker.tsx
@@ -6,14 +6,9 @@ import { getLocalStorage, setLocalStorage } from '@utils/storage';
 import Box from '@common/Box';
 import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
-import Text from '@common/Text';
 import TextField from '@common/TextField';
 
-import {
-  LOCAL_KEY_GOOGLE_MAPS_API,
-  LOCAL_KEY_GOOGLE_MAPS_API_LAST_LOGIN,
-  LOCAL_KEY_GOOGLE_MAPS_API_SAVE,
-} from '@constants';
+import { LOCAL_KEY_GOOGLE_MAPS_API, LOCAL_KEY_GOOGLE_MAPS_API_LAST_LOGIN } from '@constants';
 
 interface ApiKeyCheckerProps {
   render: (apiKey: string) => ReactNode;
@@ -22,24 +17,21 @@ interface ApiKeyCheckerProps {
 function ApiKeyChecker({ render }: ApiKeyCheckerProps) {
   const [apiKey, setApiKey] = useState('');
   const [value, setValue] = useState('');
-  const [isSaveMode, setSaveMode] = useState(true);
 
   useEffect(() => {
-    const isSaving = getLocalStorage<boolean>(LOCAL_KEY_GOOGLE_MAPS_API_SAVE, true);
-    setSaveMode(isSaving);
-    if (isSaving) {
-      const backupKey = getLocalStorage<string>(LOCAL_KEY_GOOGLE_MAPS_API, '');
-      setValue(backupKey);
+    const backupKey = getLocalStorage<string>(LOCAL_KEY_GOOGLE_MAPS_API, '');
+    setValue(backupKey);
+
+    const lastLoginTime = getLocalStorage<number>(LOCAL_KEY_GOOGLE_MAPS_API_LAST_LOGIN, -1);
+    if ((new Date().getTime() - lastLoginTime) / (1000 * 60) <= 60) {
+      console.log('60분 이내에 재접속');
+      setApiKey(backupKey);
     }
   }, []);
 
-  const onClick = () => {
+  const handleClickLogin = () => {
     if (value.length > 0) {
-      if (isSaveMode) {
-        setLocalStorage(LOCAL_KEY_GOOGLE_MAPS_API, value);
-      } else {
-        setLocalStorage(LOCAL_KEY_GOOGLE_MAPS_API, '');
-      }
+      setLocalStorage(LOCAL_KEY_GOOGLE_MAPS_API, value);
       setLocalStorage(LOCAL_KEY_GOOGLE_MAPS_API_LAST_LOGIN, new Date().getTime());
       setApiKey(value);
     } else {
@@ -66,20 +58,17 @@ function ApiKeyChecker({ render }: ApiKeyCheckerProps) {
               onChange={(e) => {
                 setValue(e.target.value);
               }}
+              supportingText={value.length > 0 && '키는 항상 자동으로 브라우저에 저장됩니다.'}
             />
             <FlexBox justifyContent={'between'}>
-              <FlexBox alignItems={'center'}>
-                <input
-                  type="checkbox"
-                  checked={isSaveMode}
-                  onChange={(e) => {
-                    setLocalStorage(LOCAL_KEY_GOOGLE_MAPS_API_SAVE, e.target.checked);
-                    setSaveMode(e.target.checked);
-                  }}
-                />
-                <Text>키를 브라우저에 저장하기</Text>
-              </FlexBox>
-              <Button size={'md'} outlined onClick={onClick}>
+              <Button
+                size={'md'}
+                outlined
+                onClick={() => setLocalStorage(LOCAL_KEY_GOOGLE_MAPS_API, '')}
+              >
+                브라우저에 저장된 키 제거
+              </Button>
+              <Button size={'md'} outlined onClick={handleClickLogin}>
                 전송하기
               </Button>
             </FlexBox>
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index ccdb723bf..54ea7c4f8 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -155,7 +155,6 @@ export const CAPACITIES = [3, 7, 50, 100, 200] as const;
 
 export const LOCAL_STORAGE_KEY_LAST_POSITION = 'CARFFEINE_LAST_POSITION';
 export const LOCAL_KEY_GOOGLE_MAPS_API = 'CARFFEINE_GOOGLE_MAPS_API';
-export const LOCAL_KEY_GOOGLE_MAPS_API_SAVE = 'CARFFEINE_GOOGLE_MAPS_API_SAVE';
 export const LOCAL_KEY_GOOGLE_MAPS_API_LAST_LOGIN = 'CARFFEINE_GOOGLE_MAPS_API_LAST_LOGIN';
 export const LOCAL_KEY_TOKEN = 'CARFFEINE_TOKEN';