모바일글쓰기 수정

Author: EunbinJung

src/domains/community/components/post-info/PostInfo.tsx

@@ -17,7 +17,7 @@ function PostInfo({
 }: Props) {
   return (
     <ul
-      className="flex font-light sm:gap-3 gap-1 sm:text-sm text-xs text-gray"
+      className="flex font-light sm:gap-3 gap-1 sm:text-sm text-[10px] text-gray"
       aria-label="게시글 정보"
     >
       {hasUserName && (

src/domains/community/write/CompleteBtn.tsx

@@ -3,20 +3,28 @@ import Button from '@/shared/components/button/Button';
 type Props = {
   mode: 'edit' | 'create';
   setEditDone: (value: boolean) => void;
+  isLoading?: boolean;
 };
 
-function CompleteBtn({ mode, setEditDone }: Props) {
+function CompleteBtn({ mode, setEditDone, isLoading = false }: Props) {
   return (
     <div className="w-full flex items-center justify-end mt-10">
       <Button
         type={mode === 'create' ? 'submit' : 'button'}
         size="default"
         color="default"
+        disabled={isLoading}
         onClick={async () => {
           setEditDone(true);
         }}
       >
-        {mode === 'create' ? '올리기' : '수정하기'}
+        {isLoading
+          ? mode === 'create'
+            ? '올리는 중...'
+            : '수정 중...'
+          : mode === 'create'
+            ? '올리기'
+            : '수정하기'}
       </Button>
     </div>
   );

src/domains/community/write/WriteSection.tsx

@@ -153,6 +153,7 @@ function WriteSection({ mode, postId }: Props) {
     payload.append('post', postBlob);
 
     try {
+      setIsLoading(true);
       const res = await fetch(`${getApi}/posts`, {
         method: 'POST',
         credentials: 'include',
@@ -161,10 +162,17 @@ function WriteSection({ mode, postId }: Props) {
 
       if (res.ok) {
         router.push('/community');
+      } else {
+        // 서버 에러 응답 처리
+        const errorData = await res.json().catch(() => ({}));
+        const errorMessage = errorData.message || `서버 오류가 발생했습니다. (${res.status})`;
+        toastError(errorMessage);
       }
     } catch (err) {
       console.error('글작성 폼 작성 에러', err);
-      return;
+      toastError('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -275,14 +283,14 @@ function WriteSection({ mode, postId }: Props) {
     e.preventDefault();
   };
 
-  if (isEditLoading) <Spinner />;
+  if (isEditLoading) return <Spinner />;
 
-  if (isLoading) <DetailSkeleton />;
+  if (isLoading) return <DetailSkeleton />;
 
   return (
     <>
       <form onSubmit={mode === 'create' ? handleSubmit : handleEditSubmit}>
-        <CompleteBtn mode={mode} setEditDone={setEditDone} />
+        <CompleteBtn mode={mode} setEditDone={setEditDone} isLoading={isLoading || isEditLoading} />
         <section>
           <FormTitle formData={formData} setFormData={setFormData} />
           <Category formData={formData} setFormData={setFormData} />

src/domains/community/write/image-upload/ImageInput.tsx

@@ -16,7 +16,18 @@ function ImageInput({ uploadedFile, onAddImage }: Props) {
 
     const newFiles = Array.from(newFileList);
 
+    // 파일을 선택하지 않고 취소한 경우 조용히 리턴
+    if (newFiles.length === 0) return;
+
     try {
+      // 파일 크기 검증 (모바일 최적화)
+      const maxSize = 5 * 1024 * 1024; // 5MB
+      const oversizedFiles = newFiles.filter((file) => file.size > maxSize);
+      if (oversizedFiles.length > 0) {
+        toastError('파일 크기는 5MB 이하로 업로드해주세요.');
+        return;
+      }
+
       const totalLength = uploadedFile.length + newFiles.length;
       if (totalLength > 10) {
         toastError('최대 10개 파일까지 업로드할 수 있어요.');
@@ -49,7 +60,7 @@ function ImageInput({ uploadedFile, onAddImage }: Props) {
     <>
       <label
         htmlFor="fileInput"
-        className="border-3 border-dashed shrink-0 border-gray-light w-[100px] h-[100px] sm:w-[80px] sm:h-[80px] rounded-xl cursor-pointer bg-gray-dark flex flex-col gap-3 items-center justify-center hover:bg-gray-dark/70"
+        className="border-3 border-dashed shrink-0 border-gray-light w-[100px] h-[100px] sm:w-[80px] sm:h-[80px] rounded-xl cursor-pointer bg-gray-dark flex flex-col gap-3 items-center justify-center hover:bg-gray-dark/70 active:bg-gray-dark/50 touch-manipulation"
       >
         <ImageBox />
         <div className="flex items-center md:text-md text-sm">
@@ -61,9 +72,10 @@ function ImageInput({ uploadedFile, onAddImage }: Props) {
       <input
         type="file"
         id="fileInput"
-        hidden
-        accept="image/*"
+        className="sr-only"
+        accept="image/*,image/jpeg,image/jpg,image/png,image/webp"
         multiple
+        capture="environment"
         onChange={handleInputChange}
       />
     </>

src/domains/community/write/image-upload/UploadedImage.tsx

@@ -5,6 +5,7 @@ import DeleteIcon from '@/shared/assets/icons/close_20.svg';
 import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
 import gsap from 'gsap';
 import { UploadedItem } from '@/domains/recipe/types/types';
+import { useToast } from '@/shared/hook/useToast';
 
 type Props = {
   uploadedFile: UploadedItem[];
@@ -14,6 +15,7 @@ type Props = {
 function UploadedImage({ uploadedFile, setUploadedFile }: Props) {
   const imageRefs = useRef<HTMLElement[]>([]);
   const prevLength = useRef(0);
+  const { toastError } = useToast();
 
   useEffect(() => {
     const isAdded = uploadedFile.length > prevLength.current;
@@ -71,6 +73,7 @@ function UploadedImage({ uploadedFile, setUploadedFile }: Props) {
                 onError={(e) => {
                   // 402 에러 등으로 이미지 로딩 실패 시 fallback 이미지 사용
                   e.currentTarget.src = '/CocktailDrop.webp';
+                  toastError('이미지가 너무 크거나 손상되어 기본 이미지로 대체됩니다.');
                 }}
               />
               <figcaption className="sr-only">업로드된 이미지입니다</figcaption>

src/domains/main/cocktailDrop/CocktailDrop.tsx

@@ -55,7 +55,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
 
       // 내부에서 사용
       const finalY = getFinalY(window.innerWidth);
-      console.log('finalY', finalY);
+
       gsap.fromTo(
         logoRef.current,
         { y: -300, opacity: 0 },