From 7ce025e43993164bb1283e41c9b51279c6f1971b Mon Sep 17 00:00:00 2001
From: haksoo <haksoo0918@gmail.com>
Date: Tue, 17 Dec 2024 10:45:15 +0900
Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=8C=B1=20=EA=B2=8C=EC=8B=9C=EA=B8=80?=
 =?UTF-8?q?=20=EC=9E=91=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_app.tsx     |  6 +++---
 pages/addboard.tsx | 10 ++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 pages/addboard.tsx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 6fa9382..48411d4 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,13 +1,13 @@
 import type { AppProps } from 'next/app';
 
-import DarkModeToggle from '@/components/DarkmodeToggle';
-
+// TODO - 나중에 주석 풀어야 함
+// import DarkModeToggle from '@/components/DarkmodeToggle';
 import '@/styles/globals.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
-      <DarkModeToggle />
+      {/* <DarkModeToggle /> */}
       <Component {...pageProps} />
     </>
   );
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
new file mode 100644
index 0000000..3b56faf
--- /dev/null
+++ b/pages/addboard.tsx
@@ -0,0 +1,10 @@
+export default function Addboard() {
+  return (
+    <div className="min-h-svh">
+      <header>gnb</header>
+      <main>
+        <h1>게시글 작성</h1>
+      </main>
+    </div>
+  );
+}

From 35fcbe3e0a444fc7b4c611346fe18666339b0c9f Mon Sep 17 00:00:00 2001
From: haksoo <haksoo0918@gmail.com>
Date: Wed, 18 Dec 2024 14:35:54 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=94=A8=20=EA=B5=AC=EC=A1=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=20=EA=B8=B0=EB=8A=A5=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_app.tsx     |  6 +--
 pages/addboard.tsx | 92 +++++++++++++++++++++++++++++++++++++++++++++-
 styles/globals.css |  2 +-
 3 files changed, 94 insertions(+), 6 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 48411d4..6fa9382 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,13 +1,13 @@
 import type { AppProps } from 'next/app';
 
-// TODO - 나중에 주석 풀어야 함
-// import DarkModeToggle from '@/components/DarkmodeToggle';
+import DarkModeToggle from '@/components/DarkmodeToggle';
+
 import '@/styles/globals.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
-      {/* <DarkModeToggle /> */}
+      <DarkModeToggle />
       <Component {...pageProps} />
     </>
   );
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index 3b56faf..44aaa1c 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -1,9 +1,97 @@
+import { FormEvent, useState } from 'react';
+
+import Button from '@/components/Button';
+import TextEditor from '@/components/TextEditor';
+
+// 제목 글자수 제한
+const MAX_TITLE = 30;
+
+// HTML에서 Text만 추출하는 함수
+function extractContent(str: string) {
+  return str.replace(/<[^>]*>/g, '').trim();
+}
+
+/**
+ * 게시글 등록하기 페이지
+ */
 export default function Addboard() {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+
+  const submitDisabled = title.length === 0 || content.length === 0;
+  const textContent = extractContent(content);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // console.log('handleChange:e:', e);
+    setTitle(e.target.value);
+  };
+  const handleContentChange = (value: string) => {
+    // console.log('value:', value);
+    setContent(value);
+  };
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('form submit!');
+    // TODO - API 연결 및 처리
+  };
+
   return (
     <div className="min-h-svh">
-      <header>gnb</header>
+      <header>GNB 영역</header>
+
       <main>
-        <h1>게시글 작성</h1>
+        <div className="container">
+          <div className="mb-5 mt-[54px] rounded-custom px-[30px] py-[30px] shadow-custom dark:shadow-custom-dark">
+            <header className="my-4 flex items-center justify-between">
+              <h1 className="mo:text-16sb ta:text-20sb pc:text-24sb">
+                게시물 등록하기
+              </h1>
+              <Button className="w-[140px] mo:w-auto" disabled={submitDisabled}>
+                등록하기
+              </Button>
+            </header>
+
+            <div className="my-6 text-16 text-gray-300 mo:my-4 mo:text-12">
+              등록일<span className="ml-3 mo:ml-2">2000. 00. 00.</span>
+            </div>
+
+            <form className="mt-[33px] mo:mt-5 ta:mt-6" onSubmit={handleSubmit}>
+              <fieldset className="my-5 flex items-center justify-between border-y border-gray-200">
+                <label htmlFor="title" className="sr-only">
+                  제목
+                </label>
+                <input
+                  id="title"
+                  className="w-0 flex-1 bg-transparent py-3 text-20md focus-visible:outline-green-200"
+                  type="text"
+                  maxLength={MAX_TITLE}
+                  value={title}
+                  onChange={handleInputChange}
+                  placeholder="제목을 입력해주세요"
+                />
+                <div className="ml-4 w-10 text-14md">
+                  {title.length}/
+                  <span className="text-green-200">{MAX_TITLE}</span>
+                </div>
+              </fieldset>
+
+              <p className="mb-2 mt-5 text-16md mo:text-14md">
+                공백포함 : 총 {textContent.length}자 | 공백제외 총{' '}
+                {textContent.replaceAll(' ', '').length}자
+              </p>
+
+              <div className="h-[520px] mo:h-[320px] ta:h-[480px]">
+                <TextEditor value={content} onChange={handleContentChange} />
+              </div>
+            </form>
+          </div>
+
+          <div className="mb-8 text-center">
+            <Button href="/boards" variant="secondary" className="w-[140px]">
+              목록으로
+            </Button>
+          </div>
+        </div>
       </main>
     </div>
   );
diff --git a/styles/globals.css b/styles/globals.css
index 0a9cdfe..9e4123f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -69,7 +69,7 @@ body {
     @apply border-0;
   }
   .ql-toolbar.ql-snow {
-    @apply order-last rounded-full border-gray-200 text-gray-400;
+    @apply order-last rounded-3xl border-gray-200 text-gray-400;
   }
   .ql-snow .ql-stroke {
     stroke: var(--gray-400);

From 3e4b8a49ec1689e8f84b60ced2d0aa7eb21e3c01 Mon Sep 17 00:00:00 2001
From: haksoo <haksoo0918@gmail.com>
Date: Wed, 18 Dec 2024 15:08:16 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=94=A8=20=EA=B8=80=EC=9E=91=EC=84=B1?=
 =?UTF-8?q?=20api=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20-=20=EC=9D=B8=EC=A6=9D?=
 =?UTF-8?q?=20=EC=B2=98=EB=A6=AC=20=EB=90=98=EB=A9=B4=20=EA=B7=B8=EB=95=8C?=
 =?UTF-8?q?=20=EB=8B=A4=EC=8B=9C=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/addboard.tsx | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index 44aaa1c..742ac2e 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -1,3 +1,4 @@
+import instance from 'lib/axios-client';
 import { FormEvent, useState } from 'react';
 
 import Button from '@/components/Button';
@@ -29,10 +30,19 @@ export default function Addboard() {
     // console.log('value:', value);
     setContent(value);
   };
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log('form submit!');
-    // TODO - API 연결 및 처리
+    console.log('submit work!');
+    // API 연결 및 처리
+    // TODO - 로그인 및 인증되면 그때 다시 테스트
+    instance
+      .post('/articles', {
+        image: '',
+        content,
+        title,
+      })
+      .then((res) => console.log('subtmi:res:', res))
+      .catch((err) => console.log('submit:err:', err));
   };
 
   return (
@@ -46,7 +56,11 @@ export default function Addboard() {
               <h1 className="mo:text-16sb ta:text-20sb pc:text-24sb">
                 게시물 등록하기
               </h1>
-              <Button className="w-[140px] mo:w-auto" disabled={submitDisabled}>
+              <Button
+                form="write-form"
+                className="w-[140px] mo:w-auto"
+                disabled={submitDisabled}
+              >
                 등록하기
               </Button>
             </header>
@@ -55,7 +69,11 @@ export default function Addboard() {
               등록일<span className="ml-3 mo:ml-2">2000. 00. 00.</span>
             </div>
 
-            <form className="mt-[33px] mo:mt-5 ta:mt-6" onSubmit={handleSubmit}>
+            <form
+              id="write-form"
+              className="mt-[33px] mo:mt-5 ta:mt-6"
+              onSubmit={handleSubmit}
+            >
               <fieldset className="my-5 flex items-center justify-between border-y border-gray-200">
                 <label htmlFor="title" className="sr-only">
                   제목

From 6bc707074374d417a5d2436ed13d6c35c8a4595f Mon Sep 17 00:00:00 2001
From: haksoo <haksoo0918@gmail.com>
Date: Wed, 18 Dec 2024 15:33:00 +0900
Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=94=A8=20=EB=82=A0=EC=A7=9C=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/addboard.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index 742ac2e..08549cc 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -8,9 +8,16 @@ import TextEditor from '@/components/TextEditor';
 const MAX_TITLE = 30;
 
 // HTML에서 Text만 추출하는 함수
-function extractContent(str: string) {
-  return str.replace(/<[^>]*>/g, '').trim();
-}
+const extractContent = (str: string) => str.replace(/<[^>]*>/g, '').trim();
+
+// 포멧된 날짜 반환하는 함수
+const formatDate = (date: string) => {
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = (d.getMonth() + 1).toString().padStart(2, '0');
+  const day = d.getDate().toString().padStart(2, '0');
+  return `${year}. ${month}. ${day}.`;
+};
 
 /**
  * 게시글 등록하기 페이지
@@ -19,20 +26,26 @@ export default function Addboard() {
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
 
+  // 등록 버튼 비활성화
   const submitDisabled = title.length === 0 || content.length === 0;
+  // 내용에서 추출된 텍스트
   const textContent = extractContent(content);
+  // 오늘 날짜
+  const today = formatDate(new Date().toISOString());
 
+  // 제목 input 콜백 함수
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     // console.log('handleChange:e:', e);
     setTitle(e.target.value);
   };
+  // 내용 에디터 콜백 함수
   const handleContentChange = (value: string) => {
     // console.log('value:', value);
     setContent(value);
   };
+  // 작성 폼 서브밋 함수
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log('submit work!');
     // API 연결 및 처리
     // TODO - 로그인 및 인증되면 그때 다시 테스트
     instance
@@ -66,7 +79,8 @@ export default function Addboard() {
             </header>
 
             <div className="my-6 text-16 text-gray-300 mo:my-4 mo:text-12">
-              등록일<span className="ml-3 mo:ml-2">2000. 00. 00.</span>
+              등록일
+              <span className="ml-3 mo:ml-2">{today}</span>
             </div>
 
             <form

From 1609fcfa631f728f4a5b5c201d0843ee1a73e101 Mon Sep 17 00:00:00 2001
From: haksoo <haksoo0918@gmail.com>
Date: Wed, 18 Dec 2024 15:45:49 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=94=A8=20=EB=8B=A4=ED=81=AC=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EB=B2=84=ED=8A=BC=20=EC=9C=84=EC=B9=98=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD,=20=ED=97=A4=EB=8D=94=20=EC=82=BD=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DarkmodeToggle.tsx | 2 +-
 pages/addboard.tsx            | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/DarkmodeToggle.tsx b/components/DarkmodeToggle.tsx
index 06e8cf9..558d2a7 100644
--- a/components/DarkmodeToggle.tsx
+++ b/components/DarkmodeToggle.tsx
@@ -14,7 +14,7 @@ export default function DarkModeToggle() {
 
   return (
     <button
-      className="rounded p-2"
+      className="fixed bottom-0 left-0 rounded p-2"
       style={{
         backgroundColor: 'var(--gray-200)',
         color: 'var(--gray-600)',
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index 08549cc..a07336e 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -2,6 +2,7 @@ import instance from 'lib/axios-client';
 import { FormEvent, useState } from 'react';
 
 import Button from '@/components/Button';
+import Headers from '@/components/Headers/Headers';
 import TextEditor from '@/components/TextEditor';
 
 // 제목 글자수 제한
@@ -60,10 +61,10 @@ export default function Addboard() {
 
   return (
     <div className="min-h-svh">
-      <header>GNB 영역</header>
+      <Headers />
 
       <main>
-        <div className="container">
+        <div className="container pt-20">
           <div className="mb-5 mt-[54px] rounded-custom px-[30px] py-[30px] shadow-custom dark:shadow-custom-dark">
             <header className="my-4 flex items-center justify-between">
               <h1 className="mo:text-16sb ta:text-20sb pc:text-24sb">

From 15e88cd4fd17170eb0210111f5ed0d898b11e4a8 Mon Sep 17 00:00:00 2001
From: haksoo <haksoo0918@gmail.com>
Date: Wed, 18 Dec 2024 16:12:14 +0900
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=94=A5=EA=B3=B5=ED=86=B5=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/addboard.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index a07336e..96b80b2 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -2,7 +2,6 @@ import instance from 'lib/axios-client';
 import { FormEvent, useState } from 'react';
 
 import Button from '@/components/Button';
-import Headers from '@/components/Headers/Headers';
 import TextEditor from '@/components/TextEditor';
 
 // 제목 글자수 제한
@@ -61,8 +60,6 @@ export default function Addboard() {
 
   return (
     <div className="min-h-svh">
-      <Headers />
-
       <main>
         <div className="container pt-20">
           <div className="mb-5 mt-[54px] rounded-custom px-[30px] py-[30px] shadow-custom dark:shadow-custom-dark">

From 93a9cac38c76ac42ccfb4725a17606a9978c6312 Mon Sep 17 00:00:00 2001
From: haksoo <haksoo0918@gmail.com>
Date: Wed, 18 Dec 2024 17:33:00 +0900
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=94=A8=20=ED=83=80=EC=9D=B4=ED=8B=80?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80,=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/addboard.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index 96b80b2..b4e5023 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -1,4 +1,5 @@
 import instance from 'lib/axios-client';
+import Head from 'next/head';
 import { FormEvent, useState } from 'react';
 
 import Button from '@/components/Button';
@@ -60,9 +61,13 @@ export default function Addboard() {
 
   return (
     <div className="min-h-svh">
+      <Head>
+        <title>게시물 등록하기 | wikied</title>
+      </Head>
+
       <main>
-        <div className="container pt-20">
-          <div className="mb-5 mt-[54px] rounded-custom px-[30px] py-[30px] shadow-custom dark:shadow-custom-dark">
+        <div className="container pt-20 mo:px-0 mo:pt-[60px]">
+          <div className="mb-5 mt-[54px] rounded-custom px-[30px] py-[30px] shadow-custom dark:shadow-custom-dark mo:mt-0 mo:px-5 mo:py-4 mo:shadow-none">
             <header className="my-4 flex items-center justify-between">
               <h1 className="mo:text-16sb ta:text-20sb pc:text-24sb">
                 게시물 등록하기
@@ -86,31 +91,31 @@ export default function Addboard() {
               className="mt-[33px] mo:mt-5 ta:mt-6"
               onSubmit={handleSubmit}
             >
-              <fieldset className="my-5 flex items-center justify-between border-y border-gray-200">
+              <fieldset className="my-5 flex items-center justify-between border-y border-gray-200 mo:mb-4">
                 <label htmlFor="title" className="sr-only">
                   제목
                 </label>
                 <input
                   id="title"
-                  className="w-0 flex-1 bg-transparent py-3 text-20md focus-visible:outline-green-200"
+                  className="w-0 flex-1 bg-transparent py-3 text-20md focus-visible:outline-green-200 mo:text-16md"
                   type="text"
                   maxLength={MAX_TITLE}
                   value={title}
                   onChange={handleInputChange}
                   placeholder="제목을 입력해주세요"
                 />
-                <div className="ml-4 w-10 text-14md">
+                <div className="ml-4 w-10 text-14md mo:text-13md">
                   {title.length}/
                   <span className="text-green-200">{MAX_TITLE}</span>
                 </div>
               </fieldset>
 
-              <p className="mb-2 mt-5 text-16md mo:text-14md">
+              <p className="mb-[10px] mt-5 text-16md mo:my-4 mo:text-14md">
                 공백포함 : 총 {textContent.length}자 | 공백제외 총{' '}
                 {textContent.replaceAll(' ', '').length}자
               </p>
 
-              <div className="h-[520px] mo:h-[320px] ta:h-[480px]">
+              <div className="h-[520px] mo:h-[50vh] ta:h-[480px]">
                 <TextEditor value={content} onChange={handleContentChange} />
               </div>
             </form>