Merge remote-tracking branch 'origin/dev' into refactor/recipeFetch

Author: mtm-git1018

README.md

@@ -1,12 +1,12 @@
 # SSOUL 프로젝트 인수인계 문서
 
-## �� 프로젝트 개요
+## 프로젝트 개요
 
 **프로젝트명**: SSOUL (칵테일을 좋아하는 사람들을 위한 서비스)  
 **기술 스택**: Next.js 15, React 19, TypeScript, Tailwind CSS  
 **저장소**: https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE
 
-## �� 시작하기
+## 시작하기
 
 ### 개발 환경 설정
 ```bash
@@ -31,7 +31,7 @@ npm run lint
 - `NEXT_PUBLIC_API_URL_DEV`: 개발 환경 API URL
 - `NEXT_PUBLIC_API_URL_PROD`: 운영 환경 API URL
 
-## �� 프로젝트 구조
+## 프로젝트 구조
 
 ```
 src/
@@ -60,7 +60,7 @@ src/
     └── utills/                  # 유틸리티 함수
 ```
 
-## �� 주요 기능
+## 주요 기능
 
 ### 1. 인증 시스템
 - **소셜 로그인**: Google, Kakao, Naver 지원
@@ -72,19 +72,19 @@ src/
 
 ### 2. 페이지별 기능
 
-#### �� 메인 페이지 (`/`)
+#### 메인 페이지 (`/`)
 - 현재 기본 구조만 구현됨
 - 추후 확장 예정
 
-#### �� 칵테일 레시피 (`/recipe`)
+#### 칵테일 레시피 (`/recipe`)
 - **주요 컴포넌트**: 
   - `CocktailList`: 칵테일 목록 표시
   - `Accordion`: 필터링 옵션
   - `SelectBox`: 정렬 옵션
 - **기능**: 검색, 필터링, 정렬
 - **상세 페이지**: `/recipe/[id]` - 개별 칵테일 상세 정보
 
-#### �� 커뮤니티 (`/community`)
+#### 커뮤니티 (`/community`)
 - **주요 컴포넌트**:
   - `PostCard`: 게시물 카드
   - `CommunityTab`: 카테고리 탭
@@ -93,28 +93,28 @@ src/
 - **글쓰기**: `/community/write`
 - **상세 페이지**: `/community/[id]`
 
-#### �� 취향 추천 (`/recommend`)
+#### 취향 추천 (`/recommend`)
 - **챗봇 기반 추천**: `ChatSection` 컴포넌트
 - **주요 컴포넌트**:
   - `BotMessage`, `UserMessage`: 메시지 컴포넌트
   - `BotOptions`: 선택 옵션
   - `MessageInput`: 입력창
   - `TypingIndicator`: 타이핑 효과
 
-#### �� 마이페이지 (`/mypage`)
+#### 마이페이지 (`/mypage`)
 - **기본 리다이렉트**: `/mypage` → `/mypage/mybar`
 - **주요 섹션**:
   - `/mypage/mybar`: 나만의 바
   - `/mypage/my-active`: 활동 내역 (게시물, 댓글, 좋아요)
   - `/mypage/my-alarm`: 알림 설정
   - `/mypage/my-setting`: 계정 설정
 
-#### �� 로그인 (`/login`)
+#### 로그인 (`/login`)
 - **소셜 로그인**: `SocialLogin` 컴포넌트
 - **성공 페이지**: `/login/success`
 - **신규 사용자**: `/login/user/first-user`
 
-## �� 기술적 세부사항
+## 기술적 세부사항
 
 ### 상태 관리
 - **Zustand**: 클라이언트 상태 관리
@@ -136,34 +136,34 @@ src/
 - **Husky**: Git hooks
 - **Lint-staged**: 커밋 전 검사
 
-## �� 주요 설정 파일
+## 주요 설정 파일
 
 - `next.config.ts`: Next.js 설정
 - `tailwind.config.js`: Tailwind CSS 설정
 - `eslint.config.mjs`: ESLint 설정
 - `tsconfig.json`: TypeScript 설정
 
-## �� 반응형 디자인
+## 반응형 디자인
 
 프로젝트는 모바일 우선(Mobile-first) 접근 방식을 사용합니다:
 - **모바일**: 기본 스타일
 - **태블릿**: `md:` prefix
 - **데스크톱**: `lg:`, `xl:` prefix
 
-## �� 주의사항
+## 주의사항
 
 1. **환경 변수**: 개발/운영 환경에 맞는 API URL 설정 필요
 2. **인증 토큰**: localStorage에 저장되므로 보안 고려 필요
 3. **API 통신**: `credentials: 'include'` 설정으로 쿠키 기반 인증
 4. **Git Hooks**: Husky 설정으로 커밋 전 자동 검사
 
-## �� 추가 문의
+## 추가 문의
 
 - **저장소 이슈**: https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE/issues
 - **주요 브랜치**: `main` (메인), `dev` (개발)
 
 ---
 
 **작성일**: 2025-10-14  
-**작성자**: 이성헌  
-**버전**: 1.0
+**작성자**: 정은빈 | 김아현 | 문태민
+**버전**: 1.0

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/app/(no-layout)/layout.tsx

@@ -50,8 +50,8 @@ export const fetchPostByTab = async ({
     const params = new URLSearchParams();
 
     if (category && category !== 'all') {
-      const categoryId = tabItem.findIndex((tab) => tab.key === category);
-      if (categoryId >= 0) {
+      const categoryId = tabItem.findIndex((tab) => tab.key === category) + 1;
+      if (categoryId > 0) {
         params.set('categoryId', categoryId.toString());
       }
     }

src/app/(main)/design-system/page.tsx renamed to src/app/(with-layout)/design-system/page.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/api/fetchPost.ts

@@ -37,7 +37,11 @@ function ImageSlide({ imageUrls }: { imageUrls: string[] }) {
                 quality={90}
                 priority
                 onLoad={() => handleImageLoad(img)}
-                onError={() => handleImageLoad(img)}
+                onError={(e) => {
+                  // 402 에러 등으로 이미지 로딩 실패 시 fallback 이미지 사용
+                  e.currentTarget.src = '/CocktailDrop.webp';
+                  handleImageLoad(img);
+                }}
                 className={`object-contain w-full max-h-[400px] transition-opacity duration-300 ${
                   loadedImages.has(img) ? 'opacity-100' : 'opacity-0'
                 }`}

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

@@ -106,6 +106,10 @@ function PostCard({ posts, isLoading, isEnd, onLoadMore }: Props) {
                         width={105}
                         height={105}
                         className="w-full h-full object-cover self-center rounded-md"
+                        onError={(e) => {
+                          // 402 에러 등으로 이미지 로딩 실패 시 fallback 이미지 사용
+                          e.currentTarget.src = '/CocktailDrop.webp';
+                        }}
                       />
                     )}
                   </figure>

src/domains/community/detail/ImageSlide.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/main/PostCard.tsx

@@ -126,7 +126,7 @@ function WriteSection({ mode, postId }: Props) {
       return;
     }
 
-    const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName);
+    const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName) + 1;
 
     if (categoryId === -1) {
       toastError('카테고리를 선택해주세요.');
@@ -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);
     }
   };
 
@@ -216,7 +224,7 @@ function WriteSection({ mode, postId }: Props) {
       return false;
     }
 
-    const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName);
+    const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName) + 1;
     if (categoryId === -1) {
       toastError('카테고리를 선택해주세요.');
       return 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} />