chore: crlf를 lf로 변경
This commit is contained in:
parent
8b40da5382
commit
957fb4acb6
@ -1,30 +1,32 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import styles from './ArticleDetail.module.css'
|
||||
import ArticleDetailAnswer from "./ArticleDetailAnswer/ArticleDetailAnswer";
|
||||
import { Link } from 'react-router-dom';
|
||||
import styles from './ArticleDetail.module.css';
|
||||
import ArticleDetailAnswer from './ArticleDetailAnswer/ArticleDetailAnswer';
|
||||
|
||||
export default function ArticleDetail() {
|
||||
|
||||
const title = '헷갈리는게 있어요';
|
||||
const author = '이재용';
|
||||
const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
|
||||
return (
|
||||
<div className={styles.articleDetail}>
|
||||
<header>
|
||||
<div>
|
||||
<Link to={'/'} className={styles.backButton}>
|
||||
<div>-</div>
|
||||
<div className={styles.backText}>Q&A</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.author}>{author}</div>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<p className={styles.content}>{content}</p>
|
||||
</div>
|
||||
<ArticleDetailAnswer />
|
||||
const title = '헷갈리는게 있어요';
|
||||
const author = '이재용';
|
||||
const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
|
||||
return (
|
||||
<div className={styles.articleDetail}>
|
||||
<header>
|
||||
<div>
|
||||
<Link
|
||||
to={'/'}
|
||||
className={styles.backButton}
|
||||
>
|
||||
<div>-</div>
|
||||
<div className={styles.backText}>Q&A</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.author}>{author}</div>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<p className={styles.content}>{content}</p>
|
||||
</div>
|
||||
<ArticleDetailAnswer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,38 +1,38 @@
|
||||
.articleDetail {
|
||||
width: 100%;
|
||||
background-color: var(--background-default);
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: var(--background-default);
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.articleDetail > * {
|
||||
padding-bottom: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
display: flex;
|
||||
color: var(--text-color-secondary);
|
||||
flex-wrap: nowrap;
|
||||
line-height: 1.2;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
color: var(--text-color-secondary);
|
||||
flex-wrap: nowrap;
|
||||
line-height: 1.2;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.backText {
|
||||
padding-left: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
@ -1,14 +1,13 @@
|
||||
import styles from './ArticleDetailAnswer.module.css'
|
||||
import styles from './ArticleDetailAnswer.module.css';
|
||||
|
||||
|
||||
export default function ArticleDetailAnswer () {
|
||||
return (
|
||||
<div className={styles.answer}>
|
||||
<div className={styles.answerHeader}>
|
||||
<div>--</div>
|
||||
<div className={styles.author}>선생님의 답변</div>
|
||||
</div>
|
||||
<div className={styles.content}>Lorem ipsum dolor sit amet.</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default function ArticleDetailAnswer() {
|
||||
return (
|
||||
<div className={styles.answer}>
|
||||
<div className={styles.answerHeader}>
|
||||
<div>--</div>
|
||||
<div className={styles.author}>선생님의 답변</div>
|
||||
</div>
|
||||
<div className={styles.content}>Lorem ipsum dolor sit amet.</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,26 +1,26 @@
|
||||
.answer {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 12px 16px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.answerHeader {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
color: var(--text-color-secondary);
|
||||
margin-left: 4px;
|
||||
}
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
color: var(--text-color-secondary);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
@ -1,19 +1,19 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import styles from "./ArticlePreview.module.css"
|
||||
import { Link } from 'react-router-dom';
|
||||
import styles from './ArticlePreview.module.css';
|
||||
|
||||
export default function ArticlePreview () {
|
||||
// TODO: 아이콘 변경
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.title}>공지사항</div>
|
||||
<Link to="/">ICON</Link>
|
||||
</div>
|
||||
<div className={styles.main}>
|
||||
<div className={styles.content}>3주차 수업 휴강 공지</div>
|
||||
<div className={styles.content}>정보처리기사 어쩌구</div>
|
||||
<div className={styles.content}>첫 수업 준비사항</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default function ArticlePreview() {
|
||||
// TODO: 아이콘 변경
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.title}>공지사항</div>
|
||||
<Link to="/">ICON</Link>
|
||||
</div>
|
||||
<div className={styles.main}>
|
||||
<div className={styles.content}>3주차 수업 휴강 공지</div>
|
||||
<div className={styles.content}>정보처리기사 어쩌구</div>
|
||||
<div className={styles.content}>첫 수업 준비사항</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,32 +1,32 @@
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20px;
|
||||
background-color: var(--background-default);
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20px;
|
||||
background-color: var(--background-default);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
}
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
@ -1,38 +1,43 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import styles from "./CreateArticle.module.css"
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
import styles from './CreateArticle.module.css';
|
||||
|
||||
export default function CreateArticle() {
|
||||
// TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경
|
||||
return (
|
||||
<div className={styles.createArticle}>
|
||||
<header className={styles.header}>
|
||||
<div>
|
||||
<Link to={'/'} className={styles.backButton}>
|
||||
<div>-</div>
|
||||
<div className={styles.backText}>Q&A</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.title}>질문하기</div>
|
||||
</header>
|
||||
<div className={styles.formWrapper}>
|
||||
<form>
|
||||
<div className={styles.fieldWrapper}>
|
||||
<label className={styles.label}>제목</label>
|
||||
<input type="text" className={styles.titleInput} />
|
||||
</div>
|
||||
<div className={styles.fieldWrapper}>
|
||||
<label className={styles.label}>내용</label>
|
||||
<textarea className={styles.contentInput}></textarea>
|
||||
</div>
|
||||
<div className={styles.buttonWrapper}>
|
||||
<button className={styles.button}>
|
||||
<div>| i |</div>
|
||||
<div className={styles.buttonText}>글 쓰기</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
// TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경
|
||||
return (
|
||||
<div className={styles.createArticle}>
|
||||
<header className={styles.header}>
|
||||
<div>
|
||||
<Link
|
||||
to={'/'}
|
||||
className={styles.backButton}
|
||||
>
|
||||
<div>-</div>
|
||||
<div className={styles.backText}>Q&A</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className={styles.title}>질문하기</div>
|
||||
</header>
|
||||
<div className={styles.formWrapper}>
|
||||
<form>
|
||||
<div className={styles.fieldWrapper}>
|
||||
<label className={styles.label}>제목</label>
|
||||
<input
|
||||
type="text"
|
||||
className={styles.titleInput}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.fieldWrapper}>
|
||||
<label className={styles.label}>내용</label>
|
||||
<textarea className={styles.contentInput}></textarea>
|
||||
</div>
|
||||
<div className={styles.buttonWrapper}>
|
||||
<button className={styles.button}>
|
||||
<div>| i |</div>
|
||||
<div className={styles.buttonText}>글 쓰기</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,92 +1,90 @@
|
||||
.createArticle {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
padding-left: 20px;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
display: flex;
|
||||
color: var(--text-color-secondary);
|
||||
flex-wrap: nowrap;
|
||||
line-height: 1.2;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
color: var(--text-color-secondary);
|
||||
flex-wrap: nowrap;
|
||||
line-height: 1.2;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.backText {
|
||||
padding-left: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.formWrapper {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.fieldWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--text-color);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-color);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.titleInput {
|
||||
padding: 20px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
padding: 20px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contentInput {
|
||||
padding: 20px;
|
||||
height: 150px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
padding: 20px;
|
||||
height: 150px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
.buttonWrapper {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--primary-color);
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--primary-color);
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.buttonText {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
padding-left: 8px;
|
||||
}
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
export { default as ArticleDetail } from './ArticleDetail/ArticleDetail.jsx';
|
||||
export { default as ArticleDetailAnswer } from './ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx';
|
||||
export { default as CreateArticle } from './CreateArticle/CreateArticle.jsx';
|
||||
export { default as ArticlePreview } from './ArticlePreview/ArticlePreview.jsx';
|
||||
export { default as ArticlePreview } from './ArticlePreview/ArticlePreview.jsx';
|
||||
|
Loading…
Reference in New Issue
Block a user