Skip to content

Commit

Permalink
Merge pull request #223 from Here-You/feature/#220
Browse files Browse the repository at this point in the history 
[Feat] : 로그인 페이지 비행기 ✈✈
  • Loading branch information
@cowboysj
cowboysj authored Feb 17, 2024
2 parents 25e718d + b92100f commit a4a9544
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 111 deletions.
9 changes: 9 additions & 0 deletions public/images/airplane.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions public/images/background.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
181 changes: 78 additions & 103 deletions src/mocks/handlers/signature.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
},
],
Expand All @@ -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',
Expand All @@ -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();
// }),
];
3 changes: 2 additions & 1 deletion src/pages/login/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -36,7 +37,7 @@ const LoginPage = () => {
return (
<S.LoginContainer>
<S.LogoImg src={Logo} />

<S.AirPlane src={plane} />
<S.ButtonWrap>
<LoginButton />
<form onSubmit={handleSubmit}>
Expand Down
56 changes: 49 additions & 7 deletions src/pages/login/Login.style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 };

0 comments on commit a4a9544

Please sign in to comment.