[Feat/#67] 펫 이름 뷰 구현

src/page/onboarding/index/Onboarding.tsx

@@ -1,3 +1,4 @@
+
 const Onboarding = () => {
   return (
     <>

src/page/onboarding/index/component/petName/PetName.css.ts

@@ -0,0 +1,31 @@
+import { style } from "@vanilla-extract/css";
+
+export const layout = style({
+  display: "flex",
+  flexDirection: "column",
+  padding: "8rem 2rem",
+  gap: "9rem",
+});
+
+export const imgStyle = style({
+  width: "16.5rem",
+  height: "9.3rem",
+  marginBottom: "1.6rem",
+});
+
+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",
+});
+
+export const errorLayout = style({
+  marginTop: "0.8rem",
+});

src/page/onboarding/index/component/petName/PetName.tsx

@@ -0,0 +1,71 @@
+import { useState, ChangeEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import * as styles from "./PetName.css";
+import onboardingImg from "@asset/image/image 1730.png";
+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 { TextField } from "@common/component/TextField";
+import { Button } from "@common/component/Button";
+import { validatePetName } from "../../util/validatePetName";
+
+const PetName = () => {
+  // 상태 하나로 관리
+  const [petName, setPetName] = useState("");
+
+  // 펫이름 입력 처리
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPetName(e.target.value);
+  };
+
+  // 유효성 검사 결과
+  const validationMessages = petName ? validatePetName(petName) : [];
+  const isValid = petName && validationMessages.length === 0;
+
+  // 뒤로 가기
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+    navigate(-1);
+  };
+
+  // 다음 버튼
+  const handleNext = () => {
+    console.log("다음 pr에서 구현할래욥.");
+  };
+
+  return (
+    <>
+      {/* 상단 영역 */}
+      <div className={styles.layout}>
+        <div>
+          <img src={onboardingImg} alt="onboarding-character" className={styles.imgStyle} />
+          <Title text={ONBOARDING_GUIDE.petName.title} />
+          <Docs text={ONBOARDING_GUIDE.petName.docs} />
+        </div>
+
+        {/* 펫이름 입력 영역 */}
+        <div>
+          <TextField
+            state={petName === "" ? "default" : isValid ? "default" : "error"}
+            value={petName}
+            onChange={handleChange}
+            placeholder="닉네임을 입력해주세요."
+          />
+          <div className={styles.errorLayout}>
+            {validationMessages.map((message) => (
+              <Docs key={`error-${message}`} state="lError" text={message} />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 하단 버튼 */}
+      <div className={styles.btnWrapper}>
+        <Button label="돌아가기" size="large" variant="solidNeutral" disabled={false} onClick={handleGoBack} />
+        <Button label="다음" size="large" variant="solidPrimary" disabled={!isValid} onClick={handleNext} />
+      </div>
+    </>
+  );
+};
+
+export default PetName;

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

@@ -5,10 +5,15 @@ export const ERROR_MSG = {
     spaceSymbol: "공백이나 특수문자는 사용할 수 없어요.",
     ko: "완성된 한글을 입력해 주세요.", // 해당 메시지 확정 아님
   },
+
+  // 여기 메시지는 다 확정 아님
   petName: {
-    ko: "한글만 입력할 수 있어요.",
+    enNum: "숫자나 영어는 사용할 수 없어요.",
     length: "2자 이상 8자 이하로 입력해주세요.",
+    spaceSymbol: "공백이나 특수문자는 사용할 수 없어요.",
+    ko: "완성된 한글을 입력해 주세요.",
   },
+
   petAge: {
     length: "100살 미만까지 가능해요",
   },

src/page/onboarding/index/util/validateNickname.ts

@@ -24,5 +24,5 @@ export function validateNickname(nickname: string): string[] {
     errors.push(ERROR_MSG.nickname.ko);
   }
 
-  return errors; // 에러 메시지 배열 반환
+  return errors;
 }

src/page/onboarding/index/util/validatePetName.ts

@@ -0,0 +1,27 @@
+import { ERROR_MSG } from "../constant/errorMsg";
+
+export function validatePetName(petName: string): string[] {
+  const errors: string[] = [];
+
+  // 영어 또는 숫자 하나라도 포함되면 오류
+  const alphanumericPattern = /[a-zA-Z0-9]/;
+  if (alphanumericPattern.test(petName)) {
+    errors.push(ERROR_MSG.petName.enNum); // 영어 또는 숫자가 포함된 경우
+  }
+
+  // 펫이름 길이
+  if (petName.length < 2 || petName.length > 8) {
+    errors.push(ERROR_MSG.petName.length);
+  }
+
+  // 공백 특수문자
+  if (/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ]/.test(petName)) {
+    errors.push(ERROR_MSG.petName.spaceSymbol);
+  }
+  // 완성된 한글
+  if (/[ㄱ-ㅎㅏ-ㅣ]/.test(petName)) {
+    errors.push(ERROR_MSG.petName.ko);
+  }
+
+  return errors;
+}