🚀 ver3.0.0

변경 사항 방 생성 기능 공유 기능 배너 캐로셀 UI 개선 마이 페이지 추가
karrotmvp · Dec 14, 2021 · 8d5ca11 · 8d5ca11
2 parents d711786 + 6a00223
commit 8d5ca11
Show file tree

Hide file tree

Showing 132 changed files with 4,459 additions and 812 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.3.0",
     "@firebase/analytics": "^0.7.2",
     "@karrotframe/navigator": "^0.17.3",
-    "@karrotmarket/mini": "^0.11.3",
+    "@karrotmarket/mini": "^0.12.0",
     "agora-rtc-react": "^1.1.0",
     "agora-rtc-sdk": "^3.6.6",
     "axios": "^0.22.0",
@@ -42,11 +42,15 @@
     "react-bubble-ui": "^1.1.1",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.21.0",
     "react-icons": "^4.3.1",
     "react-loading-skeleton": "^3.0.1",
     "react-rewards": "^1.1.2",
     "react-router-dom": "^5.3.0",
+    "react-slick": "^0.28.1",
+    "react-toast": "^1.0.3",
     "recoil": "^0.4.1",
+    "slick-carousel": "^1.8.1",
     "swiper": "^7.0.9",
     "ts-node": "^10.2.1"
   },
@@ -55,6 +59,7 @@
     "@types/dotenv-webpack": "^7.0.3",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "@types/react-slick": "^0.23.7",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",

diff --git a/public/index.html b/public/index.html
@@ -2,12 +2,13 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link rel="shortcut icon" href="#">
     <title>Document</title>
   </head>
   <body>
     <div id="root"></div>
     <div id="modal-root"></div>
+    <div id="spinner-root"></div>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,18 +3,21 @@ import React, { useEffect } from 'react';
 import { css } from '@emotion/css';
 import { Navigator, Screen } from '@karrotframe/navigator';
 import { getAnalytics, logEvent } from 'firebase/analytics';
+import { ToastContainer } from 'react-toast';
 
+import CreateMeetingForm from './components/CreateMeetingPage/CreateMeetingForm';
+import CreateGuidePage from './components/FullImgPage/CreateGuidePage';
+import GuidePage from './components/FullImgPage/GuidePage';
 import LandingPage from './components/LandingPage';
 import MeetingDetailPage from './components/MeetingDetailPage';
 const AgoraPage = React.lazy(() => import('./components/MeetingPage'));
 import MeetingSuggestionPage from './components/MeetingSuggestionPage';
+import MyPage from './components/MyPage';
 import NotFoundPage from './components/NotFountPage';
 import NotServiceRegionPage from './components/NotServiceRegionPage';
-import OnBoardPage from './components/OnBoardPage';
 import ReservationPage from './components/ReservationPage';
-import AuthWithoutMini from './hoc/AuthWithoutMini';
+import useMini from './hook/useMini';
 import { app } from './util/firebase';
-import mini from './util/mini';
 import { checkMobileType } from './util/utils';
 
 const NavigatorStyle = css`
@@ -24,22 +27,26 @@ const NavigatorStyle = css`
 export const analytics = getAnalytics(app);
 
 const App: React.FC = () => {
+  const { ejectApp, loginWithoutMini } = useMini();
+
   useEffect(() => {
     logEvent(analytics, 'launch_app');
-  }, []);
+    loginWithoutMini();
+  }, [loginWithoutMini]);
 
   return (
     <Navigator
       theme={checkMobileType()}
-      onClose={() => mini.close()}
+      onClose={ejectApp}
       className={NavigatorStyle}
     >
-      <Screen path="/" component={AuthWithoutMini(LandingPage)} />
-      <Screen path="/guide" component={OnBoardPage} />
-      <Screen
-        path="/meetings/:id"
-        component={AuthWithoutMini(MeetingDetailPage)}
-      />
+      <ToastContainer position="bottom-center" delay={2000} />
+      <Screen path="/" component={LandingPage} />
+      <Screen path="/create-guide" component={CreateGuidePage} />
+      <Screen path="/guide" component={GuidePage} />
+      <Screen path="/me" component={MyPage} />
+      <Screen path="/meetings/:id" component={MeetingDetailPage} />
+      <Screen path="/create" component={CreateMeetingForm} />
       <Screen path="/suggestion/meeting" component={MeetingSuggestionPage} />
       <Screen path="/reservation" component={ReservationPage} />
       <Screen path="/not-service-region" component={NotServiceRegionPage} />

diff --git a/src/api/agora.ts b/src/api/agora.ts
@@ -31,6 +31,13 @@ export type InfoType = {
       recommend_user: { text: string }[];
       recommend_topic: { text: string }[];
     };
+    host: {
+      id: number;
+      nickname: string;
+      profile_image_url: string;
+      manner_temperature: number;
+      region_name: string;
+    };
   };
   user: {
     id: number;

diff --git a/src/api/image.ts b/src/api/image.ts
@@ -0,0 +1,46 @@
+import axios from 'axios';
+
+import customAxios from '../util/request';
+
+export const uploadImage = async (file: File): Promise<string | undefined> => {
+  const preSignedUrl = await getPreSignedUrl(file.name);
+  const imageUrl = await uploadToBucket(preSignedUrl, file);
+  return imageUrl
+    ? `${preSignedUrl.data.url}${preSignedUrl.data.fields.key}`
+    : '';
+};
+
+const getPreSignedUrl = async (fileName: string) => {
+  const result: presignedUrlRes = await customAxios().get(
+    `/meetings/presigned-url?file_name=${fileName}`,
+  );
+  return result;
+};
+
+const uploadToBucket = async (preSignedUrl: presignedUrlRes, file: File) => {
+  try {
+    const formData = new FormData();
+    for (const [key, value] of Object.entries(preSignedUrl.data.fields)) {
+      formData.append(key, value);
+    }
+    formData.append('file', file);
+    await axios.post(preSignedUrl.data.url, formData);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+type presignedUrlRes = {
+  data: {
+    url: string;
+    fields: {
+      key: string;
+      'x-amz-algorithm': string;
+      'x-amz-credential': string;
+      'x-amz-date': string;
+      policy: string;
+      'x-amz-signature': string;
+    };
+  };
+};
diff --git a/src/api/meeting.ts b/src/api/meeting.ts
@@ -13,6 +13,17 @@ export const getMeetings = async (region_id: string) => {
   }
 };
 
+export const getMyMeetings = async () => {
+  try {
+    const result: getMeetingsRes = await customAxios().get(
+      `/users/me/meetings`,
+    );
+    return { success: true, data: result.data };
+  } catch (e) {
+    return { success: false };
+  }
+};
+
 export const getMeetingDetail = async (
   id: string,
 ): Promise<getMeetingDetailRes> => {
@@ -35,6 +46,40 @@ export const increaseMeetingEnterUserCount = async (
   }
 };
 
+export const createMeeting = async (
+  createData: createFormType,
+): Promise<createMeetingRes> => {
+  try {
+    const res: { data: { id: number } } = await customAxios().post(
+      `/meetings/`,
+      createData,
+    );
+    return { success: true, data: res.data };
+  } catch (e) {
+    return { success: false };
+  }
+};
+
+export const deleteMeeting = async (id: string): Promise<deleteMeetingRes> => {
+  try {
+    await customAxios().delete(`/meetings/${id}/`);
+    return { success: true };
+  } catch (e) {
+    return { success: false };
+  }
+};
+
+export const shareMeeting = async (id: string): Promise<shareMeetingRes> => {
+  try {
+    const res: { data: { short_url: string } } = await customAxios().get(
+      `/share/short-url/meeting?meeting=${id}`,
+    );
+    return { success: true, data: res.data };
+  } catch (e) {
+    return { success: false };
+  }
+};
+
 interface getMeetingsRes {
   success: boolean;
   data?: MeetingList[];
@@ -48,3 +93,29 @@ interface getMeetingDetailRes {
 interface increaseMeetingEnterUserCountRes {
   success: boolean;
 }
+
+interface createFormType {
+  title: string;
+  date: string;
+  start_time: string;
+  end_time: string;
+  is_video: boolean;
+  image_url: string | undefined;
+  description: {
+    text: string;
+  };
+}
+
+interface createMeetingRes {
+  success: boolean;
+  data?: { id: number };
+}
+
+interface deleteMeetingRes {
+  success: boolean;
+}
+
+interface shareMeetingRes {
+  success: boolean;
+  data?: { short_url: string };
+}
diff --git a/src/api/user.ts b/src/api/user.ts
@@ -28,7 +28,12 @@ interface loginReq {
 
 interface loginRes {
   success: boolean;
-  data?: { token: string; nickname: string; region: string };
+  data?: {
+    token: string;
+    nickname: string;
+    region: string;
+    profile_img_url: string;
+  };
 }
 
 interface usersRes {

diff --git a/src/assets/icon/Notifications_none.tsx b/src/assets/icon/Notifications_none.tsx
diff --git a/src/assets/icon/agora/host_icon.svg b/src/assets/icon/agora/host_icon.svg
diff --git a/src/assets/icon/arrow_iOS_large.svg b/src/assets/icon/arrow_iOS_large.svg
diff --git a/src/assets/icon/arrow_iOS_small.svg b/src/assets/icon/arrow_iOS_small.svg
diff --git a/src/assets/icon/bulb.svg → src/assets/icon/bulb_suggestion.svg b/src/assets/icon/bulb.svg → src/assets/icon/bulb_suggestion.svg
diff --git a/src/assets/icon/nav_back.svg → src/assets/icon/common/nav_back.svg b/src/assets/icon/nav_back.svg → src/assets/icon/common/nav_back.svg
diff --git a/src/assets/icon/nav_close.svg → src/assets/icon/common/nav_close.svg b/src/assets/icon/nav_close.svg → src/assets/icon/common/nav_close.svg
diff --git a/src/assets/icon/common/nav_my_page.svg b/src/assets/icon/common/nav_my_page.svg
diff --git a/src/assets/icon/person.svg → src/assets/icon/common/person.svg b/src/assets/icon/person.svg → src/assets/icon/common/person.svg
diff --git a/src/assets/icon/common/person_fill__grey.svg b/src/assets/icon/common/person_fill__grey.svg
diff --git a/src/assets/icon/common/spinner.svg b/src/assets/icon/common/spinner.svg