버그들 수정

Author: EunbinJung

next.config.ts

@@ -1,6 +1,9 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  experimental: {
+    scrollRestoration: false,
+  },
   images: {
     domains: ['team2-app-s3-bucket.s3.ap-northeast-2.amazonaws.com'],
     remotePatterns: [
@@ -9,6 +12,7 @@ const nextConfig: NextConfig = {
         hostname: 'www.thecocktaildb.com',
       },
     ],
+    qualities: [25, 50, 75, 90, 100],
   },
   env: {
     NPUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,

public/1star.webp

@@ -1,4 +1,13 @@
+import FooterWrapper from '@/shared/components/footer/FooterWrapper';
+import Header from '@/shared/components/header/Header';
+
 function NoLayout({ children }: { children: React.ReactNode }) {
-  return <main className="flex flex-1">{children}</main>;
+  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;

public/2star.webp

@@ -2,7 +2,7 @@ import FinalLanding from '@/domains/main/components/FinalLanding';
 
 export default function Home() {
   return (
-    <div className="page-layout max-w-full">
+    <div className="max-w-full flex-1">
       <FinalLanding />
     </div>
   );

src/app/(no-layout)/layout.tsx

@@ -14,7 +14,6 @@ export async function generateMetadata({
     cache: 'no-store',
   });
   const post = await res.json();
-  console.log(post);
   return {
     title: post.title,
     description: post.content?.slice(0, 80),

src/app/(no-layout)/page.tsx

@@ -6,7 +6,6 @@ import { useParams } from 'next/navigation';
 
 function Page() {
   const params = useParams();
-  console.log(params);
 
   return (
     <div className="w-full mb-20 flex relative">

src/app/(with-layout)/community/[id]/page.tsx

@@ -1,14 +1,12 @@
-import { Virtualizer } from '@tanstack/react-virtual';
 import gsap from 'gsap';
 import { useEffect, useRef } from 'react';
 
 type Props = {
   value: string;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  rowVirtualize: Virtualizer<HTMLElement, Element>;
 };
 
-function AutoGrowingTextarea({ value, onChange, rowVirtualize }: Props) {
+function AutoGrowingTextarea({ value, onChange }: Props) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   useEffect(() => {
@@ -29,17 +27,6 @@ function AutoGrowingTextarea({ value, onChange, rowVirtualize }: Props) {
     };
   }, []);
 
-  useEffect(() => {
-    if (textareaRef.current) {
-      requestAnimationFrame(() => {
-        const li = textareaRef.current?.closest('li') as HTMLElement | null;
-        if (li) {
-          rowVirtualize.measureElement(li);
-        }
-      });
-    }
-  }, [value]);
-
   useEffect(() => {
     if (!textareaRef.current) return;
     gsap.fromTo(

src/app/(with-layout)/community/edit/[postId]/page.tsx

@@ -27,11 +27,6 @@ function DetailPage() {
   const [like, setLike] = useState<boolean | null>(null);
   const [prevLikeCount, setPrevLikeCount] = useState<number | undefined>(0);
 
-  useEffect(() => {
-    console.log('like:', like);
-    console.log('prevLikeCount:', prevLikeCount);
-  }, [like, prevLikeCount]);
-
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const router = useRouter();
 

src/domains/community/components/textarea/AutoGrowingTextarea.tsx

@@ -1,27 +1,49 @@
 import Image from 'next/image';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation, Pagination } from 'swiper/modules';
+import { useState } from 'react';
 
 function ImageSlide({ imageUrls }: { imageUrls: string[] }) {
+  const shouldLoop = imageUrls.length > 1;
+  const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
+
+  const handleImageLoad = (imgUrl: string) => {
+    setLoadedImages((prev) => new Set(prev).add(imgUrl));
+  };
+
   return (
     <Swiper
       spaceBetween={20}
       modules={[Navigation, Pagination]}
-      navigation
+      navigation={shouldLoop}
       pagination={{ clickable: true, type: 'bullets' }}
-      loop
+      loop={shouldLoop}
       className="w-full max-h-100 flex justify-center items-center"
     >
       {imageUrls.length > 0 &&
         imageUrls.map((img) => (
           <SwiperSlide className="w-full flex justify-center items-center" key={img}>
-            <Image
-              src={img}
-              alt="이미지"
-              width={150}
-              height={150}
-              className="object-contain w-full max-h-[400px]"
-            />
+            <div className="relative w-full h-[400px] flex items-center justify-center">
+              {!loadedImages.has(img) && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray/80 rounded-lg">
+                  <div className="w-8 h-8 border-4 border-secondary border-t-tertiary rounded-full animate-spin"></div>
+                </div>
+              )}
+              <Image
+                src={img}
+                alt="이미지"
+                width={800}
+                height={600}
+                quality={90}
+                priority
+                onLoad={() => handleImageLoad(img)}
+                onError={() => handleImageLoad(img)}
+                className={`object-contain w-full max-h-[400px] transition-opacity duration-300 ${
+                  loadedImages.has(img) ? 'opacity-100' : 'opacity-0'
+                }`}
+                style={{ width: 'auto', height: 'auto' }}
+              />
+            </div>
           </SwiperSlide>
         ))}
     </Swiper>