Merge pull request #15 from TeamBNBN/fe/format

[Front-End] chore: crlf를 lf로 변경

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 (
-        <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>
+  );
+}

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);
-}
+  font-size: 14px;
+  font-weight: 200;
+  line-height: 1.4;
+  color: var(--text-color-secondary);
+}

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 (
-        <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>
+  );
+}

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;
-}
+  font-size: 14px;
+  font-weight: 200;
+  line-height: 1.4;
+  color: var(--text-color-secondary);
+  margin-left: 4px;
+}

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 (
-        <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>
+  );
+}

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;  
-}
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+}

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 (
-        <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>
+  );
+}

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;
-}
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+  padding-left: 8px;
+}

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';
+export { default as ArticlePreview } from './ArticlePreview/ArticlePreview.jsx';