diff --git a/frontend/src/apis/auth.ts b/frontend/src/apis/auth.ts index 7941e2b7b..da3cdf0bb 100644 --- a/frontend/src/apis/auth.ts +++ b/frontend/src/apis/auth.ts @@ -1,27 +1,15 @@ import ApiClient from './apiClient'; export const kakaoOAuth = async (code: string) => { - const response = await ApiClient.postWithoutAuth('/auth/kakao/oauth', { + 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, }); 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`); }; 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/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/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/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 @@ + + + + + + + + + + + + + + + + + + + + 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; diff --git a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts index 7c1802fe4..363d81ef9 100644 --- a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts +++ b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts @@ -2,10 +2,8 @@ import { SerializedStyles, css } from '@emotion/react'; export const name = ({ font }: { font: string | SerializedStyles }) => css` ${font} - - max-width: 40vw; - overflow-x: hidden; + max-width: 40vw; text-overflow: ellipsis; white-space: nowrap; `; 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/Fallback/HappyFallback/HappyFallback.style.ts b/frontend/src/components/Fallback/HappyFallback/HappyFallback.style.ts new file mode 100644 index 000000000..c7ee1ab1f --- /dev/null +++ b/frontend/src/components/Fallback/HappyFallback/HappyFallback.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/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/MissingFallback/MissingFallback.style.ts b/frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts similarity index 86% rename from frontend/src/components/MissingFallback/MissingFallback.style.ts rename to frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts index 2643ef253..c7ee1ab1f 100644 --- a/frontend/src/components/MissingFallback/MissingFallback.style.ts +++ b/frontend/src/components/Fallback/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/Fallback/MissingFallback/MissingFallback.tsx similarity index 80% rename from frontend/src/components/MissingFallback/MissingFallback.tsx rename to frontend/src/components/Fallback/MissingFallback/MissingFallback.tsx index 0112dd089..1d7914a66 100644 --- a/frontend/src/components/MissingFallback/MissingFallback.tsx +++ b/frontend/src/components/Fallback/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}
); 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]); 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..0d028c09f 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/kakaoCircleOuathLogin.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 ; } 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/components/ProfileFrame/ProfileFrame.style.ts b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts index df39cfb4e..6cf8948b9 100644 --- a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts +++ b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts @@ -38,8 +38,8 @@ export const profileFrame = ({ width: ${width}rem; height: ${height}rem; - background: ${theme.colorPalette.white[100]}; + background: ${theme.colorPalette.white[100]}; border: ${borderWidth}rem solid ${theme.colorPalette.orange[200]}; border-radius: 300rem; `; @@ -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; `; diff --git a/frontend/src/constants/poclies.ts b/frontend/src/constants/poclies.ts index a53b8ebc7..51eac8c7e 100644 --- a/frontend/src/constants/poclies.ts +++ b/frontend/src/constants/poclies.ts @@ -30,6 +30,9 @@ const POLICES = { entranceCodeLength: 7, + + maxProfileImageSize: 5 * 1024 * 1024, //* 5MB + minBetTitleLength: 1, maxBetTitleLength: 20, betWaitingMinutesOptions: [5, 10, 15, 20, 25, 30], diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 0b0afde72..b6a18a0e7 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -43,8 +43,9 @@ const ROUTES = { notFound: '/*', main: '/', home: '/home', - oAuthMigration: '/oauth-migration', - oAuthSelection: '/oauth-select', + kakaoSelection: '/oauth-migration', + oAuthSelection: '/oauth-select/:type', + resultMigration: '/oauth-migration/:result', oAuthGoogle: '/oauth', oAuth: '/oauth/:provider', darakbangInvitationRoute: '/darakbang-invitation-route', 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, + }); +} diff --git a/frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts b/frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts index 5a33645d8..b5563f971 100644 --- a/frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts +++ b/frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts @@ -4,12 +4,14 @@ import { css } from '@emotion/react'; // TODO: 바텀 버튼 UI에 대한 기획 논의 필요 export const bottomFixedStyle = css` position: fixed; + bottom: 26px; + display: flex; flex-direction: column; - justify-content: center; - align-items: center; - bottom: 26px; gap: 1rem; + align-items: center; + justify-content: center; + width: 100%; max-width: ${DISPLAY_MAX_WIDTH}; padding: 0 16px; 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..94dba3755 100644 --- a/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts +++ b/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts @@ -3,9 +3,12 @@ import { css } from '@emotion/react'; export const mainStyle = css` display: flex; flex-direction: column; + flex-grow: 1; + gap: 3rem; align-items: center; - justify-content: center; + justify-content: flex-start; + width: 100%; height: 100%; margin: 0 auto; `; diff --git a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx index e59c08839..c2506639f 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 5bcd7cee8..8d008f986 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/Chatting/ChattingRoomPage/components/ChattingFooter/ChattingFooter.style.ts b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingFooter/ChattingFooter.style.ts index 0d9fef630..ea6a20bed 100644 --- a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingFooter/ChattingFooter.style.ts +++ b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingFooter/ChattingFooter.style.ts @@ -35,6 +35,7 @@ export const messageForm = ({ theme }: { theme: Theme }) => css` export const messageTextArea = ({ theme }: { theme: Theme }) => css` ${theme.typography.s2}; + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ resize: none; width: 100%; diff --git a/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx b/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx index 13d62314c..231ac319a 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 { common } from '@_common/common.style'; 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/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..95b5fd943 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts @@ -0,0 +1,21 @@ +import { css, Theme } from '@emotion/react'; + +export const titleWrapper = () => css` + width: 90%; + margin-top: 20%; +`; +export const title = ({ theme }: { theme: Theme }) => css` + ${theme.typography.h3} +`; + +export const subtitle = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b1} +`; + +export const explain = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b2} + padding: 1rem; + color: ${theme.colorPalette.grey[300]}; + text-decoration: underline; + 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 new file mode 100644 index 000000000..fc38b1af1 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx @@ -0,0 +1,70 @@ +import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; +import MissingFallback from '@_components/Fallback/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 GET_ROUTES from '@_common/getRoutes'; + +export default function KakaoSelectPage() { + const theme = useTheme(); + const navigate = useNavigate(); + + return ( + + + +
+ + 기존 카카오 계정으로
로그인하신 적이 있나요? + +
+ + + +
+ + + + navigate(`${GET_ROUTES.default.oAuthSelection}/unknown`) + } + > + 잘 기억나지 않아요 + +
+ + + ); +} 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/KakaoLogin/KakaoLoginPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.style.ts new file mode 100644 index 000000000..1c679e6b3 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.style.ts @@ -0,0 +1,13 @@ +import { css, Theme } from '@emotion/react'; + +export const titleWrapper = () => css` + width: 90%; + margin-top: 20%; +`; +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/KakaoLogin/KakaoLoginPage.tsx b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx new file mode 100644 index 000000000..e445c937f --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx @@ -0,0 +1,84 @@ +import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; +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 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 || + !process.env.KAKAO_OAUTH_REDIRECT_URI + ) { + throw new Error('kakao 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 ( + + + + {type === 'known' && ( +
+ + 카카오 로그인은
더 이상 지원하지 않아요 + +
+ + 이전 기록을 유지하기 위해 카카오 로그인을 진행해주세요. + +
+ )} + {type === 'unknown' && ( +
+ + 카카오 로그인은
더 이상 지원하지 않아요 + +
+ + 이전에 카카오 계정을 사용했는지 확인하고, 기록을 이전해 드릴게요! + +
+ )} + + + + + + + ); +} 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..1c679e6b3 --- /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` + width: 90%; + margin-top: 20%; +`; +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..a3600c6ed --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx @@ -0,0 +1,86 @@ +import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; +import MissingFallback from '@_components/Fallback/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'; +import HappyFallback from '@_components/Fallback/HappyFallback/HappyFallback'; + +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 === 'success') { + return ( + + + +
+ + 모우다를 사용할 준비가 되었어요 + +
+ + 이전 기록을 새로운 계정으로 옮겼어요! + +
+ + + + + + + ); + } + if (result === 'fail') { + return ( + + + +
+ 기록을 이전하는데 실패했어요! +
+ + 혹시 이전 카카오 계정 가입자가 아닌가요? + +
+ + + + + + + ); + } +} diff --git a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx deleted file mode 100644 index 13d66bd93..000000000 --- a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx +++ /dev/null @@ -1,75 +0,0 @@ -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'; - -export default function OAuthSelectPage() { - const navigate = useNavigate(); - - useEffect(() => { - if (!getMemberToken()) { - alert('잘못된 접근입니다.'); - navigate(ROUTES.home); - } - }, [navigate]); - const appleAuthLogin = () => { - if ( - !process.env.APPLE_O_AUTH_CLIENT_ID || - !process.env.APPLE_OAUTH_REDIRECT_URI - ) { - throw new Error('Apple 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', - }; - const queryString = new URLSearchParams(params).toString(); - const appleOAuthUrl = `${process.env.APPLE_REQUEST_URL}?${queryString}`; - if (process.env.MSW === 'true') { - window.location.href = 'http://localhost:8081/kakao-o-auth?code=1'; - } else { - window.location.href = appleOAuthUrl; - } - }; - - return ( - - - -
- -
- - -
- - -
- - - ); -} 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..9a4a80198 --- /dev/null +++ b/frontend/src/pages/Login/HomePage/HomePage.style.ts @@ -0,0 +1,17 @@ +import { css, Theme } from '@emotion/react'; + +export const kakaoButton = () => css` + background: none; + border: 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..a907615a6 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -1,17 +1,17 @@ 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'; 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'; +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(); @@ -19,7 +19,7 @@ export default function HomePage() { return ; } if (!lastDarakbangId) { - return ; + return ; } } @@ -47,10 +47,6 @@ export default function HomePage() { } }; - const handleDataMigraionLink = () => { - navigate(ROUTES.oAuthMigration); - }; - return ( @@ -59,58 +55,64 @@ export default function HomePage() { css={css` display: flex; flex-direction: column; - gap: 28px; - height: 70vh; - justify-content: center; + margin-top: 30%; + gap: 2rem; align-items: center; + justify-content: center; `} > -
-

모여봐요 우리의

-

다락방

-
-
- - - -
- + + +
+ + + + 카카오톡 로그인은 더 이상 지원하지 않아요! +
+ 다른 로그인을 이용해주세요 + + ); diff --git a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx index 1915812f1..20e75a2c6 100644 --- a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx +++ b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx @@ -1,14 +1,11 @@ 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 { 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'; @@ -16,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 () => { @@ -42,36 +43,27 @@ export default function OAuthLoginPage() { const oauthHandlers: Record Promise> = { apple: async () => { setAccessToken(codeOrToken); + navigate(ROUTES.kakaoSelection); }, google: async () => { - const response = await googleOAuth(codeOrToken, getMemberToken()); + const response = await googleOAuth(codeOrToken); setAccessToken(response.data.accessToken); + navigate(ROUTES.kakaoSelection); }, kakao: async () => { - const response = await kakaoOAuth(codeOrToken); - setAccessToken(response.data.accessToken); - setMemberToken(response.data.memberId); - navigate(ROUTES.oAuthSelection); - return true; // 조기 반환 + kakaoMigration(codeOrToken); }, }; const handler = oauthHandlers[provider]; - const shouldReturn = await handler(); - if (shouldReturn) return; - - removeMemberToken(); - - const inviteCode = getInviteCode(); - if (inviteCode) { - navigate(`${ROUTES.darakbangInvitationRoute}?code=${inviteCode}`); + await handler(); + } catch (error) { + if (error instanceof ApiError) { + alert(error.message); } else { - navigate(ROUTES.darakbangSelectOption); + alert('알 수 없는 오류가 발생했습니다.'); } - } catch (error) { - console.error('OAuth 처리 중 오류 발생:', error); - alert('로그인 처리 중 오류가 발생했습니다.'); navigate(ROUTES.home); } }; diff --git a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimList/MoimList.tsx b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimList/MoimList.tsx index 6a9b573ee..0cae8fe4e 100644 --- a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimList/MoimList.tsx +++ b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimList/MoimList.tsx @@ -1,4 +1,4 @@ -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import useMoims from '@_hooks/queries/useMoims'; import MoimCardListSkeleton from './MoimCardListSkeleton/MoimCardListSkeleton'; import MoimCardList from '../MoimCardList/MoimCardList'; diff --git a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MyMoim/MyMoim.tsx b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MyMoim/MyMoim.tsx index 6af195238..ad40a0fa8 100644 --- a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MyMoim/MyMoim.tsx +++ b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MyMoim/MyMoim.tsx @@ -5,7 +5,7 @@ import MyMoimListFilters, { Filter, } from '@_pages/Moim/MainPage/components/HomeMainContent/MyMoim/MyMoimListFilters/MyMoimListFilters'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import useMyMoims from '@_hooks/queries/useMyMoims'; import MoimCardList from '../MoimCardList/MoimCardList'; diff --git a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MyZzimMoimList/MyZzimMoimList.tsx b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MyZzimMoimList/MyZzimMoimList.tsx index e92775b55..a5823f389 100644 --- a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MyZzimMoimList/MyZzimMoimList.tsx +++ b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MyZzimMoimList/MyZzimMoimList.tsx @@ -1,4 +1,4 @@ -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import useMyZzimMoims from '@_hooks/queries/useMyZzimMoim'; import MoimCardList from '../MoimCardList/MoimCardList'; 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 = { 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'); diff --git a/frontend/src/pages/Navigator/DarakbangInvitationRoute.tsx b/frontend/src/pages/Navigator/DarakbangInvitationRoute.tsx index 3397a34de..a8965e0f7 100644 --- a/frontend/src/pages/Navigator/DarakbangInvitationRoute.tsx +++ b/frontend/src/pages/Navigator/DarakbangInvitationRoute.tsx @@ -3,7 +3,7 @@ import { removeInviteCode, setInviteCode } from '@_common/inviteCodeManager'; import Button from '@_components/Button/Button'; import CompleteLayout from '@_layouts/CompleteLayout/CompleteLayout'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import ROUTES from '@_constants/routes'; import { setLastDarakbangId } from '@_common/lastDarakbangManager'; import useDarakbangNameByCode from '@_hooks/queries/useDarakbangNameByCode'; diff --git a/frontend/src/pages/Notification/components/NotificationList/NotificationList.tsx b/frontend/src/pages/Notification/components/NotificationList/NotificationList.tsx index 5c3bca3f5..1d5a7a8a8 100644 --- a/frontend/src/pages/Notification/components/NotificationList/NotificationList.tsx +++ b/frontend/src/pages/Notification/components/NotificationList/NotificationList.tsx @@ -2,7 +2,7 @@ import * as S from './NotificationList.style'; import { useNavigate } from 'react-router-dom'; import useNotification from '@_hooks/queries/useNotification'; import NotificationListSkeleton from './NotificationListSkeleton/NotificationListSkeleton'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import NotificationCard from './NotificationCard/NotificationCard'; export default function NotificationList() { diff --git a/frontend/src/pages/Please/PleasePage/components/PleaseList/PleaseList.tsx b/frontend/src/pages/Please/PleasePage/components/PleaseList/PleaseList.tsx index 03b184278..c98377526 100644 --- a/frontend/src/pages/Please/PleasePage/components/PleaseList/PleaseList.tsx +++ b/frontend/src/pages/Please/PleasePage/components/PleaseList/PleaseList.tsx @@ -1,4 +1,4 @@ -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import PleaseCardList from '@_pages/Please/PleasePage/components/PleaseList/PleaseCardList/PleaseCardList'; import usePleases from '@_hooks/queries/usePleases'; import PleaseCardListSkeleton from './PleaseCardListSkeleton/PleaseCardListSkeleton'; diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx index 730575ff3..17cce04e9 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 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'; +import KakaoLoginPage from '@_pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage'; +import OAuthMigrationResultPage from '@_pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage'; const routesConfig = [ { @@ -82,13 +83,18 @@ const routesConfig = [ requiresAuth: false, }, { - path: ROUTES.oAuthMigration, - element: , + path: ROUTES.kakaoSelection, + element: , + requiresAuth: false, + }, + { + path: ROUTES.resultMigration, + element: , requiresAuth: false, }, { path: ROUTES.oAuthSelection, - element: , + element: , requiresAuth: false, }, {