파일 업로드 수정, css 고치기

2026-01-25 17:10:02 +09:00
parent 497ac11f26
commit 48f706cc42
3 changed files with 20 additions and 13 deletions
--- a/src/app/components/ImgInputForm.client.tsx
+++ b/src/app/components/ImgInputForm.client.tsx
@@ -11,40 +11,48 @@ const ImgInputForm_client = () => {
        isLogin
    })

-    const fileRef = useRef(null)
-
+    const fileRef = useRef<HTMLInputElement|null>(null)
    const [fileName, setFileName] = useState('')
+    const [preview, setPreview] = useState<String|null>()

    const imgInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        const selected = e.target.files?.[0];
        if (selected != null) {
            setFileName(selected?.name)
+            setPreview(URL.createObjectURL(selected))
        }

    }

+    const inputFileClick = () => {
+        const file = fileRef.current;
+        if (file) file.click()
+    }
+
    const confirm = () => {

    }

    return (
        <>
+            <div className="flex items-center gap-3">
+                { preview &&
+                    <img src={preview} />
+                }
+            </div>
            <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
+                value={fileName}
+                onClick={inputFileClick}
+                className="w-lg px-3 py-2 border rounded h-10
                   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}/>
+                <button onClick={confirm} className="w-10 h-10 border rounded text-gray-700">확인</button>

            </div>
        </>
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,6 +3,7 @@
 :root {
  --background: #ffffff;
  --foreground: #171717;
+  height: 100%;
 }

@theme inline {
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -23,10 +23,8 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    <html lang="ko" className="h-full">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased h-full min-h-screen`} >
        {children}
      </body>
    </html>