From f2d6590c89628feafa7a734813653bd5d915ddcd Mon Sep 17 00:00:00 2001
From: yarimu <yhli0320@naver.com>
Date: Thu, 16 Jan 2025 20:16:22 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EB=B0=98=EB=A0=A4=EB=8F=99?=
 =?UTF-8?q?=EB=AC=BC=20=EC=A7=88=EB=B3=91=20=EC=84=A0=ED=83=9D=20=EB=B7=B0?=
 =?UTF-8?q?=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/onboarding/index/Onboarding.tsx      |  4 +-
 .../PetHealthDualSelector.css.ts              | 26 +++++++++++
 .../PetHealthDualSelector.tsx                 | 46 +++++++++++++++++++
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts
 create mode 100644 src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx

diff --git a/src/page/onboarding/index/Onboarding.tsx b/src/page/onboarding/index/Onboarding.tsx
index 0c8ccba8..5805d9e4 100644
--- a/src/page/onboarding/index/Onboarding.tsx
+++ b/src/page/onboarding/index/Onboarding.tsx
@@ -1,9 +1,9 @@
-import Nickname from "@page/onboarding/index/component/nickname/Nickname";
+import PetHealthDualSelector from "./component/petHealthDualSelector/PetHealthDualSelector";
 
 const Onboarding = () => {
   return (
     <>
-      <Nickname />
+      <PetHealthDualSelector />
     </>
   );
 };
diff --git a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts b/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts
new file mode 100644
index 00000000..9afa032e
--- /dev/null
+++ b/src/page/onboarding/index/component/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% - 9.6rem)",
+  gap: "1.2rem",
+  whiteSpace: "nowrap",
+  padding: "1.2rem 2rem 3.2rem 2rem",
+});
diff --git a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx b/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx
new file mode 100644
index 00000000..7a5f1c65
--- /dev/null
+++ b/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx
@@ -0,0 +1,46 @@
+import * as styles from "./PetHealthDualSelector.css";
+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 "../../common/docs/Docs";
+
+import { Button } from "@common/component/Button";
+
+const PetHealthDualSelector = () => {
+  // 뒤로 가기
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+    navigate(-1);
+  };
+
+  // 다음 버튼
+  const handleNext = () => {
+    console.log("다음 pr에서 구현할래욥.");
+  };
+  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" />
+          <Button label="예" size="large" variant="outlinePrimary" />
+        </div>
+      </div>
+      {/* 하단 영역 */}
+      <div className={styles.btnWrapper}>
+        <Button label="돌아가기" size="large" variant="solidNeutral" disabled={false} onClick={handleGoBack} />
+        {/* 여기 disabled 수정 */}
+        <Button label="다음" size="large" variant="solidPrimary" disabled={!false} onClick={handleNext} />
+      </div>
+    </>
+  );
+};
+
+export default PetHealthDualSelector;

From f05de4902f26c3ac2973e9e97437972d1129fe89 Mon Sep 17 00:00:00 2001
From: yarimu <yhli0320@naver.com>
Date: Thu, 16 Jan 2025 20:17:15 +0900
Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../petHealthDualSelector/PetHealthDualSelector.css.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts b/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts
index 9afa032e..17a24546 100644
--- a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts
+++ b/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts
@@ -19,7 +19,7 @@ export const btnWrapper = style({
   bottom: 0,
 
   display: "grid",
-  gridTemplateColumns: "9.6rem calc(100% - 9.6rem)",
+  gridTemplateColumns: "9.6rem calc(100% - 10.8rem)",
   gap: "1.2rem",
   whiteSpace: "nowrap",
   padding: "1.2rem 2rem 3.2rem 2rem",

From 929118c1a4fdea6fa73f99192662fc01bed1d669 Mon Sep 17 00:00:00 2001
From: yarimu <yhli0320@naver.com>
Date: Thu, 16 Jan 2025 20:23:00 +0900
Subject: [PATCH 3/6] =?UTF-8?q?fix:=20button=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20active=20css=20=EC=88=98=EC=A0=95=20(=EB=AF=BC?=
 =?UTF-8?q?=EC=A0=95=EC=BB=A4=EB=B0=8B)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Button/styles.css.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/common/component/Button/styles.css.ts b/src/common/component/Button/styles.css.ts
index 994750f1..d145b490 100644
--- a/src/common/component/Button/styles.css.ts
+++ b/src/common/component/Button/styles.css.ts
@@ -44,11 +44,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)",
         },
       },
@@ -60,11 +61,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)",
         },
       },
@@ -78,17 +79,16 @@ 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}`,
         },
         ":focus": {
-          backgroundColor: "rgba(67, 214, 255, 0.08)",
+          backgroundColor: "rgba(67, 214, 255, 0.16)",
           color: "rgba(33, 46, 50, 1)",
           border: `0.1rem solid ${color.primary.blue500}`,
         },
       },
-      
     },
     disabled: {
       true: {

From 93668b938241cfe4a2c1ae07543ff1a9292d67ca Mon Sep 17 00:00:00 2001
From: yarimu <yhli0320@naver.com>
Date: Thu, 16 Jan 2025 21:32:47 +0900
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=ED=95=98=EB=8B=A8=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PetHealthDualSelector.tsx                      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx b/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx
index 7a5f1c65..5917df99 100644
--- a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx
+++ b/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx
@@ -1,4 +1,5 @@
 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";
@@ -9,6 +10,13 @@ import Docs from "../../common/docs/Docs";
 import { Button } from "@common/component/Button";
 
 const PetHealthDualSelector = () => {
+  const [selected, setSelected] = useState<"yes" | "no" | null>(null);
+
+  // 선택한 값 처리
+  const handleSelect = (choice: "yes" | "no") => {
+    setSelected(choice);
+  };
+
   // 뒤로 가기
   const navigate = useNavigate();
   const handleGoBack = () => {
@@ -29,15 +37,15 @@ const PetHealthDualSelector = () => {
         </div>
         {/* 질병 유무 선택 영역 */}
         <div className={styles.dualSelectorWrapper}>
-          <Button label="아니오" size="large" variant="outlinePrimary" />
-          <Button label="예" size="large" variant="outlinePrimary" />
+          <Button label="아니오" size="large" variant="outlinePrimary" onClick={() => handleSelect("no")} />
+          <Button label="예" size="large" variant="outlinePrimary" onClick={() => handleSelect("yes")} />
         </div>
       </div>
       {/* 하단 영역 */}
       <div className={styles.btnWrapper}>
         <Button label="돌아가기" size="large" variant="solidNeutral" disabled={false} onClick={handleGoBack} />
         {/* 여기 disabled 수정 */}
-        <Button label="다음" size="large" variant="solidPrimary" disabled={!false} onClick={handleNext} />
+        <Button label="다음" size="large" variant="solidPrimary" disabled={selected === null} onClick={handleNext} />
       </div>
     </>
   );

From daa4b4ab3554dd33d4929d87ed243d6bb6ee1539 Mon Sep 17 00:00:00 2001
From: yarimu <yhli0320@naver.com>
Date: Fri, 17 Jan 2025 02:25:22 +0900
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=EC=A7=88=EB=B3=91=EC=9C=A0?=
 =?UTF-8?q?=EB=AC=B4=EB=B6=80=ED=84=B0=20=EC=9E=90=EC=8B=9D=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/onboarding/index/Onboarding.tsx      |  4 +--
 .../index/component/petHealth/PetHealth.tsx   | 24 ++++++++++++++++
 .../component/petHealth/disease/Disease.tsx   | 10 +++++++
 .../PetHealthDualSelector.css.ts              |  0
 .../PetHealthDualSelector.tsx                 | 28 +++++++++++--------
 .../component/petHealth/symptom/Symptom.tsx   |  5 ++++
 6 files changed, 57 insertions(+), 14 deletions(-)
 create mode 100644 src/page/onboarding/index/component/petHealth/PetHealth.tsx
 create mode 100644 src/page/onboarding/index/component/petHealth/disease/Disease.tsx
 rename src/page/onboarding/index/component/{ => petHealth}/petHealthDualSelector/PetHealthDualSelector.css.ts (100%)
 rename src/page/onboarding/index/component/{ => petHealth}/petHealthDualSelector/PetHealthDualSelector.tsx (69%)
 create mode 100644 src/page/onboarding/index/component/petHealth/symptom/Symptom.tsx

diff --git a/src/page/onboarding/index/Onboarding.tsx b/src/page/onboarding/index/Onboarding.tsx
index 5805d9e4..2efd748b 100644
--- a/src/page/onboarding/index/Onboarding.tsx
+++ b/src/page/onboarding/index/Onboarding.tsx
@@ -1,9 +1,9 @@
-import PetHealthDualSelector from "./component/petHealthDualSelector/PetHealthDualSelector";
+import PetHealth from "@page/onboarding/index/component/petHealth/PetHealth";
 
 const Onboarding = () => {
   return (
     <>
-      <PetHealthDualSelector />
+      <PetHealth />
     </>
   );
 };
diff --git a/src/page/onboarding/index/component/petHealth/PetHealth.tsx b/src/page/onboarding/index/component/petHealth/PetHealth.tsx
new file mode 100644
index 00000000..6b274eae
--- /dev/null
+++ b/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;
diff --git a/src/page/onboarding/index/component/petHealth/disease/Disease.tsx b/src/page/onboarding/index/component/petHealth/disease/Disease.tsx
new file mode 100644
index 00000000..0fc9dc4d
--- /dev/null
+++ b/src/page/onboarding/index/component/petHealth/disease/Disease.tsx
@@ -0,0 +1,10 @@
+
+const Disease = () => {
+  return (
+    <div>
+      질병뷰
+    </div>
+  )
+}
+
+export default Disease
diff --git a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts b/src/page/onboarding/index/component/petHealth/petHealthDualSelector/PetHealthDualSelector.css.ts
similarity index 100%
rename from src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.css.ts
rename to src/page/onboarding/index/component/petHealth/petHealthDualSelector/PetHealthDualSelector.css.ts
diff --git a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx b/src/page/onboarding/index/component/petHealth/petHealthDualSelector/PetHealthDualSelector.tsx
similarity index 69%
rename from src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx
rename to src/page/onboarding/index/component/petHealth/petHealthDualSelector/PetHealthDualSelector.tsx
index 5917df99..ca43d4bf 100644
--- a/src/page/onboarding/index/component/petHealthDualSelector/PetHealthDualSelector.tsx
+++ b/src/page/onboarding/index/component/petHealth/petHealthDualSelector/PetHealthDualSelector.tsx
@@ -1,19 +1,21 @@
 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 "../../common/docs/Docs";
-
+import Docs from "@page/onboarding/index/common/docs/Docs";
 import { Button } from "@common/component/Button";
 
-const PetHealthDualSelector = () => {
-  const [selected, setSelected] = useState<"yes" | "no" | null>(null);
+interface PetHealthDualSelectorProps {
+  stepChange: (step: string) => void;
+}
+
+const PetHealthDualSelector = ({ stepChange }: PetHealthDualSelectorProps) => {
+  const [selected, setSelected] = useState<string | null>(null);
 
   // 선택한 값 처리
-  const handleSelect = (choice: "yes" | "no") => {
+  const handleSelect = (choice: string) => {
     setSelected(choice);
   };
 
@@ -23,10 +25,13 @@ const PetHealthDualSelector = () => {
     navigate(-1);
   };
 
-  // 다음 버튼
+  // 다음 버튼 (부모로 선택값을 전달_예 or 아니오)
   const handleNext = () => {
-    console.log("다음 pr에서 구현할래욥.");
+    if (selected) {
+      stepChange(selected);
+    }
   };
+
   return (
     <>
       {/* 상단 영역 */}
@@ -37,14 +42,13 @@ const PetHealthDualSelector = () => {
         </div>
         {/* 질병 유무 선택 영역 */}
         <div className={styles.dualSelectorWrapper}>
-          <Button label="아니오" size="large" variant="outlinePrimary" onClick={() => handleSelect("no")} />
-          <Button label="예" size="large" variant="outlinePrimary" onClick={() => handleSelect("yes")} />
+          <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" disabled={false} onClick={handleGoBack} />
-        {/* 여기 disabled 수정 */}
+        <Button label="돌아가기" size="large" variant="solidNeutral" onClick={handleGoBack} />
         <Button label="다음" size="large" variant="solidPrimary" disabled={selected === null} onClick={handleNext} />
       </div>
     </>
diff --git a/src/page/onboarding/index/component/petHealth/symptom/Symptom.tsx b/src/page/onboarding/index/component/petHealth/symptom/Symptom.tsx
new file mode 100644
index 00000000..cd294fcb
--- /dev/null
+++ b/src/page/onboarding/index/component/petHealth/symptom/Symptom.tsx
@@ -0,0 +1,5 @@
+const Symptom = () => {
+  return <div>증상 뷰</div>;
+};
+
+export default Symptom;

From 9b05e641d9c1fe9709d3fd31cd8bd761302dc8a5 Mon Sep 17 00:00:00 2001
From: yarimu <yhli0320@naver.com>
Date: Sat, 18 Jan 2025 01:26:36 +0900
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20conflict=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Button/styles.css.ts | 11 +++++++++++
 src/page/onboarding/index/Onboarding.tsx  |  8 +-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/common/component/Button/styles.css.ts b/src/common/component/Button/styles.css.ts
index d145b490..3831266e 100644
--- a/src/common/component/Button/styles.css.ts
+++ b/src/common/component/Button/styles.css.ts
@@ -89,6 +89,17 @@ export const button = recipe({
           border: `0.1rem solid ${color.primary.blue500}`,
         },
       },
+      outlineNeutral: {
+        border: `0.1rem solid ${color.gray.gray600}`,
+        borderRadius: "10rem",
+        backgroundColor: "transparent",
+        padding: "0.4rem 1.2rem",
+        ":disabled": {
+          color: color.gray.gray800,
+          backgroundColor: "unset",
+          pointerEvents: "none",
+        },
+      },
     },
     disabled: {
       true: {
diff --git a/src/page/onboarding/index/Onboarding.tsx b/src/page/onboarding/index/Onboarding.tsx
index 2efd748b..9b6eb146 100644
--- a/src/page/onboarding/index/Onboarding.tsx
+++ b/src/page/onboarding/index/Onboarding.tsx
@@ -1,11 +1,5 @@
-import PetHealth from "@page/onboarding/index/component/petHealth/PetHealth";
-
 const Onboarding = () => {
-  return (
-    <>
-      <PetHealth />
-    </>
-  );
+  return <></>;
 };
 
 export default Onboarding;