Merge pull request #114 from prgrms-web-devcourse-final-project/Style/#…

…111-icon404

Style: 디자인 수정 반영 (온보딩/404/로그인)

app/(auth)/login/Login.styles.ts

@@ -17,6 +17,8 @@ export const LogoContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  /* gap: 20px; // svg 넣을 경우 추가하기 */
+  margin: 40px 0;
 `;
 
 export const LoginTitle = styled.div`

app/(auth)/login/page.tsx

@@ -6,11 +6,12 @@ import toast from 'react-hot-toast';
 import axiosInstance from '@/lib/axios';
 import {
   LoginWrapper,
-  LoginTitle,
   ButtonSignupWrapper,
   LogoContainer,
 } from '@/app/(auth)/login/Login.styles';
-import LoginLogo from '@layout/Login/LoginLogo';
+import Logo from '@/styles/Icon/Logo.svg';
+// import MainLayout from '@/styles/Icon/mainLayout.svg'; // 용량이 너무 크다. . .
+import Image from 'next/image';
 import Input from '@common/Input/Input';
 import AutoLoginCheckbox from '@layout/Login/AutoLogin';
 import Button from '@common/Button/Button';
@@ -123,8 +124,8 @@ const Login = () => {
   return (
     <LoginWrapper>
       <LogoContainer>
-        <LoginLogo src="" />
-        <LoginTitle>Where am I?</LoginTitle>
+        <Image src={Logo} alt="logo" />
+        {/* <Image src={MainLayout} alt="mainLayout" /> */}
       </LogoContainer>
       <form onSubmit={handleLogin} autoComplete="off">
         <Input

app/not-found.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import Image from 'next/image';
+import notFound from '@/styles/Icon/404.svg';
+import Button from '@/components/Common/Button/Button';
+import { useRouter } from 'next/navigation';
+import styled from 'styled-components';
+import color from '@/styles/color/palette';
+
+const NotFound = () => {
+  const router = useRouter();
+
+  return (
+    <NotFoundContainer>
+      <Image src={notFound} alt="404" />
+      <Text>
+        찾을 수 없는 페이지입니다. <br />
+        요청하신 페이지가 사라졌거나, 잘못된 경로를 이용하셨어요:)
+      </Text>
+      <Button label="홈으로 이동" onClick={() => router.push('/')} />
+    </NotFoundContainer>
+  );
+};
+
+export default NotFound;
+
+const NotFoundContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  padding: 0 20px;
+`;
+
+const Text = styled.p`
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.14px;
+  margin-bottom: 20px;
+  text-align: center;
+  color: ${color.purple[50]};
+  padding: 24px 0;
+`;

app/onBoarding.styles.ts

@@ -68,7 +68,7 @@ export const SlideContent = styled.div`
 
 export const ImageWrapper = styled.div<{ $isSecondSlide?: boolean }>`
   width: 100%;
-  padding-top: ${({ $isSecondSlide }) => ($isSecondSlide ? '60px' : '0')};
+  padding-top: ${({ $isSecondSlide }) => ($isSecondSlide ? '0px' : '0')};
 `;
 
 export const TextWrapper = styled.div<{ $isFirstSlide?: boolean }>`
@@ -100,10 +100,12 @@ export const SlideDescription = styled.p`
 
 export const SlideImage = styled(Image)`
   width: 100%;
-
+  max-width: 300px;
   max-height: 350px;
   height: 100%;
+  min-height: 450px;
   object-fit: contain;
+  margin: 0 auto;
 `;
 
 export const ButtonContainer = styled.div`

app/page.tsx

@@ -1,4 +1,6 @@
 'use client';
+
+import { useState, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import Slider from 'react-slick';
 import Button from '@/components/Common/Button/Button';
@@ -16,35 +18,37 @@ import {
 } from './onBoarding.styles';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import SnowMan1 from '@/styles/Icon/SnowMan1.svg';
+import OnBoarding1 from '@/styles/Icon/OnBoarding/OnBoarding1.svg';
 import OnBoarding2 from '@/styles/Icon/OnBoarding2.svg';
-import OnBoarding3 from '@/styles/Icon/OnBoarding3.svg';
-import OnBoarding4 from '@/styles/Icon/OnBoarding4.svg';
+import OnBoarding3 from '@/styles/Icon/OnBoarding/OnBoarding3.gif';
+import OnBoarding4 from '@/styles/Icon/OnBoarding/OnBoarding4.gif';
 
 const OnBoarding = () => {
   const router = useRouter();
+  const sliderRef = useRef<Slider>(null);
+  const [currentSlide, setCurrentSlide] = useState(0);
 
-  // TODO : 마지막 슬라이드에서 첫번째 슬라이드로 넘어갈 때 끊어지는 이슈 (fade 옵션으로 해결!)
   const settings = {
-    dots: true, // 네비게이션 버튼
-    infinite: true, // 무한 반복
-    speed: 500, // 슬라이드 이동 속도
-    slidesToShow: 1, // 한 번에 보여줄 슬라이드 개수
-    slidesToScroll: 1, // 한 번에 스크롤할 슬라이드 개수
-    arrows: false, // 좌우 버튼 숨김
-    autoplay: true, // 자동 재생 활성화
-    autoplaySpeed: 3000, // 3초마다 슬라이드 변경
-    pauseOnHover: true, // 마우스 호버시 일시정지
-    cssEase: 'linear', // 부드러운 전환
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    arrows: false,
+    pauseOnHover: true,
+    cssEase: 'linear',
     fade: true,
+    beforeChange: (current: number, next: number) => {
+      setCurrentSlide(next);
+    },
   };
 
   const slides = [
     {
       title: '“어데고?!”',
       description: `가족, 커플, 친구들과 함께 방문했던 장소를 
 새롭게 추억하며 위치를 맞춰보세요!`,
-      image: SnowMan1,
+      image: OnBoarding1,
     },
     {
       title: '장소 등록하기',
@@ -71,7 +75,7 @@ const OnBoarding = () => {
     <PageWrapper>
       <OnBoardingWrapper>
         <SlideContainer>
-          <Slider {...settings}>
+          <Slider ref={sliderRef} {...settings}>
             {slides.map((slide, index) => (
               <SlideContent key={index}>
                 <ImageWrapper $isSecondSlide={index === 1}>
@@ -89,12 +93,23 @@ const OnBoarding = () => {
           </Slider>
         </SlideContainer>
         <ButtonContainer>
-          <Button
-            label="시작하기"
-            onClick={() => router.push('/login')}
-            buttonType="purple"
-            buttonSize="large"
-          />
+          {currentSlide === slides.length - 1 ? (
+            <Button
+              label="시작하기"
+              onClick={() => router.push('/login')}
+              buttonType="purple"
+              buttonSize="large"
+            />
+          ) : (
+            <Button
+              label="다음으로"
+              onClick={() => {
+                sliderRef.current?.slickNext();
+              }}
+              buttonType="purple"
+              buttonSize="large"
+            />
+          )}
         </ButtonContainer>
       </OnBoardingWrapper>
     </PageWrapper>

components/Layout/Game/Character.tsx

@@ -25,48 +25,48 @@ interface CharacterProps {
 }
 
 const positions = [
+  { top: '30%', left: '20%' },
   { top: '10%', left: '50%' },
   { top: '30%', left: '80%' },
-  { top: '70%', left: '70%' },
-  { top: '90%', left: '30%' },
-  { top: '60%', left: '10%' },
-  { top: '20%', left: '20%' },
+  { top: '50%', left: '40%' },
+  { top: '80%', left: '30%' },
+  { top: '100%', left: '60%' },
 ];
 
 const Character = ({ users }: CharacterProps) => {
   const characters = users.map((user, index) => {
-    // 타원형 배치를 위한 계산
-    const angle = (index * 360) / users.length;
-    const horizontalRadius = 35; // 가로 반지름 (더 작게)
-    const verticalRadius = 45; // 세로 반지름 (더 크게)
-
-    // 타원형 좌표 계산
-    const x = 50 + horizontalRadius * Math.cos((angle * Math.PI) / 180);
-    const y = 50 + verticalRadius * Math.sin((angle * Math.PI) / 180);
-
     return {
       id: user.id,
-      level: `레벨 ${index + 1}`,
+      level: '레벨 1',
       nickname: user.name,
       src: [
-        Character0,
-        Character1,
-        Character2,
-        Character3,
-        Character4,
         Character5,
+        Character4,
+        Character3,
+        Character2,
+        Character1,
+        Character0,
       ][index],
       alt: `${index + 1}번 눈사람`,
       isHost: user.isHost,
       isReady: user.isReady,
-      position: { left: `${x}%`, top: `${y}%` },
+      position: positions[index],
     };
   });
 
   return (
     <CharactersContainer>
       {characters.map((char) => (
-        <CharacterWrapper key={char.id} style={char.position} animation="slide">
+        <CharacterWrapper
+          key={char.id}
+          style={{
+            ...char.position,
+            width: '350px',
+            height: '280px',
+            position: 'absolute',
+            transform: 'translate(-50%, -50%)',
+          }}
+        >
           <InfoWrapper>
             {char.isHost ? (
               <Host>방장</Host>