From c60a27782661dcf846838a3ad21ef214d90645c1 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 12 Jul 2024 02:08:02 +0900
Subject: [PATCH] fix(LoadedCode): add forwardRef on LoadedCode

---
 src/components/LoadedCode.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/LoadedCode.tsx b/src/components/LoadedCode.tsx
index 45cd3da..3045a12 100644
--- a/src/components/LoadedCode.tsx
+++ b/src/components/LoadedCode.tsx
@@ -18,15 +18,10 @@ export const GITHUB_STORY = (componentName: string, storyName: string) =>
 
 export type TEMPLATE = Record<string, Record<string, string | boolean>>;
 
-export const LoadedCode = ({
-  from,
-  className,
-  template,
-}: {
-  from: string;
-  className?: string;
-  template?: TEMPLATE;
-}) => {
+export const LoadedCode = forwardRef<
+  HTMLDivElement,
+  { from: string; className?: string; template?: TEMPLATE }
+>(({ from, className, template }, ref) => {
   const [state, setState] = useState<string | undefined | null>();
   const { toast } = useToast();
 
@@ -66,7 +61,10 @@ export const LoadedCode = ({
   }, [state, template]);
 
   return (
-    <div className={twMerge("relative", className)}>
+    <div
+      className={twMerge("relative", className)}
+      ref={ref}
+    >
       <Button
         preset="default"
         size="icon"
@@ -111,7 +109,8 @@ export const LoadedCode = ({
       </SyntaxHighlighter>
     </div>
   );
-};
+});
+LoadedCode.displayName = "LoadedCode";
 
 export const Code = forwardRef<
   HTMLDivElement,