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

Merge pull request #15 from TeamBNBN/fe/format

Browse Source 
[Front-End] chore: crlf를 lf로 변경
This commit is contained in:
Jo Hyeonsoo 2024-07-16 09:50:15 +09:00 committed by GitHub
commit dbf1031c55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 210 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,32 @@
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom';
import styles from './ArticleDetail.module.css' import styles from './ArticleDetail.module.css';
import ArticleDetailAnswer from "./ArticleDetailAnswer/ArticleDetailAnswer"; import ArticleDetailAnswer from './ArticleDetailAnswer/ArticleDetailAnswer';
export default function ArticleDetail() { export default function ArticleDetail() {
const title = '헷갈리는게 있어요';
const title = '헷갈리는게 있어요'; const author = '이재용';
const author = '이재용'; const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?'; return (
return ( <div className={styles.articleDetail}>
<div className={styles.articleDetail}> <header>
<header> <div>
<div> <Link
<Link to={'/'} className={styles.backButton}> to={'/'}
<div>-</div> className={styles.backButton}
<div className={styles.backText}>Q&A</div> >
</Link> <div>-</div>
</div> <div className={styles.backText}>Q&A</div>
<div> </Link>
<div className={styles.title}>{title}</div>
<div className={styles.author}>{author}</div>
</div>
</header>
<div>
<p className={styles.content}>{content}</p>
</div>
<ArticleDetailAnswer />
</div> </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>
);
}

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

@ -1,38 +1,38 @@
.articleDetail { .articleDetail {
width: 100%; width: 100%;
background-color: var(--background-default); background-color: var(--background-default);
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.articleDetail > * { .articleDetail > * {
padding-bottom: 40px; padding-bottom: 40px;
} }
.backButton { .backButton {
display: flex; display: flex;
color: var(--text-color-secondary); color: var(--text-color-secondary);
flex-wrap: nowrap; flex-wrap: nowrap;
line-height: 1.2; line-height: 1.2;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
padding-bottom: 8px; padding-bottom: 8px;
} }
.backText { .backText {
padding-left: 4px; padding-left: 4px;
} }
.title { .title {
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 800; font-weight: 800;
} }
.author { .author {
font-size: 14px; font-size: 14px;
font-weight: 200; font-weight: 200;
line-height: 1.4; line-height: 1.4;
color: var(--text-color-secondary); color: var(--text-color-secondary);
} }

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

@ -1,14 +1,13 @@
import styles from './ArticleDetailAnswer.module.css' import styles from './ArticleDetailAnswer.module.css';
export default function ArticleDetailAnswer() {
export default function ArticleDetailAnswer () { return (
return ( <div className={styles.answer}>
<div className={styles.answer}> <div className={styles.answerHeader}>
<div className={styles.answerHeader}> <div>--</div>
<div>--</div> <div className={styles.author}>선생님의 답변</div>
<div className={styles.author}>선생님의 답변</div> </div>
</div> <div className={styles.content}>Lorem ipsum dolor sit amet.</div>
<div className={styles.content}>Lorem ipsum dolor sit amet.</div> </div>
</div> );
) }
}

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

@ -1,26 +1,26 @@
.answer { .answer {
width: 100%; width: 100%;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 16px; border-radius: 16px;
padding: 12px 16px; padding: 12px 16px;
} }
.answerHeader { .answerHeader {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.content { .content {
margin-top: 8px; margin-top: 8px;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
line-height: 1.4; line-height: 1.4;
} }
.author { .author {
font-size: 14px; font-size: 14px;
font-weight: 200; font-weight: 200;
line-height: 1.4; line-height: 1.4;
color: var(--text-color-secondary); color: var(--text-color-secondary);
margin-left: 4px; margin-left: 4px;
} }

36
frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
View File

@ -1,19 +1,19 @@
import { Link } from "react-router-dom" import { Link } from 'react-router-dom';
import styles from "./ArticlePreview.module.css" import styles from './ArticlePreview.module.css';
export default function ArticlePreview () { export default function ArticlePreview() {
// TODO: 아이콘 변경 // TODO: 아이콘 변경
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.header}> <div className={styles.header}>
<div className={styles.title}>공지사항</div> <div className={styles.title}>공지사항</div>
<Link to="/">ICON</Link> <Link to="/">ICON</Link>
</div> </div>
<div className={styles.main}> <div className={styles.main}>
<div className={styles.content}>3주차 수업 휴강 공지</div> <div className={styles.content}>3주차 수업 휴강 공지</div>
<div className={styles.content}>정보처리기사 어쩌구</div> <div className={styles.content}>정보처리기사 어쩌구</div>
<div className={styles.content}>첫 수업 준비사항</div> <div className={styles.content}>첫 수업 준비사항</div>
</div> </div>
</div> </div>
) );
} }

38
frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css
View File

@ -1,32 +1,32 @@
.wrapper { .wrapper {
width: 100%; width: 100%;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 20px; border-radius: 20px;
background-color: var(--background-default); background-color: var(--background-default);
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 24px; margin-bottom: 24px;
} }
.title { .title {
font-size: 24px; font-size: 24px;
line-height: 1.2; line-height: 1.2;
font-weight: 700; font-weight: 700;
} }
.main { .main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 12px 0; gap: 12px 0;
} }
.content { .content {
font-size: 16px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
font-weight: 400; font-weight: 400;
} }

75
frontend/src/components/Article/CreateArticle/CreateArticle.jsx
View File

@ -1,38 +1,43 @@
import { Link } from "react-router-dom" import { Link } from 'react-router-dom';
import styles from "./CreateArticle.module.css" import styles from './CreateArticle.module.css';
export default function CreateArticle() { export default function CreateArticle() {
// TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경 // TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경
return ( return (
<div className={styles.createArticle}> <div className={styles.createArticle}>
<header className={styles.header}> <header className={styles.header}>
<div> <div>
<Link to={'/'} className={styles.backButton}> <Link
<div>-</div> to={'/'}
<div className={styles.backText}>Q&A</div> className={styles.backButton}
</Link> >
</div> <div>-</div>
<div className={styles.title}>질문하기</div> <div className={styles.backText}>Q&A</div>
</header> </Link>
<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> </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>
);
}

108
frontend/src/components/Article/CreateArticle/CreateArticle.module.css
View File

@ -1,92 +1,90 @@
.createArticle { .createArticle {
width: 100%; width: 100%;
} }
.header { .header {
padding-left: 20px; padding-left: 20px;
width: 100%; width: 100%;
} }
.backButton { .backButton {
display: flex; display: flex;
color: var(--text-color-secondary); color: var(--text-color-secondary);
flex-wrap: nowrap; flex-wrap: nowrap;
line-height: 1.2; line-height: 1.2;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
padding-bottom: 8px; padding-bottom: 8px;
} }
.backText { .backText {
padding-left: 4px; padding-left: 4px;
} }
.title { .title {
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 800; font-weight: 800;
} }
.formWrapper { .formWrapper {
margin-top: 20px; margin-top: 20px;
} }
.fieldWrapper { .fieldWrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
margin-bottom: 20px; margin-bottom: 20px;
} }
.label { .label {
color: var(--text-color); color: var(--text-color);
font-size: 16px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
font-weight: 400; font-weight: 400;
margin-bottom: 8px; margin-bottom: 8px;
} }
.titleInput { .titleInput {
padding: 20px; padding: 20px;
background: var(--background-color); background: var(--background-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
font-size: 20px; font-size: 20px;
line-height: 1.2; line-height: 1.2;
font-weight: 500; font-weight: 500;
} }
.contentInput { .contentInput {
padding: 20px; padding: 20px;
height: 150px; height: 150px;
background: var(--background-color); background: var(--background-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
font-weight: 400; font-weight: 400;
} }
.buttonWrapper { .buttonWrapper {
display: flex; display: flex;
justify-content: end; justify-content: end;
} }
.button { .button {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 16px 24px; padding: 16px 24px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--primary-color); border: 1px solid var(--primary-color);
background-color: var(--primary-color); background-color: var(--primary-color);
color: white; color: white;
} }
.buttonText { .buttonText {
font-size: 16px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
font-weight: 700; font-weight: 700;
padding-left: 8px; padding-left: 8px;
} }

2
frontend/src/components/Article/index.js
View File

@ -1,4 +1,4 @@
export { default as ArticleDetail } from './ArticleDetail/ArticleDetail.jsx'; export { default as ArticleDetail } from './ArticleDetail/ArticleDetail.jsx';
export { default as ArticleDetailAnswer } from './ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx'; export { default as ArticleDetailAnswer } from './ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx';
export { default as CreateArticle } from './CreateArticle/CreateArticle.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';