Merge pull request #123 from prgrms-web-devcourse-final-project/feature/

#120-onboarding-gif

Feature/#120: 온보딩 화면에 gif 배치 및 스타일 적용

app/(auth)/login/page.tsx

@@ -124,7 +124,7 @@ const Login = () => {
   return (
     <LoginWrapper>
       <LogoContainer>
-        <Image src={Logo} alt="logo" />
+        <Image src={Logo} alt="logo" priority />
         {/* <Image src={MainLayout} alt="mainLayout" /> */}
       </LogoContainer>
       <form onSubmit={handleLogin} autoComplete="off">

app/onBoarding.styles.ts

@@ -1,6 +1,6 @@
-import Image from 'next/image';
 import styled from 'styled-components';
 import colors from '@/styles/color/palette';
+import Image from 'next/image';
 
 export const PageWrapper = styled.div`
   width: 100%;
@@ -98,7 +98,7 @@ export const SlideDescription = styled.p`
   white-space: pre-line;
 `;
 
-export const SlideImage = styled(Image)`
+export const SlideStaticImage = styled(Image)`
   width: 100%;
   max-width: 300px;
   max-height: 350px;
@@ -108,6 +108,16 @@ export const SlideImage = styled(Image)`
   margin: 0 auto;
 `;
 
+export const SlideDynamicImage = styled.div`
+  position: relative;
+  width: 224px;
+  height: 448px;
+  margin: 0 auto;
+  img {
+    border-radius: 12.8px;
+  }
+`;
+
 export const ButtonContainer = styled.div`
   position: fixed;
   display: flex;

app/page.tsx

@@ -14,14 +14,16 @@ import {
   SlideContent,
   SlideTitle,
   SlideDescription,
-  SlideImage,
+  SlideStaticImage,
+  SlideDynamicImage,
 } from './onBoarding.styles';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import OnBoarding1 from '@/styles/Icon/OnBoarding/OnBoarding1.svg';
 import OnBoarding2 from '@/styles/Icon/OnBoarding2.svg';
-import OnBoarding3 from '@/styles/Icon/OnBoarding/OnBoarding3.gif';
-import OnBoarding4 from '@/styles/Icon/OnBoarding/OnBoarding4.gif';
+import OnBoarding3 from '@/styles/Icon/OnBoarding/OnBoardingPlace.gif';
+import OnBoarding4 from '@/styles/Icon/OnBoarding/OnBoardingGame.gif';
+import Image from 'next/image';
 
 const OnBoarding = () => {
   const router = useRouter();
@@ -79,10 +81,22 @@ const OnBoarding = () => {
             {slides.map((slide, index) => (
               <SlideContent key={index}>
                 <ImageWrapper $isSecondSlide={index === 1}>
-                  <SlideImage
-                    src={slide.image}
-                    alt={`온보딩 이미지 ${index + 1}`}
-                  />
+                  {index === 0 || index === 1 ? (
+                    <SlideStaticImage
+                      src={slide.image}
+                      alt={`온보딩 이미지 ${index + 1}`}
+                    />
+                  ) : (
+                    <SlideDynamicImage>
+                      <Image
+                        src={slide.image}
+                        alt={`온보딩 이미지 ${index + 1}`}
+                        fill
+                        style={{ objectFit: 'cover' }}
+                        sizes="(max-width:430px) 100vw"
+                      />
+                    </SlideDynamicImage>
+                  )}
                 </ImageWrapper>
                 <TextWrapper $isFirstSlide={index === 0}>
                   <SlideTitle>{slide.title}</SlideTitle>

components/Layout/PlaceRegister/PlaceRegister.tsx

@@ -38,9 +38,6 @@ const PlaceRegister = ({ index, title }: PlaceRegisterProps) => {
 
   return (
     <PlaceRegisterWrapper>
-      {/* <button onClick={() => console.log(placeList)}>
-        placeList 확인용 버튼
-      </button> */}
       <PlaceRegistertext>
         <div>{title}</div>
         {index !== 0 && (

hooks/placeRegister/useRegisterFiles.ts

@@ -39,6 +39,7 @@ const useRegisterFiles = ({ index }: useUploadFilesProps) => {
     const selectedFileList = Array.from(fileList).slice(0, MAX_CONTENT_COUNT);
 
     if (isOverMemory(selectedFileList)) {
+      toast.error('업로드 가능한 용량을 초과했어요');
       return;
     }
 

hooks/placeRegister/useUploadFiles.ts

@@ -1,11 +1,13 @@
 import axiosInstance from '@/lib/axios';
 import usePlaceRegisterStore, { Place } from '@/stores/placeRegisterStore';
 import useUserStore from '@/stores/useUserStore';
+import { useRouter } from 'next/navigation';
 import toast from 'react-hot-toast';
 
 const useUploadFiles = () => {
   const { placeList, initEntirePlaceList } = usePlaceRegisterStore();
   const { nickname } = useUserStore();
+  const router = useRouter();
 
   const handleUploadFiles = async () => {
     // 장소 등록 진행
@@ -23,6 +25,7 @@ const useUploadFiles = () => {
       });
 
       initEntirePlaceList();
+      router.push('/home');
     } catch (error) {
       // 장소 등록 실패
       console.error(`장소 등록하기에서 발생한 에러: ${error}`);