Merge branch 'develop' of https://github.com/woowacourse-teams/2024-h…

…aeng-dong into feature/#61

.github/workflows/frontend-pll-request.yml

@@ -0,0 +1,34 @@
+name: frontend-pull-request
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    branches: [main, develop]
+    paths:
+      - 'client/**'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest  
+
+    defaults:
+      run:
+        shell: bash
+        working-directory: ./client
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v2  
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v2 
+      with:
+        node-version: '20.15.1'
+
+    - name: Install dependencies
+      working-directory: ./client
+      run: npm install  
+
+    - name: Run lint
+      working-directory: ./client
+      run: npm run lint  

client/.prettierrc

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

client/eslint.config.mjs

@@ -32,8 +32,6 @@ export default [
       'react/react-in-jsx-scope': 'off',
       'react/prop-types': 'off',
       'react/jsx-uses-vars': 'error',
-      '@typescript-eslint/no-use-before-define': ['error'],
-      '@typescript-eslint/explicit-module-boundary-types': 'error',
       'import/order': [
         'error',
         {

client/package.json

@@ -22,6 +22,7 @@
     "@typescript-eslint/parser": "^7.16.0",
     "css-loader": "^7.1.2",
     "eslint": "^9.6.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -43,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/components/Modal/SetActionModalContent/SetActionModalContent.tsx

@@ -1,6 +1,7 @@
-import {Switch} from '@components/Switch';
 import {useState} from 'react';
 
+import {Switch} from '@components/Switch';
+
 import SetPurchase from './SetPurchase';
 import UpdateParticipants from './UpdateParticipants';
 import {switchContainerStyle} from './SetActionModalContent.style';

client/src/components/Modal/SetActionModalContent/SetPurchase.tsx

@@ -1,4 +1,5 @@
 import {useState} from 'react';
+
 import {PurchaseInformation} from '@pages/Event/Event';
 
 interface SetPurchaseProps {

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,7 @@
 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';
 
 const CompleteCreateEvent = () => {
@@ -10,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');
@@ -20,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/Event/Event.tsx

@@ -1,9 +1,11 @@
-import {SetInitialParticipants} from '@components/Modal/SetInitialParticipants';
-import {Modal} from '@components/Modal';
 import {useState} from 'react';
 import {useParams} from 'react-router-dom';
+
+import {SetInitialParticipants} from '@components/Modal/SetInitialParticipants';
 import {SetActionModalContent} from '@components/Modal/SetActionModalContent';
 
+import {Modal} from '@components/Modal';
+
 import {orderHeaderStyle} from './Event.style';
 
 export type PurchaseInformation = {

client/src/pages/Main/Main.tsx

@@ -1,14 +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,10 +1,11 @@
 import {createBrowserRouter} from 'react-router-dom';
-import {ROUTER_URLS} from '@constants/routerUrls';
+
 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';
+
 import App from './App';
 
 const router = createBrowserRouter([
@@ -18,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

@@ -16,11 +16,11 @@
 
     "jsx": "react-jsx",
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    // "noUnusedLocals": true,
+    // "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,