design: 게시글 수정, 삭제 버튼 디자인 수정

frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import styles from './ArticleDetail.module.css';
 import ArticleDetailAnswer from './ArticleDetailAnswer/ArticleDetailAnswer';
 import ArticleDetailAnswerInput from './ArticleDetailAnswer/ArticleDetailAnswerInput';
-import EditIcon from '/src/assets/icons/edit.svg?react';
 import { useState, useEffect } from 'react';
 
 export default function ArticleDetail({ topic, title, author = null, content, answer = null, onDelete, isQna = true }) {
@@ -44,22 +43,22 @@ export default function ArticleDetail({ topic, title, author = null, content, an
             {author && <span className={styles.author}>{author}</span>}
           </div>
         </div>
-        <Link
+        <div className={styles.actionGroup}>
-          type="button"
+          <Link
-          className={styles.editButton}
+            className={styles.edit}
-          to={'edit'}
+            to={'edit'}
-          state={{ title: title, content: content, answer: answer }}
+            state={{ title: title, content: content, answer: answer }}
-        >
+          >
-          <EditIcon className={styles.icon} />
+            수정
-          <span>수정하기</span>
+          </Link>
-        </Link>
+          <button
-        <button
+            type="button"
-          type="button"
+            className={styles.delete}
-          className={styles.deleteButton}
+            onClick={onDelete}
-          onClick={onDelete}
+          >
-        >
+            삭제
-          삭제하기
+          </button>
-        </button>
+        </div>
       </header>
       <div>
         <p className={styles.content}>{content}</p>

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

@@ -13,7 +13,7 @@
 .header {
   display: flex;
   justify-content: space-between;
-  align-items: start;
+  align-items: end;
 }
 
 .headerInside {
@@ -60,34 +60,26 @@
   stroke: var(--text-color);
 }
 
-.editButton {
+.actionGroup {
   display: flex;
-  align-items: center;
+  align-items: end;
-  gap: 8px;
+  gap: 20px;
-  padding: 12px;
-  background: var(--background);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  font-size: 14px;
-  line-height: 1.4;
-  font-weight: 700;
   color: var(--text-color);
+}
+
+.edit,
+.delete {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--background);
+  color: var(--text-color-tertiary);
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 500;
   cursor: pointer;
 }
 
-.deleteButton {
+.delete {
-  display: flex;
+  color: var(--error-color);
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border: 1px solid var(--error-color);
-  background-color: var(--error-color);
-  color: var(--on-primary);
-  stroke: var(--error-color);
-  font-size: 16px;
-  line-height: 1.4;
-  font-weight: 700;
-  align-self: end;
-  border-radius: 8px;
-  cursor: pointer;
 }

frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx

@@ -15,28 +15,29 @@ export default function ArticleDetailAnswer({ answer, onEditClick, onDeleteSubmi
   };
 
   return (
-    <>
+    <section className={styles.answer}>
-      <section className={styles.answer}>
+      <div className={styles.answerHeader}>
-        <div className={styles.answerHeader}>
+        <div className={styles.author}>
-          <ReplyIcon />
+          <ReplyIcon /> <span>선생님의 답변</span>
-          <div className={styles.author}>선생님의 답변</div>
         </div>
-        <p className={styles.content}>{answer}</p>
+        <div className={styles.actionGroup}>
-        <button
+          <button
-          type="button"
+            type="button"
-          className={styles.deleteButton}
+            className={styles.edit}
-          onClick={handleDeleteSubmit}
+            onClick={onEditClick}
-        >
+          >
-          <div>삭제</div>
+            수정
-        </button>
+          </button>
-        <button
+          <button
-          type="button"
+            type="button"
-          className={styles.editButton}
+            className={styles.delete}
-          onClick={onEditClick}
+            onClick={handleDeleteSubmit}
-        >
+          >
-          수정
+            <div>삭제</div>
-        </button>
+          </button>
-      </section>
+        </div>
-    </>
+      </div>
+      <p className={styles.content}>{answer}</p>
+    </section>
   );
 }

frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css

@@ -1,7 +1,7 @@
 .answer {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
   width: 100%;
   border: 1px solid var(--border-color);
   border-radius: 16px;
@@ -11,17 +11,26 @@
 
 .answerHeader {
   display: flex;
-  gap: 4px;
+  justify-content: space-between;
   color: var(--text-color-secondary);
   stroke: var(--text-color-secondary);
 }
 
 .author {
+  align-self: start;
+  display: flex;
+  align-items: center;
+  gap: 4px;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.4;
 }
 
+.actionGroup {
+  display: flex;
+  gap: 12px;
+}
+
 .content {
   font-size: 16px;
   font-weight: 400;
@@ -30,36 +39,19 @@
   color: var(--text-color);
 }
 
-.editButton {
+.edit,
-  display: flex;
+.delete {
-  align-items: center;
+  padding: 0;
-  gap: 8px;
+  margin: 0;
-  padding: 12px 16px;
+  border: none;
-  border: 1px solid var(--primary-color);
+  background-color: var(--background);
-  background-color: var(--primary-color);
+  font-size: 14px;
-  color: var(--on-primary);
-  stroke: var(--on-primary);
-  font-size: 16px;
   line-height: 1.4;
-  font-weight: 700;
+  font-weight: 500;
-  align-self: end;
+  color: var(--text-color-tertiary);
-  border-radius: 8px;
   cursor: pointer;
 }
 
-.deleteButton {
+.delete {
-  display: flex;
+  color: var(--error-color);
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border: 1px solid var(--error-color);
-  background-color: var(--error-color);
-  color: var(--on-primary);
-  stroke: var(--on-primary);
-  font-size: 16px;
-  line-height: 1.4;
-  font-weight: 700;
-  align-self: end;
-  border-radius: 8px;
-  cursor: pointer;
 }