add tailwind

src/app/components/ImgInputForm.client.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { useState } from "react"
+import { useRef, useState } from "react"
 
 const ImgInputForm_client = () => {
 
+    const fileRef = useRef(null)
+
     const [fileName, setFileName] = useState('')
 
     const imgInput = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -20,8 +22,24 @@ const ImgInputForm_client = () => {
 
     return (
         <>
-            <input type="file" accept="image/*"  onChange={imgInput} />
-            <input type="button" value={'확인'} onClick={confirm}/>
+            <div className="flex items-center gap-3">
+                <input type="text"
+                readOnly
+                onClick={() => {
+                    if (fileRef != null) {
+                        fileRef.current.click()
+                    }
+                }}
+                    className="w-full px-3 py-2 border rounded
+                   cursor-pointer
+                   bg-white
+                   text-gray-700
+                   focus:outline-none
+                   focus:ring-2 focus:ring-indigo-500" />
+                <input type="file" ref={fileRef} className="hidden" accept="image/*"  onChange={imgInput} />
+                <input type="button" value={'확인'} onClick={confirm}/>
+
+            </div>
         </>
     )
 }