diff --git a/eslint.config.mjs b/eslint.config.mjs
index 61018bdac..b561853d4 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -2,9 +2,4 @@ import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-
-export default [
- {languageOptions: { globals: globals.browser }},
- pluginJs.configs.recommended,
- pluginReactConfig
-];
\ No newline at end of file
+export default [{ languageOptions: { globals: globals.browser } }, pluginJs.configs.recommended, pluginReactConfig];
diff --git a/next.config.js b/next.config.js
index b603f4551..87bb3b9b5 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,7 +8,7 @@ module.exports = {
protocol: "https",
hostname: "example.com",
port: "",
- pathname: "/**",
+ pathname: "/...",
},
{
protocol: "https",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7d5bbc4a8..2adc210ee 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,10 +1,11 @@
+import { AuthProvider } from "@/src/contexts/AuthProvider";
import type { AppProps } from "next/app";
import "src/styles/style.scss";
export default function MyApp({ Component, pageProps }: AppProps) {
return (
-
+
);
}
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index 873a71b57..41a6b6ceb 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -3,24 +3,23 @@
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import useAsync from "@/src/hooks/useAsync";
-import { createItems } from "@/src/api/api";
+import { createItems, postArticle, uploadImg } from "@/src/api/api";
import Input from "@/components/Input";
import Button from "@/components/Button/Button";
import Header from "@/components/Header";
+import { useAuth } from "@/src/contexts/AuthProvider";
-const INITIAL_VALUES = {
- name: null,
- description: null,
- images: null,
-};
-
-export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
+export default function AddBoardPage() {
+ const { user } = useAuth(true);
const [isLoading, loadingError, onSubmitAsync] = useAsync(createItems);
- const [isDisableSubmit, setIsDisableSubmit] = useState(true);
- const [values, setValues] = useState(initialValues);
+ const [values, setValues] = useState({
+ title: "",
+ content: "",
+ image: "",
+ });
const router = useRouter();
- const handleChange = (name: keyof typeof INITIAL_VALUES, value: string) => {
+ const handleChange = (name: string, value: string) => {
setValues((prevValues) => ({
...prevValues,
[name]: value,
@@ -29,31 +28,37 @@ export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
const handleInputChange = (e: React.ChangeEvent
) => {
const { name, value } = e.target;
- handleChange(name as keyof typeof INITIAL_VALUES, value);
+ handleChange(name, value);
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const formData = new FormData();
- formData.append("name", values.name || "");
- formData.append("description", values.description || "");
- formData.append("images", values.images || "");
+ formData.append("title", values.title);
+ formData.append("content", values.content);
+ if (values.image) {
+ const imgForm = new FormData();
+ imgForm.append("image", values.image);
- if (typeof onSubmitAsync !== "function") {
- console.error("onSubmitAsync is not a function");
- return;
+ const response = await uploadImg(imgForm);
+ if (!response) return;
+ formData.append("image", response);
}
- const result = await onSubmitAsync(formData);
- if (!result) return;
+ const jsonObject: { [key: string]: any } = {};
+ formData.forEach((value, key) => {
+ jsonObject[key] = value;
+ });
- router.push("/items");
- };
+ const response = await postArticle(jsonObject);
+ if (!response) return;
- useEffect(() => {
- setIsDisableSubmit(Object.values(values).every((el: any) => el !== "" && el !== null && el.length !== 0));
- }, [values]);
+ router.push(`/boards/${response.id}`);
+ };
+ if (!user) {
+ return null;
+ }
return (
<>
@@ -62,7 +67,7 @@ export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
@@ -73,7 +78,7 @@ export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
제목
-
+
@@ -82,11 +87,11 @@ export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
내용
-
+
diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
index 32e38c59a..4fd9bfd9d 100644
--- a/pages/boards/[id].tsx
+++ b/pages/boards/[id].tsx
@@ -7,10 +7,13 @@ import Header from "@/components/Header";
import icoKebab from "@/src/img/ic_kebab.svg";
import icoBack from "@/src/img/ic_back.svg";
import { GetServerSidePropsContext } from "next";
-import { getArticleComments, getArticleDetail } from "@/src/api/api";
+import { deleteLike, getArticleComments, getArticleDetail, postArticleComment, postLike } from "@/src/api/api";
import WriterInfo from "@/components/WriterInfo";
import icoHeart from "@/src/img/ic_heart.svg";
-import { ChangeEvent, useRef, useState } from "react";
+import icoHeartOn from "@/src/img/ic_heart_on.svg";
+import { ChangeEvent, FormEvent, FormEventHandler, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import ImgReplyEmpty from "@/src/img/Img_reply_empty.png";
export async function getServerSideProps(context: GetServerSidePropsContext) {
const { id } = context.query;
@@ -35,10 +38,38 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
}
export default function ItemDetailPage({ article, comments }: { article: any; comments: any }) {
- const [isCommentDisabled, setIsCommentDisabled] = useState(true);
+ const [like, setLike] = useState(false);
+ // TODO: isLiked API 추가 가능한지 문의함
+ const [likeTotal, setLikeTotal] = useState(article.likeCount);
+ const [comment, setComment] = useState("");
+ const router = useRouter();
+
const handleChange = (e: ChangeEvent) => {
- setIsCommentDisabled(e.target.value === "" ? true : false);
+ setComment(e.target.value);
};
+
+ const handleLike = async(e:ChangeEvent) => {
+ if(e.target.checked) {
+ await postLike(article.id);
+ setLikeTotal((prevNum) => prevNum + 1);
+ setLike(true);
+ } else {
+ await deleteLike(article.id);
+ setLikeTotal((prevNum) => prevNum - 1);
+ setLike(false);
+ }
+ }
+
+ const handleReplySubmit = async(e:FormEvent) => {
+ e.preventDefault();
+
+ const response = await postArticleComment(article.id, {content: comment});
+ if(!response) return;
+
+ setComment("");
+ router.reload();
+ }
+
return (
<>
@@ -61,8 +92,11 @@ export default function ItemDetailPage({ article, comments }: { article: any; co
-
- {article.likeCount}
+
+
+ {likeTotal}
@@ -81,18 +115,26 @@ export default function ItemDetailPage({ article, comments }: { article: any; co
-
+
+ {comments.length === 0 &&
+
+
+
아직 댓글이 없어요.
+
지금 댓글을 달아보세요!
+
-
+
diff --git a/pages/items/index.tsx b/pages/items/index.tsx
index 6c42b07c5..57c40cc7b 100644
--- a/pages/items/index.tsx
+++ b/pages/items/index.tsx
@@ -6,6 +6,8 @@ import useResponsive from "@/src/hooks/useResponsive";
import ItemList from "@/components/ItemList";
import Input from "@/components/Input";
import Header from "@/components/Header";
+import ImgProductEmpty from "@/src/img/Img_product_empty.png";
+
export default function Page() {
const [isPC, isTablet, isMobile] = useResponsive();
diff --git a/pages/join.tsx b/pages/join.tsx
index cf908d9e4..a16cffe1b 100644
--- a/pages/join.tsx
+++ b/pages/join.tsx
@@ -1,11 +1,14 @@
"use client";
import Image from "next/image";
-import { ChangeEvent, useRef, ReactElement, ReactNode, useEffect, useState } from "react";
+import { ChangeEvent, useRef, ReactElement, ReactNode, useEffect, useState, FormEvent } from "react";
import Input from "@/components/Input";
import Button from "@/components/Button/Button";
import LogoImg from "@/src/img/logo-big.png";
import IcoGoogle from "@/src/img/ic_google.svg";
import IcoKakao from "@/src/img/ic_kakao.svg";
+import { join } from "@/src/api/api";
+import { useRouter } from "next/router";
+import { useAuth } from "@/src/contexts/AuthProvider";
export default function JoinPage() {
const [isEmailInvalid, setIsEmailInvalid] = useState
(null);
@@ -16,6 +19,8 @@ export default function JoinPage() {
const [isFormInvalid, setIsFormInvalid] = useState(true);
const inputPW = useRef();
const inputRePW = useRef();
+ const router = useRouter();
+ const { user } = useAuth(false);
const handleChange = (e: ChangeEvent) => {
switch (e.target.type) {
@@ -37,6 +42,23 @@ export default function JoinPage() {
break;
}
};
+
+ const handleSubmit = async (e: FormEvent) => {
+ e.preventDefault();
+ const formData = new FormData(e.currentTarget);
+ const jsonObject: { [key: string]: any } = {};
+ formData.forEach((value, key) => {
+ jsonObject[key] = value;
+ });
+
+ const result = await join(jsonObject);
+
+ if (!result) return;
+ else {
+ router.push("/signin");
+ }
+ };
+
useEffect(() => {
if (isEmailInvalid !== null && isPasswordInvalid !== null && isPasswordInvalid !== null && isRePasswordInvalid !== null && isNameInvalid !== null && isPasswordNotSame !== null) {
setIsFormInvalid(isEmailInvalid || isPasswordInvalid || isRePasswordInvalid || isNameInvalid || isPasswordNotSame);
@@ -54,7 +76,7 @@ export default function JoinPage() {
@@ -87,7 +109,7 @@ export default function JoinPage() {
비밀번호 확인
-
+
{isPasswordNotSame && 비밀번호가 일치하지 않습니다.
}
@@ -33,7 +53,7 @@ export default function SignInPage() {
+