From 48f706cc4289c971b11431da0374004361b4b9da Mon Sep 17 00:00:00 2001 From: root Date: Sun, 25 Jan 2026 17:10:02 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95,=20css=20=EA=B3=A0=EC=B9=98?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/ImgInputForm.client.tsx | 26 ++++++++++++++-------- src/app/globals.css | 1 + src/app/layout.tsx | 6 ++--- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/app/components/ImgInputForm.client.tsx b/src/app/components/ImgInputForm.client.tsx index 0ec88f8..96f27ce 100644 --- 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(null) const [fileName, setFileName] = useState('') + const [preview, setPreview] = useState() const imgInput = (e: React.ChangeEvent) => { 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 ( <> +
+ { preview && + + } +
{ - 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" /> - +
diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..244c05d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,6 +3,7 @@ :root { --background: #ffffff; --foreground: #171717; + height: 100%; } @theme inline { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..4155a81 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -23,10 +23,8 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - + + {children}