From 5964eea48f846ef4a31fb50e0e9d7599510cd4d7 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:51:11 +0900 Subject: [PATCH 01/32] =?UTF-8?q?feat:=20=EC=86=8C=EC=85=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20svg=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/apple_cirecle.svg | 4 ++ .../src/common/assets/kakaoOuathLogin.svg | 4 ++ frontend/src/common/assets/main_logo.svg | 48 +++++++++++++++++++ frontend/src/common/assets/missing_logo.svg | 20 ++++++++ 4 files changed, 76 insertions(+) create mode 100644 frontend/src/common/assets/apple_cirecle.svg create mode 100644 frontend/src/common/assets/kakaoOuathLogin.svg create mode 100644 frontend/src/common/assets/main_logo.svg create mode 100644 frontend/src/common/assets/missing_logo.svg diff --git a/frontend/src/common/assets/apple_cirecle.svg b/frontend/src/common/assets/apple_cirecle.svg new file mode 100644 index 000000000..129960286 --- /dev/null +++ b/frontend/src/common/assets/apple_cirecle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/common/assets/kakaoOuathLogin.svg b/frontend/src/common/assets/kakaoOuathLogin.svg new file mode 100644 index 000000000..55605e310 --- /dev/null +++ b/frontend/src/common/assets/kakaoOuathLogin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/common/assets/main_logo.svg b/frontend/src/common/assets/main_logo.svg new file mode 100644 index 000000000..c28fbe176 --- /dev/null +++ b/frontend/src/common/assets/main_logo.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/common/assets/missing_logo.svg b/frontend/src/common/assets/missing_logo.svg new file mode 100644 index 000000000..2823fd65f --- /dev/null +++ b/frontend/src/common/assets/missing_logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + From 231a9b8904e09f346201ae77e74b673d0763a1bb Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:52:09 +0900 Subject: [PATCH 02/32] =?UTF-8?q?feat:=20svg=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MissingFallback/MissingFallback.style.ts | 8 ++++---- .../src/components/MissingFallback/MissingFallback.tsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/MissingFallback/MissingFallback.style.ts b/frontend/src/components/MissingFallback/MissingFallback.style.ts index 2643ef253..c7ee1ab1f 100644 --- a/frontend/src/components/MissingFallback/MissingFallback.style.ts +++ b/frontend/src/components/MissingFallback/MissingFallback.style.ts @@ -22,8 +22,8 @@ export const container = ({ `; export const image = css` - width: 50%; - max-width: 30rem; - height: 50%; - max-height: 35rem; + width: 100%; + max-width: 40rem; + height: 100%; + max-height: 40rem; `; diff --git a/frontend/src/components/MissingFallback/MissingFallback.tsx b/frontend/src/components/MissingFallback/MissingFallback.tsx index 0112dd089..1d7914a66 100644 --- a/frontend/src/components/MissingFallback/MissingFallback.tsx +++ b/frontend/src/components/MissingFallback/MissingFallback.tsx @@ -2,7 +2,7 @@ import * as S from './MissingFallback.style'; import { SerializedStyles, useTheme } from '@emotion/react'; -import regretCat from '@_common/assets/regret_cat.webp'; +import missingLogo from '@_common/assets/missing_logo.svg?url'; interface MissingFallbackProps { text: string; @@ -15,7 +15,7 @@ export default function MissingFallback(props: MissingFallbackProps) { const theme = useTheme(); return (
- 미안해용 + 미안해용 {text}
); From 2fa60b46157e0b4607f09325306ea4c806917477 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:53:01 +0900 Subject: [PATCH 03/32] =?UTF-8?q?feat:=20=EA=B5=AC=EA=B8=80=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20type=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EB=AA=A8=EC=96=91=20=EB=B3=80=EA=B2=BD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GoogleLoginButton/GoogleLoginButton.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx b/frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx index 91bc168be..d9c7b7a65 100644 --- a/frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx +++ b/frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx @@ -3,23 +3,35 @@ import { useEffect, useRef } from 'react'; import ROUTES from '@_constants/routes'; import { useNavigate } from 'react-router-dom'; -function GoogleLoginButton() { +interface GoogleLoginButtonProps { + type: 'bar' | 'circle'; +} +function GoogleLoginButton({ type }: GoogleLoginButtonProps) { const navigate = useNavigate(); const g_sso = useRef(null); useEffect(() => { if (g_sso.current) { + const renderOption = + type === 'bar' + ? { + theme: 'outline', + size: 'large', + width: 269, + } + : { + type: 'icon', + shape: 'circle', + theme: 'outline', + size: 'large', + }; window.google.accounts.id.initialize({ client_id: process.env.GOOGLE_O_AUTH_CLIENT_ID, callback: handleGoogleSignIn, ux_mode: 'popup', }); - window.google.accounts.id.renderButton(g_sso.current, { - theme: 'outline', - size: 'large', - width: 269, - }); + window.google.accounts.id.renderButton(g_sso.current, renderOption); } }, [g_sso]); From 0d9fadfe8cdf1afc15ee9452d9b475c7df1a487e Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:54:37 +0900 Subject: [PATCH 04/32] =?UTF-8?q?feat:=20=EC=86=8C=EC=85=9C=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20Icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Icons/AppleOAuthIcon.tsx | 69 +++++++++------- .../src/components/Icons/KakaoOAuthIcon.tsx | 52 +++++++----- .../src/components/Icons/MainLogoIcon.tsx | 82 +------------------ 3 files changed, 73 insertions(+), 130 deletions(-) diff --git a/frontend/src/components/Icons/AppleOAuthIcon.tsx b/frontend/src/components/Icons/AppleOAuthIcon.tsx index 8d203420f..55b391d01 100644 --- a/frontend/src/components/Icons/AppleOAuthIcon.tsx +++ b/frontend/src/components/Icons/AppleOAuthIcon.tsx @@ -1,32 +1,41 @@ -export default function AppleOAuthIcon() { - return ( - - - - - + + + + + + - - - - - ); + + + ); + } + if (type === 'circle') { + return ; + } } diff --git a/frontend/src/components/Icons/KakaoOAuthIcon.tsx b/frontend/src/components/Icons/KakaoOAuthIcon.tsx index 9c85460f7..f6a4eeea6 100644 --- a/frontend/src/components/Icons/KakaoOAuthIcon.tsx +++ b/frontend/src/components/Icons/KakaoOAuthIcon.tsx @@ -1,21 +1,33 @@ -export default function KakaoOAuthLoginIcon() { - return ( - - - - - - ); +import CircleKakaoLogin from '@_common/assets/kakaoOuathLogin.svg'; +interface KakaoOAuthLoginIconProps { + type: 'bar' | 'circle'; +} + +export default function KakaoOAuthLoginIcon({ + type, +}: KakaoOAuthLoginIconProps) { + if (type === 'bar') { + return ( + + + + + + ); + } + if (type === 'circle') { + return ; + } } diff --git a/frontend/src/components/Icons/MainLogoIcon.tsx b/frontend/src/components/Icons/MainLogoIcon.tsx index 5d4c25daa..63c62bc7c 100644 --- a/frontend/src/components/Icons/MainLogoIcon.tsx +++ b/frontend/src/components/Icons/MainLogoIcon.tsx @@ -1,82 +1,4 @@ +import MainLogo from '@_common/assets/main_logo.svg'; export default function MainLogoIcon() { - return ( - - - - - - - - - - - - - - ); + return ; } From a0a2553c4c40251624bf6f91cdde0c66df0fe407 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:55:13 +0900 Subject: [PATCH 05/32] =?UTF-8?q?feat:=20=EC=97=85=EB=A1=9C=EB=93=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B0=B0=EA=B2=BD=EC=9D=B4=20?= =?UTF-8?q?=ED=88=AC=EB=AA=85=EC=9D=BC=20=EA=B2=BD=EC=9A=B0,=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EA=B0=80=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ProfileFrame/ProfileFrame.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts index df39cfb4e..5b58f2732 100644 --- a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts +++ b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts @@ -54,7 +54,7 @@ export const profileImage = ( height: 100%; object-fit: cover; - background-image: url(${EmptyProfile}); + background-image: url(${props.isLoaded ? '' : EmptyProfile}); background-position: center; background-size: cover; `; From 9dfcf0810e2d5c1659f2312eab110e9badb60843 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:57:57 +0900 Subject: [PATCH 06/32] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20css=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts | 2 +- frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts b/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts index 690b765a8..b076996cf 100644 --- a/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts +++ b/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; export const footerStyle = css` - margin: 1rem 0 0 0; + margin: 1rem 0 0; padding: 0 24px 48px; text-align: center; `; diff --git a/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts b/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts index 2d74d42e3..0a6c6d2c4 100644 --- a/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts +++ b/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts @@ -3,9 +3,10 @@ import { css } from '@emotion/react'; export const mainStyle = css` display: flex; flex-direction: column; + gap: 3rem; align-items: center; justify-content: center; - height: 100%; + width: 100%; margin: 0 auto; `; From af204d7c49c57e8baeb244afd42bd38a23de62c7 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:00:52 +0900 Subject: [PATCH 07/32] =?UTF-8?q?feat:=20=EA=B8=B0=EC=A1=B4=20=EC=B9=B4?= =?UTF-8?q?=EC=B9=B4=EC=98=A4=ED=86=A1=20=EA=B0=80=EC=9E=85=20=EC=97=AC?= =?UTF-8?q?=EB=B6=80=20=ED=99=95=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataMigrationExplanationPage.style.ts | 6 -- .../DataMigrationExplanationPage.tsx | 76 ------------------- .../Explanation/KakaoSelct.style.ts | 12 +++ .../Explanation/KakaoSelect.tsx | 61 +++++++++++++++ 4 files changed, 73 insertions(+), 82 deletions(-) delete mode 100644 frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts delete mode 100644 frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.tsx create mode 100644 frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts create mode 100644 frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts deleted file mode 100644 index a3f274a0a..000000000 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { css, Theme } from '@emotion/react'; - -export const explanationSection = ({ theme }: { theme: Theme }) => css` - margin: 0rem 5rem; - ${theme.typography.s1} -`; diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.tsx b/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.tsx deleted file mode 100644 index f6e02ff93..000000000 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; -import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; -import { useTheme } from '@emotion/react'; -import { explanationSection } from './DataMigrationExplanationPage.style'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; -import SolidArrow from '@_components/Icons/SolidArrow'; -import { useNavigate } from 'react-router-dom'; -import ROUTES from '@_constants/routes'; - -export default function DataMigrationExplanationPage() { - const theme = useTheme(); - const navigate = useNavigate(); - const kakaoAuthLogin = () => { - if ( - !process.env.KAKAO_O_AUTH_CLIENT_ID || - !process.env.KAKAO_OAUTH_REDIRECT_URI - ) { - throw new Error('Google OAuth 정보가 없습니다.'); - } - const params = { - client_id: process.env.KAKAO_O_AUTH_CLIENT_ID, - redirect_uri: process.env.KAKAO_OAUTH_REDIRECT_URI, - response_type: 'code', - scope: 'openid', - }; - const queryString = new URLSearchParams(params).toString(); - const kakaoOAuthUrl = `${process.env.KAKAO_REQUEST_URL}?${queryString}`; - if (process.env.MSW == 'true') { - window.location.href = 'http://localhost:8081/kakao-o-auth?code=1'; - } else { - window.location.href = kakaoOAuthUrl; - } - }; - - return ( - - - - { - navigate(ROUTES.home); - }} - /> - - - -
- -

- 모우다는 이용자 여러분의 더 좋은 서비스 제공을 위하여 카카오톡 소셜 - 로그인에서 구글과 애플의 소셜 로그인으로 전환을 선택했습니다. -

2024년 10월 5일 이전 카카오톡을 이용하여 로그인 하셨던 - 기존 이용자들 중에서 기존 데이터를 이전을 원하시는 분들에게는 데이터 - 전환 절차를 안내해 드리고 있습니다. 절차는 아래와 같습니다. -
-
1. 카카오톡 로그인을 진행한다.
2. 구글과 애플중 - 데이터이전을 원하시는 소셜 선택하고 로그인을 진행한다. -

-
- - - - - - ); -} diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts new file mode 100644 index 000000000..608119cb4 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts @@ -0,0 +1,12 @@ +import { css, Theme } from '@emotion/react'; + +export const titleWrapper = () => css` + width: 90%; +`; +export const title = ({ theme }: { theme: Theme }) => css` + ${theme.typography.h3} +`; + +export const subtitle = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b1} +`; diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx new file mode 100644 index 000000000..15dfa9094 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx @@ -0,0 +1,61 @@ +import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; +import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import * as S from './KakaoSelct.style'; +import { useTheme } from '@emotion/react'; +import Button from '@_components/Button/Button'; +import { useNavigate } from 'react-router-dom'; +import ROUTES from '@_constants/routes'; +import { getInviteCode } from '@_common/inviteCodeManager'; +// import ROUTES from '@_constants/routes'; +// import { getMemberToken } from '@_utils/tokenManager'; +// import { useEffect } from 'react'; +// import { useNavigate } from 'react-router-dom'; + +export default function KakaoSelectPage() { + const theme = useTheme(); + const navigate = useNavigate(); + + return ( + + + +
+ + 기존 카카오톡
+ 이용자인가요? + +
+ + + +
+ + +
+ + + ); +} From 8083b1e8a2c8fb5e86a0b1cd3a7a216f0bb7505f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:21:26 +0900 Subject: [PATCH 08/32] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Login/HomePage/HomePage.style.ts | 19 ++++ .../src/pages/Login/HomePage/HomePage.tsx | 87 +++++++++---------- 2 files changed, 59 insertions(+), 47 deletions(-) create mode 100644 frontend/src/pages/Login/HomePage/HomePage.style.ts diff --git a/frontend/src/pages/Login/HomePage/HomePage.style.ts b/frontend/src/pages/Login/HomePage/HomePage.style.ts new file mode 100644 index 000000000..e352fb3be --- /dev/null +++ b/frontend/src/pages/Login/HomePage/HomePage.style.ts @@ -0,0 +1,19 @@ +import { css, Theme } from '@emotion/react'; + +export const kakaoButton = () => css` + border: none; + background: none; +`; +export const explain = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b3} + padding: 1rem; + + color: ${theme.colorPalette.grey[300]}; + + background-color: ${theme.colorPalette.white[100]}; +`; + +export const boundary = ({ theme }: { theme: Theme }) => css` + height: 4rem; + border-right: 1px solid ${theme.colorPalette.grey[300]}; +`; diff --git a/frontend/src/pages/Login/HomePage/HomePage.tsx b/frontend/src/pages/Login/HomePage/HomePage.tsx index 9233e7a64..f0c032a19 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -1,5 +1,5 @@ import { css, useTheme } from '@emotion/react'; -import { Navigate, useNavigate } from 'react-router-dom'; +import { Navigate } from 'react-router-dom'; import GET_ROUTES from '@_common/getRoutes'; import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; import MainLogoIcon from '@_components/Icons/MainLogoIcon'; @@ -8,10 +8,11 @@ import ROUTES from '@_constants/routes'; import { getLastDarakbangId } from '@_common/lastDarakbangManager'; import { getAccessToken } from '@_utils/tokenManager'; import GoogleLoginButton from '@_components/GoogleLoginButton/GoogleLoginButton'; +import * as S from './HomePage.style'; +import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; export default function HomePage() { const theme = useTheme(); const nowToken = getAccessToken(); - const navigate = useNavigate(); if (nowToken) { const lastDarakbangId = getLastDarakbangId(); @@ -47,10 +48,6 @@ export default function HomePage() { } }; - const handleDataMigraionLink = () => { - navigate(ROUTES.oAuthMigration); - }; - return ( @@ -59,58 +56,54 @@ export default function HomePage() { css={css` display: flex; flex-direction: column; - gap: 28px; - height: 70vh; - justify-content: center; + gap: 2rem; align-items: center; + justify-content: center; `} > -
-

모여봐요 우리의

-

다락방

-
-
- - - -
- + + +
+ + + + 혹시 카카오톡으로 가입하셨었나요? ☝ + + ); From 7cb4641ae2bca8d5d2b499b4382897d59f7aa826 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:27:57 +0900 Subject: [PATCH 09/32] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Select/OAuthSelectPage.style.ts | 14 ++++ .../Select/OAuthSelectPage.tsx | 78 ++++++++----------- 2 files changed, 46 insertions(+), 46 deletions(-) create mode 100644 frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts diff --git a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts new file mode 100644 index 000000000..98af84d9a --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts @@ -0,0 +1,14 @@ +import { css, Theme } from '@emotion/react'; + +export const titleWrapper = () => css` + width: 90%; +`; +export const title = ({ theme }: { theme: Theme }) => css` + ${theme.typography.h3} +`; + +export const subtitle = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b1} +`; + +export const button = () => css``; diff --git a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx index 13d66bd93..d64bcc551 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx @@ -1,42 +1,31 @@ -import AppleOAuthIcon from '@_components/Icons/AppleOAuthIcon'; -import GoogleLoginButton from '@_components/GoogleLoginButton/GoogleLoginButton'; import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; import MissingFallback from '@_components/MissingFallback/MissingFallback'; -import ROUTES from '@_constants/routes'; -import { getMemberToken } from '@_utils/tokenManager'; -import { useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; +import * as S from './OAuthSelectPage.style'; +import { useTheme } from '@emotion/react'; +import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; export default function OAuthSelectPage() { - const navigate = useNavigate(); + const theme = useTheme(); - useEffect(() => { - if (!getMemberToken()) { - alert('잘못된 접근입니다.'); - navigate(ROUTES.home); - } - }, [navigate]); - const appleAuthLogin = () => { + const kakaoAuthLogin = () => { if ( - !process.env.APPLE_O_AUTH_CLIENT_ID || - !process.env.APPLE_OAUTH_REDIRECT_URI + !process.env.KAKAO_O_AUTH_CLIENT_ID || + !process.env.KAKAO_OAUTH_REDIRECT_URI ) { - throw new Error('Apple OAuth 정보가 없습니다.'); + throw new Error('kakao OAuth 정보가 없습니다.'); } - const params = { - client_id: process.env.APPLE_O_AUTH_CLIENT_ID, - redirect_uri: process.env.APPLE_OAUTH_REDIRECT_URI, - response_type: 'code id_token', - response_mode: 'form_post', - scope: 'name email', + client_id: process.env.KAKAO_O_AUTH_CLIENT_ID, + redirect_uri: process.env.KAKAO_OAUTH_REDIRECT_URI, + response_type: 'code', + scope: 'openid', }; const queryString = new URLSearchParams(params).toString(); - const appleOAuthUrl = `${process.env.APPLE_REQUEST_URL}?${queryString}`; - if (process.env.MSW === 'true') { + const kakaoOAuthUrl = `${process.env.KAKAO_REQUEST_URL}?${queryString}`; + if (process.env.MSW == 'true') { window.location.href = 'http://localhost:8081/kakao-o-auth?code=1'; } else { - window.location.href = appleOAuthUrl; + window.location.href = kakaoOAuthUrl; } }; @@ -44,31 +33,28 @@ export default function OAuthSelectPage() { -
- -
+
+ + 카카오톡 로그인은
더이상 지원하지 않아요 + +
+ + 카카오톡 로그인하면 데이터를 옮겨 드려요! + +
+ -
- - -
+ + ); From e7f2ade2254fd5bf42281e046e2a8f7afe492803 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:29:21 +0900 Subject: [PATCH 10/32] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Login/OAuthLoginPage/OAuthLoginPage.tsx | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx index 1915812f1..e3dc0eb79 100644 --- a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx +++ b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx @@ -1,12 +1,7 @@ import ROUTES from '@_constants/routes'; import { getInviteCode } from '@_common/inviteCodeManager'; import { kakaoOAuth, googleOAuth } from '@_apis/auth'; -import { - getMemberToken, - removeMemberToken, - setAccessToken, - setMemberToken, -} from '@_utils/tokenManager'; +import { setAccessToken } from '@_utils/tokenManager'; import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; @@ -42,17 +37,17 @@ export default function OAuthLoginPage() { const oauthHandlers: Record Promise> = { apple: async () => { setAccessToken(codeOrToken); + navigate(ROUTES.kakaoSelection); + return true; // 조기 반환 }, google: async () => { - const response = await googleOAuth(codeOrToken, getMemberToken()); + const response = await googleOAuth(codeOrToken); setAccessToken(response.data.accessToken); + navigate(ROUTES.kakaoSelection); + return true; // 조기 반환 }, kakao: async () => { - const response = await kakaoOAuth(codeOrToken); - setAccessToken(response.data.accessToken); - setMemberToken(response.data.memberId); - navigate(ROUTES.oAuthSelection); - return true; // 조기 반환 + await kakaoOAuth(codeOrToken); }, }; @@ -61,8 +56,6 @@ export default function OAuthLoginPage() { const shouldReturn = await handler(); if (shouldReturn) return; - removeMemberToken(); - const inviteCode = getInviteCode(); if (inviteCode) { navigate(`${ROUTES.darakbangInvitationRoute}?code=${inviteCode}`); From a81e55d9ae4fbc7a8258daf6865b8e62a7bb836a Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:29:33 +0900 Subject: [PATCH 11/32] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/routes.ts | 2 +- frontend/src/routes/router.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 0b0afde72..9934c8b05 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -43,7 +43,7 @@ const ROUTES = { notFound: '/*', main: '/', home: '/home', - oAuthMigration: '/oauth-migration', + kakaoSelection: '/oauth-migration', oAuthSelection: '/oauth-select', oAuthGoogle: '/oauth', oAuth: '/oauth/:provider', diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx index 730575ff3..49543077d 100644 --- a/frontend/src/routes/router.tsx +++ b/frontend/src/routes/router.tsx @@ -27,13 +27,13 @@ import DarakbangManagementPage from '@_pages/Darakbang/DarakbangManagementPage/D import DarakbangMembersPage from '@_pages/Darakbang/DarakbangMembersPage/DarakbangMembersPage'; import DarakbangInvitationPage from '@_pages/Darakbang/DarakbangInvitationPage/DarakbangInvitationPage'; import DarakbangInvitationRoute from '@_pages/Navigator/DarakbangInvitationRoute'; -import DataMigrationExplanationPage from '@_pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage'; import OAuthSelectPage from '@_pages/Login/DataMigrationPage/Select/OAuthSelectPage'; import BetListPage from '@_pages/Bet/BetListPage/BetListPage'; import BetDetailPage from '@_pages/Bet/BetDetailPage/BetDetailPage'; import BetCreationPage from '@_pages/Bet/BetCreationPage/BetCreationPage'; import BetResultPage from '@_pages/Bet/BetResultPage/BetResultPage'; import SettingPage from '@_pages/Mypage/SettingPage/SettingPage'; +import KakaoSelectPage from '@_pages/Login/DataMigrationPage/Explanation/KakaoSelect'; const routesConfig = [ { @@ -82,14 +82,14 @@ const routesConfig = [ requiresAuth: false, }, { - path: ROUTES.oAuthMigration, - element: , - requiresAuth: false, + path: ROUTES.kakaoSelection, + element: , + requiresAuth: true, }, { path: ROUTES.oAuthSelection, element: , - requiresAuth: false, + requiresAuth: true, }, { path: ROUTES.oAuth, From 25bf370189d23b7089dac53fdd8d6c9386b3b9d3 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:43:00 +0900 Subject: [PATCH 12/32] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx index e3dc0eb79..d918630d9 100644 --- a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx +++ b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx @@ -4,6 +4,7 @@ import { kakaoOAuth, googleOAuth } from '@_apis/auth'; import { setAccessToken } from '@_utils/tokenManager'; import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; +import { ApiError } from '@_utils/customError/ApiError'; type Provider = 'apple' | 'google' | 'kakao'; @@ -63,8 +64,11 @@ export default function OAuthLoginPage() { navigate(ROUTES.darakbangSelectOption); } } catch (error) { - console.error('OAuth 처리 중 오류 발생:', error); - alert('로그인 처리 중 오류가 발생했습니다.'); + if (error instanceof ApiError) { + alert(error.message); + } else { + alert('알 수 없는 오류가 발생했습니다.'); + } navigate(ROUTES.home); } }; From e771717d34dfc969bc282f0fd6c5ebd3ca5b626b Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:48:20 +0900 Subject: [PATCH 13/32] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20svg=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx | 2 +- .../components/ProfileList/ProfileCard/ProfileCard.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx b/frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx index 7e92da810..0a568f317 100644 --- a/frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx +++ b/frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import ProfileFrame from './ProfileFrame'; -import EmptyProfile from '@_common/assets/empty_profile.svg'; +import EmptyProfile from '@_common/assets/default_profile.svg'; import Plus from '@_common/assets/tabler_plus.svg?url'; const meta = { diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx index a791a782b..56108e73f 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import ProfileCard from './ProfileCard'; -import EmptyProfile from '@_common/assets/empty_profile.svg'; +import EmptyProfile from '@_common/assets/default_profile.svg'; import Plus from '@_common/assets/tabler_plus.svg?url'; const meta = { From e243351ad6e438ddac9cbaf49f46833905416752 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:48:51 +0900 Subject: [PATCH 14/32] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=A1=9C=EA=B7=B8=EC=9D=B8svg=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/kakaoCircleOuathLogin.svg | 5 +++++ frontend/src/common/assets/kakaoOuathLogin.svg | 4 ---- 2 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 frontend/src/common/assets/kakaoCircleOuathLogin.svg delete mode 100644 frontend/src/common/assets/kakaoOuathLogin.svg diff --git a/frontend/src/common/assets/kakaoCircleOuathLogin.svg b/frontend/src/common/assets/kakaoCircleOuathLogin.svg new file mode 100644 index 000000000..253a1318c --- /dev/null +++ b/frontend/src/common/assets/kakaoCircleOuathLogin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/common/assets/kakaoOuathLogin.svg b/frontend/src/common/assets/kakaoOuathLogin.svg deleted file mode 100644 index 55605e310..000000000 --- a/frontend/src/common/assets/kakaoOuathLogin.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - From ed4aef4a11602109f2e1a1048797bc6b19e458ac Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:49:09 +0900 Subject: [PATCH 15/32] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=A1=9C=EA=B7=B8=EC=9D=B8svg=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Icons/KakaoOAuthIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Icons/KakaoOAuthIcon.tsx b/frontend/src/components/Icons/KakaoOAuthIcon.tsx index f6a4eeea6..0d028c09f 100644 --- a/frontend/src/components/Icons/KakaoOAuthIcon.tsx +++ b/frontend/src/components/Icons/KakaoOAuthIcon.tsx @@ -1,4 +1,4 @@ -import CircleKakaoLogin from '@_common/assets/kakaoOuathLogin.svg'; +import CircleKakaoLogin from '@_common/assets/kakaoCircleOuathLogin.svg'; interface KakaoOAuthLoginIconProps { type: 'bar' | 'circle'; } From bbfe23b8b9c1f27508e71050b15566b49e56f90f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:50:03 +0900 Subject: [PATCH 16/32] =?UTF-8?q?feat:=20Home=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Login/HomePage/HomePage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Login/HomePage/HomePage.tsx b/frontend/src/pages/Login/HomePage/HomePage.tsx index f0c032a19..08144375d 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -20,7 +20,7 @@ export default function HomePage() { return ; } if (!lastDarakbangId) { - return ; + return ; } } @@ -101,7 +101,9 @@ export default function HomePage() { - 혹시 카카오톡으로 가입하셨었나요? ☝ + 카카오톡 로그인은 더이상 지원하지 않아요! +
+ 다른 로그인을 이용해주세요 From 1156a1d3c40789466cbe80dcbf2da884eeb24ddf Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:53:58 +0900 Subject: [PATCH 17/32] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C,?= =?UTF-8?q?=20alert=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Login/HomePage/HomePage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Login/HomePage/HomePage.tsx b/frontend/src/pages/Login/HomePage/HomePage.tsx index 08144375d..f94eea56c 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -96,7 +96,14 @@ export default function HomePage() {
- From ffed09b2d93b04dc27b55e79b2ff61637008cf72 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:54:22 +0900 Subject: [PATCH 18/32] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=ED=83=88?= =?UTF-8?q?=ED=87=B4=20API=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/deletes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/apis/deletes.ts b/frontend/src/apis/deletes.ts index 635fe26c3..e3c5405ca 100644 --- a/frontend/src/apis/deletes.ts +++ b/frontend/src/apis/deletes.ts @@ -7,5 +7,5 @@ export const deleteCancelChamyo = async (moimId: number) => { }; export const deleteMyInfo = async () => { - await ApiClient.deleteWithLastDarakbangId(`/auth`); + await ApiClient.deleteWithAuth(`/auth`); }; From 16833b68256506908d1168b9d1265d522db1001e Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 10:28:51 +0900 Subject: [PATCH 19/32] =?UTF-8?q?feat:=20API=20=EC=8A=A4=ED=8E=99=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/auth.ts | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/frontend/src/apis/auth.ts b/frontend/src/apis/auth.ts index 7941e2b7b..cf2512fe5 100644 --- a/frontend/src/apis/auth.ts +++ b/frontend/src/apis/auth.ts @@ -1,27 +1,16 @@ import ApiClient from './apiClient'; export const kakaoOAuth = async (code: string) => { - const response = await ApiClient.postWithoutAuth('/auth/kakao/oauth', { + const response = await ApiClient.postWithAuth('/auth/kakao', { code, }); return response.json(); }; -export const appleOAuth = async ( - code: string, - memberId: string | null = null, -) => { - const response = await ApiClient.postWithoutAuth('/auth/apple/oauth', { - code, - memberId, - }); - return response.json(); -}; - export const googleOAuth = async ( idToken: string, memberId: string | null = null, ) => { - const response = await ApiClient.postWithoutAuth('/auth/google/oauth', { + const response = await ApiClient.postWithoutAuth('/auth/google', { idToken, memberId, }); From 54815ea9434f28ca292254f5dfa7718a50f1de65 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 10:29:44 +0900 Subject: [PATCH 20/32] =?UTF-8?q?feat:=20GET=5FROUTES=EC=97=90=20navgate?= =?UTF-8?q?=20url=20=EC=83=81=EC=88=98=20=EC=B6=94=EA=B0=80(=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B3=B4=EC=95=88=20=ED=95=84=EC=9A=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/getRoutes.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/common/getRoutes.ts b/frontend/src/common/getRoutes.ts index d084e7930..4405fde76 100644 --- a/frontend/src/common/getRoutes.ts +++ b/frontend/src/common/getRoutes.ts @@ -38,5 +38,15 @@ const GET_ROUTES = { getNowDarakbangRoute() + '/bet/' + betId + '/result', setting: () => getNowDarakbangRoute() + '/my-page/setting', }, + default: { + notFound: '/*', + main: '/', + home: '/home', + kakaoSelection: '/oauth-migration', + oAuthSelection: '/oauth-select', + resultMigration: '/oauth-migration', + oAuthGoogle: '/oauth', + oAuth: '/oauth/:provider', + }, }; export default GET_ROUTES; From 5ba7ce965a75b4b1e72d7bf28aebad65d659e16f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 10:30:42 +0900 Subject: [PATCH 21/32] =?UTF-8?q?feat:=205MB=EC=9D=B4=EC=83=81=EC=9D=98=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B2=A8=EB=B6=80=EC=8B=9C=20?= =?UTF-8?q?=EA=B1=B0=EB=B6=80=20alert=20=EC=B6=9C=EB=A0=A5=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/poclies.ts | 2 ++ frontend/src/pages/Mypage/hook/useMyPage.ts | 8 ++++++++ 2 files changed, 10 insertions(+) diff --git a/frontend/src/constants/poclies.ts b/frontend/src/constants/poclies.ts index 878f9087a..edeae8874 100644 --- a/frontend/src/constants/poclies.ts +++ b/frontend/src/constants/poclies.ts @@ -29,6 +29,8 @@ const POLICES = { maxNicknameLength: 12, entranceCodeLength: 7, + + maxProfileImageSize: 5 * 1024 * 1024, //* 5MB }; export default POLICES; diff --git a/frontend/src/pages/Mypage/hook/useMyPage.ts b/frontend/src/pages/Mypage/hook/useMyPage.ts index d16a59e8b..e0eadf7a2 100644 --- a/frontend/src/pages/Mypage/hook/useMyPage.ts +++ b/frontend/src/pages/Mypage/hook/useMyPage.ts @@ -2,6 +2,7 @@ import useEditMyInfo from '@_hooks/mutaions/useEditMyInfo'; import useMyInfo from '@_hooks/queries/useMyInfo'; import { useState, useRef, useEffect, ChangeEvent } from 'react'; import { validateNickName } from '../validate'; +import POLICES from '@_constants/poclies'; export default function useMyPage() { const { myInfo } = useMyInfo(); @@ -32,6 +33,13 @@ export default function useMyPage() { const onChange = (e: ChangeEvent) => { if (e.target.files && e.target.files[0]) { + const maxSize = POLICES.maxProfileImageSize; + const fileSize = e.target.files[0].size; + if (fileSize > maxSize) { + alert('파일첨부 사이즈는 5MB 이내로 가능합니다.'); + e.target.value = ''; + return; + } setSelectedFile(e.target.files[0]); // 선택한 파일을 상태에 저장 setIsShownRest(true); setIsReset('false'); From 5b447d81712b37e337facb12c19e4b94b3ecf3b6 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 10:52:55 +0900 Subject: [PATCH 22/32] =?UTF-8?q?feat:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../KakaoLoginPage.stories.tsx} | 8 ++-- .../KakaoLoginPage.style.ts} | 1 + .../KakaoLoginPage.tsx} | 45 ++++++++++++++----- 3 files changed, 39 insertions(+), 15 deletions(-) rename frontend/src/pages/Login/DataMigrationPage/{Select/OAuthSelectPage.stories.tsx => KakaoLogin/KakaoLoginPage.stories.tsx} (55%) rename frontend/src/pages/Login/DataMigrationPage/{Select/OAuthSelectPage.style.ts => KakaoLogin/KakaoLoginPage.style.ts} (94%) rename frontend/src/pages/Login/DataMigrationPage/{Select/OAuthSelectPage.tsx => KakaoLogin/KakaoLoginPage.tsx} (54%) diff --git a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.stories.tsx b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.stories.tsx similarity index 55% rename from frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.stories.tsx rename to frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.stories.tsx index 4d6cf54a8..c8fab78db 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.stories.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.stories.tsx @@ -1,15 +1,15 @@ import { Meta, StoryObj } from '@storybook/react/*'; -import OAuthSelectPage from './OAuthSelectPage'; +import KakaoLoginPage from './KakaoLoginPage'; const meta = { title: 'pages/OAuthSelectPage', - component: OAuthSelectPage, -} satisfies Meta; + component: KakaoLoginPage, +} satisfies Meta; export default meta; type Story = StoryObj; export const Default: Story = { - render: () => , + render: () => , }; diff --git a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.style.ts similarity index 94% rename from frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts rename to frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.style.ts index 98af84d9a..c36a7cab7 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts +++ b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.style.ts @@ -1,6 +1,7 @@ import { css, Theme } from '@emotion/react'; export const titleWrapper = () => css` + margin-top: 20%; width: 90%; `; export const title = ({ theme }: { theme: Theme }) => css` diff --git a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx similarity index 54% rename from frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx rename to frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx index d64bcc551..351f13487 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx @@ -1,12 +1,22 @@ import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; import MissingFallback from '@_components/MissingFallback/MissingFallback'; -import * as S from './OAuthSelectPage.style'; +import * as S from './KakaoLoginPage.style'; import { useTheme } from '@emotion/react'; import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; +import { useNavigate, useParams } from 'react-router-dom'; +import { useEffect } from 'react'; +import ROUTES from '@_constants/routes'; -export default function OAuthSelectPage() { +export default function KakaoLoginPage() { const theme = useTheme(); + const { type } = useParams(); + const navigate = useNavigate(); + useEffect(() => { + if (!type || (type !== 'known' && type !== 'unknown')) { + navigate(ROUTES.notFound); + } + }, [type, navigate]); const kakaoAuthLogin = () => { if ( !process.env.KAKAO_O_AUTH_CLIENT_ID || @@ -33,15 +43,28 @@ export default function OAuthSelectPage() { -
- - 카카오톡 로그인은
더이상 지원하지 않아요 - -
- - 카카오톡 로그인하면 데이터를 옮겨 드려요! - -
+ {type === 'known' && ( +
+ + 카카오 로그인은
더 이상 지원하지 않아요 + +
+ + 이전 기록을 유지하기 위해 카카오 로그인을 진행해주세요. + +
+ )} + {type === 'unknown' && ( +
+ + 카카오 로그인은
더 이상 지원하지 않아요 + +
+ + 이전에 카카오 계정을 사용했는지 확인하고, 기록을 이전해 드릴게요! + +
+ )} From 8c7c3f5ae854b3559275a30dfa236014172b2c7c Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 10:58:14 +0900 Subject: [PATCH 23/32] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=9D=98=20title=20baseline=EC=9D=84=20=EB=A7=9E=EC=B6=94?= =?UTF-8?q?=EA=B8=B0=20=EC=9C=84=ED=95=B4=20css=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts b/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts index 0a6c6d2c4..244bbf292 100644 --- a/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts +++ b/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts @@ -2,10 +2,11 @@ import { css } from '@emotion/react'; export const mainStyle = css` display: flex; + flex-grow: 1; flex-direction: column; gap: 3rem; align-items: center; - justify-content: center; + justify-content: flex-start; height: 100%; width: 100%; margin: 0 auto; From 75fa23d4861ae2b6551292a77b7ef6167df6d92d Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:03:43 +0900 Subject: [PATCH 24/32] =?UTF-8?q?feat:=20kakao=EC=9D=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=97=AC=EB=B6=80=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=B6=84?= =?UTF-8?q?=EA=B8=B0=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Explanation/KakaoSelct.style.ts | 10 ++++++++ .../Explanation/KakaoSelect.tsx | 25 +++++++++++++------ 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts index 608119cb4..e26872bd2 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts @@ -1,6 +1,7 @@ import { css, Theme } from '@emotion/react'; export const titleWrapper = () => css` + margin-top: 20%; width: 90%; `; export const title = ({ theme }: { theme: Theme }) => css` @@ -10,3 +11,12 @@ export const title = ({ theme }: { theme: Theme }) => css` export const subtitle = ({ theme }: { theme: Theme }) => css` ${theme.typography.b1} `; + +export const explain = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b2} + padding: 1rem; + text-decoration: underline; + color: ${theme.colorPalette.grey[300]}; + + background-color: ${theme.colorPalette.white[100]}; +`; diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx index 15dfa9094..42e3d7dac 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx @@ -6,10 +6,7 @@ import Button from '@_components/Button/Button'; import { useNavigate } from 'react-router-dom'; import ROUTES from '@_constants/routes'; import { getInviteCode } from '@_common/inviteCodeManager'; -// import ROUTES from '@_constants/routes'; -// import { getMemberToken } from '@_utils/tokenManager'; -// import { useEffect } from 'react'; -// import { useNavigate } from 'react-router-dom'; +import GET_ROUTES from '@_common/getRoutes'; export default function KakaoSelectPage() { const theme = useTheme(); @@ -21,8 +18,7 @@ export default function KakaoSelectPage() {
- 기존 카카오톡
- 이용자인가요? + 기존 카카오 계정으로
로그인하신 적이 있나요?
@@ -32,12 +28,17 @@ export default function KakaoSelectPage() { css={{ display: 'flex', flexDirection: 'column', - justifyContent: 'center', + justifyContent: 'flex-start', alignItems: 'center', gap: '2rem', }} > - + + navigate(`${GET_ROUTES.default.oAuthSelection}/unknown`) + } + > + 잘 기억나지 않아요 + From 566cc16581316bc40de7efc23a09579cc19c9c5a Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:04:14 +0900 Subject: [PATCH 25/32] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=20=EA=B2=B0=EA=B3=BC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../OAuthMigrationResultPage.style.ts | 13 +++ .../OAuthMigrationResultPage.tsx | 85 +++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.style.ts create mode 100644 frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx diff --git a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.style.ts new file mode 100644 index 000000000..fdf690384 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.style.ts @@ -0,0 +1,13 @@ +import { css, Theme } from '@emotion/react'; + +export const titleWrapper = () => css` + margin-top: 20%; + width: 90%; +`; +export const title = ({ theme }: { theme: Theme }) => css` + ${theme.typography.h3} +`; + +export const subtitle = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b1} +`; diff --git a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx new file mode 100644 index 000000000..8caa73574 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx @@ -0,0 +1,85 @@ +import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; +import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import * as S from './OAuthMigrationResultPage.style'; +import { useTheme } from '@emotion/react'; + +import { useNavigate, useParams } from 'react-router-dom'; +import Button from '@_components/Button/Button'; +import ROUTES from '@_constants/routes'; +import { getInviteCode } from '@_common/inviteCodeManager'; +import { useEffect } from 'react'; +import GET_ROUTES from '@_common/getRoutes'; + +export default function OAuthMigrationResultPage() { + const theme = useTheme(); + const { result } = useParams(); + const navigate = useNavigate(); + + useEffect(() => { + if (!result || (result !== 'success' && result !== 'fail')) { + navigate(GET_ROUTES.default.notFound); + } + }, [result, navigate]); + + if (result === 'sucess') { + return ( + + + +
+ + 모우다를 사용할 준비가 되었어요 + +
+ + 이전 기록을 새로운 계정으로 옮겨 었어요! + +
+ + + + + + + ); + } + if (result === 'fail') { + return ( + + + +
+ 기록을 이전하는데 실패했어요! +
+ + 혹시 이전 카카오 계정 가입자가 아닌가요? + +
+ + + + + + + ); + } +} From 1e6b53f3b51d6e2225a45d1b6f1622aecd933265 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:04:43 +0900 Subject: [PATCH 26/32] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=20=EA=B2=B0=EA=B3=BC=20=ED=9B=85=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 --- frontend/src/hooks/mutaions/useMigrationOAuth.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 frontend/src/hooks/mutaions/useMigrationOAuth.ts diff --git a/frontend/src/hooks/mutaions/useMigrationOAuth.ts b/frontend/src/hooks/mutaions/useMigrationOAuth.ts new file mode 100644 index 000000000..8aad8495f --- /dev/null +++ b/frontend/src/hooks/mutaions/useMigrationOAuth.ts @@ -0,0 +1,13 @@ +import { kakaoOAuth } from '@_apis/auth'; +import { useMutation } from '@tanstack/react-query'; + +export default function useMigrationOAuth( + onSuccess: () => void, + onError: () => void, +) { + return useMutation({ + mutationFn: kakaoOAuth, + onSuccess: onSuccess, + onError: onError, + }); +} From 1c80a5d5482a24d57f3cde2303dea7bf29de76fa Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:07:49 +0900 Subject: [PATCH 27/32] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/routes.ts | 3 ++- frontend/src/routes/router.tsx | 10 ++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 9934c8b05..b6a18a0e7 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -44,7 +44,8 @@ const ROUTES = { main: '/', home: '/home', kakaoSelection: '/oauth-migration', - oAuthSelection: '/oauth-select', + oAuthSelection: '/oauth-select/:type', + resultMigration: '/oauth-migration/:result', oAuthGoogle: '/oauth', oAuth: '/oauth/:provider', darakbangInvitationRoute: '/darakbang-invitation-route', diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx index 49543077d..016321d22 100644 --- a/frontend/src/routes/router.tsx +++ b/frontend/src/routes/router.tsx @@ -27,13 +27,14 @@ import DarakbangManagementPage from '@_pages/Darakbang/DarakbangManagementPage/D import DarakbangMembersPage from '@_pages/Darakbang/DarakbangMembersPage/DarakbangMembersPage'; import DarakbangInvitationPage from '@_pages/Darakbang/DarakbangInvitationPage/DarakbangInvitationPage'; import DarakbangInvitationRoute from '@_pages/Navigator/DarakbangInvitationRoute'; -import OAuthSelectPage from '@_pages/Login/DataMigrationPage/Select/OAuthSelectPage'; import BetListPage from '@_pages/Bet/BetListPage/BetListPage'; import BetDetailPage from '@_pages/Bet/BetDetailPage/BetDetailPage'; import BetCreationPage from '@_pages/Bet/BetCreationPage/BetCreationPage'; import BetResultPage from '@_pages/Bet/BetResultPage/BetResultPage'; import SettingPage from '@_pages/Mypage/SettingPage/SettingPage'; import KakaoSelectPage from '@_pages/Login/DataMigrationPage/Explanation/KakaoSelect'; +import KakaoLoginPage from '@_pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage'; +import OAuthMigrationResultPage from '@_pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage'; const routesConfig = [ { @@ -86,9 +87,14 @@ const routesConfig = [ element: , requiresAuth: true, }, + { + path: ROUTES.resultMigration, + element: , + requiresAuth: true, + }, { path: ROUTES.oAuthSelection, - element: , + element: , requiresAuth: true, }, { From 5cfecc4703f97d7b8ce2db063039e8bf7e13699c Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:08:18 +0900 Subject: [PATCH 28/32] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=9D=84=20=EC=A7=80=EC=9B=90?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=EB=8B=A4=EB=8A=94=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Login/HomePage/HomePage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Login/HomePage/HomePage.tsx b/frontend/src/pages/Login/HomePage/HomePage.tsx index f94eea56c..a907615a6 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -4,7 +4,6 @@ import GET_ROUTES from '@_common/getRoutes'; import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; import MainLogoIcon from '@_components/Icons/MainLogoIcon'; import AppleOAuthIcon from '@_components/Icons/AppleOAuthIcon'; -import ROUTES from '@_constants/routes'; import { getLastDarakbangId } from '@_common/lastDarakbangManager'; import { getAccessToken } from '@_utils/tokenManager'; import GoogleLoginButton from '@_components/GoogleLoginButton/GoogleLoginButton'; @@ -20,7 +19,7 @@ export default function HomePage() { return ; } if (!lastDarakbangId) { - return ; + return ; } } @@ -56,6 +55,7 @@ export default function HomePage() { css={css` display: flex; flex-direction: column; + margin-top: 30%; gap: 2rem; align-items: center; justify-content: center; @@ -100,7 +100,7 @@ export default function HomePage() { css={S.kakaoButton} onClick={() => { alert( - '카카오톡 로그인은 더이상 지원하지 않아요! 다른 로그인을 이용하여 계정을 옮겨 보세요!', + '카카오톡 로그인은 더 이상 지원하지 않아요! 다른 로그인을 이용하여 계정을 옮겨 보세요!', ); }} > @@ -108,7 +108,7 @@ export default function HomePage() { - 카카오톡 로그인은 더이상 지원하지 않아요! + 카카오톡 로그인은 더 이상 지원하지 않아요!
다른 로그인을 이용해주세요 From 9f4d72ab1f330d73c3fd85276138f8edc51fe61f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:08:34 +0900 Subject: [PATCH 29/32] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Login/OAuthLoginPage/OAuthLoginPage.tsx | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx index d918630d9..20e75a2c6 100644 --- a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx +++ b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx @@ -1,10 +1,11 @@ import ROUTES from '@_constants/routes'; -import { getInviteCode } from '@_common/inviteCodeManager'; -import { kakaoOAuth, googleOAuth } from '@_apis/auth'; +import { googleOAuth } from '@_apis/auth'; import { setAccessToken } from '@_utils/tokenManager'; import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { ApiError } from '@_utils/customError/ApiError'; +import useMigrationOAuth from '@_hooks/mutaions/useMigrationOAuth'; +import GET_ROUTES from '@_common/getRoutes'; type Provider = 'apple' | 'google' | 'kakao'; @@ -12,6 +13,10 @@ export default function OAuthLoginPage() { const navigate = useNavigate(); const params = useParams<'provider'>(); const provider = params.provider as Provider | undefined; + const { mutate: kakaoMigration } = useMigrationOAuth( + () => navigate(`${GET_ROUTES.default.resultMigration}/sucess`), + () => navigate(`${GET_ROUTES.default.resultMigration}/fail`), + ); useEffect(() => { const loginOAuth = async () => { @@ -39,30 +44,20 @@ export default function OAuthLoginPage() { apple: async () => { setAccessToken(codeOrToken); navigate(ROUTES.kakaoSelection); - return true; // 조기 반환 }, google: async () => { const response = await googleOAuth(codeOrToken); setAccessToken(response.data.accessToken); navigate(ROUTES.kakaoSelection); - return true; // 조기 반환 }, kakao: async () => { - await kakaoOAuth(codeOrToken); + kakaoMigration(codeOrToken); }, }; const handler = oauthHandlers[provider]; - const shouldReturn = await handler(); - if (shouldReturn) return; - - const inviteCode = getInviteCode(); - if (inviteCode) { - navigate(`${ROUTES.darakbangInvitationRoute}?code=${inviteCode}`); - } else { - navigate(ROUTES.darakbangSelectOption); - } + await handler(); } catch (error) { if (error instanceof ApiError) { alert(error.message); From e1f5657d1deef4c1ab91ef69392d85e84f576a8d Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 14:02:02 +0900 Subject: [PATCH 30/32] =?UTF-8?q?feat:=20happyFallback=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20missingFallback=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/happy_logo.svg | 9 ++++++ .../HappyFallback/HappyFallback.stories.tsx | 29 +++++++++++++++++++ .../HappyFallback/HappyFallback.style.ts} | 0 .../Fallback/HappyFallback/HappyFallback.tsx | 22 ++++++++++++++ .../MissingFallback.stories.tsx | 0 .../MissingFallback/MissingFallback.style.ts | 29 +++++++++++++++++++ .../MissingFallback/MissingFallback.tsx | 0 .../components/BetList/BetList.tsx | 2 +- .../src/pages/Chatting/ChatPage/ChatPage.tsx | 2 +- .../ChattingRoomPage/ChattingRoomPage.tsx | 2 +- .../DarakbangSelectPage.tsx | 2 +- .../Fallback/NotFoundPage/NotFoundPage.tsx | 2 +- .../Explanation/KakaoSelect.tsx | 2 +- .../KakaoLogin/KakaoLoginPage.tsx | 2 +- .../OAuthMigrationResultPage.tsx | 7 +++-- .../HomeMainContent/MoimList/MoimList.tsx | 2 +- .../HomeMainContent/MyMoim/MyMoim.tsx | 2 +- .../MyZzimMoimList/MyZzimMoimList.tsx | 2 +- .../Navigator/DarakbangInvitationRoute.tsx | 2 +- .../NotificationList/NotificationList.tsx | 2 +- .../components/PleaseList/PleaseList.tsx | 2 +- frontend/src/routes/router.tsx | 6 ++-- 22 files changed, 109 insertions(+), 19 deletions(-) create mode 100644 frontend/src/common/assets/happy_logo.svg create mode 100644 frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx rename frontend/src/components/{MissingFallback/MissingFallback.style.ts => Fallback/HappyFallback/HappyFallback.style.ts} (100%) create mode 100644 frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx rename frontend/src/components/{ => Fallback}/MissingFallback/MissingFallback.stories.tsx (100%) create mode 100644 frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts rename frontend/src/components/{ => Fallback}/MissingFallback/MissingFallback.tsx (100%) diff --git a/frontend/src/common/assets/happy_logo.svg b/frontend/src/common/assets/happy_logo.svg new file mode 100644 index 000000000..42d9ad155 --- /dev/null +++ b/frontend/src/common/assets/happy_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx b/frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx new file mode 100644 index 000000000..39c831e08 --- /dev/null +++ b/frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import HappyFallback from './HappyFallback'; +import { css } from '@emotion/react'; + +const meta: Meta = { + component: HappyFallback, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { text: '없어요' }, + + decorators: (Story) => { + return ( +
+ +
+ ); + }, +}; diff --git a/frontend/src/components/MissingFallback/MissingFallback.style.ts b/frontend/src/components/Fallback/HappyFallback/HappyFallback.style.ts similarity index 100% rename from frontend/src/components/MissingFallback/MissingFallback.style.ts rename to frontend/src/components/Fallback/HappyFallback/HappyFallback.style.ts diff --git a/frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx b/frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx new file mode 100644 index 000000000..c455398ca --- /dev/null +++ b/frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx @@ -0,0 +1,22 @@ +import * as S from './HappyFallback.style'; + +import { SerializedStyles, useTheme } from '@emotion/react'; + +import happyLogo from '@_common/assets/happy_logo.svg?url'; + +interface HappyFallbackProps { + text: string; + font?: SerializedStyles; + backgroundColor?: string | SerializedStyles; +} + +export default function HappyFallback(props: HappyFallbackProps) { + const { text, font, backgroundColor } = props; + const theme = useTheme(); + return ( +
+ 좋아용 + {text} +
+ ); +} diff --git a/frontend/src/components/MissingFallback/MissingFallback.stories.tsx b/frontend/src/components/Fallback/MissingFallback/MissingFallback.stories.tsx similarity index 100% rename from frontend/src/components/MissingFallback/MissingFallback.stories.tsx rename to frontend/src/components/Fallback/MissingFallback/MissingFallback.stories.tsx diff --git a/frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts b/frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts new file mode 100644 index 000000000..c7ee1ab1f --- /dev/null +++ b/frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts @@ -0,0 +1,29 @@ +import { SerializedStyles, css } from '@emotion/react'; + +export const container = ({ + backgroundColor, +}: { + backgroundColor?: string | SerializedStyles; +}) => css` + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + ${backgroundColor ? `background-color: ${backgroundColor};` : ''} + + min-width: 30rem; + min-height: 30rem; + + & > * { + text-align: center; + white-space: pre-line; + } +`; + +export const image = css` + width: 100%; + max-width: 40rem; + height: 100%; + max-height: 40rem; +`; diff --git a/frontend/src/components/MissingFallback/MissingFallback.tsx b/frontend/src/components/Fallback/MissingFallback/MissingFallback.tsx similarity index 100% rename from frontend/src/components/MissingFallback/MissingFallback.tsx rename to frontend/src/components/Fallback/MissingFallback/MissingFallback.tsx diff --git a/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx b/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx index 125e58a15..ecb172f0b 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx +++ b/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx @@ -1,4 +1,4 @@ -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import useBets from '@_hooks/queries/useBets'; import BetCardList from '../BetCardList/BetCardList'; diff --git a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx index 6a3fd3b05..5b6761d5b 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx @@ -9,7 +9,7 @@ import ChattingPreview from './components/ChattingPreview/ChattingPreview'; import ChattingPreviewLayout from '@_layouts/ChattingPreviewLayout/ChattingPreviewLayout'; import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper'; import GET_ROUTES from '@_common/getRoutes'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import NavigationBar from '@_components/NavigationBar/NavigationBar'; import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper'; import { common } from '@_common/common.style'; diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx index f7bd96027..865987a40 100644 --- a/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx +++ b/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx @@ -15,7 +15,7 @@ import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNam import DateTimeModalContent from './components/DateTimeModalContent/DateTimeModalContent'; import GET_ROUTES from '@_common/getRoutes'; import Hamburger from '@_components/Icons/Hamburger'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import Modal from '@_components/Modal/Modal'; import Picker from '@_components/Icons/Picker'; import PlaceModalContent from './components/PlaceModalContent/PlaceModalContent'; diff --git a/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx b/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx index 3d1cfb5a2..398278dfd 100644 --- a/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx +++ b/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx @@ -2,7 +2,7 @@ import * as S from './DarakbangSelectPage.style'; import GET_ROUTES from '@_common/getRoutes'; import HighlightSpan from '@_components/HighlightSpan/HighlightSpan'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import ROUTES from '@_constants/routes'; import SelectLayout from '@_layouts/SelectLayout/SelectLayout'; import SolidArrow from '@_components/Icons/SolidArrow'; diff --git a/frontend/src/pages/Fallback/NotFoundPage/NotFoundPage.tsx b/frontend/src/pages/Fallback/NotFoundPage/NotFoundPage.tsx index ee2f0f43f..e763eaead 100644 --- a/frontend/src/pages/Fallback/NotFoundPage/NotFoundPage.tsx +++ b/frontend/src/pages/Fallback/NotFoundPage/NotFoundPage.tsx @@ -2,7 +2,7 @@ import CompleteLayout from '@_layouts/CompleteLayout/CompleteLayout'; import { useNavigate } from 'react-router-dom'; import BackLogo from '@_common/assets/back.svg'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import Button from '@_components/Button/Button'; import ROUTES from '@_constants/routes'; diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx index 42e3d7dac..fc38b1af1 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx @@ -1,5 +1,5 @@ import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import * as S from './KakaoSelct.style'; import { useTheme } from '@emotion/react'; import Button from '@_components/Button/Button'; diff --git a/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx index 351f13487..e445c937f 100644 --- a/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx @@ -1,5 +1,5 @@ import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import * as S from './KakaoLoginPage.style'; import { useTheme } from '@emotion/react'; import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; diff --git a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx index 8caa73574..870f64c47 100644 --- a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx @@ -1,5 +1,5 @@ import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import * as S from './OAuthMigrationResultPage.style'; import { useTheme } from '@emotion/react'; @@ -9,6 +9,7 @@ import ROUTES from '@_constants/routes'; import { getInviteCode } from '@_common/inviteCodeManager'; import { useEffect } from 'react'; import GET_ROUTES from '@_common/getRoutes'; +import HappyFallback from '@_components/Fallback/HappyFallback/HappyFallback'; export default function OAuthMigrationResultPage() { const theme = useTheme(); @@ -32,10 +33,10 @@ export default function OAuthMigrationResultPage() {
- 이전 기록을 새로운 계정으로 옮겨 었어요! + 이전 기록을 새로운 계정으로 옮겼어요! - +