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.

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

[나지원] sprint10 #128

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
39 changes: 39 additions & 0 deletions components/addboard/AddBoardForm.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.form {
display: flex;
flex-direction: column;
gap: 16px;
}

.header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}

.header h2 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5rem;
color: var(--gray800);
}

.button {
line-height: 1.625rem;
padding: 8px 23px;
}

.input {
gap: 12px;
}

@media screen and (min-width: 768px) {
.form {
gap: 24px;
}
}

@media screen and (min-width: 1200px) {
.header h2 {
line-height: 2rem;
}
}
131 changes: 131 additions & 0 deletions components/addboard/AddBoardForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import { ChangeEvent, useState, useEffect, MouseEvent } from "react";
import { useRouter } from "next/router";
import FileInput from "../ui/FileInput";
import Input from "../ui/Input";
import Textarea from "../ui/Textarea";
import Button from "../ui/Button";
import { fetchData } from "@/lib/fetchData";
import { ARTICLE_URL, IMAGE_URL } from "@/constants/url";
import { useAuth } from "@/contexts/AuthProvider";
import styles from "./AddBoardForm.module.css";

interface Board {
imgFile: File | null;
title: string;
content: string;
}

type BoardField = keyof Board;

const INITIAL_BOARD: Board = {
imgFile: null,
title: "",
content: "",
};

const AddBoardForm = () => {
const [isDisabled, setIsDisabled] = useState(true);
const [values, setValues] = useState<Board>(INITIAL_BOARD);
const { accessToken } = useAuth();
const router = useRouter();

const handleChange = (name: BoardField, value: Board[BoardField]): void => {
setValues((prevValues) => {
return {
...prevValues,
[name]: value,
};
});
};

const handleInputChange = (
e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
) => {
const { name, value } = e.target;
handleChange(name as BoardField, value);
};

const handleSubmit = async (
e: MouseEvent<HTMLButtonElement>
): Promise<void> => {
e.preventDefault();

const { imgFile, ...otherValues } = values;
let url = null;

if (imgFile) {
const formData = new FormData();
formData.append("image", imgFile);

const response = await fetchData(IMAGE_URL, {
method: "POST",
headers: {
Authorization: `Bearer ${accessToken}`,
},
body: formData,
});
url = response.url;
}

const { id } = await fetchData(ARTICLE_URL, {
method: "POST",
headers: {
Authorization: `Bearer ${accessToken}`,
},
body: url ? { image: url, ...otherValues } : { ...otherValues },
});
router.push(`/board/${id}`);
};

const checkFormEmpty = (values: Board): boolean => {
const { title, content } = values;

return !title || !content;
};

useEffect(() => {
setIsDisabled(checkFormEmpty(values));
}, [values]);

return (
<form className={styles.form}>
<div className={styles.header}>
<h2>게시글 쓰기</h2>
<Button
type="submit"
className={styles.button}
disabled={isDisabled}
onClick={handleSubmit}
>
등록
</Button>
</div>
<Input
className={styles.input}
type="text"
name="title"
label="*제목"
placeholder="제목을 입력해주세요"
value={values.title}
onChange={handleInputChange}
/>
<Textarea
className={styles.input}
label="*내용"
name="content"
placeholder="내용을 입력해주세요"
value={values.content}
onChange={handleInputChange}
/>
<FileInput
className={styles.input}
label="이미지"
name="imgFile"
value={values.imgFile}
onChange={handleChange}
/>
</form>
);
};

export default AddBoardForm;
45 changes: 45 additions & 0 deletions components/board/AddCommentForm.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
.form {
margin-bottom: 24px;
}

.textarea > textarea {
font-size: 0.875rem;
line-height: 1.5rem;
height: 104px;
}

.textarea > label {
font-size: 1rem;
font-weight: 600;
line-height: 1.625rem;
color: var(--gary800);
}

.button {
display: block;
margin-left: auto;
padding: 8px 23px;
line-height: 1.625rem;
margin-top: 16px;
}

@media screen and (min-width: 768px) {
.form {
margin-bottom: 32px;
}

.textarea {
gap: 9px;
}

.textarea > textarea {
font-size: 1rem;
line-height: 1.625rem;
}
}

@media screen and (min-width: 1200px) {
.form {
margin-bottom: 40px;
}
}
37 changes: 37 additions & 0 deletions components/board/AddCommentForm.tsx
najitwo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { ChangeEvent, FormEvent, useState } from "react";
import styles from "./AddCommentForm.module.css";
import Textarea from "../ui/Textarea";
import Button from "../ui/Button";

interface AddCommentFormProps {
value: string;
onChange: (value: string) => void;
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
}

const AddCommentForm = ({ value, onChange, onSubmit }: AddCommentFormProps) => {
const [isDisabled, setIsDisabled] = useState(true);

const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
setIsDisabled(!e.target.value);
onChange(e.target.value);
};

return (
<form className={styles.form} onSubmit={onSubmit}>
<Textarea
className={styles.textarea}
name="addComment"
label="댓글달기"
placeholder="댓글을 입력해주세요."
onChange={handleTextareaChange}
value={value}
/>
<Button className={styles.button} type="submit" disabled={isDisabled}>
등록
</Button>
</form>
);
};

export default AddCommentForm;
101 changes: 101 additions & 0 deletions components/board/BoardDetail.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
.wrapper {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}

.wrapper p {
font-size: 1rem;
font-weight: 400;
line-height: 1.625rem;
color: var(--gray800);
}

.header {
display: flex;
justify-content: space-between;
}

.header h2 {
font-size: 1.25rem;
font-weight: 700;
line-height: 2rem;
color: var(--gray800);
}

.icon {
width: 24px;
height: 24px;
cursor: pointer;
}

.info {
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid var(--gray200);
padding-bottom: 16px;
}

.authorInfo {
gap: 16px;
}

.authorInfo > div {
gap: 2px;
}

.authorInfo span {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.5rem;
}

.authorInfo time {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5rem;
}

.heartButtonContainer {
border-left: 1px solid var(--gray200);
padding-left: 16px;
}

@media screen and (min-width: 768px) {
.wrapper {
margin-bottom: 40px;
}

.info {
gap: 32px;
}

.heartButtonContainer {
padding-left: 32px;
}

.heartButton img {
width: 32px;
height: 32px;
}

.authorInfo > div {
gap: 8px;
}
}

@media screen and (min-width: 1200px) {
.wrapper {
margin-bottom: 32px;
}

.wrapper p {
font-size: 1.125rem;
}

.info {
margin-bottom: 8px;
}
}
41 changes: 41 additions & 0 deletions components/board/BoardDetail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { ArticleProps } from "@/types/articleTypes";
import styles from "./BoardDetail.module.css";
import kebabIcon from "@/public/ic_kebab.svg";
import Image from "next/image";
import AuthorInfo from "../ui/AuthorInfo";
import { formatDate } from "@/lib/formatDate";
import HeartButton from "../ui/HeartButton";
import Container from "../layout/Container";

const BoardDetail = ({
title,
content,
createdAt,
likeCount,
writer,
}: ArticleProps) => {
return (
<section className={styles.wrapper}>
<div className={styles.header}>
<h2>{title}</h2>
<Image src={kebabIcon} alt="게시글 메뉴 버튼" className={styles.icon} />
</div>
<div className={styles.info}>
<AuthorInfo
nickname={writer.nickname}
date={formatDate(createdAt)}
className={styles.authorInfo}
/>
<Container className={styles.heartButtonContainer}>
<HeartButton
favoriteCount={likeCount}
className={styles.heartButton}
/>
</Container>
</div>
<p>{content}</p>
</section>
);
};

export default BoardDetail;
Loading
Loading