design: 스크롤 영역 변경

Author: yyezzzy

src/app/(home)/page.tsx

@@ -71,7 +71,7 @@ export default function LandingPage() {
   useEffect(() => {
     setIsLoaded(true);
     lenisRef.current = new Lenis({
-      duration: 0.8, // 1.2에서 0.8로 변경
+      duration: 0.8, // 1.2에�� 0.8로 변경
       easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
       smoothWheel: true,
       wheelMultiplier: 2,
@@ -267,59 +267,64 @@ export default function LandingPage() {
             <AnimatePresence mode="wait">
               {currentSlide > 0 && (
                 <motion.div
-                  key={currentSlide}
-                  className={`relative z-40 flex ${
-                    isLargeScreen ? "w-1/2" : "h-1/2 w-full"
-                  } flex-col items-center justify-center p-4 pb-6 pt-4 max-[640px]:px-12 max-[640px]:py-3 md:p-6 md:pb-8 md:pt-6`}
+                  className={`relative z-40 flex ${isLargeScreen ? "w-1/2" : "h-1/2 w-full"}`}
                   style={{
                     background: "linear-gradient(135deg, #71db77 0%, #56c45d 100%)",
                     display: "flex",
                     flexDirection: "column",
                     justifyContent: "center",
                     alignItems: "center",
                     height: isLargeScreen ? "100%" : "50%",
+                    overflow: "hidden",
                   }}
-                  initial={{ opacity: 0, [isLargeScreen ? "y" : "x"]: isLargeScreen ? "100%" : "100%" }}
-                  animate={{ opacity: 1, [isLargeScreen ? "y" : "x"]: 0 }}
-                  exit={{ opacity: 0, [isLargeScreen ? "y" : "x"]: isLargeScreen ? "-100%" : "-100%" }}
-                  transition={{ duration: 0.4, ease: "easeInOut" }} // Updated transition duration
                 >
-                  <motion.h2
-                    className="mb-2 mt-0 text-center text-xl font-semibold text-[#1a1a1a] max-[640px]:mb-1 max-[640px]:px-4 md:mb-4 md:mt-0 md:text-3xl"
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ delay: 0.05, duration: 0.3 }} // Updated transition
-                  >
-                    {slides[currentSlide].title}
-                  </motion.h2>
-                  <motion.div
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ delay: 0.1, duration: 0.3 }} // Updated transition
-                    className="mb-2 w-full max-w-[600px] max-[640px]:max-w-[75%] max-[640px]:px-4 md:mb-4"
-                    style={{ maxHeight: "calc(100% - 12rem)" }}
-                  >
-                    <div
-                      className="relative w-full overflow-hidden rounded-lg shadow-lg"
-                      style={{ paddingBottom: "56.25%" }}
+                  <AnimatePresence mode="wait">
+                    <motion.div
+                      key={currentSlide}
+                      className="flex h-full w-full flex-col items-center justify-center p-4 pb-6 pt-4 max-[640px]:px-12 max-[640px]:py-3 md:p-6 md:pb-8 md:pt-6"
+                      initial={{ y: "100%" }}
+                      animate={{ y: 0 }}
+                      exit={{ y: "-100%" }}
+                      transition={{ duration: 0.4, ease: "easeInOut" }}
                     >
-                      <Image
-                        src={slides[currentSlide].image || ""}
-                        alt={slides[currentSlide].title || ""}
-                        fill
-                        style={{ objectFit: "cover" }}
-                        sizes="(max-width: 768px) 100vw, 600px"
-                      />
-                    </div>
-                  </motion.div>
-                  <motion.p
-                    className="mb-0 max-w-[600px] whitespace-pre-wrap text-center text-sm text-[#1a1a1a] max-[640px]:mt-1 max-[640px]:px-4 md:text-xl"
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ delay: 0.15, duration: 0.3 }} // Updated transition
-                  >
-                    {slides[currentSlide].content}
-                  </motion.p>
+                      <motion.h2
+                        className="mb-2 mt-0 text-center text-xl font-semibold text-[#1a1a1a] max-[640px]:mb-1 max-[640px]:px-4 md:mb-4 md:mt-0 md:text-3xl"
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.05, duration: 0.3 }}
+                      >
+                        {slides[currentSlide].title}
+                      </motion.h2>
+                      <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.1, duration: 0.3 }}
+                        className="mb-2 w-full max-w-[600px] max-[640px]:max-w-[75%] max-[640px]:px-4 md:mb-4"
+                        style={{ maxHeight: "calc(100% - 12rem)" }}
+                      >
+                        <div
+                          className="relative w-full overflow-hidden rounded-lg shadow-lg"
+                          style={{ paddingBottom: "56.25%" }}
+                        >
+                          <Image
+                            src={slides[currentSlide].image || ""}
+                            alt={slides[currentSlide].title || ""}
+                            fill
+                            style={{ objectFit: "cover" }}
+                            sizes="(max-width: 768px) 100vw, 600px"
+                          />
+                        </div>
+                      </motion.div>
+                      <motion.p
+                        className="mb-0 max-w-[600px] whitespace-pre-wrap text-center text-sm text-[#1a1a1a] max-[640px]:mt-1 max-[640px]:px-4 md:text-xl"
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.15, duration: 0.3 }}
+                      >
+                        {slides[currentSlide].content}
+                      </motion.p>
+                    </motion.div>
+                  </AnimatePresence>
                 </motion.div>
               )}
             </AnimatePresence>