design: 게시글 수정, 삭제 버튼 디자인 수정
This commit is contained in:
parent
aa434d5ea6
commit
fdd6e9dee4
@ -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>
|
||||
<div className={styles.actionGroup}>
|
||||
<Link
|
||||
type="button"
|
||||
className={styles.editButton}
|
||||
className={styles.edit}
|
||||
to={'edit'}
|
||||
state={{ title: title, content: content, answer: answer }}
|
||||
>
|
||||
<EditIcon className={styles.icon} />
|
||||
<span>수정하기</span>
|
||||
수정
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.deleteButton}
|
||||
className={styles.delete}
|
||||
onClick={onDelete}
|
||||
>
|
||||
삭제하기
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<p className={styles.content}>{content}</p>
|
||||
|
||||
@ -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;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
align-items: end;
|
||||
gap: 20px;
|
||||
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 {
|
||||
display: flex;
|
||||
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;
|
||||
.delete {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
@ -15,28 +15,29 @@ export default function ArticleDetailAnswer({ answer, onEditClick, onDeleteSubmi
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={styles.answer}>
|
||||
<div className={styles.answerHeader}>
|
||||
<ReplyIcon />
|
||||
<div className={styles.author}>선생님의 답변</div>
|
||||
<div className={styles.author}>
|
||||
<ReplyIcon /> <span>선생님의 답변</span>
|
||||
</div>
|
||||
<p className={styles.content}>{answer}</p>
|
||||
<div className={styles.actionGroup}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.deleteButton}
|
||||
onClick={handleDeleteSubmit}
|
||||
>
|
||||
<div>삭제</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.editButton}
|
||||
className={styles.edit}
|
||||
onClick={onEditClick}
|
||||
>
|
||||
수정
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.delete}
|
||||
onClick={handleDeleteSubmit}
|
||||
>
|
||||
<div>삭제</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className={styles.content}>{answer}</p>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--primary-color);
|
||||
background-color: var(--primary-color);
|
||||
color: var(--on-primary);
|
||||
stroke: var(--on-primary);
|
||||
font-size: 16px;
|
||||
.edit,
|
||||
.delete {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-color: var(--background);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
align-self: end;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-tertiary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deleteButton {
|
||||
display: flex;
|
||||
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;
|
||||
.delete {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user