feat: CreateArticle, index.js 추가

frontend/src/components/Article/CreateArticle/CreateArticle.jsx

@@ -0,0 +1,40 @@
+import { Link } from "react-router-dom"
+import styles from "./CreateArticle.module.css"
+
+
+export default function CreateArticle() {
+    // TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경 
+    return (
+        <>
+        <div>
+            <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

@@ -0,0 +1,87 @@
+.header {
+    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;
+}
+
+.backText {
+    padding-left: 4px;
+}
+
+.title {
+    font-size: 32px;
+    line-height: 1.2;
+    font-weight: 800;
+}
+
+.formWrapper {
+    margin-top: 20px;
+}
+
+.fieldWrapper {
+    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;
+}
+
+.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;
+}
+
+.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;
+}
+
+
+.buttonWrapper {
+    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;
+}
+
+.buttonText {
+    font-size: 16px;
+    line-height: 1.4;
+    font-weight: 700;
+    padding-left: 8px;
+}

frontend/src/components/Article/index.js

@@ -0,0 +1,3 @@
+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';