diff --git a/src/App.tsx b/src/App.tsx
index 4176026..8d94f6d 100644
--- a/src/App.tsx
+++ b/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([
{
diff --git a/src/assets/images/buddyStart.svg b/src/assets/images/buddyStart.svg
new file mode 100644
index 0000000..d46f5f0
--- /dev/null
+++ b/src/assets/images/buddyStart.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/images/nugul.svg b/src/assets/images/nugul.svg
new file mode 100644
index 0000000..167341d
--- /dev/null
+++ b/src/assets/images/nugul.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/components/buddy/buddyStart.tsx b/src/components/buddy/buddyStart.tsx
index 4e55a85..4baf8e8 100644
--- a/src/components/buddy/buddyStart.tsx
+++ b/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 (
-
-
-
-
+
+
+
+
+
+
+ 세종버디란?
+ 세종버디(Buddy)는
+
+ 맞춤형 캠퍼스 짝꿍을 찾는 서비스 입니다.
+
+ 한 명의 학우와 한 학기 동안 버디로 매칭 되며,
+ 다음 학기에 새로운 버디를 찾을 수 있습니다.
+
+
+
+
+
+ 216명의 학생들이 버디를 찾고 있어요!
+
+
+
+
+
);
-}
\ No newline at end of file
+}
+
+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;
+`;
\ No newline at end of file
diff --git a/src/components/button/confirmButton.tsx b/src/components/button/confirmButton.tsx
index ba94869..807bed5 100644
--- a/src/components/button/confirmButton.tsx
+++ b/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`
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;
`;
\ No newline at end of file
diff --git a/src/pages/buddy-page.tsx b/src/pages/buddy-page.tsx
new file mode 100644
index 0000000..28c4cff
--- /dev/null
+++ b/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 ;
+ }
+ }
+
+ return(
+
+ {buddyStep()}
+
+ )
+};
\ No newline at end of file
diff --git a/src/pages/buddyPage.tsx b/src/pages/buddyPage.tsx
deleted file mode 100644
index 2c27da5..0000000
--- a/src/pages/buddyPage.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useSearchParams } from "react-router-dom";
-import { BuddyStart } from "../components/buddy/buddyStart";
-
-export const BuddyPage = () => {
- const [searchParams] = useSearchParams();
- const step = searchParams.get("step") || "1";
-
- const buddyStep = () => {
- switch (step) {
- case "1":
- return ;
- }
- }
-
- return(
-
- {buddyStep()}
-
- )
-};
\ No newline at end of file
diff --git a/src/services/apis/user.service.ts b/src/services/apis/user.service.ts
index 2926282..cd3db70 100644
--- a/src/services/apis/user.service.ts
+++ b/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);