Skip to content

Commit ee6e726

Browse files
hongggyelimhongggyelim
committed
Merge branch 'develop' into feature/modalstore/link
2 parents 35c5f33 + cd7ae79 commit ee6e726

File tree

11 files changed

+201
-38
lines changed

11 files changed

+201
-38
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/FolderTag.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface FolderData {
2+
id: number;
3+
createdAt: string;
4+
name: string;
5+
linkCount: number;
6+
}
7+
8+
const FolderTag = (list: FolderData[]) => {
9+
const folderStyle = "py-[8px] px-[12px] border border-purple-100 rounded-md";
10+
11+
return (
12+
<div className="flex flex-wrap gap-[8px]">
13+
<div className={folderStyle}>전체</div>
14+
{list.map((folder) => (
15+
<div key={folder.id} className={folderStyle}>
16+
{folder.name}
17+
</div>
18+
))}
19+
</div>
20+
);
21+
};
22+
23+
export default FolderTag;

‎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>

‎components/Link/AddLinkInput.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { ChangeEvent, FormEvent, useState } from "react";
2+
import { postLink } from "@/lib/api/link";
3+
import Image from "next/image";
4+
import Button from "../Button";
5+
6+
const AddLinkInput = (folderId: number) => {
7+
const [value, setValue] = useState("");
8+
9+
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
10+
setValue(e.target.value);
11+
};
12+
13+
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
14+
e.preventDefault();
15+
await postLink({ url: value, folderId });
16+
// postLink 하고 추가된 link가 보이도록 하는 로직 구현해야 함.
17+
};
18+
19+
return (
20+
<form
21+
onSubmit={handleSubmit}
22+
className="flex gap-[12px] items-center w-[800px] h-[69px] py-[16px] px-[20px] border border-blue-500 rounded-[10px] md:w-[704px] sm:w-[325px] sm:h-[53px] transition-all"
23+
>
24+
<Image src="/icons/link.svg" width={20} height={20} alt="link icon" />
25+
<input
26+
onChange={handleChange}
27+
value={value}
28+
placeholder="링크를 추가해 보세요."
29+
className="flex-grow"
30+
/>
31+
<Button color="positive" className="w-[80px] h-[37px]">
32+
추가하기
33+
</Button>
34+
</form>
35+
);
36+
};
37+
38+
export default AddLinkInput;

components/CardItem.tsx renamed to components/LinkCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface linkDataType {
1212
createdAt: string;
1313
}
1414

15-
const CardItem = (info: linkDataType) => {
15+
const LinkCard = (info: linkDataType) => {
1616
const [isSubscribed, seIsSubscribed] = useState(false);
1717
const [isOpen, setIsOpen] = useState(false);
1818

@@ -78,4 +78,4 @@ const CardItem = (info: linkDataType) => {
7878
);
7979
};
8080

81-
export default CardItem;
81+
export default LinkCard;

‎components/Search/SearchInput.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { ChangeEvent, FormEvent, useState } from "react";
2+
import { useRouter } from "next/router";
3+
import Image from "next/image";
4+
5+
export const SearchInput = () => {
6+
const router = useRouter();
7+
const [value, setValue] = useState("");
8+
9+
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
10+
setValue(e.target.value);
11+
};
12+
13+
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
14+
e.preventDefault();
15+
router.push({
16+
pathname: router.pathname,
17+
query: { ...router.query, search: value },
18+
});
19+
};
20+
21+
return (
22+
<form
23+
onSubmit={handleSubmit}
24+
className="flex gap-[8px] w-[1024px] h-[54px] items-center px-[16px] py-[15px] bg-gray-100 rounded-[10px] md:w-[704px] md:h-[54px] sm:w-[325px] sm:h-[43px] transition-all"
25+
>
26+
<Image
27+
src="/icons/search.svg"
28+
width={16}
29+
height={16}
30+
alt="search button"
31+
/>
32+
<input
33+
value={value}
34+
onChange={handleChange}
35+
placeholder="링크를 검색해 보세요."
36+
className="flex-grow bg-transparent placeholder:text-gray-500"
37+
/>
38+
</form>
39+
);
40+
};
41+
42+
export default SearchInput;

‎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;

‎public/icons/search.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎styles/globals.css‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,11 @@
44

55
@font-face {
66
font-family: "Pretendard-Regular";
7-
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
8-
format("woff");
7+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff") format("woff");
98
font-weight: 400;
109
font-style: normal;
1110
}
1211

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-
2812
body {
2913
color: var(--black100);
3014
background-color: var(--white100);
@@ -51,3 +35,7 @@ button {
5135
cursor: pointer;
5236
font-family: inherit;
5337
}
38+
39+
input {
40+
outline: none;
41+
}

0 commit comments

Comments
 (0)