Skip to content

Commit c7816d7

Browse files
baeggminbaeggmin
authored
Merge pull request #325 from 1022gusl/Next-박연학-sprint11
[박연학] sprint11
2 parents f8e3e92 + 24a8a2b commit c7816d7

File tree

28 files changed

+993
-186
lines changed

28 files changed

+993
-186
lines changed

‎app/addboard/page.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,27 @@
33
import { useState } from "react";
44
import ImageUpload from "../components/ui/ImageUpload";
55
import InputField from "../components/ui/InputField";
6+
import { addArticle } from "../lib/api/api";
67
import styles from "./AddBoard.module.css";
78

89
export default function AddBoard() {
910
const [title, setTitle] = useState("");
1011
const [content, setContent] = useState("");
12+
const [image, setImage] = useState<File | null>(null);
1113

1214
const isButtonDisabled = !title || !content;
1315

14-
const handleSubmit = () => {
15-
alert("등록했습니다!");
16-
setTitle("");
17-
setContent("");
16+
const handleSubmit = async () => {
17+
try {
18+
await addArticle(title, content, image);
19+
alert("게시물이 성공적으로 등록되었습니다!");
20+
setTitle("");
21+
setContent("");
22+
setImage(null);
23+
} catch (error: any) {
24+
alert(error.message || "게시물 등록 중 오류가 발생했습니다.");
25+
}
1826
};
19-
/*심화 요구사항에 회원가입, 로그인 api를 사용하여 받은 accessToken을 사용하여 게시물 등록을 합니다가 있는데
20-
어떻게 해야 할 지 감이 안 잡힙니다...
21-
로그인 기능을 추가해야 하나요? 아니면 백엔드 서버에서 받아와야 하는건가요?
22-
일단 등록버튼을 클릭하면 인풋필드를 비우고 등록했다는 내용을 화면에 표시되도록 했습니다
23-
*/
2427

2528
return (
2629
<div className="container">
@@ -50,7 +53,7 @@ export default function AddBoard() {
5053
value={content}
5154
onChange={(e) => setContent(e.target.value)}
5255
/>
53-
<ImageUpload title="이미지" />
56+
<ImageUpload title="이미지" onImageChange={(file) => setImage(file)} />
5457
</div>
5558
);
5659
}

‎app/beforemission/BeforeSprintReact/login.html‎

Lines changed: 89 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,92 @@
11
<!DOCTYPE html>
22
<html lang="kr">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
7-
<title>판다마켓-로그인</title>
8-
<link rel="icon" href="images/logos/favicon.ico">
9-
<link rel='stylesheet' href='style/global.css'>
10-
<link rel='stylesheet' href='style/sign.css'>
11-
</head>
12-
<body>
13-
<section id="login_home">
14-
<div id="login_logo">
15-
<a href="index.html">
16-
<img src="images/logos/panda.png" alt="판다 로고">
17-
</a>
18-
</div>
19-
<div class="info">
20-
<form id="loginGeneral" method="post">
21-
<div>
22-
<label for="email">이메일</label>
23-
<br>
24-
<input id="email" name="email" placeholder="이메일을 입력해주세요" required>
25-
<span id="emailEmptyError" class="form_error">이메일을 입력해 주세요</span>
26-
<span id="emailInvalidError" class="form_error">잘못된 이메일 형식입니다</span>
27-
</div>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
as="style"
9+
crossorigin=""
10+
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
11+
/>
12+
<title>판다마켓-로그인</title>
13+
<link rel="icon" href="images/logos/favicon.ico" />
14+
<link rel="stylesheet" href="style/global.css" />
15+
<link rel="stylesheet" href="style/sign.css" />
16+
</head>
17+
<body>
18+
<section id="login_home">
19+
<div id="login_logo">
20+
<a href="index.html">
21+
<img src="images/logos/panda.png" alt="판다 로고" />
22+
</a>
23+
</div>
24+
<div class="info">
25+
<form id="loginGeneral" method="post">
26+
<div>
27+
<label for="email">이메일</label>
28+
<br />
29+
<input
30+
id="email"
31+
name="email"
32+
placeholder="이메일을 입력해주세요"
33+
required
34+
/>
35+
<span id="emailEmptyError" class="form_error"
36+
>이메일을 입력해 주세요</span
37+
>
38+
<span id="emailInvalidError" class="form_error"
39+
>잘못된 이메일 형식입니다</span
40+
>
41+
</div>
2842

29-
<div class="password_label">
30-
<label for="password">비밀번호</label>
31-
<br>
32-
<input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요" required>
33-
<img class="see_blind" src="images/logos/see.png" alt="보이게">
34-
<!--
35-
<img class="see_blind" src="images/logos/blind.png" alt="안보이게">
36-
차후에 적용
37-
-->
38-
<span id="passwordEmptyError" class="form_error">비밀번호를 입력해 주세요</span>
39-
<span id="passwordInvalidError" class="form_error">비밀번호를 8자 이상 입력해주세요</span>
40-
</div>
41-
<button type="submit" id="login_button">로그인</button>
42-
</form>
43-
</div>
44-
<div class="simple_login">
45-
간편 로그인하기
46-
<div class="social">
47-
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
48-
<img src="images/social/google.png" alt="구글"></a>
49-
<a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer">
50-
<img src="images/social/kakao.png" alt="카카오"></a>
51-
</div>
52-
</div>
53-
<div class="signup">
54-
판다마켓이 처음이신가요?
55-
<a href="signup.html" id="signup_button"><span id="textdecoration_underline">회원가입</span></a>
56-
</div>
57-
</section>
58-
<script src="sign.js"></script>
59-
</body>
60-
</html>
43+
<div class="password_label">
44+
<label for="password">비밀번호</label>
45+
<br />
46+
<input
47+
id="password"
48+
name="password"
49+
type="password"
50+
placeholder="비밀번호를 입력해주세요"
51+
required
52+
/>
53+
54+
<span id="passwordEmptyError" class="form_error"
55+
>비밀번호를 입력해 주세요</span
56+
>
57+
<span id="passwordInvalidError" class="form_error"
58+
>비밀번호를 8자 이상 입력해주세요</span
59+
>
60+
</div>
61+
<button type="submit" id="login_button">로그인</button>
62+
</form>
63+
</div>
64+
<div class="simple_login">
65+
간편 로그인하기
66+
<div class="social">
67+
<a
68+
href="https://www.google.com/"
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
>
72+
<img src="images/social/google.png" alt="구글"
73+
/></a>
74+
<a
75+
href="https://www.kakaocorp.com/page/"
76+
target="_blank"
77+
rel="noopener noreferrer"
78+
>
79+
<img src="images/social/kakao.png" alt="카카오"
80+
/></a>
81+
</div>
82+
</div>
83+
<div class="signup">
84+
판다마켓이 처음이신가요?
85+
<a href="signup.html" id="signup_button"
86+
><span id="textdecoration_underline">회원가입</span></a
87+
>
88+
</div>
89+
</section>
90+
<script src="sign.js"></script>
91+
</body>
92+
</html>

‎app/boards/page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ export default function boards() {
77
<>
88
<BestPost />
99
<Suspense fallback={<div>로딩 중</div>}>
10+
{/* 이 부분에 suspense를 감싼 이유가 빌드 할 때 오류가 뜨더라고요...?
11+
멘토링 시간에 들었던 기억이 있어서 suspense가 어떤 역할인지는 알겠는데
12+
오류를 해결하려면 suspense를 감싸달라고 해서 사용했습니다!
13+
*/}
1014
<AllPost />
1115
</Suspense>
1216
</>

‎app/components/ConditionalLayout.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use client";
2+
3+
import { usePathname } from "next/navigation";
4+
import Header from "./layout/Header";
5+
6+
export default function ConditionalLayout({
7+
children,
8+
}: {
9+
children: React.ReactNode;
10+
}) {
11+
const pathname = usePathname();
12+
13+
if (pathname === "/login" || pathname === "/signup") {
14+
return <>{children}</>;
15+
}
16+
17+
return (
18+
<>
19+
<Header />
20+
{children}
21+
</>
22+
);
23+
}

‎app/components/boards/AllPost.module.css‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -114,29 +114,3 @@
114114
line-height: 24px;
115115
color: #4b5563;
116116
}
117-
118-
.pagination {
119-
margin-bottom: 10px;
120-
display: flex;
121-
justify-content: center;
122-
align-items: center;
123-
gap: 15px;
124-
}
125-
126-
.paginationButton {
127-
display: flex;
128-
justify-content: center;
129-
align-items: center;
130-
cursor: pointer;
131-
background-color: #24242c;
132-
border: none;
133-
border-radius: 10px;
134-
width: 30px;
135-
height: 25px;
136-
font-size: 16px;
137-
}
138-
139-
.paginationButton:disabled {
140-
cursor: not-allowed;
141-
background-color: #d1d5db;
142-
}

0 commit comments

Comments
 (0)