diff --git a/public/loginGraphic.png b/public/loginGraphic.png new file mode 100644 index 0000000..a641c4b Binary files /dev/null and b/public/loginGraphic.png differ diff --git a/src/apis/login.ts b/src/apis/login.ts index 86c0abd..a6a99ba 100644 --- a/src/apis/login.ts +++ b/src/apis/login.ts @@ -17,14 +17,8 @@ export const postCode = async (code: string) => { LocalStorage.setItem("access", accessToken); LocalStorage.setItem("refresh", refreshToken); - // 임시로 바로 회원등록 - if (!response.data.data.isActive) { - const result = await registerUser(); - if (!result) throw Error("회원 등록 실패"); - } - return response.data; + return response.data.data; } catch (error) { - // console.error('에러 발생', error); throw error; } }; @@ -33,14 +27,22 @@ export const postCode = async (code: string) => { * 사용자 정보 등록 메서드 * 인자 추후 추가 예정 */ -export const registerUser = async (): Promise => { +export const registerUser = async ({ + languageId, + learningLevel, + age, +}: { + languageId: number; + learningLevel: string; + age: number; +}) => { try { const access = LocalStorage.getItem("access"); const authAxios = getAuthAxios(access); const response = await authAxios.put(`${baseURL}/members`, { - languageId: 1, - learningLevel: "1000", - age: 3, + languageId, + learningLevel, + age, }); return response.data; } catch (error) { diff --git a/src/components/common/FinishScreen.tsx b/src/components/common/FinishScreen.tsx index 68def70..782e50b 100644 --- a/src/components/common/FinishScreen.tsx +++ b/src/components/common/FinishScreen.tsx @@ -1,5 +1,72 @@ -const FinishScreen = () => { - return
FinishScreen
; +import styled from "styled-components"; +import NextBtn from "./NextBtn"; +import { useNavigate } from "react-router-dom"; + +interface FinishScreenProps { + imgURL: string; + title: string; + sub: string; +} + +const FinishScreen = (props: FinishScreenProps) => { + const navigate = useNavigate(); + + const toHome = () => { + navigate("/home"); + }; + return ( + + + <SubTitle>{props.sub}</SubTitle> + {props.title.split("\n").map((line, index) => ( + <span key={index}> + {line} + <br /> + </span> + ))} + + + + + ); }; export default FinishScreen; + +const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 90%; + gap: 5%; +`; + +const Title = styled.div` + font-size: 3.4rem; + font-weight: 800; + text-align: center; + span { + display: block; + margin-bottom: 0.5rem; + } +`; + +const SubTitle = styled.div` + font-size: 2rem; + font-weight: 700; + color: #ffb800; + margin-bottom: 1rem; +`; + +const Image = styled.img` + width: 100%; + height: auto; /* 비율 유지 */ + max-width: 600px; +`; diff --git a/src/components/login/Login.styled.ts b/src/components/login/Login.styled.ts index 84afaf1..db90282 100644 --- a/src/components/login/Login.styled.ts +++ b/src/components/login/Login.styled.ts @@ -1,18 +1,20 @@ import styled from "styled-components"; export const Title = styled.div` - font-size: 3.4rem; + font-size: 3rem; font-weight: 800; -`; - -export const LogoBox = styled.div` + width: 100%; display: flex; - justify-content: center; + flex-direction: column; align-items: center; - width: 60%; - height: 250px; - border-radius: 15px; - background-color: #efefed; + justify-content: center; + gap: 1rem; +`; + +export const Image = styled.img` + width: 55%; + height: auto; /* 비율 유지 */ + max-width: 600px; `; export const LoginBtn = styled.div` diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx index 9165b49..25ff13a 100644 --- a/src/components/login/Login.tsx +++ b/src/components/login/Login.tsx @@ -9,8 +9,11 @@ const Login = () => { return ( - {`{메인소개 멘트}`} - {`{로고이미지}`} + +
메인 소개 멘트 어쩌구
+
글로우테일로 동화를 어쩌구
+
+ 3초 로그인 { @@ -9,12 +10,21 @@ const useOnboarding = () => { const [currentStep, setCurrentStep] = useState(0); const [isStepCompleted, setIsStepCompleted] = useState([false, false, false]); - const handleNextStep = () => { - if (currentStep < 2) { - setCurrentStep(currentStep + 1); - } else { - console.log(languageId, learningLevel, age); + const handleNextStep = async () => { + try { + if (languageId && learningLevel && age) { + const result = await registerUser({ + languageId: Number(languageId), + learningLevel: String(learningLevel), + age: Number(age), + }); + if (!result) throw new Error("회원 등록 실패"); + console.log("회원 등록 성공:", result); + } + } catch (error) { + console.error("회원 등록 중 오류 발생:", error); } + setCurrentStep((prev) => prev + 1); }; const checkStepCompletion = () => { diff --git a/src/pages/KakaoRedirect.tsx b/src/pages/KakaoRedirect.tsx index f377829..118f8c8 100644 --- a/src/pages/KakaoRedirect.tsx +++ b/src/pages/KakaoRedirect.tsx @@ -15,9 +15,15 @@ const KakaoRedirect = () => { if (code) { const result = await postCode(code); if (result) { - setTimeout(() => { - navigate(`/onboarding`); - }, 1000); + if (!result.isActive) { + setTimeout(() => { + navigate(`/onboarding`); + }, 1000); + } else { + setTimeout(() => { + navigate(`/home`); + }, 1000); + } } } } catch (err) { diff --git a/src/pages/OnboardingPage.tsx b/src/pages/OnboardingPage.tsx index 466b469..510a44e 100644 --- a/src/pages/OnboardingPage.tsx +++ b/src/pages/OnboardingPage.tsx @@ -5,6 +5,7 @@ import NextBtn from "@components/common/NextBtn"; import SelectLevel from "@components/onboarding/SelectLevel"; import SelectAge from "@components/onboarding/SelectAge"; import useOnboarding from "@hooks/useOnboarding"; +import FinishScreen from "@components/common/FinishScreen"; const OnboardingPage = () => { const { @@ -22,19 +23,30 @@ const OnboardingPage = () => { return ( - - {currentStep === 0 && } - {currentStep === 1 && languageId && ( - + {currentStep < 3 ? ( + <> + + {currentStep === 0 && } + {currentStep === 1 && languageId && ( + + )} + {currentStep === 2 && languageId && learningLevel && ( + + )} + + + ) : ( + )} - {currentStep === 2 && languageId && learningLevel && ( - - )} - ); };