feat : DropDownOption 에 use client 추가, useSafeContext 추가

apps/wow-docs/app/page.tsx

@@ -18,8 +18,8 @@ const Home = () => {
         <RadioButton label="2학년" value="2학년" />
       </RadioGroup>
       <DropDown placeholder="목록을 입력하세요">
-        <DropDownOption text="option 1" value="option 1" />
-        <DropDownOption text="option 1" value="option 2" />
+        <DropDownOption text="옵 1" value="option 1" />
+        <DropDownOption text="옵 2" value="option 2" />
       </DropDown>
       <MultiGroup variant="checkbox">
         <Checkbox label="checkbox1" value="checkbox1" />

packages/wow-ui/src/components/DropDown/DropDownOption.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
 import type { ReactNode } from "react";

packages/wow-ui/src/components/DropDown/context/DropDownContext.ts

@@ -1,19 +1,13 @@
-"use client";
-
 import { createContext, useContext } from "react";
 
 import type useDropDownState from "@/hooks/useDropDownState";
+import useSafeContext from "@/hooks/useSafeContext";
 
 export const DropDownContext = createContext<
   ReturnType<typeof useDropDownState> | undefined
 >(undefined);
 
 export const useDropDownContext = () => {
-  const context = useContext(DropDownContext);
-  if (!context) {
-    throw new Error(
-      "useDropDownContext must be used within a DropDownProvider"
-    );
-  }
+  const context = useSafeContext(DropDownContext);
   return context;
 };

packages/wow-ui/src/hooks/useSafeContext.ts

@@ -0,0 +1,12 @@
+import type { Context } from "react";
+import { useContext } from "react";
+
+const useSafeContext = <T>(context: Context<T | undefined>): T => {
+  const contextValue = useContext(context);
+  if (contextValue === undefined) {
+    throw new Error(`useSafeContext must be used within a context provider`);
+  }
+  return contextValue;
+};
+
+export default useSafeContext;