design: 디자인 업데이트
This commit is contained in:
parent
c2838434c4
commit
92d724d056
@ -1,4 +1,7 @@
|
||||
.articleDetail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
background-color: var(--background-default);
|
||||
box-sizing: border-box;
|
||||
@ -6,10 +9,6 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.articleDetail > * {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
display: flex;
|
||||
color: var(--text-color-secondary);
|
||||
@ -36,3 +35,7 @@
|
||||
line-height: 1.4;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@ export default function CreateArticle({ topic, title, backPath = '/' }) {
|
||||
onClick={handleSubmit}
|
||||
disabled={!articleTitle || !articleContent}
|
||||
>
|
||||
<div>| i |</div>
|
||||
<div>i</div>
|
||||
<div>글 쓰기</div>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@ -74,26 +74,27 @@
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--primary-color);
|
||||
cursor: pointer;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
color: var(--on-primary);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
padding-left: 8px;
|
||||
align-self: end;
|
||||
gap: 8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
border-color 0.25s,
|
||||
color 0.25s;
|
||||
}
|
||||
|
||||
.button:disabled,
|
||||
.button[disabled] {
|
||||
border: 1px solid var(--background-tertiary);
|
||||
border-color: var(--border-color);
|
||||
background-color: var(--background-tertiary);
|
||||
color: var(--text-color-tertiary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -1,25 +1,21 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styles from './ArticleBoard.module.css';
|
||||
|
||||
export default function ArticleBoard({ title, canCreate, createArticlePath, children }) {
|
||||
const navigate = useNavigate();
|
||||
const createArticle = () => {
|
||||
navigate(createArticlePath);
|
||||
};
|
||||
// TODO : ㅁ 을 글쓰기 아이콘으로 변경
|
||||
return (
|
||||
<div className={styles.articleBoard}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
{canCreate && (
|
||||
<button
|
||||
<Link
|
||||
type="button"
|
||||
className={styles.button}
|
||||
onClick={createArticle}
|
||||
className={styles.writeButton}
|
||||
to="write"
|
||||
>
|
||||
<div>ㅁ</div>
|
||||
<div className={styles.buttonText}>글쓰기</div>
|
||||
</button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.article}>{children}</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
background-color: var(--background);
|
||||
}
|
||||
@ -19,16 +19,20 @@
|
||||
.title {
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.button {
|
||||
.writeButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
padding: 12px;
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -43,5 +47,4 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ export default function ArticleLink({ to, title, sub }) {
|
||||
to={to}
|
||||
className={styles.articleLink}
|
||||
>
|
||||
<span className={styles.note}>{title}</span>
|
||||
<h3 className={styles.title}>{title}</h3>
|
||||
<span className={styles.date}>{sub}</span>
|
||||
</Link>
|
||||
);
|
||||
|
||||
@ -5,16 +5,18 @@
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 20px;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.articleLink:hover {
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
.loginText {
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.formGroup {
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 295px;
|
||||
height: 295px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
gap: 12px;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 295px;
|
||||
height: 220px;
|
||||
border-radius: 20px;
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
margin: 0 0 40px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
@ -11,4 +11,5 @@
|
||||
grid-template-columns: repeat(auto-fill, minmax(295px, auto));
|
||||
gap: 20px;
|
||||
justify-content: start;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 64px;
|
||||
background-color: var(--background);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
@ -19,7 +19,7 @@
|
||||
max-width: 1320px;
|
||||
padding: 0 40px;
|
||||
margin: 0 auto;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
|
||||
@ -21,6 +21,12 @@ export default function LectureLayout() {
|
||||
<MaxWidthLayout hasSideBar>
|
||||
<aside>
|
||||
<SideBar title="바로가기">
|
||||
<SideLink
|
||||
to={''}
|
||||
end
|
||||
>
|
||||
수업 홈
|
||||
</SideLink>
|
||||
<SideLink to={'notice'}>공지사항</SideLink>
|
||||
<SideLink to={'qna'}>Q&A</SideLink>
|
||||
<SideLink to={'file'}>수업자료</SideLink>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
.title {
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import styles from './SideLink.module.css';
|
||||
|
||||
export default function SideLink({ children, to }) {
|
||||
export default function SideLink({ children, to, end = false }) {
|
||||
return (
|
||||
<li className={styles.list}>
|
||||
<NavLink
|
||||
to={to}
|
||||
className={({ isActive }) => (isActive ? styles.active : styles.link)}
|
||||
end={end}
|
||||
>
|
||||
{children}
|
||||
</NavLink>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
.RegisterText {
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.textBodyStrong {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user