diff --git a/public/images/airplane.svg b/public/images/airplane.svg new file mode 100644 index 00000000..dfa0a485 --- /dev/null +++ b/public/images/airplane.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/background.svg b/public/images/background.svg new file mode 100644 index 00000000..86f527d3 --- /dev/null +++ b/public/images/background.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/mocks/handlers/signature.js b/src/mocks/handlers/signature.js index 63bf0092..b4e4b178 100644 --- a/src/mocks/handlers/signature.js +++ b/src/mocks/handlers/signature.js @@ -7,78 +7,70 @@ export const SignatureHandlers = [ //시그니처_내 시그니처 http.get(`${baseURL}${API_URL.GET_MY_SIGNATURE}`, ({ request, params }) => { return HttpResponse.json({ - timestamp: '2024-02-03T08:18:18.076Z', - code: 'OK', + status: 200, success: true, - message: '내 시그니처 가져오기 성공', + message: '내 시그니처 조회 성공', data: [ { - _id: 1, - title: '호주와 겨룬 8강전 직관 후기', - date: '2024-02-03T08:03:22.000Z', + id: '01', + title: '시그니처 제목1', + date: '24/01/19', image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, { - _id: 2, - title: '강남역 근처 카페 모음', - date: '2024-02-03T08:14:40.000Z', + id: '02', + title: '시그니처 제목2', + date: '24/01/19', image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, + ], + }); + }), + + //시그니처_발행하기 + http.post(`${baseURL}${API_URL.PUBLISH_SIGNATURE}`, ({ request, params }) => { + return HttpResponse.json({ + title: '새로운 시그니처 제목', + pages: [ { - _id: 3, - title: '호주와 겨룬 8강전 직관 후기', - date: '2024-02-03T08:03:22.000Z', + content: '오늘은 호수 공원을 산책했습니다 어쩌구', + location: '광교 호수 공원', + page: 1, image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, { - _id: 4, - title: '강남역 근처 카페 모음', - date: '2024-02-03T08:14:40.000Z', + content: '저는 원래 호수 산책을 참 좋아하는데요 어쩌구', + location: '동백 호수 공원', + page: 2, image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, { - _id: 5, - title: '호주와 겨룬 8강전 직관 후기', - date: '2024-02-03T08:03:22.000Z', + content: '오늘은 호수 공원을 산책했습니다 어쩌구', + location: '광교 호수 공원', + page: 3, image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, { - _id: 6, - title: '강남역 근처 카페 모음', - date: '2024-02-03T08:14:40.000Z', + content: '저는 원래 호수 산책을 참 좋아하는데요 어쩌구', + location: '동백 호수 공원', + page: 4, image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, ], }); }), - - //시그니처_발행하기 - http.post(`${baseURL}${API_URL.PUBLISH_SIGNATURE}`, ({ request, params }) => { - return HttpResponse.json({ - timestamp: '2024-02-03T08:14:40.451Z', - code: 'CREATED', - success: true, - message: '시그니처 기록하기 성공', - data: 2, - }); - }), - //시그니처_시그니처 상세보기 //내 시그니처 Response-Body X, 다른 사람의 시그니처 Response-Body 만 O //내가 작성한 거 추가해야함 http.get( `${baseURL}${API_URL.GET_DETAIL_SIGNATURE}`, ({ request, params }) => { - const signatureId = params.signatureId; - if (!signatureId) { - return new HttpResponse(null, { status: 404 }); - } return HttpResponse.json({ status: 200, success: true, @@ -100,36 +92,27 @@ export const SignatureHandlers = [ }, pages: [ { - _id: 1, - image: - 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + image: 'image_url', location: '리라쿠마 카페, 긴자', content: '초등학교때부터 가고 싶었던 리락쿠마 카페를 다녀왔어요.', page: 1, }, { - _id: 2, - image: - 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', - location: '서울, 강동', - content: '강동강동강동강동강동강동', + image: 'image_url', + location: '리라쿠마 카페, 긴자', + content: '초등학교때부터 가고 싶었던 리락쿠마 카페를 다녀왔어요.', page: 2, }, { - _id: 3, - image: - 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', - location: '경기도, 안산', - content: '안산시안산시안산시안산시', + image: 'image_url', + location: '리라쿠마 카페, 긴자', + content: '초등학교때부터 가고 싶었던 리락쿠마 카페를 다녀왔어요.', page: 3, }, { - _id: 4, - image: - 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', - location: '서울, 강남', - content: - '강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남', + image: 'image_url', + location: '리라쿠마 카페, 긴자', + content: '초등학교때부터 가고 싶었던 리락쿠마 카페를 다녀왔어요.', page: 4, }, ], @@ -139,34 +122,57 @@ export const SignatureHandlers = [ ), //시그니처_시그니처 수정하기 - http.patch( + http.post( `${baseURL}${API_URL.GET_DETAIL_SIGNATURE}`, ({ request, params }) => { return HttpResponse.json({ - timestamp: '2024-02-05T07:37:55.770Z', - code: 'OK', - success: true, - message: '시그니처 수정하기 성공', - data: '6', + title: '새로운 시그니처 제목', + pages: [ + { + content: '오늘은 호수 공원을 산책했습니다 어쩌구', + location: '광교 호수 공원', + page: 1, + image: + 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + }, + { + content: '저는 원래 호수 산책을 참 좋아하는데요 어쩌구', + location: '동백 호수 공원', + page: 2, + image: + 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + }, + { + content: '오늘은 호수 공원을 산책했습니다 어쩌구', + location: '광교 호수 공원', + page: 3, + image: + 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + }, + { + content: '저는 원래 호수 산책을 참 좋아하는데요 어쩌구', + location: '동백 호수 공원', + page: 4, + image: + 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + }, + ], }); }, ), - //시그니처_시그니처 삭제하기 http.delete( `${baseURL}${API_URL.GET_DETAIL_SIGNATURE}`, ({ request, params }) => { return HttpResponse.json({ - timestamp: '2024-02-05T07:40:21.691Z', - code: 'OK', + status: 204, success: true, - message: '시그니처 삭제 성공', - data: null, + message: '시그니처 삭제하기 성공', }); }, ), - //시그니처_시그니처 좋아요, 좋아요 취소 + //좋아요만 -> 좋아요 취소 추가해야함 http.patch(`${baseURL}${API_URL.LIKE_SIGNATURE}`, ({ request, params }) => { return HttpResponse.json({ timestamp: '2024-02-03T07:07:13.749Z', @@ -180,39 +186,8 @@ export const SignatureHandlers = [ }); }), - //시그니처_시그니처 좋아요한 사용자 목록 - http.get(`${baseURL}${API_URL.LIKELIST_SIGNATURE}`, ({ request, params }) => { - return HttpResponse.json({ - timestamp: '2024-02-05T15:03:14.672Z', - code: 'OK', - success: true, - message: '시그니처 좋아요 목록 불러오기 성공', - data: { - liked: 3, - profiles: [ - { - _id: 1, - image: 'imagekey1', - introduction: '사용자 소개', - nickname: '완두콩', - is_followed: null, - }, - { - _id: 2, - image: 'imagekey2', - introduction: '사용자 소개', - nickname: '강낭콩', - is_followed: false, - }, - { - _id: 3, - image: 'imagekey3', - introduction: '사용자 소개', - nickname: '검은콩', - is_followed: false, - }, - ], - }, - }); - }), + //시그니처_시그니처 좋아요한 사용자 목록 (API명세서 미완성) + // http.get(`${baseURL}${API_URL.LIKE_SIGNATURE}`, ({ request, params }) => { + // return HttpResponse.json(); + // }), ]; diff --git a/src/pages/login/Login.jsx b/src/pages/login/Login.jsx index f03c4eba..788e4e0e 100644 --- a/src/pages/login/Login.jsx +++ b/src/pages/login/Login.jsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import * as S from './Login.style'; +import plane from '/images/airplane.svg'; import Logo from '/images/main.svg'; import { axios, axiosWithToken } from '@/apis/api'; import LoginButton from '@/components/login/LoginButton'; @@ -36,7 +37,7 @@ const LoginPage = () => { return ( - +
diff --git a/src/pages/login/Login.style.js b/src/pages/login/Login.style.js index e9ce1dcb..0f75c67f 100644 --- a/src/pages/login/Login.style.js +++ b/src/pages/login/Login.style.js @@ -2,6 +2,46 @@ import styled, { keyframes } from 'styled-components'; import theme from '@/theme'; +const airplaneAnimation = keyframes` + 0% { + transform: translateX(-100%) translateY(40px) rotate(0deg); + opacity: 1; + } + + 30% { + transform: translateX(100%) translateY(-50px) rotate(0deg); + opacity: 1; + } + 40% { + transform: translateX(250%) translateY(-50px) rotate(-100deg); + opacity: 1; + } + 60% { + transform: translateX(-100%) translateY(-150px) rotate(-100deg); + opacity: 1; + + } + 70%{ + opacity:0; + transform: translateX(-100%) translateY(-150px) rotate(-100deg); + } + 100% { + opacity: 0; + + transform: translateX(-100%) translateY(-150px) rotate(-100deg); + } + +`; + +const rotate360 = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +`; + const fadeIn = keyframes` from { opacity: 0; @@ -15,21 +55,23 @@ const LoginContainer = styled.div` ${theme.ALIGN.COLUMN_CENTER}; justify-content: space-evenly; height: 100%; + /* background-image: url('/images/background.svg'); + background-size: cover; + background-position: center; */ +`; +const AirPlane = styled.img` + width: 200px; + animation: ${airplaneAnimation} 3s linear forwards; `; const LogoImg = styled.img` width: 65%; - margin-bottom: 100px 0px 200px 0px; + margin-top: 20px; animation: ${fadeIn} 1s ease-in-out; `; -const LoginButtonWrapper = styled.div` - display: flex; - width: 100%; -`; const ButtonWrap = styled.div` width: 70%; - margin-top: 150px; `; -export { LoginContainer, LoginButtonWrapper, LogoImg, ButtonWrap }; +export { LoginContainer, LogoImg, ButtonWrap, AirPlane };