[남기연] sprint10

next/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@netlify/plugin-nextjs": "^5.9.3",
+    "clsx": "^2.1.1",
     "next": "15.1.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

next/src/components/Input.module.css

@@ -5,6 +5,9 @@
   border: none;
   border-radius: 12px;
   background-color: #f3f4f6;
+}
+
+.inputWithSearch {
   background-image: url("/images/ic_search.svg");
   background-repeat: no-repeat;
   background-position: 16px center;

next/src/components/Input.tsx

@@ -1,30 +1,45 @@
 import styles from "./Input.module.css";
+import clsx from "clsx";
 
 type InputProps = {
+  name?: string;
   value: string;
   placeholder: string;
-  onChange: (value: string) => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onEnter?: () => void;
+  withSearch?: boolean;
+  className?: string;
 };
 
 export default function Input({
+  name,
   value,
   placeholder,
   onChange,
   onEnter,
+  withSearch,
+  className,
+  ...rest
 }: InputProps) {
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && onEnter) {
       onEnter();
     }
   };
+
+  const inputClassName = clsx(styles.input, className, {
+    [styles["inputWithSearch"]]: withSearch,
+  });
+
   return (
     <input
-      className={styles.input}
+      name={name}
+      className={inputClassName}
       value={value}
       placeholder={placeholder}
-      onChange={(e) => onChange(e.target.value)}
+      onChange={onChange}
       onKeyDown={handleKeyDown}
+      {...rest}
     />
   );
 }

next/src/components/MainHeader.module.css

@@ -6,7 +6,7 @@
   padding: 0px 200px;
   border-bottom: 1px solid #dfdfdf;
 
-  @media (max-width: 768px) {
+  @media (max-width: 1024px) {
     padding: 0px 24px;
   }
 }

next/src/lib/create-articles.ts

@@ -0,0 +1,18 @@
+import { baseURL } from "@/constants";
+
+export default async function createArticles(formData: FormData) {
+  console.log(baseURL);
+  try {
+    const response = await fetch(`${baseURL}/articles`, {
+      method: "POST",
+      body: formData,
+    });
+    if (!response.ok) {
+      throw new Error("articles를 생성하는데 실패했습니다.");
+    }
+    const result = await response.json();
+    console.log("Success:", result);
+  } catch (error) {
+    console.error("게시글 생성 실패", error);
+  }
+}

next/src/lib/create-comment.ts

@@ -0,0 +1,25 @@
+import { baseURL } from "@/constants";
+
+export default async function createComment(
+  articleId: number,
+  comment: string
+) {
+  try {
+    const response = await fetch(`${baseURL}/articles/${articleId}/comments`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        comment,
+      }),
+    });
+    if (!response.ok) {
+      throw new Error("comment를 생성하는데 실패했습니다.");
+    }
+    const result = await response.json();
+    console.log("Success 댓글:", result);
+  } catch (error) {
+    console.error("댓글 생성 실패", error);
+  }
+}

next/src/lib/get-article.ts

@@ -0,0 +1,17 @@
+import { baseURL } from "@/constants";
+import { Article } from "@/types";
+
+export default async function getArticle(articleId: number): Promise<Article> {
+  const url = `${baseURL}/articles/${articleId}`;
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch, ${response.statusText}`);
+    }
+    const data: Article = await response.json();
+    return data;
+  } catch (err) {
+    throw new Error(`FetchPost Error: ${(err as Error).message}`);
+  }
+}

next/src/lib/fetch-posts.ts → next/src/lib/get-articles.ts

@@ -1,7 +1,7 @@
 import { baseURL } from "@/constants";
 import { Post, Posts } from "../types";
 
-export default async function fetchPosts({
+export default async function getArticles({
   page = "1",
   pageSize = 3,
   orderBy = "recent",
@@ -20,7 +20,7 @@ export default async function fetchPosts({
     if (!response.ok) {
       throw new Error(`Failed to fetch, ${response.statusText}`);
     }
-    const data: Posts = await response.json();
+    const data: Posts<Post> = await response.json();
     return data.list;
   } catch (err) {
     throw new Error(`FetchPosts Error: ${(err as Error).message}`);

next/src/lib/get-comments.ts

@@ -0,0 +1,24 @@
+import { baseURL } from "@/constants";
+import { Comments, Comment } from "@/types";
+
+export default async function getComments(
+  articleId: number,
+  limit: number = 3
+): Promise<Comment[]> {
+  const params = new URLSearchParams({
+    limit: String(limit),
+  });
+
+  try {
+    const response = await fetch(
+      `${baseURL}/articles/${articleId}/comments?${params.toString()}`
+    );
+    if (!response.ok) {
+      throw new Error(`Failed to fetch, ${response.statusText}`);
+    }
+    const data: Comments<Comment> = await response.json();
+    return data.list;
+  } catch (err) {
+    throw new Error(`FetchComments Error: ${(err as Error).message}`);
+  }
+}

next/src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app";
-import "@/src/styles/globals.css";
+import "@/styles/globals.css";
 import Head from "next/head";
+import MainHeader from "@/components/MainHeader";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -9,6 +10,7 @@ export default function App({ Component, pageProps }: AppProps) {
         <title>판다마켓</title>
         <link rel="icon" href="/images/favicon.svg" />
       </Head>
+      <MainHeader />
       <Component {...pageProps} />
     </>
   );

next/src/pages/addboard/components/ContentSection.module.css

@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 18px;
+  color: #1f2937;
+}
+
+.textarea {
+  border: none;
+  border-radius: 12px;
+  padding: 16px 24px;
+  font-size: 16px;
+  background-color: #f3f4f6;
+}

next/src/pages/addboard/components/ContentSection.tsx

@@ -0,0 +1,24 @@
+import styles from "./ContentSection.module.css";
+
+type ContentSectionProps = {
+  content: string;
+  setContent: (value: string) => void;
+};
+
+export default function ContentSection({
+  content,
+  setContent,
+}: ContentSectionProps) {
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>*내용</h2>
+      <textarea
+        value={content}
+        className={styles.textarea}
+        rows={13}
+        placeholder="내용을 입력해주세요"
+        onChange={(e) => setContent(e.target.value)}
+      />
+    </div>
+  );
+}

next/src/pages/addboard/components/FormSection.module.css

@@ -0,0 +1,5 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}

next/src/pages/addboard/components/FormSection.tsx

@@ -0,0 +1,14 @@
+import styles from "./FormSection.module.css";
+import ContentSection from "./ContentSection";
+import ImageSection from "./ImageSection";
+import TitleSection from "./TitleSection";
+
+export default function FormSection() {
+  return (
+    <form action="" className={styles.form}>
+      <TitleSection />
+      <ContentSection />
+      <ImageSection />
+    </form>
+  );
+}

next/src/pages/addboard/components/ImageSection.module.css

@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 18px;
+  color: #1f2937;
+}
+
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+  background-color: #f3f4f6;
+  cursor: pointer;
+}
+
+.labelContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.imageContainer {
+  position: relative;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+.delete:hover{
+
+}
+
+.span {
+  font-weight: 400;
+  font-size: 16px;
+  color: #9ca3af;
+}
+
+.input {
+  display: none;
+}