Skip to content

Commit 47e2e63

Browse files
hyo-4hyo-4
committed
💄design(#163): 로그인 화면 소셜 로그인 버튼
1 parent 2fef3fd commit 47e2e63

6 files changed

Lines changed: 128 additions & 28 deletions

File tree

‎public/assets/icons/ic_google.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎public/assets/icons/ic_kakaotalk.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎public/assets/icons/ic_naver.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/app/login/google/page.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
'use client';
2+
3+
import Loader from '@/components/common/Loader';
4+
import styled from 'styled-components';
5+
6+
const Auth = () => {
7+
return (
8+
<Container>
9+
<LoaderContainer>
10+
<Loader />
11+
<Guidetext>
12+
로그인 중입니다
13+
<br />
14+
잠시만 기다려주세요...
15+
</Guidetext>
16+
</LoaderContainer>
17+
</Container>
18+
);
19+
};
20+
21+
export default Auth;
22+
23+
const Container = styled.div`
24+
display: flex;
25+
box-sizing: border-box;
26+
flex-direction: column;
27+
height: 100%;
28+
padding: 25px;
29+
background: ${(props) => props.theme.colors.bg};
30+
`;
31+
32+
const LoaderContainer = styled.div`
33+
width: 100%;
34+
height: 100%;
35+
min-height: 600px;
36+
display: flex;
37+
flex-direction: column;
38+
align-items: center;
39+
justify-content: center;
40+
`;
41+
42+
const Guidetext = styled.div`
43+
width: 100%;
44+
display: flex;
45+
text-align: center;
46+
justify-content: center;
47+
${(props) => props.theme.fonts.regular16};
48+
color: ${(props) => props.theme.colors.gray300};
49+
padding-top: 10px;
50+
`;

‎src/app/login/page.tsx‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
"use client";
1+
'use client';
22

3-
import SocialKakao from "@/components/signup/SocialKakao";
4-
import { theme } from "@/styles/theme";
5-
import styled from "styled-components";
3+
import SocialKakao from '@/components/signup/SocialKakao';
4+
import { theme } from '@/styles/theme';
5+
import styled from 'styled-components';
6+
import Image from 'next/image';
7+
8+
interface OauthButtonProps {
9+
bgColor: string;
10+
}
611

712
export default function Login() {
813
return (
@@ -11,9 +16,27 @@ export default function Login() {
1116
<LogoTitle data="/assets/login/login_text.svg" />
1217
<LogoText>편지로 수놓는 나의 스페이스</LogoText>
1318
<LogoImage src="/assets/login/login_logo.png" />
14-
<SocialKakaoWrapper>
15-
<SocialKakao />
16-
</SocialKakaoWrapper>
19+
<OauthWrapper>
20+
<OauthButton bgColor="#03CF5D">
21+
<Image
22+
src="/assets/icons/ic_naver.svg"
23+
alt="Naver"
24+
width={26}
25+
height={26}
26+
/>
27+
</OauthButton>
28+
<OauthButton bgColor="#FFFFFF">
29+
<Image
30+
src="/assets/icons/ic_google.svg"
31+
alt="Google"
32+
width={33}
33+
height={33}
34+
/>
35+
</OauthButton>
36+
<OauthButton bgColor="#FEE500">
37+
<SocialKakao />
38+
</OauthButton>
39+
</OauthWrapper>
1740
</ImageWrapper>
1841
</Container>
1942
);
@@ -25,7 +48,7 @@ const Container = styled.div`
2548
height: 100vh;
2649
flex-direction: column;
2750
justify-content: space-between;
28-
background-image: url("/assets/login/login_bg.png");
51+
background-image: url('/assets/login/login_bg.png');
2952
background-size: cover;
3053
background-position: center;
3154
background-repeat: no-repeat;
@@ -104,13 +127,26 @@ const ImageWrapper = styled.div`
104127
overflow: hidden;
105128
`;
106129

107-
const SocialKakaoWrapper = styled.div`
130+
const OauthWrapper = styled.div`
108131
width: 100%;
109132
max-width: 393px;
110-
padding: 0 4px;
133+
gap: 24px;
111134
display: flex;
112135
position: absolute;
113136
bottom: 60px;
114-
left: 50%;
115-
transform: translate(-50%);
137+
justify-content: center;
138+
`;
139+
140+
const OauthButton = styled.button<OauthButtonProps>`
141+
width: 69px;
142+
height: 69px;
143+
border-radius: 50%;
144+
border: none;
145+
background-color: ${({ bgColor }) => bgColor};
146+
display: flex;
147+
align-items: center;
148+
overflow: hidden;
149+
justify-content: center;
150+
cursor: pointer;
151+
transition: background-color 0.3s;
116152
`;

‎src/components/signup/SocialKakao.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
import React, { Suspense, useEffect, useState } from "react";
2-
import Image from "next/image";
3-
import styled from "styled-components";
4-
import { useRouter, useSearchParams } from "next/navigation";
5-
import { useRecoilState } from "recoil";
6-
import { accessState } from "@/recoil/accessStore";
7-
import { getAccessToken, setLetterUrl } from "@/utils/storage";
8-
import Loader, { LoaderContainer } from "../common/Loader";
1+
import React, { Suspense, useEffect, useState } from 'react';
2+
import Image from 'next/image';
3+
import styled from 'styled-components';
4+
import { useRouter, useSearchParams } from 'next/navigation';
5+
import { useRecoilState } from 'recoil';
6+
import { accessState } from '@/recoil/accessStore';
7+
import { getAccessToken, setLetterUrl } from '@/utils/storage';
8+
import Loader, { LoaderContainer } from '../common/Loader';
99

1010
const SocialKakao = () => {
1111
const router = useRouter();
1212
const searchParams = useSearchParams();
13-
const url = searchParams.get("url");
13+
const url = searchParams.get('url');
1414
const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY;
1515
const accessToken = getAccessToken();
16-
const [absoluteUrl, setabsoluteUrl] = useState("");
16+
const [absoluteUrl, setabsoluteUrl] = useState('');
1717
const KAKAO_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${absoluteUrl}&response_type=code&url=${url}`;
1818
const [localAccessToken, setAccessToken] = useRecoilState(accessState);
1919

2020
useEffect(() => {
21-
if (typeof window !== "undefined") {
21+
if (typeof window !== 'undefined') {
2222
setabsoluteUrl(
23-
window.location.protocol + "//" + window.location.host + "/login/kakao"
23+
window.location.protocol + '//' + window.location.host + '/login/kakao'
2424
);
2525
}
2626
}, []);
@@ -35,6 +35,7 @@ const SocialKakao = () => {
3535
// }
3636
// setAccessToken(accessToken);
3737
// } else {
38+
//받은 편지를 통해 들어올 경우 url를 저장한다.
3839
if (url) {
3940
setLetterUrl(url);
4041
}
@@ -44,9 +45,9 @@ const SocialKakao = () => {
4445
return (
4546
<SocialLoginBox onClick={handleLogin}>
4647
<StyledImage
47-
src="/assets/login/mobile_btn_login.svg"
48-
width={440}
49-
height={48}
48+
src="/assets/icons/ic_kakaotalk.svg"
49+
width={38}
50+
height={38}
5051
alt="kakao"
5152
/>
5253
</SocialLoginBox>
@@ -80,6 +81,6 @@ const SocialLoginBox = styled.div`
8081
const StyledImage = styled(Image)`
8182
width: 100%;
8283
height: 100%;
83-
padding: 0 20px;
84+
padding: 0 16px;
8485
object-fit: contain;
8586
`;

0 commit comments

Comments
 (0)