Feat/write#19 (#147)

EunbinJung · web-flow · commit ad53efa18aa0 · 2025-10-15T17:48:36.000+09:00
* [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모델
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,6 @@
   "dependencies": {
     "@react-three/drei": "^10.7.6",
     "@react-three/fiber": "^9.3.0",
-    "@react-three/gltfjsx": "^4.3.4",
     "@react-three/postprocessing": "^3.0.4",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-virtual": "^3.13.12",
diff --git a/public/mobileCocktail.webp b/public/mobileCocktail.webp
diff --git a/src/app/(main)/design-system/page.tsx b/src/app/(main)/design-system/page.tsx
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -0,0 +1,13 @@
+import FooterWrapper from '@/shared/components/footer/FooterWrapper';
+import Header from '@/shared/components/header/Header';
+
+function NoLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header className="bg-transparent w-full h-[44px] md:h-[60px] flex items-center justify-between px-[12px] fixed top-0 left-0 z-50 transition-transform duration-200 ease-in-ou" />
+      <main className="flex flex-1">{children}</main>
+      <FooterWrapper />
+    </>
+  );
+}
+export default NoLayout;
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
diff --git a/src/domains/main/cocktailDrop/CocktailDrop.tsx b/src/domains/main/cocktailDrop/CocktailDrop.tsx
@@ -5,10 +5,15 @@ import Cocktailcup from '../../../../public/CocktailDrop.webp';
 import { useLayoutEffect, useRef } from 'react';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/all';
+import PassBtn from './PassBtn';
 
 gsap.registerPlugin(ScrollTrigger);
 
-function CocktailDrop() {
+interface CocktailDropProps {
+  isDesktop?: boolean;
+}
+
+function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const logoRef = useRef<HTMLDivElement>(null);
   const line1Ref = useRef<HTMLDivElement>(null);
@@ -39,12 +44,11 @@ function CocktailDrop() {
       );
 
       // 로고 위에서 아래로 자연스럽게 등장
-      const isMobile = window.innerWidth < 768;
       gsap.fromTo(
         logoRef.current,
         { y: -300, opacity: 0 },
         {
-          y: isMobile ? -140 : -40, // 모바일에서는 더 위로
+          y: !isDesktop ? -230 : -18, // 데스크톱이 아닐 때 더 위로
           opacity: 1,
           duration: 3,
           ease: 'power3.out',
@@ -60,12 +64,12 @@ function CocktailDrop() {
     }, containerRef);
 
     return () => ctx.revert();
-  }, [containerRef]);
+  }, [containerRef, isDesktop]);
 
   return (
     <div
       ref={containerRef}
-      className="relative w-full md:min-h-[110vh] min-h-[74vh] flex flex-col md:justify-center justify-end items-center mt-10 overflow-hidden"
+      className="relative w-full lg:min-h-[110vh] min-h-[89vh] flex flex-col md:justify-center justify-end items-center mt-10 overflow-hidden"
       id="scroll-fixed"
     >
       {/* 대각선 줄 1 */}
@@ -80,7 +84,7 @@ function CocktailDrop() {
       />
 
       {/* 로고 */}
-      <div ref={logoRef} className="absolute z-20 md:w-115 w-65 md:h-90 h-40">
+      <div ref={logoRef} className="absolute md:w-115 w-85 md:h-90 h-40">
         <Image
           src="/logo.svg"
           alt="로고 이미지"
@@ -94,17 +98,19 @@ function CocktailDrop() {
       <div className="w-full md:h-90 h-30"></div>
 
       {/* 컵 이미지 - 모바일에서 바닥에 붙도록 */}
-      <div className="z-10 md:relative absolute bottom-0">
+      <div className="md:relative absolute bottom-0">
         <Image
           src={Cocktailcup}
           alt="칵테일 컵"
           width={900}
-          height={800}
+          height={700}
           priority
-          style={{ width: 'auto', height: 'auto' }}
-          className="md:w-auto md:h-auto w-[300px] h-[300px] object-contain"
+          className="md:w-auto md:h-auto w-[500px] h-[400px] object-cover"
         />
       </div>
+      <div className="absolute md:bottom-35 bottom-20 flex items-center justify-center z-3 w-full">
+        <PassBtn />
+      </div>
     </div>
   );
 }
diff --git a/src/domains/main/cocktailDrop/PassBtn.tsx b/src/domains/main/cocktailDrop/PassBtn.tsx
@@ -0,0 +1,20 @@
+import { useRouter } from 'next/navigation';
+
+function PassBtn() {
+  const router = useRouter();
+  const handleClick = () => {
+    router.push('/recommend');
+  };
+  return (
+    <button
+      onClick={handleClick}
+      className="w-[90%] md:w-120 py-5 md:px-20 px-5 md:text-2xl text-lg rounded-xl flex items-center justify-center bg-tertiary/70"
+    >
+      <span className="text-primary font-serif whitespace-nowrap">
+        칵테일 취향추천 <span className="text-secondary font-serif">바로가기</span>
+      </span>
+    </button>
+  );
+}
+
+export default PassBtn;
diff --git a/src/domains/main/components/3d/HomeModel.tsx b/src/domains/main/components/3d/HomeModel.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { Environment, OrbitControls, useGLTF } from '@react-three/drei';
-import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import { Canvas } from '@react-three/fiber';
 import { Bloom, EffectComposer } from '@react-three/postprocessing';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import * as THREE from 'three';
 
 interface Props {
@@ -42,7 +42,7 @@ function Model({ onLoaded }: Props) {
   return (
     <primitive
       object={scene}
-      scale={6.4}
+      scale={5.8}
       position={[0, -1.2, 0]}
       rotation={[-0.15, Math.PI + 3, 0]}
     />
diff --git a/src/domains/main/components/3d/ModelImage.tsx b/src/domains/main/components/3d/ModelImage.tsx
@@ -1,4 +1,6 @@
 import { useEffect } from 'react';
+import MobileCocktailDrop from '../../../../../public/mobileCocktail.webp';
+import Image from 'next/image';
 
 interface Props {
   onLoaded: () => void;
@@ -8,7 +10,20 @@ function ModelImage({ onLoaded }: Props) {
   useEffect(() => {
     onLoaded();
   });
-  return <div className="w-full"></div>;
+  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">
+        <Image
+          src={MobileCocktailDrop}
+          alt="모바일 칵테일 드랍"
+          width={260}
+          height={290}
+          priority
+          className="object-cover w-[300px] h-[390px]"
+        />
+      </div>
+    </div>
+  );
 }
 
 export default ModelImage;
diff --git a/src/domains/main/components/3d/Scroll.tsx b/src/domains/main/components/3d/Scroll.tsx
@@ -12,7 +12,7 @@ function Scroll({ isDesktop }: { isDesktop: boolean }) {
         height: 60,
       };
   return (
-    <div className="absolute bottom-18 left-1/2 -translate-x-1/2 rounded-full bg-secondary/10 z-11 md:w-[60px] md:h-[60px] w-[45px] h-[45px]">
+    <div className="absolute bottom-18 left-1/2 -translate-x-1/2 rounded-full md:bg-secondary/10 bg-primary/30 z-11 md:w-[60px] md:h-[60px] w-[45px] h-[45px]">
       <div className="z-11">
         <Lottie animationData={scroll} style={style} aria-hidden loop={true} />
       </div>
diff --git a/src/domains/main/components/FinalLanding.tsx b/src/domains/main/components/FinalLanding.tsx
@@ -13,13 +13,15 @@ function FinalLanding() {
   const smootherRef = useRef<ScrollSmoother | null>(null);
 
   const [isDesktop, setIsDesktop] = useState(false);
+  const [hasMounted, setHasMounted] = useState(false);
 
   useEffect(() => {
     const checkViewport = () => {
       setIsDesktop(window.innerWidth >= 1024);
     };
 
     checkViewport();
+    setHasMounted(true);
 
     window.addEventListener('resize', checkViewport);
 
@@ -58,6 +60,8 @@ function FinalLanding() {
     };
   }, [isDesktop]);
 
+  if (!hasMounted) return null;
+
   return (
     <div className="overflow-x-hidden">
       <StarMain />
@@ -69,7 +73,7 @@ function FinalLanding() {
             {!isLoading && (
               <>
                 <MainSlide isDesktop={isDesktop} />
-                <CocktailDrop />
+                <CocktailDrop isDesktop={isDesktop} />
               </>
             )}
           </div>
@@ -81,7 +85,7 @@ function FinalLanding() {
           {!isLoading && (
             <>
               <MainSlide isDesktop={isDesktop} />
-              <CocktailDrop />
+              <CocktailDrop isDesktop={isDesktop} />
             </>
           )}
         </div>
diff --git a/src/domains/main/components/mainSlide/components/MainSlide.tsx b/src/domains/main/components/mainSlide/components/MainSlide.tsx
@@ -127,7 +127,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
         <MobileSlide key="mobile" />
       ) : (
         <div ref={initialRoot} className="w-full overflow-hidden">
-          <section key="desktop" ref={root} className="w-full stage h-screen" id="scroll-fixed">
+          <section key="desktop" ref={root} className="w-full stage h-screen " id="scroll-fixed">
             <div className="stage relative w-full h-full overflow-hidden bg-secondary">
               <div className="panel absolute inset-0 overflow-hidden">
                 <MainSlideIntro />
