[Feat/#119] 반려동물 등록 연결 완

src/api/domain/registerPet/animal/hook.ts

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { getAnimal } from "@api/domain/registerPet/animal/index";
+
+export const ANIMALS_QUERY_KEY = {
+  ANIMALS_QUERY_KEY: () => ["animals"],
+};
+
+export const useAnimalGet = () => {
+  return useQuery({
+    queryKey: ANIMALS_QUERY_KEY.ANIMALS_QUERY_KEY(),
+    queryFn: () => {
+      return getAnimal();
+    },
+  });
+};

src/api/domain/registerPet/animal/index.ts

@@ -0,0 +1,10 @@
+import { paths } from "@type/schema";
+import { API_PATH } from "@api/constants/apiPath";
+import { get } from "@api/index";
+
+export type animalGetResponse = paths["/api/dev/animals"]["get"]["responses"]["200"]["content"]["*/*"];
+
+export const getAnimal = async () => {
+  const { data } = await get<animalGetResponse>(API_PATH.ANIMALS, {});
+  return data.data;
+};

src/api/domain/registerPet/bodies/hook.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { getBodies } from "@api/domain/registerPet/bodies/index";
+
+export const BODY_QUERY_KEY = {
+  // 키값 동적으로
+  BODY_QUERY_KEY: (petProblem: string) => ["bodies", petProblem],
+};
+
+export const useBodiesGet = (petProblem: string) => {
+  return useQuery({
+    queryKey: BODY_QUERY_KEY.BODY_QUERY_KEY(petProblem),
+    queryFn: () => getBodies(petProblem),
+  });
+};

src/api/domain/registerPet/bodies/index.ts

@@ -0,0 +1,14 @@
+import { paths } from "@type/schema";
+import { get } from "@api/index";
+import { API_PATH } from "@api/constants/apiPath";
+
+// 신체부위 조회 api
+export type bodiesGetRequest = paths["/api/dev/bodies"]["get"]["parameters"]["query"];
+export type bodiesGetResponse = paths["/api/dev/bodies"]["get"]["responses"]["200"]["content"]["*/*"];
+
+export const getBodies = async (petProblem: string): Promise<bodiesGetResponse> => {
+  const validProblem = petProblem === "symptom" || petProblem === "disease" ? petProblem : "symptom";
+
+  const { data } = await get<bodiesGetResponse>(`${API_PATH.BODY}?petProblem=${validProblem}`);
+  return data;
+};

src/asset/svg/IcLeftIcon.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+const SvgIcLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <path
+      fill="#222"
+      fillRule="evenodd"
+      d="M10 1.6c-4.97 0-9 3.113-9 6.952 0 2.388 1.558 4.493 3.932 5.745l-.999 3.647c-.088.323.28.58.563.393l4.377-2.889q.554.056 1.127.057c4.97 0 9-3.113 9-6.953S14.97 1.6 10 1.6"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcLeftIcon;

src/asset/svg/index.ts

@@ -1,10 +1,9 @@
 export { default as Check } from "./Check";
 export { default as IcBottomSheetLine } from "./IcBottomSheetLine";
-export { default as IcoMessage } from "./IcoMessage";
-export { default as IcoSkeleton } from "./IcoSkeleton";
 export { default as IcEllipse57 } from "./IcEllipse57";
 export { default as IcIcons } from "./IcIcons";
 export { default as IcImagePlus } from "./IcImagePlus";
+export { default as IcLeftIcon } from "./IcLeftIcon";
 export { default as IcNormal } from "./IcNormal";
 export { default as IcRight } from "./IcRight";
 export { default as IcRightIcon } from "./IcRightIcon";
@@ -28,10 +27,12 @@ export { default as IcSearch } from "./IcSearch";
 export { default as IcSearchFillter } from "./IcSearchFillter";
 export { default as IcSearchFillterBlue } from "./IcSearchFillterBlue";
 export { default as IcSettings } from "./IcSettings";
+export { default as IcTemporary } from "./IcTemporary";
 export { default as IcTest } from "./IcTest";
 export { default as IcToastError } from "./IcToastError";
 export { default as IcUp } from "./IcUp";
-export { default as IcTemporary } from "./IcTemporary";
+export { default as IcoMessage } from "./IcoMessage";
+export { default as IcoSkeleton } from "./IcoSkeleton";
 export { default as Plus } from "./Plus";
 export { default as React } from "./React";
-export { default as Vite } from "./Vite";
+export { default as Vite } from "./Vite";

src/common/component/TextField/styles.css.ts

@@ -52,6 +52,7 @@ export const styles = {
       display: "flex",
       alignItems: "center",
       gap: "1rem",
+      width: "inherit",
     },
   }),
   input: recipe({
@@ -61,6 +62,8 @@ export const styles = {
         letterSpacing: "-0.28px",
         fontWeight: 500,
         height: "auto",
+        minWidth: "100%",
+
         maxWidth: "100%",
         color: color.gray.gray900,
         border: "none",

src/page/onboarding/index/Onboarding.tsx

@@ -1,4 +1,22 @@
+import { useState } from "react";
+import Login from "./component/Login/Login";
+import Nickname from "./component/nickname/Nickname";
+import Complete from "@page/onboarding/complete/Complete";
+
 const Onboarding = () => {
-  return <></>;
+  const [step, setStep] = useState(0);
+
+  const getComponent = () => {
+    switch (step) {
+      case 0:
+        return <Login setStep={setStep} />;
+      case 1:
+        return <Nickname setStep={setStep}/>;
+      case 2:
+        return <Complete />;
+    }
+  };
+
+  return <>{getComponent()}</>;
 };
 export default Onboarding;

src/page/onboarding/index/component/Login/Login.css.ts

@@ -0,0 +1,25 @@
+import { style } from "@vanilla-extract/css";
+import { font } from "@style/styles.css";
+export const layout = style({
+  display: "flex",
+  justifyContent: "center",
+  padding: "13.5rem 2rem 0 2rem",
+});
+
+export const buttonStyle = style([
+  font.body01,
+  {
+    position: "absolute",
+    bottom: "3.2rem",
+    width: "33.5rem",
+    display: "grid",
+    gridTemplateColumns: "auto 1fr",
+    justifyItems: "center",
+
+    height: "4.4rem",
+    padding: "1.2rem 2.8rem",
+
+    borderRadius: "8px",
+    backgroundColor: "#FEE500",
+  },
+]);

src/page/onboarding/index/component/Login/Login.tsx

@@ -0,0 +1,28 @@
+import * as styles from "./Login.css";
+import { IcLeftIcon } from "@asset/svg";
+import { IcoSkeleton } from "@asset/svg";
+
+
+interface LoginProps {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const Login = ({ setStep }: LoginProps) => {
+  const handleLogin = () => {
+    // 로그인
+    setStep(1);
+  };
+
+  return (
+    <div className={styles.layout}>
+      <IcoSkeleton width={254} height={258} />
+      <div className={styles.buttonStyle} onClick={handleLogin}>
+        <IcLeftIcon width={20} height={20} />
+
+        <span>카카오톡 로그인</span>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

src/page/onboarding/index/component/nickname/Nickname.tsx

@@ -4,12 +4,16 @@ import { useNavigate } from "react-router-dom";
 import { ONBOARDING_GUIDE } from "@page/onboarding/index/constant/onboardingGuide";
 import Title from "@page/onboarding/index/common/title/Title";
 import Docs from "@page/onboarding/index/common/docs/Docs";
-import onboardingImg from "@asset/image/image 1730.png";
 import { validateNickname } from "@shared/util/validateNickname";
 import { Button } from "@common/component/Button";
 import { TextField } from "@common/component/TextField";
+import nicknameCoco from "@asset/image/nicknameCoco.png";
 
-const Nickname = () => {
+interface NicknamePros {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const Nickname = ({ setStep }: NicknamePros) => {
   // 상태 하나로 관리
   const [nickname, setNickname] = useState("");
 
@@ -33,15 +37,15 @@ const Nickname = () => {
 
   // 다음 버튼
   const handleNext = () => {
-    console.log("다음 pr에서 구현할래욥.");
+    setStep(2);
   };
 
   return (
     <>
       {/* 상단 영역 */}
       <div className={styles.layout}>
         <div>
-          <img src={onboardingImg} alt="onboarding-character" className={styles.imgStyle} />
+          <img src={nicknameCoco} alt="onboarding-character" className={styles.imgStyle} />
           <Title text={ONBOARDING_GUIDE.nickname.title} />
           <Docs text={ONBOARDING_GUIDE.nickname.docs} />
         </div>

src/page/onboarding/index/constant/onboardingGuide.ts

@@ -1,39 +1,39 @@
 // 워딩 최종 확인할 때 컴포넌트 명이랑 키값 맞추기
 export const ONBOARDING_GUIDE = {
   nickname: {
-    title: "사용할 닉네임을 입력해 주세요.",
-    docs: "닉네임은 2~8자 한글, 영문, 숫자만 가능해요!",
+    title: "사용할 닉네임을 입력해 주세요",
+    docs: "닉네임은 2~8자 한글, 영문, 숫자만 가능해요",
   },
   petName: {
-    title: "반려동물 이름을 알려주세요 !",
-    docs: "반려동물 이름을 8자 미만 한글만 가능해요",
+    title: "반려동물 이름을 알려주세요",
+    docs: "8자 이하 한글만 가능해요",
   },
   petType: {
-    title: "어떤 반려동물과 함께 하시나요 ?",
-    docs: "함께 생활하고 있는 반려동물을 선택해주세요.",
+    title: "어떤 반려동물과 함께 하시나요?",
+    docs: "함께 생활하고 있는 반려동물을 선택해주세요",
   },
   petGender: {
-    title: "반려동물의 성별을 알려주세요.",
-    docs: "중성화한 경우, 처음 성별을 선택해 주세요 !",
+    title: "반려동물의 성별을 알려주세요",
+    docs: "중성화한 경우, 처음 성별을 선택해 주세요",
   },
   petSpecies: {
-    title: "반려동물의 종류를 알려주세요.",
-    docs: "반려동물은 어떤 종인가요 ?",
+    title: "반려동물의 종류를 알려주세요",
+    docs: "반려동물은 어떤 종인가요?",
   },
   petAge: {
-    title: "반려동물의 나이를 입력해주세요 !",
-    docs: "몇 살인지 알려주세요 🐾",
+    title: "반려동물의 나이를 입력해주세요",
+    docs: "태어난 지 몇 년이나 되었는지 숫자로 입력해주세요",
   },
   isPetDisease: {
     title: "반려동물 건강 관련 고민이 있나요?",
     docs: "자세히 알려주시면 더 많은 도움을 드릴 수 있어요",
   },
   petDisease: {
-    title: "반려동물이 앓고 있는 질병이나 궁금한 병이 있나요 ?",
-    docs: "증상이 나타나는 부위가 어디인가요?",
+    title: "질병 부위를 선택하면 맞춤형 정보를 추천해드려요",
+    docs: "최대 2개까지 선택할 수 있어요",
   },
   petSymptom: {
-    title: "반려동물 증상이 나타나거나 궁금하신 부위가 어디인가요?",
-    docs: "증상이 나타나는 부위가 어디인가요?",
+    title: "증상 부위를 선택하면 맞춤형 정보를 추천해드려요",
+    docs: "최대 2개까지 선택할 수 있어요",
   },
 };

src/page/registerPet/complete/Complete.tsx

@@ -4,11 +4,11 @@ import Docs from "@page/onboarding/index/common/docs/Docs";
 import Title from "@page/onboarding/index/common/title/Title";
 import { Button } from "@common/component/Button";
 import img from "@asset/image/beforeRegisterGraphic.png";
-
+import { PATH } from "@route/path";
 const Complete = () => {
   const navigate = useNavigate();
   const handleSkip = () => {
-    navigate("/main");
+    navigate(PATH.MAIN);
   };
 
   return (