design: createArticle 버튼추가, 구조 변경

frontend/src/components/Article/CreateArticle/CreateArticle.jsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import styles from './CreateArticle.module.css';
+import EditIcon from '/src/assets/icons/edit.svg?react';
+import BackIcon from '/src/assets/icons/back.svg?react';
 
-export default function CreateArticle({ topic, title, backPath = '/' }) {
+export default function CreateArticle({ topic, title }) {
   const navigate = useNavigate();
 
   const [articleTitle, setArticleTitle] = useState('');
@@ -12,29 +14,25 @@ export default function CreateArticle({ topic, title, backPath = '/' }) {
     e.preventDefault();
     // TODO: 글 작성 기능 연결
     if (articleTitle && articleContent) {
-      navigate(backPath);
+      navigate('..');
     }
   };
-  // TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경
   const handleInput = (e) => {
     setArticleContent(e.target.value);
-    // 높이를 자동으로 조정
     e.target.style.height = 'auto';
     e.target.style.height = e.target.scrollHeight + 'px';
   };
 
   return (
     <div className={styles.createArticle}>
-      <header>
-        <div>
-          <Link
-            to={backPath}
-            className={styles.backButton}
-          >
-            <div>-</div>
-            <div className={styles.backText}>{title}</div>
-          </Link>
-        </div>
+      <header className={styles.header}>
+        <Link
+          to={'..'}
+          className={styles.goBack}
+        >
+          <BackIcon />
+          <span>{title}</span>
+        </Link>
         <div className={styles.title}>{topic}</div>
       </header>
       <form
@@ -66,7 +64,7 @@ export default function CreateArticle({ topic, title, backPath = '/' }) {
           onClick={handleSubmit}
           disabled={!articleTitle || !articleContent}
         >
-          <div>i</div>
+          <EditIcon className={styles.icon} />
           <div>글 쓰기</div>
         </button>
       </form>

frontend/src/components/Article/CreateArticle/CreateArticle.module.css

@@ -2,18 +2,22 @@
   width: 100%;
 }
 
-.backButton {
+.header {
   display: flex;
-  color: var(--text-color-secondary);
-  flex-wrap: nowrap;
-  line-height: 1.2;
-  font-weight: 400;
-  font-size: 20px;
-  padding-bottom: 8px;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
 }
 
-.backText {
-  padding-left: 4px;
+.goBack {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+  stroke: var(--text-color-secondary);
 }
 
 .title {
@@ -85,6 +89,7 @@
   line-height: 1.4;
   font-weight: 700;
   align-self: end;
+  align-items: center;
   border-radius: 8px;
   cursor: pointer;
   transition:
@@ -93,10 +98,17 @@
     color 0.25s;
 }
 
+.icon {
+  stroke: var(--on-primary);
+}
+
 .button:disabled,
 .button[disabled] {
   border-color: var(--border-color);
   background-color: var(--background-tertiary);
   color: var(--text-color-tertiary);
   cursor: not-allowed;
+  .icon {
+    stroke: var(--text-color-tertiary);
+  }
 }