feat: 행사 생성 페이지 구현 (#87)

* feat: 행사 생성 페이지 디자인시스템 적용

* design : index.css 수정

* feat: 행사 생성 api 연결

* style: lint 적용

client/.prettierrc

@@ -9,4 +9,4 @@
 	"jsxSingleQuote": false,
 	"bracketSpacing": false,
 	"proseWrap": "preserve"
-}
+}

client/package.json

@@ -44,6 +44,9 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
+    "@types/dotenv-webpack": "^7.0.7",
+    "dotenv-webpack": "^8.1.0",
+    "haengdong-design": "^0.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1"

client/src/App.tsx

@@ -1,7 +1,12 @@
+import {HDesignProvider} from 'haengdong-design';
 import {Outlet} from 'react-router-dom';
 
 const App: React.FC = () => {
-  return <Outlet />;
+  return (
+    <HDesignProvider>
+      <Outlet />
+    </HDesignProvider>
+  );
 };
 
 export default App;

client/src/apis/fetcher.ts

@@ -6,7 +6,7 @@ type HeadersType = [string, string][] | Record<string, string> | Headers;
 export type ObjectQueryParams = Record<string, string | number | boolean>;
 
 type RequestProps = {
-  baseUrl: string;
+  baseUrl?: string;
   endpoint: string;
   headers?: HeadersType;
   body?: Body | object | null;
@@ -24,6 +24,8 @@ type Options = {
   body?: Body | null;
 };
 
+const API_BASE_URL = process.env.API_BASE_URL;
+
 const objectToQueryString = (params: ObjectQueryParams): string => {
   return Object.entries(params)
     .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
@@ -57,7 +59,7 @@ export const requestDelete = ({headers = {}, ...args}: RequestProps) => {
   return fetcher({method: 'DELETE', headers, ...args});
 };
 
-const fetcher = ({method, baseUrl, endpoint, headers, body, queryParams}: FetcherProps) => {
+const fetcher = ({baseUrl = API_BASE_URL, method, endpoint, headers, body, queryParams}: FetcherProps) => {
   // const token = generateBasicToken(USER_ID, USER_PASSWORD);
   const options = {
     method,

client/src/apis/requestPostEvent.ts

@@ -0,0 +1,13 @@
+import {requestPost} from './fetcher';
+
+interface RequestPostEventProps {
+  name: string;
+}
+
+export const requestPostEvent = async ({name}: RequestPostEventProps) => {
+  requestPost({
+    headers: {'Content-Type': 'application/json'},
+    body: {name},
+    endpoint: '/api/events',
+  });
+};

client/src/constants/routerUrls.ts

@@ -1,7 +1,7 @@
 export const ROUTER_URLS = {
   main: '',
-  createEvent: '/create-event',
-  completeCreateEvent: '/create-event/complete',
+  eventCreateName: '/event/create/name',
+  eventCreateComplete: '/event/create/complete',
   event: '/event',
   eventManage: '/event/:eventId',
 };

client/src/index.css

@@ -1,5 +1,9 @@
 body {
   max-width: 768px;
+  height: 100lvh;
   margin: 0 auto;
-  border: 1px solid gray;
+}
+
+section {
+  width: 100%;
 }

client/src/pages/CompleteCreateEvent/CompleteCreateEvent.tsx → client/src/pages/Create/Complete.tsx

@@ -1,5 +1,6 @@
 import {useEffect, useState} from 'react';
 import {useLocation, useNavigate} from 'react-router-dom';
+import {FixedButton, MainLayout, Title} from 'haengdong-design';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
@@ -11,7 +12,7 @@ const CompleteCreateEvent = () => {
   useEffect(() => {
     const getUrl = async () => {
       const eventTitle = location.search;
-      console.log(eventTitle);
+      // console.log(eventTitle);
 
       // const url = await fetch();
       setUrl('hangsapage');
@@ -21,14 +22,15 @@ const CompleteCreateEvent = () => {
   }, []);
 
   return (
-    <section>
-      <h1>행사 개시</h1>
-      <h3>
-        행사가 성공적으로 개시됐어요 :) 행사 링크를 통해서 참여자 관리가 가능해요. 관리를 위해서 행사 관리 링크를 보관해
-        주세요.
-      </h3>
-      <button onClick={() => navigate(`${ROUTER_URLS.event}/${url}`)}>관리 페이지로 이동</button>
-    </section>
+    <MainLayout>
+      {/* <TopNav navType="back" /> */}
+      <Title
+        title="행사 개시"
+        description="행사가 성공적으로 개시됐어요 :) 행사 링크를 통해서 참여자 관리가 가능해요. 관리를 위해서 행사 관리 링크를 보관해
+        주세요."
+      />
+      <FixedButton onClick={() => navigate(`${ROUTER_URLS.event}/${url}`)}>관리 페이지로 이동</FixedButton>
+    </MainLayout>
   );
 };
 

client/src/pages/Create/Name.tsx

@@ -0,0 +1,36 @@
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {FixedButton, Input, MainLayout, TextButton, Title, TopNav} from 'haengdong-design';
+
+import {requestPostEvent} from '@apis/requestPostEvent';
+
+import {ROUTER_URLS} from '@constants/routerUrls';
+
+const CreateEvent = () => {
+  const [eventTitle, setEventTitle] = useState('');
+  const navigate = useNavigate();
+
+  const submitEventTitle = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const result = await requestPostEvent({name: eventTitle});
+
+    navigate(`${ROUTER_URLS.eventCreateComplete}?${new URLSearchParams({title: eventTitle})}`);
+  };
+
+  return (
+    <MainLayout>
+      <TopNav navType="back" />
+      <Title title="행사 이름 입력" description="시작할 행사 이름을 입력해 주세요." />
+      <form onSubmit={submitEventTitle}>
+        <Input
+          value={eventTitle}
+          onChange={event => setEventTitle(event.target.value)}
+          placeholder="ex) 행동대장 야유회"
+        />
+        <FixedButton>행동 개시!</FixedButton>
+      </form>
+    </MainLayout>
+  );
+};
+
+export default CreateEvent;

client/src/pages/Create/index.ts

@@ -0,0 +1,2 @@
+export {default as CreateNamePage} from './Name';
+export {default as CreateCompletePage} from './Complete';

client/src/pages/Main/Main.tsx

@@ -1,15 +1,17 @@
 import {useNavigate} from 'react-router-dom';
+import {FixedButton, MainLayout, Title} from 'haengdong-design';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
 const Main = () => {
   const navigate = useNavigate();
 
   return (
-    <section>
-      <h1>행동대장</h1>
-      <button onClick={() => navigate(ROUTER_URLS.createEvent)}>행사 생성하기</button>
-    </section>
+    <MainLayout>
+      {/* <TopNav navType="back" /> */}
+      <Title title="행동대장" description="랜딩페이지입니다." />
+      <FixedButton onClick={() => navigate(ROUTER_URLS.eventCreateName)}>행사 생성하기</FixedButton>
+    </MainLayout>
   );
 };
 

client/src/router.tsx

@@ -1,8 +1,7 @@
 import {createBrowserRouter} from 'react-router-dom';
 
 import {MainPage} from '@pages/Main';
-import {CreateEventPage} from '@pages/CreateEvent';
-import {CompleteCreateEventPage} from '@pages/CompleteCreateEvent';
+import {CreateNamePage, CreateCompletePage} from '@pages/Create';
 import {EventPage} from '@pages/Event';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
@@ -20,12 +19,12 @@ const router = createBrowserRouter([
         element: <MainPage />,
       },
       {
-        path: ROUTER_URLS.createEvent,
-        element: <CreateEventPage />,
+        path: ROUTER_URLS.eventCreateName,
+        element: <CreateNamePage />,
       },
       {
-        path: ROUTER_URLS.completeCreateEvent,
-        element: <CompleteCreateEventPage />,
+        path: ROUTER_URLS.eventCreateComplete,
+        element: <CreateCompletePage />,
       },
       {
         path: ROUTER_URLS.eventManage,

client/tsconfig.json

@@ -20,7 +20,7 @@
     // "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": ["jest"],
+    "types": ["node", "jest"],
     "esModuleInterop": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
@@ -46,5 +46,6 @@
     },
     "outDir": "./dist"
   },
+  "node": true,
   "include": ["src"]
 }

client/webpack.config.js

@@ -3,6 +3,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import {ModifySourcePlugin, ConcatOperation} from 'modify-source-webpack-plugin';
 import {fileURLToPath} from 'url';
+import Dotenv from 'dotenv-webpack';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -62,6 +63,7 @@ export default {
         },
       ],
     }),
+    new Dotenv(),
   ],
   devServer: {
     port: 3000,