Dev (#154)

EunbinJung · ahk0413 · mtm-git1018 · web-flow · commit 21b09dacc454 · 2025-10-16T13:03:32.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] 다시 수정 * 수정 * 수정 * 메인 칵테일로고 반응형 * 수정 --------- 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/detail/ImageSlide.tsx b/src/domains/community/detail/ImageSlide.tsx
@@ -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'
                 }`}
diff --git a/src/domains/community/main/PostCard.tsx b/src/domains/community/main/PostCard.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>
diff --git a/src/domains/community/write/image-upload/UploadedImage.tsx b/src/domains/community/write/image-upload/UploadedImage.tsx
@@ -68,6 +68,10 @@ function UploadedImage({ uploadedFile, setUploadedFile }: Props) {
                 width={100}
                 height={100}
                 unoptimized={true} // next/image가 외부 url 처리 못 하면 이 옵션도 추가 가능
+                onError={(e) => {
+                  // 402 에러 등으로 이미지 로딩 실패 시 fallback 이미지 사용
+                  e.currentTarget.src = '/CocktailDrop.webp';
+                }}
               />
               <figcaption className="sr-only">업로드된 이미지입니다</figcaption>
               <button
diff --git a/src/domains/main/cocktailDrop/CocktailDrop.tsx b/src/domains/main/cocktailDrop/CocktailDrop.tsx
@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 import Cocktailcup from '../../../../public/CocktailDrop.webp';
-import { useLayoutEffect, useRef } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/all';
 import PassBtn from './PassBtn';
@@ -15,6 +15,7 @@ interface CocktailDropProps {
 
 function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const cupRef = useRef<HTMLDivElement>(null);
   const logoRef = useRef<HTMLDivElement>(null);
   const line1Ref = useRef<HTMLDivElement>(null);
   const line2Ref = useRef<HTMLDivElement>(null);
@@ -43,25 +44,38 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
         }
       );
 
-      // 로고 위에서 아래로 자연스럽게 등장
-      const screenWidth = window.innerWidth;
+      const cupElement = cupRef.current;
+      const logoElement = logoRef.current;
 
-      const viewportHeight = window.innerHeight;
-      const isTablet = screenWidth >= 640 && screenWidth < 1024;
-      const isMobile = screenWidth < 640;
+      if (!cupElement || !logoElement) return;
 
-      // 뷰포트 높이 기반으로 로고 위치 계산
-      const logoFinalY = isMobile
-        ? `-${viewportHeight * 0.3}px`
-        : isTablet
-          ? `-${viewportHeight * -0.8}px`
-          : '210px';
+      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;
+        if (width >= 1024) return 295;
+        if (width >= 800) return 50;
+        if (width === 768) return -30;
+        return -235;
+      };
+
+      // 내부에서 사용
+      const finalY = getFinalY(window.innerWidth);
+      console.log('finalY', finalY);
       gsap.fromTo(
         logoRef.current,
         { y: -300, opacity: 0 },
         {
-          y: logoFinalY, // 뷰포트 높이 기반 계산
+          y: finalY, // 뷰포트 높이 기반 계산
           opacity: 1,
           duration: 3,
           ease: 'power3.out',
@@ -82,7 +96,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
   return (
     <div
       ref={containerRef}
-      className="relative w-full lg:min-h-[120vh] md:min-h-[95vh] min-h-[87vh] flex flex-col lg:justify-center md:justify-center justify-end items-center mt-10 overflow-hidden"
+      className="relative w-full xl:min-h-[140vh] lg:min-h-[120vh] md:min-h-[95vh] min-h-[87vh] flex flex-col lg:justify-center md:justify-center justify-end items-center mt-10 overflow-hidden"
       id="scroll-fixed"
     >
       {/* 대각선 줄 1 */}
@@ -97,7 +111,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       />
 
       {/* 로고 */}
-      <div ref={logoRef} className="absolute z-4 lg:w-125 md:w-115 w-65 lg:h-110 md:h-90 h-40">
+      <div ref={logoRef} className="absolute z-4 lg:w-125 md:w-115 w-65 lg:h-60 md:h-50 h-20">
         <Image
           src="/logo.svg"
           alt="로고 이미지"
@@ -109,7 +123,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       </div>
 
       {/* 컵 이미지 - 모바일에서 바닥에 붙도록 */}
-      <div className="z-5 absolute bottom-0">
+      <div className="z-5 absolute bottom-0" ref={cupRef}>
         <Image
           src={Cocktailcup}
           alt="칵테일 컵"
diff --git a/src/domains/main/components/3d/HomeLogo.tsx b/src/domains/main/components/3d/HomeLogo.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 function HomeLogo({ isDesktop }: { isDesktop: boolean }) {
   return (
     <div
-      className="z-5 absolute md:top-22 md:left-10 md:translate-none top-30 left-1/2 -translate-x-1/2"
+      className="z-5 absolute top-30 left-1/2 -translate-x-1/2 lg:absolute lg:top-20 lg:left-10 lg:translate-none md:relative md:top-30 md:left-auto md:translate-none flex justify-center items-center"
       style={{ width: !isDesktop ? 400 : 580, height: !isDesktop ? 70 : 210 }}
     >
       <Image src={'/logo.svg'} alt="로고 이미지" fill priority className="object-contain" />
diff --git a/src/domains/main/components/3d/Landing.tsx b/src/domains/main/components/3d/Landing.tsx
@@ -19,7 +19,7 @@ function Landing({ setIsLoading, isDesktop }: Props) {
   return (
     <>
       <div className="page-layout max-w-full">
-        <div className="relative w-full h-screen">
+        <div className="relative w-full h-screen flex flex-col md:items-center">
           {isDesktop ? (
             <HomeModel onLoaded={() => setModelLoaded(true)} />
           ) : (
diff --git a/src/domains/main/components/3d/ModelImage.tsx b/src/domains/main/components/3d/ModelImage.tsx
@@ -11,15 +11,14 @@ function ModelImage({ onLoaded }: Props) {
     onLoaded();
   });
   return (
-    <div className="w-full flex justify-center items-center absolute bottom-13 left-1/2 -translate-x-1/2">
-      <div className="rounded-tr-4xl rounded-tl-4xl overflow-hidden">
+    <div className="w-full flex justify-center items-center absolute bottom-0 left-1/2 -translate-x-1/2">
+      <div className="relative w-[85%] h-[60vh] rounded-tr-4xl rounded-tl-4xl overflow-hidden">
         <Image
           src={MobileCocktailDrop}
           alt="모바일 칵테일 드랍"
-          width={260}
-          height={290}
+          fill
           priority
-          className="object-cover w-[300px] h-[350px]"
+          className="object-cover"
         />
       </div>
     </div>
diff --git a/src/domains/recipe/components/details/DetailItem.tsx b/src/domains/recipe/components/details/DetailItem.tsx
@@ -60,6 +60,10 @@ function DetailItem({ name, nameKo, story, src, abv, glassType }: Props) {
           className="object-cover"
           sizes="300px"
           priority
+          onError={(e) => {
+            // 402 에러 등으로 이미지 로딩 실패 시 fallback 이미지 사용
+            e.currentTarget.src = '/CocktailDrop.webp';
+          }}
         />
       </div>
 

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import Image from 'next/image';`
`3`	`3`	`function HomeLogo({ isDesktop }: { isDesktop: boolean }) {`
`4`	`4`	`return (`
`5`	`5`	`<div`
`6`		`- className="z-5 absolute md:top-22 md:left-10 md:translate-none top-30 left-1/2 -translate-x-1/2"`
	`6`	`+ className="z-5 absolute top-30 left-1/2 -translate-x-1/2 lg:absolute lg:top-20 lg:left-10 lg:translate-none md:relative md:top-30 md:left-auto md:translate-none flex justify-center items-center"`
`7`	`7`	`style={{ width: !isDesktop ? 400 : 580, height: !isDesktop ? 70 : 210 }}`
`8`	`8`	`>`
`9`	`9`	`<Image src={'/logo.svg'} alt="로고 이미지" fill priority className="object-contain" />`