feat: 최근 로그인 정보 반영하기

YAPP-Github · Feb 18, 2024 · 8bffdd5 · 8bffdd5
1 parent 25b3666
commit 8bffdd5
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 43 deletions.
diff --git a/pages/redirect/[authType]/index.tsx b/pages/redirect/[authType]/index.tsx
@@ -27,6 +27,7 @@ const Bridge = () => {
       }
 
       saveToken({ accessToken, refreshToken });
+      localStorage.setItem('recentLoginType', authType);
 
       router.replace(ROUTES.MAIN);
     })();

diff --git a/src/components/Modal/modals/Login.tsx b/src/components/Modal/modals/Login.tsx
@@ -10,6 +10,33 @@ import useLogin from '@queries/useLogin';
 
 import * as styles from '../style.css';
 
+const buttons = [
+  {
+    type: 'google',
+    name: '구글',
+    wrapperClassName: styles.googleLogin,
+    iconClassName: styles.googleIcon,
+    iconWidth: 18,
+    iconHeight: 18,
+  },
+  {
+    type: 'naver',
+    name: '네이버',
+    wrapperClassName: styles.naverLogin,
+    iconClassName: styles.naverIcon,
+    iconWidth: 15,
+    iconHeight: 14,
+  },
+  {
+    type: 'kakao',
+    name: '카카오',
+    wrapperClassName: styles.kakaoLogin,
+    iconClassName: styles.kakaoIcon,
+    iconWidth: 19,
+    iconHeight: 18,
+  },
+] as const;
+
 const Login = () => {
   const { mutateAsync } = useLogin();
 
@@ -20,6 +47,8 @@ const Login = () => {
     window.location.href = data.url;
   };
 
+  const recentLoginType = localStorage.getItem('recentLoginType');
+
   return (
     <ModalContainer type="login">
       <div className={styles.helloImage}>
@@ -34,33 +63,32 @@ const Login = () => {
         </span>
       </div>
       <div className={styles.loginButtonsWrapper}>
-        <Button
-          className={styles.googleLogin}
-          onClick={handleSocialLoginClick('google')}
-        >
-          <div className={styles.googleIcon}>
-            <Icon icon="google" width={18} height={18} />
-          </div>
-          구글로 로그인하기
-        </Button>
-        <Button
-          className={styles.naverLogin}
-          onClick={handleSocialLoginClick('naver')}
-        >
-          <div className={styles.naverIcon}>
-            <Icon icon="naver" width={15} height={14} />
-          </div>
-          네이버로 로그인하기
-        </Button>
-        <Button
-          className={styles.kakaoLogin}
-          onClick={handleSocialLoginClick('kakao')}
-        >
-          <div className={styles.kakaoIcon}>
-            <Icon icon="kakao" width={19} height={18} />
-          </div>
-          카카오로 로그인하기
-        </Button>
+        {buttons.map(
+          ({
+            type,
+            name,
+            wrapperClassName,
+            iconClassName,
+            iconWidth,
+            iconHeight,
+          }) => (
+            <Button
+              key={type}
+              className={wrapperClassName({ recent: recentLoginType === type })}
+              onClick={handleSocialLoginClick(type)}
+            >
+              <div className={iconClassName}>
+                <Icon icon={type} width={iconWidth} height={iconHeight} />
+              </div>
+              {name}로 로그인하기
+              {recentLoginType === type && (
+                <span className={styles.recentLoginMessage}>
+                  마지막으로 로그인했어요!
+                </span>
+              )}
+            </Button>
+          ),
+        )}
       </div>
       <div className={styles.agreeDescription}>
         로그인은&nbsp;

diff --git a/src/components/Modal/style.css.ts b/src/components/Modal/style.css.ts
@@ -156,41 +156,75 @@ const loginButton = style([
   },
 ]);
 
-export const googleLogin = style([
-  loginButton,
+export const recentLoginMessage = style([
+  sprinkles({
+    typography: '11/Caption/Regular',
+  }),
   {
-    color: COLORS['Grey/800'],
-    backgroundColor: COLORS['Grey/100'],
+    marginTop: '-3px',
+    display: 'block',
   },
 ]);
 
+export const googleLogin = recipe({
+  base: [
+    loginButton,
+    {
+      color: COLORS['Grey/800'],
+      backgroundColor: COLORS['Grey/100'],
+    },
+  ],
+  variants: {
+    recent: {
+      true: { padding: '12.5px 40px' },
+      false: { padding: '20px 40px' },
+    },
+  },
+});
+
 export const googleIcon = style({
   display: 'inline-block',
   verticalAlign: '-4px',
   marginRight: '9px',
 });
 
-export const naverLogin = style([
-  loginButton,
-  {
-    color: COLORS['Grey/White'],
-    backgroundColor: '#03c75a',
+export const naverLogin = recipe({
+  base: [
+    loginButton,
+    {
+      color: COLORS['Grey/White'],
+      backgroundColor: '#03c75a',
+    },
+  ],
+  variants: {
+    recent: {
+      true: { padding: '12.5px 40px' },
+      false: { padding: '20px 40px' },
+    },
   },
-]);
+});
 
 export const naverIcon = style({
   display: 'inline-block',
   verticalAlign: '-1px',
   marginRight: '6px',
 });
 
-export const kakaoLogin = style([
-  loginButton,
-  {
-    color: COLORS['Grey/800'],
-    backgroundColor: '#fee502',
+export const kakaoLogin = recipe({
+  base: [
+    loginButton,
+    {
+      color: COLORS['Grey/800'],
+      backgroundColor: '#fee502',
+    },
+  ],
+  variants: {
+    recent: {
+      true: { padding: '12.5px 40px' },
+      false: { padding: '20px 40px' },
+    },
   },
-]);
+});
 
 export const kakaoIcon = style({
   display: 'inline-block',
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ const Bridge = () => { @@
           }
           saveToken({ accessToken, refreshToken });
+          localStorage.setItem('recentLoginType', authType);
           router.replace(ROUTES.MAIN);
         })();
@@ Expand Down @@