설문폼 추가(추가작업필요)

src/App.js

@@ -1,10 +1,14 @@
-
 import './App.css';
 import Detail from './Components/Detail';
+import { Routes, Route } from 'react-router-dom';
+import Survey from './Components/Survey';
 function App() {
   return (
     <div className="App">
-      <Detail />
+      <Routes>
+        <Route path="/" element={<Detail />} />
+        <Route path="/survey" element={<Survey />} />
+      </Routes>
     </div>
   );
 }

src/Components/Detail.js

@@ -3,7 +3,6 @@ import { CarryOutOutlined, CommentOutlined } from '@ant-design/icons';
 import { Badge, Divider, Space } from 'antd';
 import { Tag } from 'antd';
 import styled from 'styled-components';
-import "../App.css";
 
   const Detail = () => {
 
@@ -28,7 +27,7 @@ import "../App.css";
 
     ]
 
-    
+
   return (
 
 
@@ -42,7 +41,10 @@ import "../App.css";
       <Header>
         <h1>동역학</h1>
         <h5>CRTR23423</h5>
+
       </Header>
+
+
 
 
 

src/Components/Form.js

@@ -0,0 +1,85 @@
+import { Button, Checkbox, Form, Input } from 'antd';
+
+function SurveyForm() {
+
+    const onFinish = (values) => {
+        console.log('Success:', values);
+      };
+      const onFinishFailed = (errorInfo) => {
+        console.log('Failed:', errorInfo);
+      };
+
+      const { TextArea } = Input;
+
+      return (
+        <Form
+          name="basic"
+          labelCol={{
+            span: 8,
+          }}
+          wrapperCol={{
+            span: 16,
+          }}
+          initialValues={{
+            remember: true,
+          }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="회신받을 이메일"
+            name="회신받을 이메일"
+            rules={[
+              {
+                required: true,
+                message: '이메일을 입력하세요',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="제목"
+            name="제목"
+            rules={[
+              {
+                required: true,
+                message: '제목을 입력하세요',
+              },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item label="내용">
+          <TextArea rows={10} />
+          </Form.Item>
+
+          <Form.Item
+            name="remember"
+            valuePropName="checked"
+            wrapperCol={{
+              offset: 8,
+              span: 16,
+            }}
+          >
+            <Checkbox>본인입니다</Checkbox>
+          </Form.Item>
+
+          <Form.Item
+            wrapperCol={{
+              offset: 8,
+              span: 16,
+            }}
+          >
+            <Button type="primary" htmlType="submit">
+             제출
+            </Button>
+          </Form.Item>
+        </Form>
+      );
+}
+
+export default SurveyForm;

src/Components/Survey.js

@@ -0,0 +1,46 @@
+import SurveyForm from './Form';
+import { Card } from 'antd';
+import styled from 'styled-components';
+const Survey = () => {
+
+    return(
+
+        <>
+        <LightYellowBack>
+            <Wrapping>
+
+                <Card bordered={false}>
+
+
+                 <h2>피드백/문의</h2>
+                 <SurveyForm />
+
+
+                </Card>
+            </Wrapping>
+        </LightYellowBack>
+        </>
+
+    )
+
+
+
+
+}
+
+const LightYellowBack = styled.div`
+        background-color : #fcd469;
+    `; 
+
+const Wrapping = styled.div`
+        position: relative;
+        margin-left : 200px;
+        margin-right : 200px;
+        width : 75%
+        display : flex;
+        justify-content: center;
+        align-items: center;
+    `; 
+
+
+export default Survey;

src/index.js

@@ -3,11 +3,16 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { Routes, Route, BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+            <Routes>
+                <Route path="/*" element={<App />} />
+            </Routes>
+        </BrowserRouter>
   </React.StrictMode>
 );