From bf3fb542b9e9161ce1a2ffdb49ed58dd89e1da02 Mon Sep 17 00:00:00 2001
From: dassasa <96377376+dassasa@users.noreply.github.com>
Date: Mon, 15 Apr 2024 18:00:21 +0900
Subject: [PATCH] Create group page (#7)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 완료버튼 추가

* 그룹생성 페이지 수정

* ci: 설정 파일 수정

* feat: 헤더 영역 추가

* remove: 버튼 삭제

* feat: dummy 데이터 파일 생성

* docs: import styled-component 삭제

* feat: tab 생성

---------

Co-authored-by: 조준호 <junho@jojunhoui-MacBookAir.local>
---
 .eslintrc.js                        |  26 ++++-
 src/App.js                          |   8 +-
 src/Components/Forms/CreateForm.js  | 144 ++++++++++++++++++++++++++++
 src/Components/NavBar/NavBar.js     |  39 ++++++--
 src/Pages/CreateGroupPage/index.js  |   9 +-
 src/Pages/ShowGroupDetails/index.js |  34 ++++++-
 src/db/data.json                    |  21 ++++
 7 files changed, 264 insertions(+), 17 deletions(-)
 create mode 100644 src/Components/Forms/CreateForm.js
 create mode 100644 src/db/data.json

diff --git a/.eslintrc.js b/.eslintrc.js
index fe79ba0..97078de 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,29 @@
 module.exports = {
     env: {
+        browser: true,
+        es2021: true,
         node: true,
+        jest: true,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:react-hooks/recommended',
+    ],
+    overrides: [],
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    plugins: ['react', 'react-hooks', 'jsx-a11y'],
+    rules: {
+        'react/react-in-jsx-scope': 'off',
+    },
+    settings: {
+        react: { version: 'detect' },
     },
-    extends: ['eslint:recommended', 'plugin:react/recommended'],
-    plugins: ['react'],
 }
diff --git a/src/App.js b/src/App.js
index 174b541..1528a86 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,16 +9,16 @@ import NavBar from './Components/NavBar/NavBar'
 
 function App() {
     return (
-        <div className="App">
-            <BrowserRouter>
+        <BrowserRouter>
+            <div className="App">
                 <NavBar />
                 <Routes>
                     <Route path="/createGroup" element={<CreateGroup />} />
                     <Route path="/showGroupList" element={<ShowGroupList />} />
                     <Route path="/showGroupDetails" element={<ShowGroupDetails />} />
                 </Routes>
-            </BrowserRouter>
-        </div>
+            </div>
+        </BrowserRouter>
     )
 }
 
diff --git a/src/Components/Forms/CreateForm.js b/src/Components/Forms/CreateForm.js
new file mode 100644
index 0000000..aacb850
--- /dev/null
+++ b/src/Components/Forms/CreateForm.js
@@ -0,0 +1,144 @@
+import React from 'react'
+import { PlusOutlined } from '@ant-design/icons'
+import { Form, Input, Button, Upload } from 'antd'
+import styled from 'styled-components'
+
+// 폼 전송 성공 시 실행되는 함수
+/* Create 구현 필요 */
+const onFinish = async (values) => {
+    try {
+        const formData = new FormData()
+        formData.append('groupname', values.groupname)
+        formData.append('groupdescription', values.groupdescription)
+        if (values.fileList && values.fileList.length > 0) {
+            formData.append('file', values.fileList[0].originFileObj)
+        }
+
+        const response = await fetch('http://localhost:3001/groups', {
+            method: 'POST',
+            body: formData,
+        })
+
+        if (!response.ok) {
+            throw new Error('서버 응답이 실패하였습니다.')
+        }
+
+        console.log('폼 데이터 전송 성공:', values.groupname)
+    } catch (error) {
+        console.error('폼 데이터 전송 실패:', error)
+    }
+}
+
+// 폼 전송 실패 시 실행되는 함수
+const onFinishFailed = (errorInfo) => {
+    console.log('Failed:', errorInfo)
+}
+
+// 파일 업로드 시 실행되는 함수
+const normFile = (e) => {
+    console.log('Upload event:', e)
+    if (Array.isArray(e)) {
+        return e
+    }
+    return e && e.fileList
+}
+
+// 전체 폼을 감싸는 스타일드 컴포넌트
+const StyledForm = styled(Form)`
+    margin: 30px;
+`
+// 폼을 감싸는 스타일드 컴포넌트
+const StyledFormWrapper = styled.div`
+    padding: 10px;
+    border-radius: 10px;
+    background-color: rgba(0, 62.67, 151.94, 0.08);
+    max-width: 800px;
+    margin: 10px auto;
+`
+
+// 타이틀을 감싸는 스타일드 컴포넌트
+const Title = styled.h1`
+    margin: 10px 40px;
+    text-align: left;
+    font-size: 32px;
+    font-family: 'KoPubWorld Dotum';
+    font-weight: 700;
+    word-wrap: break-word;
+`
+// 폼 아이템을 감싸는 스타일드 컴포넌트
+const StyledFormItems = styled(Form.Item)`
+    .ant-form-item-label {
+        text-align: left;
+        margin-left: 40px;
+        font-size: 24px;
+        font-family: 'KoPubWorld Dotum';
+        font-weight: 700;
+        word-wrap: break-word;
+    }
+    .ant-input {
+        text-align: left;
+        font-size: 14px;
+        margin-top: 6px;
+    }
+    .ant-btn {
+        height: 50px;
+        width: 100px;
+        font-size: 24px;
+    }
+`
+const CreateForm = () => (
+    <StyledForm
+        name="basic"
+        labelCol={{
+            span: 3,
+        }}
+        wrapperCol={{
+            span: 16,
+        }}
+        initialValues={{
+            remember: true,
+        }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+    >
+        <StyledFormWrapper>
+            <Title>모임 기본 정보 등록</Title>
+            <StyledFormItems label="모임 이름" name="groupname">
+                <Input placeholder="ex) 한사랑산악회, 숭실대 IT대 학생회" />
+            </StyledFormItems>
+            <StyledFormItems label="모임 설명" name="groupdescription">
+                <Input placeholder="ex) 열정 있는 사람들의 모임" />
+            </StyledFormItems>
+        </StyledFormWrapper>
+        <StyledFormWrapper>
+            <Title>모임 회원 등록</Title>
+            <StyledFormItems label="파일 업로드" valuePropName="fileList" getValueFromEvent={normFile}>
+                <Upload action="/upload.do" accept=".csv, .xlsx" listType="picture-card" maxCount={1}>
+                    <button
+                        style={{
+                            border: 0,
+                            background: 'none',
+                        }}
+                        type="button"
+                    >
+                        <PlusOutlined />
+                        <div
+                            style={{
+                                marginTop: 8,
+                            }}
+                        >
+                            업로드하기
+                        </div>
+                    </button>
+                </Upload>
+            </StyledFormItems>
+        </StyledFormWrapper>
+        <StyledFormItems wrapperCol={{}}>
+            <Button type="primary" htmlType="submit">
+                완료
+            </Button>
+        </StyledFormItems>
+    </StyledForm>
+)
+export default CreateForm
diff --git a/src/Components/NavBar/NavBar.js b/src/Components/NavBar/NavBar.js
index 2425063..571f4d7 100644
--- a/src/Components/NavBar/NavBar.js
+++ b/src/Components/NavBar/NavBar.js
@@ -1,18 +1,43 @@
+import { Menu } from 'antd'
+import { Link } from 'react-router-dom'
 import React from 'react'
 import styled from 'styled-components'
 
-const StyledNavBar = styled.div`
+const StyledMenu = styled(Menu)`
     height: 200px;
     width: 100%;
-    background-color: green;
+    background-color: #003f98;
+    display: flex;
+    justify-content: right;
+    padding: 40px;
+    .ant-menu-item {
+        height: 40px;
+        color: white;
+        font-size: 22px;
+        font-weight: 700;
+        font-family: 'KoPubWorld Dotum';
+        word-wrap: break-word;
+        margin-right: 50px;
+    }
 `
 
+const items = [
+    {
+        key: 'myGroups',
+        label: <Link to="/showGroupList">나의 모임</Link>,
+    },
+    {
+        key: 'myEvents',
+        label: <Link to="/showEventList">나의 이벤트</Link>,
+    },
+    {
+        key: 'myProfile',
+        label: <Link to="/showProfile">김보안</Link>,
+    },
+]
+
 const NavBar = () => {
-    return (
-        <div>
-            <StyledNavBar />
-        </div>
-    )
+    return <StyledMenu mode="horizontal" items={items}></StyledMenu>
 }
 
 export default NavBar
diff --git a/src/Pages/CreateGroupPage/index.js b/src/Pages/CreateGroupPage/index.js
index a8898e6..36ba16b 100644
--- a/src/Pages/CreateGroupPage/index.js
+++ b/src/Pages/CreateGroupPage/index.js
@@ -1,8 +1,13 @@
 import React from 'react'
-// import styled from 'styled-components'
+import CreateForm from '../../Components/Forms/CreateForm'
+//import CreateForm from '../../Components/Forms/CreateForm'
 
 const CreateGroup = () => {
-    return <div></div>
+    return (
+        <div>
+            <CreateForm />
+        </div>
+    )
 }
 
 export default CreateGroup
diff --git a/src/Pages/ShowGroupDetails/index.js b/src/Pages/ShowGroupDetails/index.js
index 6ce0b5e..518e661 100644
--- a/src/Pages/ShowGroupDetails/index.js
+++ b/src/Pages/ShowGroupDetails/index.js
@@ -1,7 +1,37 @@
 import React from 'react'
-
+import styled from 'styled-components'
+import { Tabs } from 'antd'
+import dummy from '../../db/data.json'
+const Wrapper = styled.div`
+    padding: 10px;
+    border-radius: 10px;
+    background-color: rgba(0, 62.67, 151.94, 0.08);
+    max-width: 400px;
+    margin: 10px 60px;
+`
+const onChange = (key) => {
+    console.log(key)
+}
+/* Read 구현 필요 */
+const items = [
+    {
+        key: '1',
+        label: '회원',
+        children: '그룹 정보',
+    },
+    {
+        key: '2',
+        label: '이벤트',
+        children: '그룹 멤버',
+    },
+]
+console.log(dummy)
 const ShowGroupDetails = () => {
-    return <div>ShowGroupDetails 페이지</div>
+    return (
+        <Wrapper>
+            <Tabs defaultActiveKey="1" items={items} onChange={onChange}></Tabs>
+        </Wrapper>
+    )
 }
 
 export default ShowGroupDetails
diff --git a/src/db/data.json b/src/db/data.json
new file mode 100644
index 0000000..883835e
--- /dev/null
+++ b/src/db/data.json
@@ -0,0 +1,21 @@
+{
+    "users": [{ "userId": 1 }, { "userId": 2 }, { "userId": 3 }],
+
+    "groups": [
+        {
+            "id": 1,
+            "name": "모임1",
+            "descript": "모임1입니다."
+        },
+        {
+            "id": 2,
+            "name": "모임2",
+            "descript": "모임2입니다."
+        },
+        {
+            "id": 3,
+            "name": "모임3",
+            "descript": "모임3입니다."
+        }
+    ]
+}