docs: SwitchCase 문서 추가 (#102)

* docs: SwitchCase 문서 추가

* docs: When컴포넌트 props 수정

.changeset/seven-pants-eat.md

@@ -0,0 +1,5 @@
+---
+'@modern-kit/react': minor
+---
+
+#100 61d6df3 Thanks @soonki-98! - feat: SwitchCase Component 추가 및 When fallback props 추가

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 />

docs/docs/react/components/When.mdx

@@ -15,23 +15,25 @@ 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);
 
   return (
     <>
       <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>
     </>

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>
+  );
 };