Dev

next.config.ts

@@ -5,14 +5,18 @@ const nextConfig: NextConfig = {
     scrollRestoration: false,
   },
   images: {
-    domains: ['team2-app-s3-bucket.s3.ap-northeast-2.amazonaws.com'],
+    // 외부 이미지 최적화 완전 비활성화 (Vercel 유료 기능 회피)
+    unoptimized: true,
+    domains: [
+      'team2-app-s3-bucket.s3.ap-northeast-2.amazonaws.com',
+      'team2-app-s3-bucket.s3.amazonaws.com',
+    ],
     remotePatterns: [
       {
         protocol: 'https',
         hostname: 'www.thecocktaildb.com',
       },
     ],
-    qualities: [25, 50, 75, 90, 100],
   },
   env: {
     NPUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,

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,8 +72,8 @@ 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
         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

@@ -44,21 +44,6 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
         }
       );
 
-      const cupElement = cupRef.current;
-      const logoElement = logoRef.current;
-
-      if (!cupElement || !logoElement) return;
-
-      const cupRect = cupElement.getBoundingClientRect();
-      const logoRect = logoElement.getBoundingClientRect();
-
-      // container 기준 상대 위치 계산
-      const containerTop = containerRef.current?.getBoundingClientRect().top || 0;
-      const cupTopRelative = cupRect.top - containerTop + 10;
-      console.log('containerTop', containerTop);
-      console.log('cupTopRelative', cupTopRelative);
-      console.log('logoRect.height', logoRect.height);
-
       const getFinalY = (width: number): number => {
         if (width >= 1800) return 200;
         if (width >= 1400) return 10;
@@ -70,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 },