Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[박연학] sprint11 #325

Merged
merged 13 commits into from
Dec 10, 2024
Merged

[박연학] sprint11 #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5ea4f34
refactor: 페이지사이즈훅 타입 변경
1022gusl Dec 4, 2024
49874c1
refactor: 베스트포스트 컴포넌트에도 페이지사이즈 타입 적용
1022gusl Dec 4, 2024
01d03ab
refactor: allpost 컴포넌트 페이지네이션 컴포넌트 분리
1022gusl Dec 4, 2024
b398451
refactor: 코드 분리
1022gusl Dec 4, 2024
c56b691
feat: 주석 추가
1022gusl Dec 4, 2024
bbed81e
feat: 로그인페이지 임시 구현
1022gusl Dec 6, 2024
88b5231
feat: 로그인페이지 구현
1022gusl Dec 6, 2024
9db1793
feat: 회원가입 페이지 구현
1022gusl Dec 6, 2024
0d849cd
feat: 회원가입 post 구현
1022gusl Dec 6, 2024
d07e69d
feat: 로그인, 회원가입 post 구현
1022gusl Dec 6, 2024
1e0ca3d
feat: 기존 미션에 토큰 적용
1022gusl Dec 6, 2024
c7f66fa
refactor: 레이아웃 변경
1022gusl Dec 6, 2024
24a8a2b
feat: api 추가
1022gusl Dec 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions app/addboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,27 @@
import { useState } from "react";
import ImageUpload from "../components/ui/ImageUpload";
import InputField from "../components/ui/InputField";
import { addArticle } from "../lib/api/api";
import styles from "./AddBoard.module.css";

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

const isButtonDisabled = !title || !content;

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

return (
<div className="container">
Expand Down Expand Up @@ -50,7 +53,7 @@ export default function AddBoard() {
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<ImageUpload title="이미지" />
<ImageUpload title="이미지" onImageChange={(file) => setImage(file)} />
</div>
);
}
146 changes: 89 additions & 57 deletions app/beforemission/BeforeSprintReact/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,92 @@
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css">
<title>판다마켓-로그인</title>
<link rel="icon" href="images/logos/favicon.ico">
<link rel='stylesheet' href='style/global.css'>
<link rel='stylesheet' href='style/sign.css'>
</head>
<body>
<section id="login_home">
<div id="login_logo">
<a href="index.html">
<img src="images/logos/panda.png" alt="판다 로고">
</a>
</div>
<div class="info">
<form id="loginGeneral" method="post">
<div>
<label for="email">이메일</label>
<br>
<input id="email" name="email" placeholder="이메일을 입력해주세요" required>
<span id="emailEmptyError" class="form_error">이메일을 입력해 주세요</span>
<span id="emailInvalidError" class="form_error">잘못된 이메일 형식입니다</span>
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
as="style"
crossorigin=""
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
/>
<title>판다마켓-로그인</title>
<link rel="icon" href="images/logos/favicon.ico" />
<link rel="stylesheet" href="style/global.css" />
<link rel="stylesheet" href="style/sign.css" />
</head>
<body>
<section id="login_home">
<div id="login_logo">
<a href="index.html">
<img src="images/logos/panda.png" alt="판다 로고" />
</a>
</div>
<div class="info">
<form id="loginGeneral" method="post">
<div>
<label for="email">이메일</label>
<br />
<input
id="email"
name="email"
placeholder="이메일을 입력해주세요"
required
/>
<span id="emailEmptyError" class="form_error"
>이메일을 입력해 주세요</span
>
<span id="emailInvalidError" class="form_error"
>잘못된 이메일 형식입니다</span
>
</div>

<div class="password_label">
<label for="password">비밀번호</label>
<br>
<input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요" required>
<img class="see_blind" src="images/logos/see.png" alt="보이게">
<!--
<img class="see_blind" src="images/logos/blind.png" alt="안보이게">
차후에 적용
-->
<span id="passwordEmptyError" class="form_error">비밀번호를 입력해 주세요</span>
<span id="passwordInvalidError" class="form_error">비밀번호를 8자 이상 입력해주세요</span>
</div>
<button type="submit" id="login_button">로그인</button>
</form>
</div>
<div class="simple_login">
간편 로그인하기
<div class="social">
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
<img src="images/social/google.png" alt="구글"></a>
<a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer">
<img src="images/social/kakao.png" alt="카카오"></a>
</div>
</div>
<div class="signup">
판다마켓이 처음이신가요?
<a href="signup.html" id="signup_button"><span id="textdecoration_underline">회원가입</span></a>
</div>
</section>
<script src="sign.js"></script>
</body>
</html>
<div class="password_label">
<label for="password">비밀번호</label>
<br />
<input
id="password"
name="password"
type="password"
placeholder="비밀번호를 입력해주세요"
required
/>

<span id="passwordEmptyError" class="form_error"
>비밀번호를 입력해 주세요</span
>
<span id="passwordInvalidError" class="form_error"
>비밀번호를 8자 이상 입력해주세요</span
>
</div>
<button type="submit" id="login_button">로그인</button>
</form>
</div>
<div class="simple_login">
간편 로그인하기
<div class="social">
<a
href="https://www.google.com/"
target="_blank"
rel="noopener noreferrer"
>
<img src="images/social/google.png" alt="구글"
/></a>
<a
href="https://www.kakaocorp.com/page/"
target="_blank"
rel="noopener noreferrer"
>
<img src="images/social/kakao.png" alt="카카오"
/></a>
</div>
</div>
<div class="signup">
판다마켓이 처음이신가요?
<a href="signup.html" id="signup_button"
><span id="textdecoration_underline">회원가입</span></a
>
</div>
</section>
<script src="sign.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions app/boards/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export default function boards() {
<>
<BestPost />
<Suspense fallback={<div>로딩 중</div>}>
{/* 이 부분에 suspense를 감싼 이유가 빌드 할 때 오류가 뜨더라고요...?
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 그렇군요! 흠 이유가 궁금하네요🤔
우선 알겠습니다. 확인 감사해요~

멘토링 시간에 들었던 기억이 있어서 suspense가 어떤 역할인지는 알겠는데
오류를 해결하려면 suspense를 감싸달라고 해서 사용했습니다!
*/}
<AllPost />
</Suspense>
</>
Expand Down
23 changes: 23 additions & 0 deletions app/components/ConditionalLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
"use client";

import { usePathname } from "next/navigation";
import Header from "./layout/Header";

export default function ConditionalLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();

if (pathname === "/login" || pathname === "/signup") {
return <>{children}</>;
}

return (
<>
<Header />
{children}
</>
);
}
26 changes: 0 additions & 26 deletions app/components/boards/AllPost.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,29 +114,3 @@
line-height: 24px;
color: #4b5563;
}

.pagination {
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}

.paginationButton {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: #24242c;
border: none;
border-radius: 10px;
width: 30px;
height: 25px;
font-size: 16px;
}

.paginationButton:disabled {
cursor: not-allowed;
background-color: #d1d5db;
}
Loading
Loading