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}