feat : [8] 버디 시작페이지, 리뷰 기반 수정

src/App.tsx

@@ -5,7 +5,7 @@ import { HomePage } from "./pages/home-page";
 import { LoginPage } from "./pages/login-page";
 import { RegisterPage } from "./pages/register-page";
 import { Toaster } from "sonner";
-import { BuddyPage } from "./pages/buddyPage";
+import { BuddyPage } from "./pages/buddy-page";
 
 const router = createBrowserRouter([
   {

src/components/buddy/buddyStart.tsx

@@ -1,11 +1,112 @@
+import styled from "styled-components";
+
 import { ConfirmButton } from "../button/confirmButton";
-import { BuddyButton } from "./buddyButton";
+import { SubHeader } from "../subHeader";
+import { COLORS } from "../../theme";
+import startImg from '../../assets/images/buddyStart.svg';
+import nugul from '../../assets/images/nugul.svg';
 
 export const BuddyStart = () => {
     return (
-        <div>
-            <ConfirmButton />
-            <BuddyButton />
-        </div>
+        <BuddyContainer>
+            <SubHeader backgroundColor="#FAF5F5" text={""} />
+            <BuddyContainer2>
+            <StartImg src={startImg} />
+
+            <BuddyStartTextContainer>
+                <BuddyStartTitle>세종버디란?</BuddyStartTitle>
+                <BuddyStartText1>세종버디(Buddy)는</BuddyStartText1>
+                <BuddyStartText1>
+                    <BuddyStartTextB>맞춤형 캠퍼스 짝꿍</BuddyStartTextB>을 찾는 서비스 입니다.
+                </BuddyStartText1>
+                <BuddyStartText2>한 명의 학우와 한 학기 동안 버디로 매칭 되며,</BuddyStartText2>
+                <BuddyStartText2>다음 학기에 새로운 버디를 찾을 수 있습니다.</BuddyStartText2>
+            </BuddyStartTextContainer>
+
+            <ApplicationContainer>
+                <ApplicationNum>
+                    <ApplicationImg src={nugul}/>
+                    <ApplicationText>216명의 학생들이 버디를 찾고 있어요!</ApplicationText>
+                </ApplicationNum>
+                <ConfirmButton 
+                    width='100%'
+                    height='52px'
+                    text='세종버디 신청하기' 
+                    textcolor= '#FFF'
+                    backgroundcolor= {COLORS.main}
+                    borderradius='50px'
+                    border='none'
+                />
+            </ApplicationContainer>
+            </BuddyContainer2>
+        </BuddyContainer>
     );
-}
+}
+
+const BuddyContainer = styled.div`
+    max-width: 674px;
+    height: 100vh;
+    margin: auto;
+`;
+const BuddyContainer2 = styled.div`
+    width: 100%;
+    height: 94%;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+`;
+
+const StartImg = styled.img`
+    width: 100%;
+    height: 132px;
+    text-align: center;
+    margin: 20% 0 17%;
+`;
+
+const BuddyStartTextContainer = styled.div`
+    padding: 0 6px;
+    @media (min-width: 430px) {
+        max-width: 398px;
+        margin: 0 auto;
+    }
+`;
+const BuddyStartTitle = styled.h3`
+    color: #111;
+    font-weight: bold;
+    font-size: 24px;
+    margin-bottom: 12px;
+`;
+const BuddyStartText1 = styled.p`
+    color: ${COLORS.font1};
+    font-weight: 700;
+    line-height: 1.5;
+`;
+const BuddyStartTextB = styled.b`
+    color: ${COLORS.main};
+`;
+const BuddyStartText2 = styled.p`
+    color: #555;
+    line-height: 1.5;
+`;
+
+const ApplicationContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    margin-top: auto;
+`;
+const ApplicationNum = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 5px;
+`;
+
+const ApplicationImg = styled.img`
+    object-fit:cover;
+    border-raidus: 12px;
+`;
+const ApplicationText = styled.p`
+    color: #111;
+    font-weight: 700;
+`;

src/components/button/confirmButton.tsx

@@ -13,9 +13,9 @@ interface ButtonProps {
 }
 
 export const ConfirmButton = ({ 
-    width='327px',
+    width='100%',
     height='52px', 
-    text='오류', 
+    text='확인', 
     textcolor=`${COLORS.back2}`, 
     backgroundcolor=`${COLORS.disabled}`,
     borderradius='50px',
@@ -39,13 +39,15 @@ export const ConfirmButton = ({
 
 const ButtonWrapper = styled.button<ButtonProps>`
     width: ${(props) => props.width};
+    max-width: 398px;
     height: ${(props) => props.height};
     color: ${(props) => props.textcolor};
     background-color: ${(props) => props.backgroundcolor};
     border-radius: ${(props) => props.borderradius};
     border: ${(props) => props.border};
     cursor: pointer;
-    display: inline-block;
+    display: block;
     text-align: center;
     padding: 14px 0;
+    margin: auto;
 `;

src/pages/buddy-page.tsx

@@ -0,0 +1,31 @@
+import { useSearchParams } from "react-router-dom";
+import { BuddyStart } from "../components/buddy/buddyStart";
+import { useEffect } from "react";
+
+export const BuddyPage = () => {
+    const [searchParams] = useSearchParams();
+    const step = searchParams.get("step") || "0";
+
+    useEffect(() => {
+        // 페이지가 로드될 때 body 배경색 변경
+        document.body.style.backgroundColor = "#FAF5F5";
+
+        // 컴포넌트가 언마운트될 때 배경색 원래대로 복구
+        return () => {
+            document.body.style.backgroundColor = "";
+        };
+    }, []);
+
+    const buddyStep = () => {
+        switch (step) {
+            case "0":
+                return <BuddyStart />;
+        }
+    }
+
+    return(
+        <div>
+            {buddyStep()}
+        </div>
+    )
+};

src/services/apis/user.service.ts

@@ -86,7 +86,7 @@ export const checkNicknameAvailability = async (
 };
 
 // 회원가입 API 요청 함수
-export const registerUser = async (formData: any) => {
+export const registerUser = async (formData: object) => {
   try {
     const response = await axiosInstance.post("/member/sign-up", formData);