From 4b4ce7275c0cc04a96ec58df79653a215d7a91f5 Mon Sep 17 00:00:00 2001
From: 4Bee <4bee.code@gmail.com>
Date: Sun, 6 Oct 2024 21:10:18 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=A7=AA:=20=EA=B8=B0=EC=A1=B4=20Button?=
=?UTF-8?q?Components=EB=A5=BC=20test=ED=8C=8C=EC=9D=BC=EB=A1=9C=20?=
=?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EB=B6=84=EB=A6=AC=ED=95=A0=20?=
=?UTF-8?q?=EC=98=88=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.tsx | 3 +-
.../components/Button.components.test.tsx | 67 +++++++++++++++++++
2 files changed, 69 insertions(+), 1 deletion(-)
create mode 100644 src/shared/components/Button.components.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 506cbca..2d1467d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,8 @@ import { useEffect } from "react";
// import reactLogo from "./assets/react.svg";
// import viteLogo from "/vite.svg";
import "./App.css";
-import ButtonComponents from "./shared/components/button.components";
+// import ButtonComponents from "./shared/components/button.components"; //원문 파일
+import ButtonComponents from "./shared/components/Button.components.test"; //Test 파일로 대체
import { validateData } from "./test"; // test.ts 파일을
const Button = ButtonComponents;
diff --git a/src/shared/components/Button.components.test.tsx b/src/shared/components/Button.components.test.tsx
new file mode 100644
index 0000000..901d32a
--- /dev/null
+++ b/src/shared/components/Button.components.test.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react";
+import Z from "zod";
+
+//interface
+//Zod about props
+// 1. zod로 props 스키마 정의
+const buttonPropsSchema = Z.object({ //4. Error: 런타임 Props 검증, Parse 미사용으로 Error 발생
+ EnterColor: Z.string(),
+ LeaveColor: Z.string(),
+})
+
+// 2. TypeScript 타입으로 추출
+type ButtonProps = Z.infer
;
+
+// 2-1. 바로 타입만 추출하고 스키마 제거
+/**
+type ButtonProps = z.infer<
+ z.object({
+ EnterColor: z.string(),
+ LeaveColor: z.string(),
+ })
+>;
+*/
+// 3. 컴포넌트에 타입 설정: FC Generics로 적용하지 않고 해당 Props에 Type을 적용
+// FC 사용방법은 PR Link 참고
+const ButtonComponents = (props:ButtonProps) => {
+ const [isHover, setHover] = useState(false);
+
+// 4-1. 직접적으로 Props 변수를 생성
+ const { EnterColor, LeaveColor } = props;
+// 4-2. 런타임 Props 검증
+ buttonPropsSchema.parse(props);
+
+ return (
+
+
+
{
+ setHover(true);
+ }}
+ onMouseLeave={() => {
+ setHover(false);
+ }}
+ onClick={() => {
+ console.log('Button clicked');
+ }}
+ role="button" // 접근성 향상
+ >
+ Button
+
+
+
From 411f2f4cbbff668ef1895fd34e61bdb6a97882b7 Mon Sep 17 00:00:00 2001
From: 4Bee <4bee.code@gmail.com>
Date: Sun, 6 Oct 2024 21:22:24 +0900
Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=9A=A9:=20Button=20Props=20=EB=9F=B0?=
=?UTF-8?q?=ED=83=80=EC=9E=84=20=EA=B2=80=EC=A6=9D=20=ED=99=95=EC=9D=B8=20?=
=?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/shared/components/Button.components.test.tsx | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/shared/components/Button.components.test.tsx b/src/shared/components/Button.components.test.tsx
index 00f26e7..da36cac 100644
--- a/src/shared/components/Button.components.test.tsx
+++ b/src/shared/components/Button.components.test.tsx
@@ -26,9 +26,10 @@ type ButtonProps = z.infer<
const ButtonComponents = (props:ButtonProps) => {
const [isHover, setHover] = useState(false);
-// 4-1. 직접적으로 Props 변수를 생성
+ // 4-1. 직접적으로 Props 변수를 생성
const { EnterColor, LeaveColor } = props;
-// 4-2. 런타임 Props 검증
+
+ // 4-2. 런타임 Props 검증
try {
buttonPropsSchema.parse(props);
console.log("Props validation successful"); // 유효성 검증이 성공하면 이 메시지가 출력됩니다.