jhynsoo/edufocus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jhynsoo 2024-08-07 11:07:34 +09:00
parent aa434d5ea6
commit fdd6e9dee4
4 changed files with 79 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
View File

@ -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
type="button"
className={styles.editButton}
to={'edit'}
state={{ title: title, content: content, answer: answer }}
>
<EditIcon className={styles.icon} />
<span>수정하기</span>
</Link>
<button
type="button"
className={styles.deleteButton}
onClick={onDelete}
>
삭제하기
</button>
<div className={styles.actionGroup}>
<Link
className={styles.edit}
to={'edit'}
state={{ title: title, content: content, answer: answer }}
>
수정
</Link>
<button
type="button"
className={styles.delete}
onClick={onDelete}
>
삭제
</button>
</div>
</header>
<div>
<p className={styles.content}>{content}</p>

44
frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css
View File

@ -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);
}

45
frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx
View File

@ -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>
<section className={styles.answer}>
<div className={styles.answerHeader}>
<div className={styles.author}>
<ReplyIcon /> <span>선생님의 답변</span>
</div>
<p className={styles.content}>{answer}</p>
<button
type="button"
className={styles.deleteButton}
onClick={handleDeleteSubmit}
>
<div>삭제</div>
</button>
<button
type="button"
className={styles.editButton}
onClick={onEditClick}
>
수정
</button>
</section>
</>
<div className={styles.actionGroup}>
<button
type="button"
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>
);
}

52
frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
View File

@ -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);
}