Dev (#156)

EunbinJung · ahk0413 · mtm-git1018 · web-flow · commit 71544a33ac83 · 2025-10-16T16:07:35.000+09:00
* [fix] 챗봇 추천 페이지 수정 및 기능추가 (#130) * [fix] 논알콜일 시 payload 값 수정 * [fix] options 기본으로 수정 * [feat] 다시 시작하기 추가 * [feat] 채팅 캡처기능 추가 * [fix] currentStep 제거 * [fix] 파비콘 추가 및 헤더 메뉴 네이밍 수정 * [style] layout 모바일 대응 추가 * Design/main#11 (#131) * [style] 배경 * [design] 랜딩페이지 3d모델 * 3d 렌더링 * Style/main page 2#122 (#132) * [style]마이페이지 슬라이드 퍼블리싱 * [style] 메인페이지 슬라이드 * [docs]provider문서 정리 * [style] 메인페이지 스타일 간격조정 * [feat]알림 설정처리 * [stype]메인페이지 반응형 * [feat] 나만의 바 삭제 동기화 * [feat] 마이페이지 전체삭제 * [style] 메인페이지 반응형 * [feat] 마이페이지 푸시 오류 수정 * [docs]미 사용 파일 삭제 * [style] 메인3d이미지 스크롤 실험div제거 * Style/메인페이지 슬라이드영역 (#135) * [style]마이페이지 슬라이드 퍼블리싱 * [style] 메인페이지 슬라이드 * [docs]provider문서 정리 * [style] 메인페이지 스타일 간격조정 * [feat]알림 설정처리 * [stype]메인페이지 반응형 * [feat] 나만의 바 삭제 동기화 * [feat] 마이페이지 전체삭제 * [style] 메인페이지 반응형 * [feat] 마이페이지 푸시 오류 수정 * [docs]미 사용 파일 삭제 * [style] 메인3d이미지 스크롤 실험div제거 * [style] 메인페이지 슬라이드 반응형 * [style]메인페이지 이미지교체 * [style] 시맨틱구조 * [style] 모바일 메인배경 위치조정 * [fix] 화면 리사이징시 슬라이드 고정 버그 해결 * [fix] 브라우저 리사이징 버그 수정 * [chore]포매팅 * [fix] 로그아웃 시 auth/me api 자동호출로 401 에러 (#136) * [fix] 로그아웃 시 auth/me 자동호출로 401 에러 해결 * [fix] 로그인 새로고침 시 오류 로직 수정 * [fix] 리다이렉트 setTimeout 추가 * Design/main#11 (#138) * [style] 배경 * [design] 랜딩페이지 3d모델 * 3d 렌더링 * 로고,텍스트 추가 * 패키지제이슨 * 메인작업 * 카메라액션 취소 * 별 애니메이션 취소 * 대문자 * [fix] 레이아웃 분리 (#139) * Refactor/recipe fetch (#140) * [refactor] 무한스크롤 tanstack * [refactor] 레시피페이지 리팩토링 * [refactor] 아코디언박스 * [feat]필터링 뒤로가기 스크롤 저장 * [chore] 머지 전 커밋 * [chore]머지 전 커밋 누락 내용 커밋 * [refactor]리팩토링 커밋 * [fix] 경로 오류 수정 * 경로 수정 * [fix] 경로수정 * Feat/write#19 (#142) * [feat] 글쓰기 기능 * [feat] 포스트 작성 기능 * Feat/communityscroll#23 (#114) * [feat] 스크롤링구현 * [feat] 주소, api설정 * [feat] 커뮤니티 탭, 필터 패치로직 * [feat] lastLikeCount, lastCommentCount, 추가 * [fix] 코멘트 삭제수정 마이페이지에선 뗄수있게 myPage props 추가 * 옵셔널로 수정 * 오류 수정 * [feat] 글쓰기 기능 * 카테고리필수 * [feat] 포스트 무한스크롤 + 글쓰기기능 이미지추가 * [feat] 이미지 스와이퍼 * [feat] 프로필 쑤리 이미지 * [feat] 댓글 누르면 댓글 섹션으로 가기 * [feat] 좋아요기능(아직 좋아요받아오는건 못함 api필요) * [feat] 게시물 수정 * [feat] 글 수정 * [refactor] 코드 조금정리 * [feat] 작성자본인만 글수정삭제 * [feat]글 삭제기능 * [feat] 칵테일태그 * [fix]칵테일, 쉐어 기능 * 수 라우터, 비로그인처리 * 타입 수정 * 타입 수정 * 타입수정 * 타입수정 * 타입수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 충돌해결 * 오류 수정 * 오류 수정 * 오류 수정 * [fix] 이미지 카운트, 10개 제한 * [fix] 글쓰기 placeholder * [fix] 공유 url 수정 * [fix] 프로필배경 지우기 * [fix] 플로팅탭 미디어쿼리 수정 * [fix] 수정 모달 * 댓글실시간반영 시도 * 수정 * [fix] 수정모달 로직 수정 * 수정로직 수정 * [feat] edit수정 * 타입오류 * [feat] 좋아요로직 수정 * [fix] 칵테일태그 너비 수정 * 글쓰기 로그인검사 * 버그들 수정 * 반응형 * 파일명 대문자수정 * [fix] MainSlide 수정 (#143) * [fix] MainSlide 수정 * [style] MainSlide 사진 추가 * Refactor/칵테일 정렬 기능 수정 (#144) * [refactor] 무한스크롤 tanstack * [refactor] 레시피페이지 리팩토링 * [refactor] 아코디언박스 * [feat]필터링 뒤로가기 스크롤 저장 * [chore] 머지 전 커밋 * [chore]머지 전 커밋 누락 내용 커밋 * [refactor]리팩토링 커밋 * [refactor] 정렬 중복아이템문제 * [feat] 칵테일 정렬기능 * [fix]댓글 알림 수정 * [chore] 충돌사항 수정 * [fix]충돌에러수정 * [style] 폰트 추가 * [fix]파일 내 코드중복 수정 * [chore]포매팅 * [fix]타입중복 수정 * [chore]포매팅 * docs/ 폰트 추가 및 삭제 (#146) * [refactor] 무한스크롤 tanstack * [refactor] 레시피페이지 리팩토링 * [refactor] 아코디언박스 * [feat]필터링 뒤로가기 스크롤 저장 * [chore] 머지 전 커밋 * [chore]머지 전 커밋 누락 내용 커밋 * [refactor]리팩토링 커밋 * [refactor] 정렬 중복아이템문제 * [feat] 칵테일 정렬기능 * [fix]댓글 알림 수정 * [chore] 충돌사항 수정 * [docs] 필요없는 폰트파일 정리 * [fix] scroll 위치이동 * Feat/write#19 (#147) * [feat] 글쓰기 기능 * [feat] 포스트 작성 기능 * Feat/communityscroll#23 (#114) * [feat] 스크롤링구현 * [feat] 주소, api설정 * [feat] 커뮤니티 탭, 필터 패치로직 * [feat] lastLikeCount, lastCommentCount, 추가 * [fix] 코멘트 삭제수정 마이페이지에선 뗄수있게 myPage props 추가 * 옵셔널로 수정 * 오류 수정 * [feat] 글쓰기 기능 * 카테고리필수 * [feat] 포스트 무한스크롤 + 글쓰기기능 이미지추가 * [feat] 이미지 스와이퍼 * [feat] 프로필 쑤리 이미지 * [feat] 댓글 누르면 댓글 섹션으로 가기 * [feat] 좋아요기능(아직 좋아요받아오는건 못함 api필요) * [feat] 게시물 수정 * [feat] 글 수정 * [refactor] 코드 조금정리 * [feat] 작성자본인만 글수정삭제 * [feat]글 삭제기능 * [feat] 칵테일태그 * [fix]칵테일, 쉐어 기능 * 수 라우터, 비로그인처리 * 타입 수정 * 타입 수정 * 타입수정 * 타입수정 * 타입수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 충돌해결 * 오류 수정 * 오류 수정 * 오류 수정 * [fix] 이미지 카운트, 10개 제한 * [fix] 글쓰기 placeholder * [fix] 공유 url 수정 * [fix] 프로필배경 지우기 * [fix] 플로팅탭 미디어쿼리 수정 * [fix] 수정 모달 * 댓글실시간반영 시도 * 수정 * [fix] 수정모달 로직 수정 * 수정로직 수정 * [feat] edit수정 * 타입오류 * [feat] 좋아요로직 수정 * [fix] 칵테일태그 너비 수정 * 글쓰기 로그인검사 * 버그들 수정 * 반응형 * 파일명 대문자수정 * 모바일 이미지 * 메인 수정 * 3d모델 * [style] 폰트 추가 * [feat] 스크롤 버튼 추가 * [fix] 시작 애니메이션 원복 * [docs]README * Feat/write#19 (#148) * [feat] 글쓰기 기능 * [feat] 포스트 작성 기능 * Feat/communityscroll#23 (#114) * [feat] 스크롤링구현 * [feat] 주소, api설정 * [feat] 커뮤니티 탭, 필터 패치로직 * [feat] lastLikeCount, lastCommentCount, 추가 * [fix] 코멘트 삭제수정 마이페이지에선 뗄수있게 myPage props 추가 * 옵셔널로 수정 * 오류 수정 * [feat] 글쓰기 기능 * 카테고리필수 * [feat] 포스트 무한스크롤 + 글쓰기기능 이미지추가 * [feat] 이미지 스와이퍼 * [feat] 프로필 쑤리 이미지 * [feat] 댓글 누르면 댓글 섹션으로 가기 * [feat] 좋아요기능(아직 좋아요받아오는건 못함 api필요) * [feat] 게시물 수정 * [feat] 글 수정 * [refactor] 코드 조금정리 * [feat] 작성자본인만 글수정삭제 * [feat]글 삭제기능 * [feat] 칵테일태그 * [fix]칵테일, 쉐어 기능 * 수 라우터, 비로그인처리 * 타입 수정 * 타입 수정 * 타입수정 * 타입수정 * 타입수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 충돌해결 * 오류 수정 * 오류 수정 * 오류 수정 * [fix] 이미지 카운트, 10개 제한 * [fix] 글쓰기 placeholder * [fix] 공유 url 수정 * [fix] 프로필배경 지우기 * [fix] 플로팅탭 미디어쿼리 수정 * [fix] 수정 모달 * 댓글실시간반영 시도 * 수정 * [fix] 수정모달 로직 수정 * 수정로직 수정 * [feat] edit수정 * 타입오류 * [feat] 좋아요로직 수정 * [fix] 칵테일태그 너비 수정 * 글쓰기 로그인검사 * 버그들 수정 * 반응형 * 파일명 대문자수정 * 모바일 이미지 * 메인 수정 * 3d모델 * 메인 수정 * 아래칵테일잔수정 * [fix] 로그인 시 여러번 뜨는 toast 알림 이슈 수정 * fix/메인페이지 아코디언박스 오류 수정 (#151) * [refactor] 무한스크롤 tanstack * [refactor] 레시피페이지 리팩토링 * [refactor] 아코디언박스 * [feat]필터링 뒤로가기 스크롤 저장 * [chore] 머지 전 커밋 * [chore]머지 전 커밋 누락 내용 커밋 * [refactor]리팩토링 커밋 * [refactor] 정렬 중복아이템문제 * [feat] 칵테일 정렬기능 * [fix]댓글 알림 수정 * [chore] 충돌사항 수정 * [docs] 필요없는 폰트파일 정리 * [feat]sse설정 * [feat]sse알림설정 * [chore]머지후 커밋 * [style] 메인페이지 아코디언 오류 수정 * [feat]알림 SSE기능 * [fix] 수정 * [fix] 다시 수정 * 수정 * 수정 * 메인 칵테일로고 반응형 * 수정 * next.js 수정 * 모바일글쓰기 수정 --------- Co-authored-by: ahk0413 <117137719+ahk0413@users.noreply.github.com> Co-authored-by: mtm-git1018 <mtm1018@naver.com> Co-authored-by: ahk0413 <rladkgusgd@gmail.com>
diff --git a/src/domains/community/components/post-info/PostInfo.tsx b/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 && (
diff --git a/src/domains/community/write/CompleteBtn.tsx b/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>
   );
diff --git a/src/domains/community/write/WriteSection.tsx b/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} />
diff --git a/src/domains/community/write/image-upload/ImageInput.tsx b/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}
       />
     </>
diff --git a/src/domains/community/write/image-upload/UploadedImage.tsx b/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>
diff --git a/src/domains/main/cocktailDrop/CocktailDrop.tsx b/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 },

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ function PostInfo({`
`17`	`17`	`}: Props) {`
`18`	`18`	`return (`
`19`	`19`	`<ul`
`20`		`- className="flex font-light sm:gap-3 gap-1 sm:text-sm text-xs text-gray"`
	`20`	`+ className="flex font-light sm:gap-3 gap-1 sm:text-sm text-[10px] text-gray"`
`21`	`21`	`aria-label="게시글 정보"`
`22`	`22`	`>`
`23`	`23`	`{hasUserName && (`