feat: 마지막 로그인으로 부터 60분 이내에 재접속 하는 경우에는 api key를 물어보지 않는 기능 구현

- 키 저장 여부 묻지 않고 자동으로 브라우저에 저장하게 변경 - 브라우저에 저장된 키 삭제 기능 추가
woowacourse-teams · Jul 30, 2023 · 9f66506 · 9f66506
1 parent c81d7a2
commit 9f66506
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 31 deletions.
diff --git 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
@@ -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';