From 9135ce1ac7360d5680b8f23b0cb2165df882c3aa Mon Sep 17 00:00:00 2001
From: doda <ddark.kr@gmail.com>
Date: Wed, 6 Mar 2024 20:55:54 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=EB=A5=BC=20for=EA=B0=80=20=EC=95=84=EB=8B=8C?=
 =?UTF-8?q?=20onClick=EC=9C=BC=EB=A1=9C=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/AppendTooltip.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/home/AppendTooltip.tsx b/src/components/home/AppendTooltip.tsx
index da8deb0b..ae28f0d2 100644
--- a/src/components/home/AppendTooltip.tsx
+++ b/src/components/home/AppendTooltip.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useRef } from 'react';
 import { css, Theme } from '@emotion/react';
 import { motion, Variants } from 'framer-motion';
 
@@ -12,6 +12,7 @@ import { IMAGE_INPUT_ID, ImgUploader } from '../add/ImgUploader';
 
 export default function AppendTooltip() {
   const { imgInputUploader } = useImgUpload({ isUploadPage: false });
+  const inputRef = useRef<HTMLInputElement>(null);
 
   return (
     <motion.div css={wrapperCss} variants={tooltipVariants}>
@@ -20,9 +21,9 @@ export default function AppendTooltip() {
         href="/add/image"
         icon={<ImageIcon />}
         title="이미지"
-        htmlFor={IMAGE_INPUT_ID}
+        onClick={() => inputRef.current?.click()}
       />
-      <ImgUploader imgInputUploader={imgInputUploader} />
+      <ImgUploader imgInputUploader={imgInputUploader} ref={inputRef} />
       <AnchorElement href="/add/link" icon={<LinkIcon />} title="링크" />
     </motion.div>
   );
@@ -46,12 +47,13 @@ interface AnchorElementProps {
   icon: ReactNode;
   title: string;
   htmlFor?: string;
+  onClick?: () => void;
 }
 
-function AnchorElement({ href, icon, title, htmlFor }: AnchorElementProps) {
-  if (htmlFor) {
+function AnchorElement({ href, icon, title, htmlFor, onClick }: AnchorElementProps) {
+  if (htmlFor || onClick) {
     return (
-      <label css={anchorCss} htmlFor={htmlFor}>
+      <label css={anchorCss} htmlFor={htmlFor} onClick={onClick}>
         {icon}
         <span>{title}</span>
       </label>