diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx index 86b6486..8ab9b84 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx @@ -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 ( -
-
-
- -
-
-
Q&A
- -
-
-
{title}
-
{author}
-
-
-
-

{content}

-
- + const title = '헷갈리는게 있어요'; + const author = '이재용'; + const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?'; + return ( +
+
+
+ +
-
+
Q&A
+
- ) -} \ No newline at end of file +
+
{title}
+
{author}
+
+
+
+

{content}

+
+ +
+ ); +} diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css index 0ce9d5a..c81ae2c 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css @@ -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); -} \ No newline at end of file + font-size: 14px; + font-weight: 200; + line-height: 1.4; + color: var(--text-color-secondary); +} diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx index 3e75a60..903943d 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx @@ -1,14 +1,13 @@ -import styles from './ArticleDetailAnswer.module.css' +import styles from './ArticleDetailAnswer.module.css'; - -export default function ArticleDetailAnswer () { - return ( -
-
-
--
-
선생님의 답변
-
-
Lorem ipsum dolor sit amet.
-
- ) -} \ No newline at end of file +export default function ArticleDetailAnswer() { + return ( +
+
+
--
+
선생님의 답변
+
+
Lorem ipsum dolor sit amet.
+
+ ); +} diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css index f48c29a..82466df 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css @@ -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; -} \ No newline at end of file + font-size: 14px; + font-weight: 200; + line-height: 1.4; + color: var(--text-color-secondary); + margin-left: 4px; +} diff --git a/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx b/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx index c08ce27..42e843b 100644 --- a/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx +++ b/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx @@ -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 ( -
-
-
공지사항
- ICON -
-
-
3주차 수업 휴강 공지
-
정보처리기사 어쩌구
-
첫 수업 준비사항
-
-
- ) -} \ No newline at end of file +export default function ArticlePreview() { + // TODO: 아이콘 변경 + return ( +
+
+
공지사항
+ ICON +
+
+
3주차 수업 휴강 공지
+
정보처리기사 어쩌구
+
첫 수업 준비사항
+
+
+ ); +} diff --git a/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css b/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css index ffb7ece..df971ca 100644 --- a/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css +++ b/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css @@ -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; -} \ No newline at end of file + font-size: 16px; + line-height: 1.4; + font-weight: 400; +} diff --git a/frontend/src/components/Article/CreateArticle/CreateArticle.jsx b/frontend/src/components/Article/CreateArticle/CreateArticle.jsx index 49cefd5..db4a5b0 100644 --- a/frontend/src/components/Article/CreateArticle/CreateArticle.jsx +++ b/frontend/src/components/Article/CreateArticle/CreateArticle.jsx @@ -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 ( -
-
-
- -
-
-
Q&A
- -
-
질문하기
-
-
-
-
- - -
-
- - -
-
- -
-
-
+ // TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경 + return ( +
+
+
+ +
-
+
Q&A
+
- ) -} \ No newline at end of file +
질문하기
+
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+
+ ); +} diff --git a/frontend/src/components/Article/CreateArticle/CreateArticle.module.css b/frontend/src/components/Article/CreateArticle/CreateArticle.module.css index 12e7427..8dab483 100644 --- a/frontend/src/components/Article/CreateArticle/CreateArticle.module.css +++ b/frontend/src/components/Article/CreateArticle/CreateArticle.module.css @@ -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; -} \ No newline at end of file + font-size: 16px; + line-height: 1.4; + font-weight: 700; + padding-left: 8px; +} diff --git a/frontend/src/components/Article/index.js b/frontend/src/components/Article/index.js index 4e82aa4..f8dedb9 100644 --- a/frontend/src/components/Article/index.js +++ b/frontend/src/components/Article/index.js @@ -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'; \ No newline at end of file +export { default as ArticlePreview } from './ArticlePreview/ArticlePreview.jsx';