codestates-seb · YongILTree1 · Aug 10, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 10, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,12 +1,15 @@
 # seb45_pre_001
+
 <img src="https://img1.daumcdn.net/thumb/S1200x630/?fname=https://t1.daumcdn.net/news/202304/15/akn/20230415080046943dehb.png" width="500" height="250"/>
 
 ## 💻B전공
+
 > 비전공자 6명이 함께하는 프리프로젝트!
 
 ## 🌟 팀원 소개
 
 ### ✨ Back-end
+
 <table style="table-layout:fixed">
   <thead>
   <th align="center"><a href="https://github.com/yawning5">이미지태그</a></th>
@@ -34,6 +37,7 @@
 </table>
 
 ### ✨ Front-end
+
 <table style="display:grid" >
   <thead>
   <th align="center"><a href="https://github.com/YongILTree1">이미지태그</a></th>
@@ -62,13 +66,17 @@
 </table>
 
 ## 🎯프로젝트 명
+
 - Stackoverflow
 
 ## 📅프로젝트 기간
+
 - 2023년 8월 4일(금) ~ 2023년 8월 23일(수)
 
 ## 🗂️프로젝트 핵심기술 및 기능
+
 ### ✨ Back-end
+
 ![Java](https://img.shields.io/badge/java-007396?style=for-the-badge&logo=java&logoColor=white")
 ![Spring](https://img.shields.io/badge/spring-6DB33F?style=for-the-badge&logo=spring&logoColor=white)
 ![Spring Boot](https://img.shields.io/badge/spring_boot_jpa-6DB33F?style=for-the-badge&logo=springboot&logoColor=white)
@@ -78,13 +86,15 @@
 ![Ngrok](https://img.shields.io/badge/ngrok-1F1E37?style=for-the-badge&logo=ngrok&logoColor=white)
 
 ### ✨ Front-end
+
 ![HTML](https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
 ![CSS](https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white)
 ![JavaScript](https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
 ![React](https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black)
 ![Redux](https://img.shields.io/badge/redux-764ABC?style=for-the-badge&logo=redux&logoColor=white)
 
 ## 🛠️협업툴
+
 ![Github](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)
 ![Discord](https://img.shields.io/badge/discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)
 ![Notion](https://img.shields.io/badge/notion-000000?style=for-the-badge&logo=notion&logoColor=white)

diff --git a/client/.eslintrc.json b/client/.eslintrc.json
@@ -1,24 +1,24 @@
 {
-    "env": {
-      "browser": true,
-      "es2021": true
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
     },
-    "extends": [
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:import/recommended",
-      "plugin:jsx-a11y/recommended",
-      "plugin:prettier/recommended"
-    ],
-    "parserOptions": {
-      "ecmaFeatures": {
-        "jsx": true
-      },
-      "ecmaVersion": "latest",
-      "sourceType": "module"
-    },
-    "rules": {
-      "react/react-in-jsx-scope": 0,
-      "react/jsx-uses-react": 0
-    }
-  }
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "react/react-in-jsx-scope": 0,
+    "react/jsx-uses-react": 0
+  }
+}
diff --git a/client/.prettierrc.json b/client/.prettierrc.json
@@ -1,3 +1,3 @@
 {
-    "singleQuote": true
-  }
+  "singleQuote": true
+}
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/client/public/logo192.png b/client/public/logo192.png
diff --git a/client/public/logo512.png b/client/public/logo512.png
diff --git a/client/src/App.css b/client/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,23 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import AskQuestionPage from './pages/AskQuestionPage';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <AskQuestionPage />
     </div>
   );
 }

diff --git a/client/src/App.test.js b/client/src/App.test.js
diff --git a/client/src/components/Editor5.js b/client/src/components/Editor5.js
diff --git a/client/src/index.css b/client/src/index.css
@@ -1,13 +1,13 @@
-body {
+* {
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  padding: 0;
+  text-decoration: none;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+button {
+  border: none;
+  background-color: transparent;
 }
diff --git a/client/src/logo.svg b/client/src/logo.svg
diff --git a/client/src/pages/AskQuestionPage.js b/client/src/pages/AskQuestionPage.js
@@ -0,0 +1,148 @@
+import { styled } from 'styled-components';
+import Editor5 from '../components/Editor5';
+
+const StyleAskPage = styled.div`
+  background-color: #f8f9f9;
+  height: 1124px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .inner {
+    width: 1216px;
+    height: 1200px;
+    padding: 0 24px 24px 24px;
+  }
+
+  .question-header {
+    display: flex;
+    align-items: center;
+    height: 130px;
+    position: relative;
+    background-image: url('https://cdn.sstatic.net/Img/ask/background.svg?v=2e9a8205b368');
+    background-repeat: no-repeat;
+    background-position: right bottom;
+  }
+  .notice-container {
+    max-width: 800px;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    margin: 16px 0 16px 0;
+    background-color: #ebf4fb;
+    border-radius: 7px;
+    border: 1px solid #a6ceed;
+    ul {
+      margin-left: 30px;
+    }
+    h2 {
+      margin-bottom: 8px;
+    }
+    h5 {
+      margin: 15px 0 8px 0;
+    }
+  }
+
+  main {
+    height: 1233px;
+    margin-bottom: 48px;
+  }
+
+  .title-container,
+  .tag-container {
+    max-width: 800px;
+    height: 124px;
+    padding: 24px;
+    border: 1px solid #d5d9dc;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 7px;
+    background-color: #ffffff;
+  }
+
+  .explanation-box {
+    font-size: 13px;
+  }
+
+  .title-input,
+  .tag-input {
+    height: 33px;
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #d5d9dc;
+    margin-top: 5px;
+    border-radius: 7px;
+  }
+`;
+
+function AskQuestionPage() {
+  return (
+    <StyleAskPage>
+      <div className="inner">
+        <div className="question-header">
+          <h1>Ask a public question</h1>
+        </div>
+        <div className="notice-container">
+          <h2>Writing a good question</h2>
+          <p>
+            You’re ready to ask a programming-related question and this form
+            will help guide you through the process.
+          </p>
+          <p>
+            Looking to ask a non-programming question? See the topics here to
+            find a relevant site.
+          </p>
+          <h5>step</h5>
+          <ul>
+            <li>Summarize your problem in a one-line title.</li>
+            <li>Describe your problem in more detail.</li>
+            <li>Describe what you tried and what you expected to happen.</li>
+            <li>
+              Add “tags” which help surface your question to members of the
+              community.
+            </li>
+            <li>Review your question and post it to the site.</li>
+          </ul>
+        </div>
+        <main>
+          <div className="title-container">
+            <div className="title-box">
+              <div className="title">Title</div>
+              <div className="explanation-box">
+                Be specific and imagine you’re asking a question to another
+                person.
+              </div>
+            </div>
+            <div>
+              <input
+                className="title-input"
+                type="text"
+                placeholder="e.g. Is there an R function for finding the index of an element in a vector?"
+              ></input>
+            </div>
+          </div>
+          <div className="tag-container">
+            <div className="tag-box">
+              <div className="tag">Tags</div>
+              <div className="explanation-box">
+                Add up to 5 tags to describe what your question is about. Start
+                typing to see suggestions.
+              </div>
+            </div>
+            <div>
+              <input
+                className="tag-input"
+                type="text"
+                placeholder="e.g. (c flutter django)"
+              ></input>
+            </div>
+          </div>
+        </main>
+        <Editor5 />
+      </div>
+    </StyleAskPage>
+  );
+}
+
+export default AskQuestionPage;