Merge pull request #125 from YAPP-Github/bug/PRODUCT-230

bug: 1차 스프린트 이후 QA 반영 (#124)

Author: wkdtnqls0506

public/images/login-background.webp public/images/login-background.pngpublic/images/login-background.webp renamed to public/images/login-background.png

@@ -12,10 +12,6 @@ export const backgroundWrapper = style({
   position: "relative",
   width: "100%",
   height: "100%",
-  backgroundImage: "url(\"/images/login-background.webp\")",
-  backgroundSize: "cover",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "center",
   display: "flex",
   flexDirection: "column",
   justifyContent: "space-between",
@@ -27,6 +23,7 @@ export const textButton = style({
 });
 
 export const logoWrapper = style({
+  position: "relative",
   width: "100%",
   height: "100%",
   display: "flex",

src/app/(auth)/login/_styles/Login.css.ts

@@ -22,6 +22,13 @@ export default function LoginPage() {
   return (
     <main className={styles.wrapper}>
       <div className={styles.backgroundWrapper}>
+        <Image
+          src='/images/login-background.png'
+          alt='로그인 배경화면'
+          fill
+          priority
+        />
+
         <GNB
           align='left'
           background='transparent'

src/app/(auth)/login/page.tsx

@@ -6,18 +6,10 @@ export const content = style({
   height: "54.8rem",
 });
 
-export const titleWrapper = style({
+export const iconWrapper = style({
   position: "relative",
 });
 
-export const title = style({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  gap: "0.8rem",
-  textAlign: "center",
-});
-
 export const cancelIconWrapper = style({
   position: "absolute",
   top: 0,
@@ -29,6 +21,14 @@ export const cancelIcon = style({
   color: semantic.icon.gray,
 });
 
+export const title = style({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  gap: "0.8rem",
+  textAlign: "center",
+});
+
 export const mainTitle = style({
   whiteSpace: "pre-line",
 });
@@ -38,4 +38,15 @@ export const body = style({
   flexDirection: "column",
   alignItems: "center",
   gap: "1.6rem",
+  padding: 0,
+});
+
+export const sliderContainer = style({
+  width: "100%",
+});
+
+export const imageWrapper = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
 });

src/app/(home)/_components/ServiceIntroBottomSheet/ServiceIntroBottomSheet.css.ts

@@ -2,37 +2,47 @@
 
 import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import Slider from "react-slick";
 
 import CancelIcon from "@/assets/cancel.svg";
 import { BottomSheet } from "@/components/ui/BottomSheet";
 import { Button } from "@/components/ui/Button";
 import { Indicator } from "@/components/ui/Indicator";
+import { Spacer } from "@/components/ui/Spacer";
 import { Text } from "@/components/ui/Text";
 
 import { INTRO_STEP_CONTENTS, type IntroStepContent } from "../../_constants";
 import * as styles from "./ServiceIntroBottomSheet.css";
 
 export const ServiceIntroBottomSheet = () => {
+  const slickRef = useRef<Slider>(null);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
     const hasWatchIntro = localStorage.getItem("watchIntro") === "true";
-
     if (!hasWatchIntro) {
       setIsOpen(true);
       localStorage.setItem("watchIntro", "true");
     }
   }, []);
 
+  const sliderSettings = {
+    arrows: false,
+    beforeChange: (current: number, next: number) => {
+      setCurrentIndex(next);
+    },
+  };
+
   const handleDotClick = (index: number) => {
     setCurrentIndex(index);
+    slickRef.current?.slickGoTo(index);
   };
 
   const handleNext = () => {
     if (currentIndex < INTRO_STEP_CONTENTS.length - 1) {
-      setCurrentIndex(currentIndex + 1);
+      slickRef.current?.slickNext();
     } else {
       setIsOpen(false);
     }
@@ -47,7 +57,7 @@ export const ServiceIntroBottomSheet = () => {
   return (
     <BottomSheet.Root open={isOpen} onOpenChange={setIsOpen}>
       <BottomSheet.Content className={styles.content}>
-        <BottomSheet.Title className={styles.titleWrapper}>
+        <BottomSheet.Title className={styles.iconWrapper}>
           <div className={styles.cancelIconWrapper}>
             <button
               type='button'
@@ -61,43 +71,54 @@ export const ServiceIntroBottomSheet = () => {
               />
             </button>
           </div>
-
-          <AnimatePresence mode='wait'>
-            <motion.div
-              className={styles.title}
-              key={currentIndex}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Text typo='title1Bd' className={styles.mainTitle}>
-                {currentContent.title}
-              </Text>
-              <Text typo='body2Rg' color='neutral.50'>
-                {currentContent.subtitle}
-              </Text>
-            </motion.div>
-          </AnimatePresence>
         </BottomSheet.Title>
 
         <BottomSheet.Body className={styles.body}>
-          <AnimatePresence mode='wait'>
-            <motion.div
-              key={currentIndex}
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Image
-                width={335}
-                height={252}
-                src={currentContent.imageSrc}
-                alt={currentContent.imageAlt}
-              />
-            </motion.div>
-          </AnimatePresence>
+          <div className={styles.sliderContainer}>
+            <Slider ref={slickRef} {...sliderSettings}>
+              {INTRO_STEP_CONTENTS.map(content => (
+                <>
+                  <AnimatePresence mode='wait'>
+                    <motion.div
+                      className={styles.title}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -10 }}
+                      transition={{ duration: 0.3 }}
+                    >
+                      <Text typo='title1Bd' className={styles.mainTitle}>
+                        {content.title}
+                      </Text>
+                      <Text typo='body2Rg' color='neutral.50'>
+                        {content.subtitle}
+                      </Text>
+                    </motion.div>
+                  </AnimatePresence>
+
+                  <Spacer size={28} />
+
+                  <AnimatePresence mode='wait'>
+                    <motion.div
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.95 }}
+                      transition={{ duration: 0.3 }}
+                      className={styles.imageWrapper}
+                    >
+                      <Image
+                        width={335}
+                        height={252}
+                        src={content.imageSrc}
+                        alt={content.imageAlt}
+                        priority
+                      />
+                    </motion.div>
+                  </AnimatePresence>
+                </>
+              ))}
+            </Slider>
+          </div>
+
           <Indicator
             totalCount={INTRO_STEP_CONTENTS.length}
             currentIndex={currentIndex}

src/app/(home)/_components/ServiceIntroBottomSheet/ServiceIntroBottomSheet.tsx

@@ -35,7 +35,7 @@ export const addButton = style({
   left: "2.9rem",
   width: "2.1rem",
   height: "2.1rem",
-  padding: "0.5rem",
+  padding: "0.3rem",
   borderRadius: radius.circle,
   background: `${colors.neutral[30]}`,
   border: `2px solid ${colors.common[100]}`,

src/app/(home)/_components/Story/AddStoryAvatar/AddStoryAvatar.css.ts

@@ -4,7 +4,7 @@ import { radius } from "@/styles";
 
 export const wrapper = style({
   width: "100%",
-  height: "9rem",
+  height: "9.5rem",
   overflowX: "auto",
   "::-webkit-scrollbar": {
     display: "none",

src/app/(home)/_components/Story/Story.css.ts

@@ -2,21 +2,22 @@ import { style } from "@vanilla-extract/css";
 
 import { radius } from "@/styles";
 
-export const wrapper = style({
-  width: "100%",
-  height: "9rem",
-  overflowX: "auto",
-  "::-webkit-scrollbar": {
-    display: "none",
-  },
+export const storyItem = style({
+  flexShrink: 0,
+  padding: "0.3rem",
+  background:
+    "linear-gradient(45deg, #ff6f0f, #ff9047, #ffb07f, rgba(0, 255, 128, 0.7), #49e57d)",
+  borderRadius: radius.circle,
 });
 
-export const storyImage = style({
+export const storyImageInner = style({
+  padding: "3px",
+  backgroundColor: "white",
   borderRadius: radius.circle,
-  objectFit: "cover",
-  cursor: "pointer",
 });
 
-export const storyItem = style({
-  flexShrink: 0,
+export const storyImage = style({
+  display: "block",
+  borderRadius: radius.circle,
+  cursor: "pointer",
 });

src/app/(home)/_components/Story/StoryList/StoryList.css.ts

@@ -25,13 +25,16 @@ export const StoryList = () => {
           className={styles.storyItem}
           onClick={() => handleStoryClick(story.storyId)}
         >
-          <Image
-            src={story.imageUrl}
-            width={80}
-            height={80}
-            alt={`스토리 이미지 ${story.storyId}`}
-            className={styles.storyImage}
-          />
+          <div className={styles.storyImageInner}>
+            <Image
+              src={story.imageUrl}
+              width={80}
+              height={80}
+              alt={`스토리 이미지 ${story.storyId}`}
+              className={styles.storyImage}
+              objectFit='cover'
+            />
+          </div>
         </div>
       ))}
     </>

src/app/(home)/_components/Story/StoryList/StoryList.tsx

@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-import { colors } from "@/styles";
+import { colors, semantic } from "@/styles";
 
 export const contentWrapper = style({
   height: "calc(100dvh - 52px)",
@@ -23,6 +23,15 @@ export const icon = style({
   color: colors.neutral[90],
 });
 
+export const helperTextWrapper = style({
+  display: "flex",
+  gap: "0.4rem",
+});
+
+export const infoIcon = style({
+  color: semantic.icon.gray,
+});
+
 export const searchResultItems = style({
   display: "flex",
   flexDirection: "column",