Merge pull request #54 from themoment-team/develop

Develop
themoment-team · Jun 20, 2022 · 2e534f0 · 2e534f0 · vercel · Jun 20, 2022
2 parents 4819bd0 + ffc593b
commit 2e534f0
Show file tree

Hide file tree

Showing 19 changed files with 262 additions and 108 deletions.
diff --git a/src/assets/icons/RightArrow.tsx b/src/assets/icons/RightArrow.tsx
@@ -0,0 +1,16 @@
+import pallete from 'shared/Pallete';
+
+export const RightArrow: React.FC<React.SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={18}
+      height={13}
+      viewBox="0 0 320 512"
+      fill={pallete.scheme.blue}
+      {...props}
+    >
+      <path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z" />
+    </svg>
+  );
+};
diff --git a/src/components/CompanyForm/CompanyForm.tsx b/src/components/CompanyForm/CompanyForm.tsx
@@ -5,6 +5,7 @@ import {
   useEffect,
   useState,
 } from 'react';
+import { AxiosError, AxiosResponse } from 'axios';
 import { css } from '@emotion/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
@@ -60,14 +61,24 @@ export const CompanyFormComponent: React.FC<CompanyFormProps> = ({
 
     axiosClient
       .post(companyUrl.getAllCompany(), reqData)
-      .then(function (response) {
+      .then(function (response: AxiosResponse) {
         toast.success('회사 등록이 완료되었어요');
         setCompanyFormModalVisible(false);
         mutate(companyUrl.getAllCompany());
       })
-      .catch(function (error) {
+      .catch(function (error: AxiosError<{ message: string }>) {
         console.log(error);
-        toast.error('회사 등록에 실패했어요');
+        if (error.response) {
+          switch (error.response.status) {
+            case 400:
+              toast.error(error.response.data.message);
+              break;
+            default:
+              toast.error(
+                '알 수 없는 이유로 등록에 실패했어요\[email protected]에 문의해주세요',
+              );
+          }
+        }
       });
   };
 
@@ -91,7 +102,7 @@ export const CompanyFormComponent: React.FC<CompanyFormProps> = ({
           <S.Input
             {...register('companyImgUri')}
             required
-            placeholder="회사 이미지 url"
+            placeholder="회사 이미지 링크"
             type="url"
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
               setPreviewCompanyImgUri(e.target.value);

diff --git a/src/components/Form/Form.styles.tsx b/src/components/Form/Form.styles.tsx
@@ -73,13 +73,32 @@ export const CompanyRegister = styled.a`
   }
 `;
 
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  gap: 1rem;
+`;
+
+export const CancelButton = styled.button`
+  width: 100%;
+  border-radius: 1.5rem;
+  font-weight: 500;
+  color: ${pallete.scheme.red};
+  border: 2px solid ${pallete.scheme.red};
+  background-color: ${pallete.scheme.white};
+  padding: 0.75rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  cursor: pointer;
+`;
+
 export const Submit = styled.input`
   width: 100%;
   border-radius: 1.5rem;
   font-weight: 500;
   color: ${pallete.scheme.white};
   padding: 0.75rem;
-  margin-top: 1rem;
   font-size: 1.125rem;
   font-weight: 600;
   background-color: ${pallete.scheme.blue};

diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -1,15 +1,13 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { AxiosError, AxiosResponse } from 'axios';
+import { Dispatch, SetStateAction, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { useSWRConfig } from 'swr';
 import toast from 'react-hot-toast';
 import { css } from '@emotion/react';
-import { useRouter } from 'next/router';
 
 import { Modal } from 'components/common/Modal';
 import { CompanyForm } from 'components/CompanyForm';
 import { WorkerReqData } from 'types/worker.type';
 import axiosClient from 'libs/axios/axiosClient';
-import { workerUrl } from 'libs/api/apiUrlControllers';
 import useCompanyList from 'hooks/api/company/use-company-list';
 
 import * as S from './Form.styles';
@@ -25,15 +23,8 @@ export const FormComponent: React.FC<SignUpFormProps> = ({
   const { register, handleSubmit } = useForm<InputListType>();
   const [companyFormModalVisible, setCompanyFormModalVisible] =
     useState<boolean>(false);
-  const { mutate } = useSWRConfig();
-  const router = useRouter();
   const { data } = useCompanyList();
 
-  useEffect(() => {
-    router.replace(router.pathname);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const onSubmit: SubmitHandler<InputListType> = async data => {
     // TODO: post 로직 고도화
     const reqData: WorkerReqData = {
@@ -49,21 +40,38 @@ export const FormComponent: React.FC<SignUpFormProps> = ({
 
     axiosClient
       .post('/auth/registration', reqData)
-      .then(function (response) {
+      .then(function (response: AxiosResponse) {
         toast.success('회원가입이 완료되었어요');
-        mutate(workerUrl.getAllWorker());
-        setSignUpFormVisible(false);
+        window.location.reload();
       })
-      .catch(function (error) {
+      .catch(function (error: AxiosError<{ message: string }>) {
         console.log(error);
-        toast.error('회원가입에 실패했어요');
+        if (error.response) {
+          switch (error.response.status) {
+            case 400:
+              toast.error(error.response.data.message);
+              break;
+            case 401:
+              toast.error(
+                '로그인 정보가 없어요\n새로고침 후 다시 한번 로그인 해주세요',
+              );
+              break;
+            case 403:
+              toast.error('이미 프로필이 등록되어있어요');
+              break;
+            default:
+              toast.error(
+                '알 수 없는 이유로 등록에 실패했어요\[email protected]에 문의해주세요',
+              );
+          }
+        }
       });
   };
 
   return (
     <S.FormWrapper>
       <S.Form onSubmit={handleSubmit(onSubmit)}>
-        <S.FormHeader>회원가입</S.FormHeader>
+        <S.FormHeader>프로필 등록하기</S.FormHeader>
         <S.Input {...register('name')} placeholder="이름" required />
         <S.Input
           {...register('email')}
@@ -127,7 +135,15 @@ export const FormComponent: React.FC<SignUpFormProps> = ({
           required
           maxLength={100}
         />
-        <S.Submit type="submit" value={'완료'} />
+        <S.ButtonWrapper>
+          <S.CancelButton
+            onClick={() => setSignUpFormVisible(false)}
+            type="button"
+          >
+            취소
+          </S.CancelButton>
+          <S.Submit type="submit" value={'완료'} />
+        </S.ButtonWrapper>
       </S.Form>
       {companyFormModalVisible && (
         <Modal setModalVisible={setCompanyFormModalVisible}>

diff --git a/src/components/Launcher/Launcher.styles.tsx b/src/components/Launcher/Launcher.styles.tsx
@@ -5,7 +5,7 @@ export const LauncherWrapper = styled.div`
   position: absolute;
   border-radius: 2rem;
   bottom: 1.5rem;
-  right: 30.5rem;
+  right: 1.5rem;
   z-index: 100;
   display: flex;
   background: ${pallete.scheme.white};

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -7,10 +7,12 @@ import { MarkerList } from 'components/MarkerList';
 import { Launcher } from 'components/Launcher';
 
 interface MapProps {
-  isSigned: boolean;
+  cookies: {
+    [key: string]: string;
+  };
 }
 
-export const MapComponent: React.FC<MapProps> = ({ isSigned }) => {
+export const MapComponent: React.FC<MapProps> = ({ cookies }) => {
   const [map, setMap] = useState<kakao.maps.Map | undefined>();
   const markers = useMarker(map);
 
@@ -29,7 +31,7 @@ export const MapComponent: React.FC<MapProps> = ({ isSigned }) => {
         level={12}
       >
         <MarkerList markers={markers} />
-        <SideBar isSigned={isSigned} />
+        <SideBar cookies={cookies} />
       </Map>
       <Launcher />
     </>

diff --git a/src/components/Menu/Menu.styles.tsx b/src/components/Menu/Menu.styles.tsx
@@ -7,7 +7,7 @@ export const MenuWrapper = styled.ul`
   padding: 0.5rem;
   position: absolute;
   top: 4.65rem;
-  right: 1rem;
+  left: 18rem;
   border-radius: 1rem;
   z-index: 10;
   display: flex;
@@ -20,7 +20,7 @@ export const MenuWrapper = styled.ul`
 `;
 
 export const MenuListItem = styled.li`
-  width: 8rem;
+  width: 9rem;
   padding: 1.25rem;
   color: ${pallete.scheme.paragraph};
   border-radius: 0.75rem;

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -1,6 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-
-import { Modal } from 'components/common/Modal';
+import { Dispatch, SetStateAction, useEffect } from 'react';
 
 import * as S from './Menu.styles';
 import { handleLogout } from './container';
@@ -9,10 +7,15 @@ import toast from 'react-hot-toast';
 
 interface MenuProps {
   setMenuVisible: Dispatch<SetStateAction<boolean>>;
+  userRules: string;
 }
 
-export const MenuComponent: React.FC<MenuProps> = ({ setMenuVisible }) => {
-  const [modalVisible, setModalVisible] = useState<boolean>(false);
+type UserRuleOmitNoAuth = 'GUEST' | 'WORKER';
+
+export const MenuComponent: React.FC<MenuProps> = ({
+  setMenuVisible,
+  userRules,
+}) => {
   const [el, clickOutside] = useModal(setMenuVisible);
 
   useEffect(() => {
@@ -22,27 +25,41 @@ export const MenuComponent: React.FC<MenuProps> = ({ setMenuVisible }) => {
     };
   }, [clickOutside]);
 
-  const onLogout = () => {
-    handleLogout();
+  const onEditProfile = () => {
+    toast('기능 준비중입니다.');
   };
 
-  const onInfoEdit = () => {
-    toast('기능 준비중입니다.');
+  const onLogout = () => {
+    handleLogout();
   };
 
   return (
     <>
       <div ref={el}>
         <S.MenuWrapper>
-          <S.MenuListItem onClick={onInfoEdit}>내 정보 수정</S.MenuListItem>
-          <S.MenuListItemRed onClick={onLogout}>로그아웃</S.MenuListItemRed>
+          {
+            {
+              WORKER: (
+                <>
+                  <S.MenuListItem onClick={onEditProfile}>
+                    프로필 수정하기
+                  </S.MenuListItem>
+                  <S.MenuListItemRed onClick={onLogout}>
+                    로그아웃
+                  </S.MenuListItemRed>
+                </>
+              ),
+              GUEST: (
+                <>
+                  <S.MenuListItemRed onClick={onLogout}>
+                    로그아웃
+                  </S.MenuListItemRed>
+                </>
+              ),
+            }[userRules as UserRuleOmitNoAuth]
+          }
         </S.MenuWrapper>
       </div>
-      {modalVisible && (
-        <Modal setModalVisible={setModalVisible}>
-          <div>asdf</div>
-        </Modal>
-      )}
     </>
   );
 };
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
@@ -32,6 +32,7 @@ export const SearchInputComponent: React.FC<SearchInputProps> = ({
     <SearchInput
       css={css`
         margin: 1.75rem 0;
+        margin-bottom: 0;
       `}
       ref={inputEl}
       type="text"

diff --git a/src/components/SideBar/SideBar.styles.tsx b/src/components/SideBar/SideBar.styles.tsx
@@ -5,14 +5,14 @@ import pallete from 'shared/Pallete';
 export const SideBar = styled.div`
   position: fixed;
   top: 0;
-  right: 0.5rem;
+  left: 0.5rem;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 `;
 
-export const SearchBar = styled.div`
+export const SideBarWrapper = styled.div`
   width: 28rem;
   padding: 0 3.125rem;
   height: calc(100vh - 4rem);
@@ -22,7 +22,7 @@ export const SearchBar = styled.div`
   backdrop-filter: saturate(180%) blur(20px);
 `;
 
-export const NavBar = styled.nav`
+export const SideBarHeader = styled.header`
   padding: 1rem;
   display: flex;
   align-items: center;