Merge branch 'frontend' into feature/fe/#224-combine-map-and-canvas

boostcampwm-2024 · Nov 21, 2024 · 1aadab1 · 1aadab1
2 parents febc9ab + caec07c
commit 1aadab1
Show file tree

Hide file tree

Showing 22 changed files with 579 additions and 134 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="public/assets/favicon.svg" />
+    <link rel="icon" href="/assets/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>선따라 길따라 - DDara</title>
   </head>

diff --git a/frontend/src/api/auth.api.ts b/frontend/src/api/auth.api.ts
@@ -1,6 +1,6 @@
 import { getApiClient } from '@/api/client.api.ts';
 import { ResponseDto } from '@/api/dto/response.dto.ts';
-import { LoginResEntity } from '@/api/dto/auth.dto.ts';
+import { LoginResEntity, RegisterResEntity } from '@/api/dto/auth.dto.ts';
 
 export const doLogin = (id: string, password: string): Promise<ResponseDto<LoginResEntity>> => {
   const promiseFn = (
@@ -11,11 +11,40 @@ export const doLogin = (id: string, password: string): Promise<ResponseDto<Login
     apiClient
       .post('/auth/login', { id, password })
       .then(res => {
-        if (!res.data.success) {
+        if (res.status !== 200) {
           console.error(res);
-          fnReject(`msg.${res.data.resultMsg}`);
+          fnReject(`msg.${res}`);
         } else {
-          fnResolve(new ResponseDto<LoginResEntity>(res.data));
+          fnResolve(new ResponseDto<LoginResEntity>(res));
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        fnReject('msg.RESULT_FAILED');
+      });
+  };
+  return new Promise(promiseFn);
+};
+
+export const doRegister = (
+  id: string,
+  name: string,
+  password: string,
+  email: string,
+): Promise<ResponseDto<RegisterResEntity>> => {
+  const promiseFn = (
+    fnResolve: (value: ResponseDto<RegisterResEntity>) => void,
+    fnReject: (reason?: any) => void,
+  ) => {
+    const apiClient = getApiClient();
+    apiClient
+      .post('/auth/register', { id, name, password, email })
+      .then(res => {
+        if (res.status !== 200) {
+          console.error(res);
+          fnReject(`msg.${res}`);
+        } else {
+          fnResolve(new ResponseDto<RegisterResEntity>(res));
         }
       })
       .catch(err => {

diff --git a/frontend/src/api/channel.api.ts b/frontend/src/api/channel.api.ts
@@ -0,0 +1,57 @@
+import { ResponseDto } from '@/api/dto/response.dto.ts';
+import {
+  createChannelReqEntity,
+  createChannelResEntity,
+  getUserChannelsResEntity,
+} from '@/api/dto/channel.dto.ts';
+import { getApiClient } from '@/api/client.api.ts';
+
+export const createChannel = (
+  data: createChannelReqEntity,
+): Promise<ResponseDto<createChannelResEntity>> => {
+  const promiseFn = (
+    fnResolve: (value: ResponseDto<createChannelResEntity>) => void,
+    fnReject: (reason?: any) => void,
+  ) => {
+    const apiClient = getApiClient();
+    apiClient
+      .post('/channel', data)
+      .then(res => {
+        if (res.status !== 200) {
+          console.error(res);
+          fnReject(`msg.${res}`);
+        } else {
+          fnResolve(new ResponseDto<createChannelResEntity>(res));
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        fnReject('msg.RESULT_FAILED');
+      });
+  };
+  return new Promise(promiseFn);
+};
+
+export const getUserChannels = (userId: string): Promise<ResponseDto<getUserChannelsResEntity>> => {
+  const promiseFn = (
+    fnResolve: (value: ResponseDto<getUserChannelsResEntity>) => void,
+    fnReject: (reason?: any) => void,
+  ) => {
+    const apiClient = getApiClient();
+    apiClient
+      .get(`/channel/user/${userId}`)
+      .then(res => {
+        if (res.status !== 200) {
+          console.error(res);
+          fnReject(`msg.${res}`);
+        } else {
+          fnResolve(new ResponseDto<getUserChannelsResEntity>(res));
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        fnReject('msg.RESULT_FAILED');
+      });
+  };
+  return new Promise(promiseFn);
+};
diff --git a/frontend/src/api/dto/auth.dto.ts b/frontend/src/api/dto/auth.dto.ts
@@ -3,3 +3,11 @@ export class LoginResEntity {
 
   userId: string | undefined;
 }
+
+export class RegisterResEntity {
+  id: string | undefined;
+
+  name: string | undefined;
+
+  email: string | undefined;
+}
diff --git a/frontend/src/api/dto/channel.dto.ts b/frontend/src/api/dto/channel.dto.ts
@@ -0,0 +1,59 @@
+export class locationEntity {
+  lat: number | undefined;
+
+  lng: number | undefined;
+}
+
+export class guestMarkerStyleEntity {
+  color: string | undefined;
+}
+
+export class guestEntity {
+  name: string | undefined;
+
+  start_location: locationEntity | undefined;
+
+  end_location: locationEntity | undefined;
+
+  path: locationEntity[] | undefined;
+
+  marker_style: guestMarkerStyleEntity | undefined;
+}
+
+export class createChannelReqEntity {
+  name: string | undefined;
+
+  host_id: string | undefined;
+
+  guests: guestEntity[] | undefined;
+}
+
+export class guestSimpleEntity {
+  id: string | undefined;
+
+  name: string | undefined;
+}
+
+export class createChannelResEntity {
+  id: string | undefined;
+
+  name: string | undefined;
+
+  host_id: string | undefined;
+
+  guests: guestSimpleEntity[] | undefined;
+
+  created_at: string | undefined;
+}
+
+export class channelListEntity {
+  id: string | undefined;
+
+  name: string | undefined;
+
+  generated_at: string | undefined;
+}
+
+export class getUserChannelsResEntity {
+  channels: channelListEntity[] | undefined;
+}
diff --git a/frontend/src/component/authmodal/AuthModal.tsx b/frontend/src/component/authmodal/AuthModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Modal } from '@/component/common/modal/Modal';
-import { doLogin } from '@/api/auth.api.ts';
+import { doLogin, doRegister } from '@/api/auth.api.ts';
 import { saveLocalData } from '@/utils/common/manageLocalData.ts';
 import { AppConfig } from '@/constants.ts';
 
@@ -45,30 +45,45 @@ export const AuthModal = (props: IAuthModalProps) => {
     }
   };
 
+  const switchToRegister = () => {
+    setModalType('register');
+  };
+
+  const switchToLogin = () => {
+    setModalType('login');
+  };
+
   const handleLoginClick = () => {
-    doLogin(loginData.id, loginData.pw).then(el => {
-      if (el.data?.token && el.data?.userId) {
-        saveLocalData(AppConfig.KEYS.LOGIN_TOKEN, el.data.token);
-        saveLocalData(AppConfig.KEYS.LOGIN_USER, el.data.userId);
-      }
-      window.location.reload();
-    });
+    doLogin(loginData.id, loginData.pw)
+      .then(el => {
+        if (el.data?.token && el.data?.userId) {
+          saveLocalData(AppConfig.KEYS.LOGIN_TOKEN, el.data.token);
+          saveLocalData(AppConfig.KEYS.LOGIN_USER, el.data.userId);
+        }
+        window.location.reload();
+      })
+      .catch(() => {
+        alert('아이디와 비밀번호를 다시 확인해주세요.');
+      });
   };
 
   const handleSignUpClick = () => {
     if (registerData.pw !== registerData.confirmPw) {
       alert('비밀번호가 일치하지 않습니다.');
       return;
     }
-    console.log('회원가입 데이터:', registerData);
-  };
-
-  const switchToRegister = () => {
-    setModalType('register');
-  };
-
-  const switchToLogin = () => {
-    setModalType('login');
+    doRegister(registerData.id, registerData.name, registerData.pw, registerData.email)
+      .then(el => {
+        if (el.data) {
+          alert('회원가입에 성공했습니다. 로그인해주세요.');
+          switchToLogin();
+        }
+      })
+      .catch(() => {
+        alert(
+          '회원가입에 실패했습니다. 다시 확인해주세요.\nid는 4자 이상, 비밀번호는 6자리 이상이어야 합니다.',
+        );
+      });
   };
 
   return (

diff --git a/frontend/src/component/header/HeaderBackButton.tsx b/frontend/src/component/header/HeaderBackButton.tsx
@@ -3,17 +3,14 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@/component/common/button/Button.tsx';
 import { useContext } from 'react';
 import { FooterContext } from '../layout/footer/LayoutFooterProvider';
-import { HeaderContext } from '../layout/header/LayoutHeaderProvider';
 
 export const HeaderBackButton = () => {
   const { resetFooterContext } = useContext(FooterContext);
-  const { resetHeaderContext } = useContext(HeaderContext);
   const navigate = useNavigate();
 
   const handleHeaderBackButtonClick = () => {
     if (window.history.length > 1) {
       resetFooterContext();
-      resetHeaderContext();
       navigate(-1);
     } else {
       navigate('/');

diff --git a/frontend/src/component/layout/constant/HeaderConst.ts b/frontend/src/component/layout/constant/HeaderConst.ts
@@ -0,0 +1,19 @@
+export const HEADER_TITLE: Record<string, string> = {
+  '/add-channel/:user/draw': '에 따른 경로 설정',
+};
+
+export const HEADER_SUBTITLE: Record<string, string> = {
+  '/add-channel/:user/draw': '사용자 별로 출발지/도착지(마커), 경로(그림)을 설정할 수 있습니다',
+};
+
+export const HEADER_LEFTBUTTON: Record<string, string> = {
+  '/add-channel': 'back',
+  '/add-channel/:user': 'back',
+  '/add-channel/:user/draw': 'back',
+  '/channel/:channelId/host': 'back',
+  '/register': 'back',
+};
+
+export const HEADER_RIGHTBUTTON: Record<string, string> = {
+  '/channel/:channelId/host': 'dropdown',
+};
diff --git a/frontend/src/component/layout/enumTypes.ts b/frontend/src/component/layout/enumTypes.ts
@@ -1,8 +1,13 @@
-export enum buttonActiveType {
+export enum buttonActiveStyle {
   'ACTIVE' = 'shadow-float text-gray-900',
   'PASSIVE' = 'shadow-innerButton text-gray-400',
 }
 
+export enum buttonActiveType {
+  ACTIVE = 'active',
+  PASSIVE = 'passive',
+}
+
 export enum backgroundType {
   'TRANSPARENCY' = '',
   'WHITE' = 'bg-white',

diff --git a/frontend/src/component/layout/footer/Footer.tsx b/frontend/src/component/layout/footer/Footer.tsx
@@ -1,15 +1,22 @@
 import classNames from 'classnames';
-import { buttonActiveType } from '../enumTypes';
+import { buttonActiveStyle, buttonActiveType } from '../enumTypes';
 
 export interface IFooterProps {
   title?: string;
   onClick?: () => void;
-  active?: boolean;
+  active?: buttonActiveType;
   isTranperency?: boolean;
 }
 
 export const Footer = (props: IFooterProps) => {
-  const buttonStyle = props.active ? buttonActiveType.ACTIVE : buttonActiveType.PASSIVE;
+  const buttonStyle =
+    props.active === buttonActiveType.ACTIVE ? buttonActiveStyle.ACTIVE : buttonActiveStyle.PASSIVE;
+  const handleClick = () => {
+    // ACTIVE 상태일 때만 onClick 실행
+    if (props.active === buttonActiveType.ACTIVE && props.onClick) {
+      props.onClick();
+    }
+  };
 
   return props.isTranperency ? (
     <div />
@@ -27,7 +34,7 @@ export const Footer = (props: IFooterProps) => {
           buttonStyle,
         )}
         type="button"
-        onClick={props.onClick}
+        onClick={handleClick}
       >
         {props.title}
       </button>