Merge pull request #23 from klmhyeonwoo/refactor/createContext

refactor(create-context): createContext 사용 시 디버깅에 용이하도록 매개변수 추가

Author: Doeunnkimm

demo/tsconfig.json

@@ -20,6 +20,5 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src", "../packages/ui"]
+  }
 }

demo/vite.config.ts

@@ -8,6 +8,8 @@ export default defineConfig({
   plugins: [react(), vanillaExtractPlugin()],
   resolve: {
     alias: {
+      "@layer-ui": path.resolve(__dirname, "../packages/ui"),
+      "@layer-lib": path.resolve(__dirname, "../packages/lib"),
       "@layer-ui/button": path.resolve(__dirname, "../packages/ui/button/src"),
       "@layer-ui/tabs": path.resolve(__dirname, "../packages/ui/tabs/src"),
       "@layer-lib/react-context": path.resolve(__dirname, "../packages/lib/react-context/src"),

packages/lib/react-context/src/create-context.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-function createContext<ContextType extends object | null>(defaultValue?: ContextType) {
+function createContext<ContextType extends object | null>(contextName: string, defaultValue?: ContextType) {
   const Context = React.createContext<ContextType | undefined>(defaultValue);
 
   function Provider(props: ContextType & { children: React.ReactNode }) {
@@ -10,11 +10,13 @@ function createContext<ContextType extends object | null>(defaultValue?: Context
     return <Context.Provider value={values}> {children} </Context.Provider>;
   }
 
-  function useContext() {
+  function useContext(componentName: string) {
     const context = React.useContext(Context);
     if (context) return context;
     if (defaultValue) return defaultValue;
-    throw new Error(`Context 값을 찾을 수 없습니다. useContext는 반드시 해당하는 Provider 내부에서 사용되어야 합니다.`);
+    throw new Error(
+      `${contextName}Context 값을 찾을 수 없습니다. <${componentName} />에서 사용된 ${contextName}context는 반드시 해당하는 ${contextName}Provider 내부에서 사용되어야 합니다.`,
+    );
   }
 
   return [Provider, useContext] as const;

packages/ui/modal/src/Modal.tsx

@@ -25,7 +25,7 @@ interface ModalContextType {
   trapFocus: boolean;
 }
 
-const [ModalProvider, useModalContext] = createContext<ModalContextType>();
+const [ModalProvider, useModalContext] = createContext<ModalContextType>("Modal");
 
 const getState = (open: boolean) => {
   return open ? "open" : "closed";
@@ -80,7 +80,7 @@ interface ModalTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
 
 const ModalTrigger = React.forwardRef<HTMLButtonElement, ModalTriggerProps>((props, forwardedRef) => {
   const { asChild, ...triggerProps } = props;
-  const context = useModalContext();
+  const context = useModalContext("ModalTrigger");
   const triggerRef = useComposedRef(forwardedRef, context.triggerRef);
   const Component = asChild ? Slot : "button";
 
@@ -104,7 +104,7 @@ interface ModalContentProps extends React.ComponentPropsWithoutRef<"div"> {}
 
 const ModalContentInner = React.forwardRef<HTMLDivElement, ModalContentProps>((props, forwardedRef) => {
   const { autoFocus = true, ...contentProps } = props;
-  const context = useModalContext();
+  const context = useModalContext("ModalContentInner");
 
   const [focusContainer, setFocusContainer] = React.useState<HTMLElement | null>();
   const previousFocus = React.useRef<HTMLElement | null>(null);
@@ -155,7 +155,7 @@ const ModalContentInner = React.forwardRef<HTMLDivElement, ModalContentProps>((p
 ModalContentInner.displayName = "ModalContentInner";
 
 const ModalContent = React.forwardRef<HTMLDivElement, ModalContentProps>(({ ...contentProps }, forwardedRef) => {
-  const context = useModalContext();
+  const context = useModalContext("ModalContent");
 
   return context.modal ? (
     <ModalPortal>
@@ -173,7 +173,7 @@ ModalContent.displayName = "ModalContent";
 interface ModalPortalProps extends React.ComponentPropsWithoutRef<"div"> {}
 
 const ModalPortal = ({ children, ...portalProps }: ModalPortalProps) => {
-  const context = useModalContext();
+  const context = useModalContext("ModalPortal");
 
   return React.Children.map(children, (child) => (
     <Presence present={context.open}>
@@ -187,7 +187,7 @@ ModalPortal.displayName = "ModalPortal";
 interface ModalOverlayInnerProps extends React.ComponentPropsWithoutRef<"div"> {}
 
 const ModalOverlayInner = React.forwardRef<HTMLDivElement, ModalOverlayInnerProps>(({ ...overlayProps }, forwardedRef) => {
-  const context = useModalContext();
+  const context = useModalContext("ModalOverlayInner");
 
   return (
     <RemoveScroll as={Slot} allowPinchZoom shards={[context.contentRef]}>
@@ -208,7 +208,7 @@ ModalOverlayInner.displayName = "ModalOverlayInner";
 interface ModalOverlayProps extends React.ComponentPropsWithoutRef<"div"> {}
 
 const ModalOverlay = React.forwardRef<HTMLDivElement, ModalOverlayProps>(({ ...overlayProps }, forwardedRef) => {
-  const context = useModalContext();
+  const context = useModalContext("ModalOverlay");
   return context.modal ? (
     <Presence present={context.open}>
       <ModalOverlayInner {...overlayProps} ref={forwardedRef} />