Merge pull request #32 from GlowTales/feat/#8

[FEAT] 온보딩 api 연결 및 로그인 라우팅 수정

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<string[]> => {
+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) {

src/components/common/FinishScreen.tsx

@@ -1,5 +1,72 @@
-const FinishScreen = () => {
-  return <div>FinishScreen</div>;
+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 (
+    <Container>
+      <Title>
+        <SubTitle>{props.sub}</SubTitle>
+        {props.title.split("\n").map((line, index) => (
+          <span key={index}>
+            {line}
+            <br />
+          </span>
+        ))}
+      </Title>
+      <Image src={props.imgURL} />
+      <NextBtn
+        isActive={true}
+        text="홈으로 가기"
+        handleBtn={toHome}
+        width="70%"
+      />
+    </Container>
+  );
 };
 
 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;
+`;

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`

src/components/login/Login.tsx

@@ -9,8 +9,11 @@ const Login = () => {
 
   return (
     <CommonWrapper>
-      <S.Title>{`{메인소개 멘트}`}</S.Title>
-      <S.LogoBox>{`{로고이미지}`}</S.LogoBox>
+      <S.Title>
+        <div>메인 소개 멘트 어쩌구</div>
+        <div>글로우테일로 동화를 어쩌구</div>
+      </S.Title>
+      <S.Image src="/loginGraphic.png" />
       <S.LoginBtn>
         <img id="login-bubble" src="./loginBubble.png" alt="3초 로그인" />
         <img

src/hooks/useOnboarding.ts

@@ -1,3 +1,4 @@
+import { registerUser } from "@apis/login";
 import { useState, useEffect } from "react";
 
 const useOnboarding = () => {
@@ -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 = () => {

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) {

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 (
     <CommonWrapper>
-      <ProgressBar percentage={(currentStep + 1) * 25} />
-      {currentStep === 0 && <SelectLanguage setter={setLanguageId} />}
-      {currentStep === 1 && languageId && (
-        <SelectLevel languageId={languageId} setter={setLearningLevel} />
+      {currentStep < 3 ? (
+        <>
+          <ProgressBar percentage={(currentStep + 1) * 25} />
+          {currentStep === 0 && <SelectLanguage setter={setLanguageId} />}
+          {currentStep === 1 && languageId && (
+            <SelectLevel languageId={languageId} setter={setLearningLevel} />
+          )}
+          {currentStep === 2 && languageId && learningLevel && (
+            <SelectAge age={age} setter={setAge} />
+          )}
+          <NextBtn
+            isActive={isNextBtnActive}
+            text={isLastStep ? "완료" : "다음"}
+            handleBtn={handleNextStep}
+          />
+        </>
+      ) : (
+        <FinishScreen
+          imgURL="/onboardingFinish.png"
+          title="글로우테일로 동화를 만들고 
+          언어를 학습해보세요!"
+          sub="정보 입력이 완료되었어요!"
+        />
       )}
-      {currentStep === 2 && languageId && learningLevel && (
-        <SelectAge age={age} setter={setAge} />
-      )}
-      <NextBtn
-        isActive={isNextBtnActive}
-        text={isLastStep ? "완료" : "다음"}
-        handleBtn={handleNextStep}
-      />
     </CommonWrapper>
   );
 };