[Feat/#71] 반려동물 질병 유무 뷰 구현

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

@@ -52,11 +52,12 @@ export const button = recipe({
           color: "rgb(244, 244, 244)",
         },
         ":focus": {
-          backgroundColor: "rgb(59, 183, 228)",
+          backgroundColor: "rgb(58, 177, 220)",
           color: "rgb(237, 237, 237)",
         },
         ":active": {
-          backgroundColor: "rgb(58, 177, 220)",
+          backgroundColor: "rgb(59, 183, 228)",
+
           color: "rgb(58, 177, 220)",
         },
       },
@@ -68,11 +69,11 @@ export const button = recipe({
           color: "rgb(109, 109, 109)",
         },
         ":focus": {
-          backgroundColor: "rgb(231, 231, 231)",
+          backgroundColor: "rgb(222, 222, 222)",
           color: "rgb(107, 107, 107)",
         },
         ":active": {
-          backgroundColor: "rgb(222, 222, 222)",
+          backgroundColor: "rgb(231, 231, 231)",
           color: "rgb(104, 104, 104)",
         },
       },
@@ -86,7 +87,7 @@ export const button = recipe({
           border: `0.1rem solid ${color.primary.blue500}`,
         },
         ":active": {
-          backgroundColor: "rgba(67, 214, 255, 0.16)",
+          backgroundColor: "rgba(67, 214, 255, 08)",
           color: "rgba(39, 63, 69, 1)",
           border: `0.1rem solid ${color.primary.blue500}`,
         },

src/page/onboarding/index/Onboarding.tsx

@@ -1,9 +1,6 @@
-
 const Onboarding = () => {
-  return (
-    <>
-    </>
-  );
+  return <></>;
 };
 
 export default Onboarding;
+

src/page/onboarding/index/component/petHealth/PetHealth.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import PetHealthDualSelector from "@page/onboarding/index/component/petHealth/petHealthDualSelector/PetHealthDualSelector";
+import Disease from "./disease/Disease";
+import Symptom from "./symptom/Symptom";
+
+const PetHealth = () => {
+  // 제출 할 폼 정보 저장 로직은 PetHealth 하위 컴포넌트 퍼블리싱 완료 후 구현 예정
+  const [healthStep, setHealthStep] = useState<string>("");
+
+  // healthStep 상태를 업데이트하는 핸들러
+  const stepChange = (step: string) => {
+    setHealthStep(step);
+  };
+
+  return (
+    <>
+      {healthStep === "" && <PetHealthDualSelector stepChange={stepChange} />}
+      {healthStep === "예" && <Disease />}
+      {healthStep === "아니오" && <Symptom />}
+    </>
+  );
+};
+
+export default PetHealth;

src/page/onboarding/index/component/petHealth/disease/Disease.tsx

@@ -0,0 +1,10 @@
+
+const Disease = () => {
+  return (
+    <div>
+      질병뷰
+    </div>
+  )
+}
+
+export default Disease

src/page/onboarding/index/component/petHealth/petHealthDualSelector/PetHealthDualSelector.css.ts

@@ -0,0 +1,26 @@
+import { style } from "@vanilla-extract/css";
+
+export const layout = style({
+  display: "flex",
+  flexDirection: "column",
+  padding: "8rem 2rem",
+  gap: "9rem",
+});
+export const dualSelectorWrapper = style({
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "1.2rem",
+});
+
+export const btnWrapper = style({
+  maxWidth: "76.8rem",
+  width: "100%",
+  position: "fixed",
+  bottom: 0,
+
+  display: "grid",
+  gridTemplateColumns: "9.6rem calc(100% - 10.8rem)",
+  gap: "1.2rem",
+  whiteSpace: "nowrap",
+  padding: "1.2rem 2rem 3.2rem 2rem",
+});

src/page/onboarding/index/component/petHealth/petHealthDualSelector/PetHealthDualSelector.tsx

@@ -0,0 +1,58 @@
+import * as styles from "./PetHealthDualSelector.css";
+import { useState } from "react";
+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 { Button } from "@common/component/Button";
+
+interface PetHealthDualSelectorProps {
+  stepChange: (step: string) => void;
+}
+
+const PetHealthDualSelector = ({ stepChange }: PetHealthDualSelectorProps) => {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  // 선택한 값 처리
+  const handleSelect = (choice: string) => {
+    setSelected(choice);
+  };
+
+  // 뒤로 가기
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+    navigate(-1);
+  };
+
+  // 다음 버튼 (부모로 선택값을 전달_예 or 아니오)
+  const handleNext = () => {
+    if (selected) {
+      stepChange(selected);
+    }
+  };
+
+  return (
+    <>
+      {/* 상단 영역 */}
+      <div className={styles.layout}>
+        <div>
+          <Title text={ONBOARDING_GUIDE.isPetDisease.title} />
+          <Docs text={ONBOARDING_GUIDE.isPetDisease.docs} />
+        </div>
+        {/* 질병 유무 선택 영역 */}
+        <div className={styles.dualSelectorWrapper}>
+          <Button label="아니오" size="large" variant="outlinePrimary" onClick={() => handleSelect("아니오")} />
+          <Button label="예" size="large" variant="outlinePrimary" onClick={() => handleSelect("예")} />
+        </div>
+      </div>
+      {/* 하단 영역 */}
+      <div className={styles.btnWrapper}>
+        <Button label="돌아가기" size="large" variant="solidNeutral" onClick={handleGoBack} />
+        <Button label="다음" size="large" variant="solidPrimary" disabled={selected === null} onClick={handleNext} />
+      </div>
+    </>
+  );
+};
+
+export default PetHealthDualSelector;

src/page/onboarding/index/component/petHealth/symptom/Symptom.tsx

@@ -0,0 +1,5 @@
+const Symptom = () => {
+  return <div>증상 뷰</div>;
+};
+
+export default Symptom;