Skip to content

Commit badcf8e

Browse files
gxxrxngxxrxn
committed
[#610] 로그인 페이지 구현 (#614)
* fix: button 컴포넌트 focus style 수정 * feat: 로그인 페이지 구현 * fix: tailwind font-heading bold, regular 추가
1 parent 7f1cd21 commit badcf8e

File tree

10 files changed

+54
-45
lines changed

10 files changed

+54
-45
lines changed

‎public/images/login-landing.jpg‎

115 KB
Loading

‎src/app/global-error.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const ErrorPage = () => {
1717
height={160}
1818
alt="loading"
1919
/>
20-
<div className="font-heading">
20+
<div className="font-heading-bold">
2121
<span className="font-bold text-main-900">다독이</span>도 몰라요~ 왜
2222
이래요~
2323
</div>

‎src/app/group/[groupId]/not-found.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function NotFound() {
66
return (
77
<div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
88
<Image src="/images/loading.gif" width={230} height={160} alt="loading" />
9-
<p className="font-heading">
9+
<p className="font-heading-bold">
1010
<span className="font-bold text-main-900">다독이</span>가 길을 잃었어요.
1111
</p>
1212
<Link href="/group">

‎src/app/login/page.tsx‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
11
'use client';
22

3-
import { Highlight, Text, VStack } from '@chakra-ui/react';
43
import Image from 'next/image';
54
import Link from 'next/link';
65

7-
import Button from '@/ui/common/Button';
8-
import Logo from '@/ui/common/Logo';
6+
import { IconKakao } from '@public/icons';
7+
import { KAKAO_LOGIN_URL } from '@/constants/url';
98

10-
const LoginPage = () => {
11-
const kakaoUrl = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_REDIRECT_URI}`;
9+
import Button from '@/v1/base/Button';
1210

11+
const LoginPage = () => {
1312
return (
14-
<VStack
15-
align="center"
16-
justify="center"
17-
pos="relative"
18-
zIndex="1"
19-
bgColor="white.800"
20-
h="100%"
21-
gap="26rem"
22-
>
23-
<VStack w="100%" align="flex-start" spacing="3rem" px="2rem">
24-
<Logo width={65} />
25-
<Text fontSize="2xl" fontWeight="normal">
26-
책에 대한 모든 이야기
13+
<>
14+
<article className="absolute inset-x-0 top-[15vh] flex w-full flex-col items-center gap-[2.3rem]">
15+
<Image
16+
src="/images/login-landing.jpg"
17+
alt="로그인랜딩이미지"
18+
width={300}
19+
height={270}
20+
/>
21+
<p className="text-center !leading-snug font-heading-regular">
22+
<span className="font-subheading-regular">
23+
책에 대한 모든 이야기,
24+
</span>
2725
<br />
28-
<Highlight
29-
query="다독다독"
30-
styles={{ color: 'main', fontWeight: 'bold' }}
26+
<span className="font-bold text-main-900">다독다독</span>에서
27+
함께해요!
28+
</p>
29+
</article>
30+
31+
<section className="absolute inset-x-[2rem] bottom-[2rem] flex flex-col justify-center gap-[1rem]">
32+
<Link href={KAKAO_LOGIN_URL}>
33+
<Button size="full" colorScheme="kakao">
34+
<div className="flex w-full items-center justify-center">
35+
<IconKakao className="absolute left-[2rem] w-[2.1rem]" />
36+
<p>카카오 로그인</p>
37+
</div>
38+
</Button>
39+
</Link>
40+
<Link href="/" className="flex justify-center">
41+
<Button
42+
size="small"
43+
colorScheme="grey"
44+
className="border-none !text-black-700 underline underline-offset-4 font-body2-regular"
45+
fill={false}
3146
>
32-
다독다독에서 함께 해요
33-
</Highlight>
34-
</Text>
35-
</VStack>
36-
<Link href={kakaoUrl} style={{ width: '100%' }}>
37-
<Button scheme="kakao" fullWidth>
38-
<Image
39-
src="/icons/kakao-legacy.svg"
40-
alt="카카오 로고"
41-
width={21}
42-
height={19}
43-
priority
44-
/>
45-
카카오 로그인
46-
</Button>
47-
</Link>
48-
</VStack>
47+
로그인하지 않고 둘러보기
48+
</Button>
49+
</Link>
50+
</section>
51+
</>
4952
);
5053
};
5154

‎src/app/not-found.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const NotFound = () => {
1010
return (
1111
<div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
1212
<Image src="/images/loading.gif" width={230} height={160} alt="loading" />
13-
<div className="font-heading">
13+
<div className="font-heading-bold">
1414
<span className="font-bold text-main-900">다독이</span>가 길을 잃었어요.
1515
</div>
1616
<Button

‎src/styles/global.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
@layer base {
2121
html {
2222
@apply w-full bg-background font-[LineSeedKR] text-[62.5%] text-black-700;
23+
-webkit-tap-highlight-color: #ffffff50;
2324
}
2425

2526
body {

‎src/v1/base/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => {
6060
};
6161

6262
const BASE_BUTTON_CLASSES =
63-
'cursor-pointer border-[0.1rem] leading-none inline-block focus:outline-none focus:ring-2';
63+
'cursor-pointer border-[0.1rem] leading-none inline-block focus:outline-none focus:ring-1';
6464

6565
const Button = ({
6666
size = 'medium',

‎src/v1/base/TopHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type TopHeaderProps = PropsWithChildren<{
77
const TopHeader = ({ text, children }: TopHeaderProps) => {
88
return (
99
<header className="flex w-full items-center justify-between pb-[2rem]">
10-
<h1 className="text-main-900 font-heading">{text}</h1>
10+
<h1 className="text-main-900 font-heading-bold">{text}</h1>
1111
{children}
1212
</header>
1313
);

‎src/v1/bookSearch/BestSellers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ const BestSeller = ({
141141
>
142142
<BookCover src={imageUrl} title={title} size={'xlarge'} />
143143
<div className="flex flex-row gap-[1rem]">
144-
<p className="text-black-900 font-heading">{bestRank}</p>
144+
<p className="text-black-900 font-heading-bold">{bestRank}</p>
145145
<div className="flex min-w-0 flex-col gap-[0.3rem] font-body2-regular">
146146
<p className="line-clamp-2 !leading-tight text-black-900 ">{title}</p>
147147
<p className="line-clamp-1 text-[#5c5c5c] ">{author}</p>

‎tailwind.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,16 @@ module.exports = {
134134
plugins: [
135135
({ addUtilities }) => {
136136
addUtilities({
137-
'.font-heading': {
137+
'.font-heading-bold': {
138138
fontSize: '2.1rem',
139139
lineHeight: '1.5',
140140
fontWeight: 700,
141141
},
142+
'.font-heading-regular': {
143+
fontSize: '2.1rem',
144+
lineHeight: '1.5',
145+
fontWeight: 400,
146+
},
142147
'.font-subheading-bold': {
143148
fontSize: '1.8rem',
144149
lineHeight: '1.5',

0 commit comments

Comments
 (0)