Merge pull request #687 from YoungUnKim/Sprint10-김영운

[김영운] Sprint10

components/BestPost.tsx

@@ -1,4 +1,4 @@
-import axios from '@/utils/axio';
+import axios from '@/utils/axios';
 import { useEffect, useState } from 'react';
 import style from '@/styles/bestPost.module.css';
 import bestBadge from '@/public/icon/img_badge.svg';

package.json

@@ -13,6 +13,7 @@
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.5",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.23.1",
     "styled-components": "^6.1.11"

pages/404.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import IMG_NOTFOUND from '@/public/img-notfound.svg';
+import IMG_NOTFOUND from '@/public/icon/404.png';
 
 export default function NotFound() {
   return (

pages/addboard.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import styles from '@/styles/Addboard.module.css';
+import PlusIcon from '@/public/icon/ic_plus.svg';
+
+export interface IBoardValues {
+  title: string;
+  content: string;
+  imgFile: string | null;
+}
+
+export default function AddBoard() {
+  const [values, setValues] = useState<IBoardValues>({
+    title: '',
+    content: '',
+    imgFile: null,
+  });
+
+  function onChangeValues(e: React.ChangeEvent<HTMLInputElement>) {
+    const input = e.target.value;
+  }
+
+  return (
+    <div className={styles.BoardContainer}>
+      <form className={styles.AddContainer}>
+        <div className={styles.addTop}>
+          <h1 className={styles.addTopText}>게시글 쓰기</h1>
+          <button className={styles.button} type="submit">
+            등록
+          </button>
+        </div>
+        <div className={styles.postContainer}>
+          <div className={styles.inputTitleBox}>
+            <label htmlFor="title" className={styles.inputText}>
+              *제목
+            </label>
+            <input id="title" className={styles.TitleInput} type="text" placeholder="제목을 입력해주세요" />
+          </div>
+          <div className={styles.inputTextBox}>
+            <label htmlFor="text" className={styles.inputText}>
+              *내용
+            </label>
+            <textarea id="text" className={styles.TextInput} placeholder="내용을 입력해주세요"></textarea>
+          </div>
+          <div className={styles.inputTextBox}>
+            <label htmlFor="picture" className={styles.inputText}>
+              이미지
+            </label>
+            <div className={styles.image_button_area}>
+              <label htmlFor="picture">
+                <PlusIcon />
+                이미지 등록
+              </label>
+              <input id="picture" type="file" style={{ display: 'none' }} />
+              <div>
+                <button>X</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

pages/boards.tsx

@@ -6,7 +6,7 @@ import styles from '@/styles/Board.module.css';
 import LinkButton from '@/utils/Button';
 import Dropdown from '@/components/DropDown';
 import { useEffect, useState } from 'react';
-import axios from '@/utils/axio';
+import axios from '@/utils/axios';
 
 interface List {
   id: number;
@@ -89,7 +89,7 @@ export default function Board({ PostsData }: Props) {
       <div className={styles.posts}>
         <div className={styles.postsTop}>
           <span className={styles.bestTopText}>게시글</span>
-          <LinkButton href="/">글쓰기</LinkButton>
+          <LinkButton href="/addboard">글쓰기</LinkButton>
         </div>
         <div className={styles.postsMiddle}>
           <SearchInput value={searchTerm} onChange={handleSearchChange} />

styles/Addboard.module.css

@@ -0,0 +1,108 @@
+.BoardContainer {
+  max-width: 1200px;
+  min-width: 368px;
+  width: 100%;
+  padding: 0 34px;
+  margin: 0 auto;
+}
+
+.AddContainer {
+  margin-top: 24px;
+}
+
+.addTop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.addTopText {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 18px 0;
+}
+
+.postContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 767px;
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  gap: 12px;
+}
+
+.inputTitleBox {
+  display: flex;
+  flex-direction: column;
+  height: 89px;
+  gap: 12px;
+}
+
+.inputText {
+  font-size: 18px;
+  font-weight: 700;
+  text-align: left;
+}
+
+.inputTextBox {
+  display: flex;
+  flex-direction: column;
+  height: 315px;
+  gap: 12px;
+}
+
+.inputImageBox {
+  display: flex;
+  flex-direction: column;
+  height: 315px;
+  gap: 12px;
+}
+
+.TitleInput {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: #f3f4f6;
+  border-radius: 12px;
+  padding: 16px 24px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #9ca3af;
+}
+
+.TextInput {
+  width: 100%;
+  height: 282px;
+  padding: 16px 24px;
+  background-color: #f3f4f6;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 400;
+  text-decoration: none;
+  color: #9ca3af;
+}
+
+.image_button_area {
+  width: 282px;
+  height: 282px;
+}
+
+.button {
+  align-items: center;
+  background-color: #3692ff;
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  font-size: 16px;
+  font-weight: 600;
+  height: 42px;
+  justify-content: center;
+  min-width: 88px;
+  padding: 12px 23px;
+}