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모델

* 메인 수정

* 아래칵테일잔수정

Author: EunbinJung

src/app/(main)/layout.tsx

@@ -1,12 +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" />
+      <Header
+        isMain={true}
+        className="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 />
     </>
   );
 }

src/domains/main/cocktailDrop/CocktailDrop.tsx

@@ -44,11 +44,23 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       );
 
       // 로고 위에서 아래로 자연스럽게 등장
+      const screenWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const isTablet = screenWidth >= 640 && screenWidth < 1024;
+      const isMobile = screenWidth < 640;
+
+      // 뷰포트 높이 기반으로 로고 위치 계산
+      const logoFinalY = isMobile
+        ? `-${viewportHeight * 0.3}px`
+        : isTablet
+          ? `-${viewportHeight * -0.8}px`
+          : '0px';
+
       gsap.fromTo(
         logoRef.current,
         { y: -300, opacity: 0 },
         {
-          y: !isDesktop ? -230 : -18, // 데스크톱이 아닐 때 더 위로
+          y: logoFinalY, // 뷰포트 높이 기반 계산
           opacity: 1,
           duration: 3,
           ease: 'power3.out',
@@ -69,7 +81,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
   return (
     <div
       ref={containerRef}
-      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"
+      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"
       id="scroll-fixed"
     >
       {/* 대각선 줄 1 */}
@@ -84,7 +96,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       />
 
       {/* 로고 */}
-      <div ref={logoRef} className="absolute md:w-115 w-85 md:h-90 h-40">
+      <div ref={logoRef} className="absolute z-4 md:w-115 w-65 md:h-90 h-40">
         <Image
           src="/logo.svg"
           alt="로고 이미지"
@@ -95,20 +107,17 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
         />
       </div>
 
-      <div className="w-full md:h-90 h-30"></div>
-
       {/* 컵 이미지 - 모바일에서 바닥에 붙도록 */}
-      <div className="md:relative absolute bottom-0">
+      <div className="z-5 absolute bottom-0">
         <Image
           src={Cocktailcup}
           alt="칵테일 컵"
-          width={900}
-          height={700}
           priority
-          className="md:w-auto md:h-auto w-[500px] h-[400px] object-cover"
+          style={{ height: 'auto' }}
+          className="md:w-[700px] w-[500px] object-contain"
         />
       </div>
-      <div className="absolute md:bottom-35 bottom-20 flex items-center justify-center z-3 w-full">
+      <div className="absolute md:bottom-35 bottom-20 flex items-center justify-center z-10 w-full">
         <PassBtn />
       </div>
     </div>

src/domains/main/components/3d/HomeLogo.tsx

@@ -3,8 +3,8 @@ import Image from 'next/image';
 function HomeLogo({ isDesktop }: { isDesktop: boolean }) {
   return (
     <div
-      className="z-5 absolute md:top-8 md:left-10 md:translate-none top-13 left-1/2 -translate-x-1/2"
-      style={{ width: !isDesktop ? 400 : 700, height: !isDesktop ? 70 : 240 }}
+      className="z-5 absolute md:top-22 md:left-10 md:translate-none top-30 left-1/2 -translate-x-1/2"
+      style={{ width: !isDesktop ? 400 : 580, height: !isDesktop ? 70 : 210 }}
     >
       <Image src={'/logo.svg'} alt="로고 이미지" fill priority className="object-contain" />
     </div>

src/domains/main/components/3d/HomeModel.tsx

@@ -42,8 +42,8 @@ function Model({ onLoaded }: Props) {
   return (
     <primitive
       object={scene}
-      scale={5.8}
-      position={[0, -1.2, 0]}
+      scale={4.6}
+      position={[0, -0.6, 0]}
       rotation={[-0.15, Math.PI + 3, 0]}
     />
   );

src/domains/main/components/3d/HomeText.tsx

@@ -2,8 +2,9 @@ function HomeText({ isDesktop }: { isDesktop: boolean }) {
   return (
     <>
       {!isDesktop ? (
-        <p className="absolute top-32 text-sm left-1/2 -translate-x-1/2 whitespace-nowrap">
-          어떤 칵테일이 끌리시나요? SSoul이 쉽게 골라드릴게요.
+        <p className="absolute top-48 text-sm left-1/2 -translate-x-1/2 text-center mt-4">
+          어떤 칵테일이 끌리시나요? <br />
+          SSoul이 쉽게 골라드릴게요.
         </p>
       ) : (
         <p className="absolute bottom-45 right-12 font-serif text-xl text-right font-normal z-20">

src/domains/main/components/3d/ModelImage.tsx

@@ -19,7 +19,7 @@ function ModelImage({ onLoaded }: Props) {
           width={260}
           height={290}
           priority
-          className="object-cover w-[300px] h-[390px]"
+          className="object-cover w-[300px] h-[350px]"
         />
       </div>
     </div>

src/domains/main/components/3d/StarMain.tsx

@@ -14,6 +14,10 @@ function StarMain() {
   useEffect(() => {
     if (!background.current || !foreground.current) return;
 
+    // 모바일에서는 별 애니메이션 비활성화
+    const isMobile = window.innerWidth < 768;
+    if (isMobile) return;
+
     const bgX = gsap.quickSetter(background.current, 'x', 'px');
     const bgY = gsap.quickSetter(background.current, 'y', 'px');
     const bgRotate = gsap.quickSetter(background.current, 'rotate', 'deg');
@@ -43,20 +47,11 @@ function StarMain() {
       mouse.current = { x, y };
     };
 
-    const handleTouchMove = (e: TouchEvent) => {
-      const touch = e.touches[0];
-      const x = (touch.clientX / window.innerWidth - 0.5) * 2;
-      const y = (touch.clientY / window.innerHeight - 0.5) * 2;
-      mouse.current = { x, y };
-    };
-
     window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('touchmove', handleTouchMove);
     rafId.current = requestAnimationFrame(update);
 
     return () => {
       window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('touchmove', handleTouchMove);
       if (rafId.current) cancelAnimationFrame(rafId.current);
     };
   }, []);

src/domains/mypage/components/pages/my-active/MyLike.tsx

@@ -20,6 +20,10 @@ function MyLike() {
     fetchLike();
   }, []);
 
+  useEffect(() => {
+    console.log(myLike);
+  }, [myLike]);
+
   return (
     <section className="flex justify-center">
       {myLike.length > 0 ? (