From eaf84ddc6cd0fc582ff231ec41fbde4317760d0c Mon Sep 17 00:00:00 2001
From: EATSTEAK <me@eatsteak.dev>
Date: Sat, 7 Dec 2024 16:48:03 +0900
Subject: [PATCH] =?UTF-8?q?fix(human-rights/edit):=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EA=B0=80=EC=8B=9C=EC=84=B1=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../edit/components/FileInput.tsx             | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/pages/human-rights/edit/components/FileInput.tsx b/src/pages/human-rights/edit/components/FileInput.tsx
index 7233122..52e8ad5 100644
--- a/src/pages/human-rights/edit/components/FileInput.tsx
+++ b/src/pages/human-rights/edit/components/FileInput.tsx
@@ -83,9 +83,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileItemProps>(function (
     const fileSize = evt.currentTarget.files?.item(0)?.size ?? -1;
     if (fileSize >= 0 && sizeLimit !== undefined && fileSize > sizeLimit) {
       clearFile();
-      setError(
-        `파일이 너무 큽니다. ${humanFileSize(sizeLimit)} 이하의 파일이여야 합니다. (파일 크기: ${humanFileSize(fileSize)})`
-      );
+      setError(`파일이 ${humanFileSize(sizeLimit)}를 초과합니다. (파일 크기: ${humanFileSize(fileSize)})`);
       return;
     } else {
       setError(null);
@@ -117,8 +115,8 @@ export const FileInput = forwardRef<HTMLInputElement, FileItemProps>(function (
       <div
         className={cn(
           'flex grow items-center gap-4 rounded-md border-2 border-[#CDCDCD] p-4 text-gray-400',
-          error && 'border-red-800 text-red-800',
-          isDragging && 'border-dashed border-primary text-gray-600',
+          error && 'border-red-800 bg-red-50 text-red-800',
+          isDragging && 'border-dashed border-primary bg-blue-50 text-primary',
           innerFile && 'text-gray-600'
         )}
         onClick={() => innerRef.current?.showPicker()}
@@ -131,7 +129,22 @@ export const FileInput = forwardRef<HTMLInputElement, FileItemProps>(function (
           )}
           size="32"
         />
-        {isDragging ? '파일을 끌어넣어 추가하기' : (error ?? innerFile?.name ?? '파일을 선택해주세요')}
+        <span>
+          {isDragging ? (
+            innerFile ? (
+              '파일을 끌어놓아 변경하기'
+            ) : (
+              '파일을 끌어놓아 추가하기'
+            )
+          ) : error ? (
+            <>
+              <span className="mr-3 font-bold">업로드 실패</span>
+              {error}
+            </>
+          ) : (
+            (innerFile?.name ?? '파일을 선택해주세요')
+          )}
+        </span>
       </div>
       <button
         className="p-4"