Skip to content

Commit a3d22c8

Browse files
mungyunmungyun
authored
Feat: 회원가입 페이지 UI 구현
Feat: 회원가입 페이지 UI 구현
2 parents d3fb45c + 048f3da commit a3d22c8

File tree

6 files changed

+85
-32
lines changed

6 files changed

+85
-32
lines changed

‎components/Auth/AuthInput.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import React, { InputHTMLAttributes, useState } from "react";
33

44
interface AuthInputProps extends InputHTMLAttributes<HTMLInputElement> {
55
text: string;
6+
name: string;
67
}
78

8-
const AuthInput = ({ text, type, ...props }: AuthInputProps) => {
9+
const AuthInput = ({ text, name, type, ...props }: AuthInputProps) => {
910
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
1011

1112
const toggleClick = () => {
@@ -14,7 +15,7 @@ const AuthInput = ({ text, type, ...props }: AuthInputProps) => {
1415

1516
return (
1617
<div className="mb-6">
17-
<label htmlFor={type} className="text-[14px] block mb-[12px]">
18+
<label htmlFor={name} className="text-[14px] block mb-[12px]">
1819
{text}
1920
</label>
2021
<div className="relative">

‎components/Layout/AuthLayout.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
import Image from "next/image";
2+
import { useRouter } from "next/router";
23
import { ReactNode } from "react";
34

45
const AuthLayout = ({ children }: { children: ReactNode }) => {
6+
const router = useRouter();
57
return (
6-
<div className="mx-auto bg-gray100 flex flex-col items-center justify-center h-screen">
8+
<div className="mx-auto bg-gray100 flex flex-col items-center justify-center h-screen py-32">
79
<div>
8-
<Image src="/icons/logo.svg" width="211" height="38" alt="로고" />
10+
<Image
11+
className="cursor-pointer"
12+
src="/icons/logo.svg"
13+
width="211"
14+
height="38"
15+
alt="로고"
16+
onClick={() => {
17+
router.push("/");
18+
}}
19+
/>
920
</div>
1021
{children}
1122
</div>

‎pages/login.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@ const Login = () => {
2323
<AuthInput
2424
text="이메일"
2525
type="text"
26+
name="email"
2627
placeholder="이메일을 입력해주세요."
2728
/>
2829
<AuthInput
2930
text="비밀번호"
3031
type="password"
32+
name="password"
3133
placeholder="비밀번호를 입력해주세요."
3234
/>
3335
<Button width="w-full" height="h-[53px]" className="mt-[30px]">

‎pages/signup.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import AuthInput from "@/components/Auth/AuthInput";
2+
import Button from "@/components/Button";
3+
import AuthLayout from "@/components/Layout/AuthLayout";
4+
import Link from "next/link";
5+
6+
const signup = () => {
7+
return (
8+
<AuthLayout>
9+
<p className="mt-[16px] text-base font-normal">
10+
이미 회원이신가요?{" "}
11+
<Link
12+
href="/login"
13+
className="cursor-pointer text-purple100 underline font-semibold"
14+
>
15+
로그인하기
16+
</Link>
17+
</p>
18+
<form
19+
className="w-full sm:max-w-[325px] md:max-w-[400px] mt-[30px]"
20+
aria-labelledby="login-form"
21+
>
22+
<AuthInput
23+
text="이메일"
24+
type="text"
25+
name="email"
26+
placeholder="이메일을 입력해주세요."
27+
/>
28+
<AuthInput
29+
text="이름"
30+
type="text"
31+
name="nickname"
32+
placeholder="이름을 입력해주세요."
33+
/>
34+
<AuthInput
35+
text="비밀번호"
36+
type="password"
37+
name="password"
38+
placeholder="비밀번호를 입력해주세요."
39+
/>
40+
<AuthInput
41+
text="비밀번호 확인"
42+
type="password"
43+
name="passwordConfirm"
44+
placeholder="비밀번호를 다시 입력해주세요."
45+
/>
46+
<Button width="w-full" height="h-[53px]" className="mt-[30px]">
47+
회원가입
48+
</Button>
49+
</form>
50+
</AuthLayout>
51+
);
52+
};
53+
54+
export default signup;

‎styles/globals.css‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,6 @@
1010
font-style: normal;
1111
}
1212

13-
:root {
14-
--background: #ffffff;
15-
--white200: #f5f5f5;
16-
--black100: #000;
17-
--black200: #111322;
18-
--black300: #373740;
19-
--red100: #ff5b56;
20-
--gray100: #f0f6ff;
21-
--gray200: #e7effb;
22-
--gray300: #ccd5e3;
23-
--gray400: #9fa6b2;
24-
--gray500: #3e3e43;
25-
--purple100: #6d6afe;
26-
}
27-
2813
body {
2914
color: var(--black100);
3015
background-color: var(--white100);

‎tailwind.config.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ const config: Config = {
99
theme: {
1010
extend: {
1111
colors: {
12-
background: "var(--background)",
13-
black100: "var(--black100)",
14-
black200: "var(--black200)",
15-
black300: "var(--black300)",
16-
red100: "var(--red100)",
17-
gray100: "var(--gray100)",
18-
gray200: "var(--gray200)",
19-
gray300: "var(--gray300)",
20-
gray400: "var(--gray400)",
21-
gray500: "var(--gray500)",
22-
purple100: "var(--purple100)",
23-
white200: "var(--white200)",
12+
background: "#ffffff",
13+
white200: "#f5f5f5",
14+
black100: "#000",
15+
black200: "#111322",
16+
black300: "#373740",
17+
red100: "#ff5b56",
18+
gray100: "#f0f6ff",
19+
gray200: "#e7effb",
20+
gray300: "#ccd5e3",
21+
gray400: "#9fa6b2",
22+
gray500: "#3e3e43",
23+
purple100: "#6d6afe",
2424
},
2525
screens: {
26-
sm: "375px",
26+
sm: "343px",
2727
md: "768px",
2828
lg: "1200px",
2929
},

0 commit comments

Comments
 (0)