Merge pull request #92 from SOPT-all/feat/#89/petGenderView

[Feat/#89] 반려동물 성별 뷰

src/page/onboarding/index/component/petGender/PetGender.css.ts

@@ -0,0 +1,21 @@
+import { style } from "@vanilla-extract/css";
+
+export const layout = style({
+  display: "flex",
+  flexDirection: "column",
+  padding: "8rem 2rem",
+  gap: "9rem",
+});
+
+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/petGender/PetGender.tsx

@@ -0,0 +1,49 @@
+import * as styles from "./PetGender.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 "@page/onboarding/index/common/docs/Docs";
+import DualOptionSelector from "../dualOptionSelector/DualOptionSelector";
+import { Button } from "@common/component/Button";
+import { data } from "@page/onboarding/index/constant/genderData";
+import { useState } from "react";
+
+const PetGender = () => {
+  // 선택 상태 관리 (초기값: null)
+  const [gender, setGender] = useState<string | null>(null);
+
+  // 선택한 버튼 텍스트 = selectedPetType
+  const handleOptionSelect = (value: string) => {
+    setGender(value);
+  };
+  // 뒤로 가기
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+    navigate(-1);
+  };
+
+  // 다음 버튼
+  const handleNext = () => {
+    console.log("다음 pr에서 구현할래욥.");
+  };
+  return (
+    <>
+      {/* 상단 영역 */}
+      <div className={styles.layout}>
+        <div>
+          <Title text={ONBOARDING_GUIDE.petGender.title} />
+          <Docs text={ONBOARDING_GUIDE.petGender.docs} />
+        </div>
+        {/* 성별 선택 영역 */}
+        <DualOptionSelector data={data.gender} onSelect={handleOptionSelect} />
+      </div>
+      {/* 하단 영역 */}
+      <div className={styles.btnWrapper}>
+        <Button label="돌아가기" size="large" variant="solidNeutral" disabled={false} onClick={handleGoBack} />
+        <Button label="다음" size="large" variant="solidPrimary" disabled={!gender} onClick={handleNext} />
+      </div>
+    </>
+  );
+};
+
+export default PetGender;

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

@@ -0,0 +1,17 @@
+import selectImg from "@asset/image/image 1733.png";
+
+// 여기는 api 연결 아니나, api연결뷰와 컴포넌트를 공유해 다음과 같이 구현
+export const data = {
+  gender: [
+    {
+      id: 1,
+      label: "암컷",
+      image: selectImg,
+    },
+    {
+      id: 2,
+      label: "수컷",
+      image: selectImg,
+    },
+  ],
+};