From d6173fbbed943bc84b9baadf20f1345956ff9363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gromit=20=28=EC=A0=84=EB=AF=BC=EC=9E=AC=29?=
 <64779472+ssi02014@users.noreply.github.com>
Date: Sun, 5 May 2024 17:21:00 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20SwitchCase=20=EB=AC=B8=EC=84=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#102)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: SwitchCase 문서 추가

* docs: When컴포넌트 props 수정
---
 .changeset/seven-pants-eat.md                 |  5 ++
 docs/docs/react/components/SwithCase.mdx      | 83 +++++++++++++++++++
 docs/docs/react/components/When.mdx           |  8 +-
 .../react/src/components/SwitchCase/index.tsx |  7 +-
 4 files changed, 98 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/seven-pants-eat.md
 create mode 100644 docs/docs/react/components/SwithCase.mdx

diff --git a/.changeset/seven-pants-eat.md b/.changeset/seven-pants-eat.md
new file mode 100644
index 000000000..a71b5ac6a
--- /dev/null
+++ b/.changeset/seven-pants-eat.md
@@ -0,0 +1,5 @@
+---
+'@modern-kit/react': minor
+---
+
+#100 61d6df3 Thanks @soonki-98! - feat: SwitchCase Component 추가 및 When fallback props 추가
diff --git a/docs/docs/react/components/SwithCase.mdx b/docs/docs/react/components/SwithCase.mdx
new file mode 100644
index 000000000..0cc22ba6a
--- /dev/null
+++ b/docs/docs/react/components/SwithCase.mdx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { SwitchCase } from '@modern-kit/react';
+
+# SwitchCase
+
+`Switch` 문을 컴포넌트 형태로 사용할 수 있는 컴포넌트입니다.
+
+`cases`에는 `key(condition):value(component)` 형태의 프로퍼티를 갖는 객체를 넘겨주고, `condition` props에 매칭되는 `value(컴포넌트)`를 렌더링합니다.
+
+`cases`에 매칭되는 `condition`이 없을 때 임시로 보여줄 수 있는 `defaultCaseComponent`를 `props`로 넘겨줄 수 있습니다.
+
+<br />
+
+## Interface
+```tsx
+type Component = Nullable<React.ReactNode>;
+
+interface SwitchCaseProps<Condition extends string | number> {
+  condition: Condition | null | undefined;
+  cases: Partial<Record<Condition, Component>>;
+  defaultCaseComponent?: Component;
+}
+
+const SwitchCase: <Condition extends string | number>({
+  condition,
+  cases,
+  defaultCaseComponent,
+}: SwitchCaseProps<Condition>) => JSX.Element;
+```
+
+## Usage
+
+```tsx
+import { SwitchCase } from '@modern-kit/react';
+
+
+const Example = () => {
+  const [condition, setCondition] = useState(1);
+
+  return (
+    <div>
+      <div>
+        <button onClick={() => setCondition(1)}>Change to case 1</button>
+        <button onClick={() => setCondition(2)}>Change to case 2</button>
+        <button onClick={() => setCondition(3)}>Change to case 3</button>
+      </div>
+
+      <SwitchCase
+        condition={condition}
+        cases={{
+          1: <h3>Case No.1</h3>,
+          2: <h3>Case No.2</h3>,
+          3: <h3>Case No.3</h3>,
+        }}
+      />
+    </div>
+  );
+};
+```
+
+export const Example = () => {
+  const [condition, setCondition] = useState(1);
+  return (
+    <div>
+      <div>
+        <button onClick={() => setCondition(1)}>Change to case 1</button>
+        <button onClick={() => setCondition(2)}>Change to case 2</button>
+        <button onClick={() => setCondition(3)}>Change to case 3</button>
+      </div>
+
+      <SwitchCase
+        condition={condition}
+        cases={{
+          1: <h3>Case No.1</h3>,
+          2: <h3>Case No.2</h3>,
+          3: <h3>Case No.3</h3>,
+        }}
+      />
+    </div>
+  );
+};
+
+<Example />
\ No newline at end of file
diff --git a/docs/docs/react/components/When.mdx b/docs/docs/react/components/When.mdx
index 7647801ee..9fedad85e 100644
--- a/docs/docs/react/components/When.mdx
+++ b/docs/docs/react/components/When.mdx
@@ -15,15 +15,17 @@ type Condition = boolean | ((...args: any[]) => boolean);
 
 interface WhenProps {
   condition: Condition;
+  fallback?: React.ReactNode;
 }
 
-const When: ({ children, condition }: PropsWithChildren<WhenProps>) => JSX.Element | null
+const When: ({ children, condition }: PropsWithChildren<WhenProps>) => JSX.Element
 ```
 
 ## Usage
 
 ```tsx
 import { When } from '@modern-kit/react';
+
 const Example = () => {
   const [state, setState] = useState(false);
 
@@ -31,7 +33,7 @@ const Example = () => {
     <>
       <button onClick={() => setState(!state)}>Toggle Button</button>
 
-      <When condition={state}>
+      <When condition={state} fallback={<p>Fallback</p>}>
         <h1>Render</h1>
       </When>
     </>
@@ -44,7 +46,7 @@ export const Example = () => {
     <>
       <button onClick={() => setState(!state)}>Toggle Button</button>
 
-      <When condition={state}>
+      <When condition={state} fallback={<p>Fallback</p>}>
         <h1>Render</h1>
       </When>
     </>
diff --git a/packages/react/src/components/SwitchCase/index.tsx b/packages/react/src/components/SwitchCase/index.tsx
index cf1ce0592..cdb5376b5 100644
--- a/packages/react/src/components/SwitchCase/index.tsx
+++ b/packages/react/src/components/SwitchCase/index.tsx
@@ -1,4 +1,5 @@
 import { Nullable } from '@modern-kit/types';
+import React from 'react';
 
 type Component = Nullable<React.ReactNode>;
 
@@ -14,8 +15,10 @@ export const SwitchCase = <Condition extends string | number>({
   defaultCaseComponent = null,
 }: SwitchCaseProps<Condition>) => {
   if (condition == null) {
-    return defaultCaseComponent;
+    return <React.Fragment>{defaultCaseComponent}</React.Fragment>;
   }
 
-  return cases[condition] ?? defaultCaseComponent;
+  return (
+    <React.Fragment>{cases[condition] ?? defaultCaseComponent}</React.Fragment>
+  );
 };