Merge pull request #83 from themoment-team/develop

Develop

package.json

@@ -14,27 +14,24 @@
     "@floating-ui/react-dom-interactions": "^0.6.6",
     "axios": "^0.27.2",
     "emotion-reset": "^3.0.1",
-    "next": "12.1.0",
+    "next": "latest",
     "react": "17.0.2",
     "react-countdown-circle-timer": "^3.0.9",
     "react-daum-postcode": "^3.0.3",
     "react-dom": "17.0.2",
     "react-hook-form": "^7.31.3",
     "react-hot-toast": "^2.2.0",
     "react-kakao-maps-sdk": "^1.0.6",
+    "react-spring-bottom-sheet": "^3.4.1",
     "swr": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.7",
-    "@babel/preset-react": "^7.16.7",
-    "@emotion/babel-plugin": "^11.7.2",
-    "@emotion/babel-preset-css-prop": "^11.2.0",
     "@types/node": "17.0.21",
     "@types/react": "17.0.40",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
     "eslint": "8.11.0",
-    "eslint-config-next": "12.1.0",
+    "eslint-config-next": "latest",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",

src/assets/icons/Building.tsx

@@ -0,0 +1,16 @@
+import pallete from 'shared/Pallete';
+
+export const Building: React.FC<React.SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill={pallete.scheme.blue}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M21 19H23V21H1V19H3V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H14C14.2652 3 14.5196 3.10536 14.7071 3.29289C14.8946 3.48043 15 3.73478 15 4V19H19V11H17V9H20C20.2652 9 20.5196 9.10536 20.7071 9.29289C20.8946 9.48043 21 9.73478 21 10V19ZM5 5V19H13V5H5ZM7 11H11V13H7V11ZM7 7H11V9H7V7Z" />
+    </svg>
+  );
+};

src/assets/icons/Burger.tsx

@@ -3,14 +3,14 @@ import pallete from 'shared/Pallete';
 export const Burger: React.FC<React.SVGProps<SVGSVGElement>> = props => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      fill={pallete.scheme.white}
+      fill={pallete.scheme.blue}
       {...props}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z" />
+      <path d="M3 4H21V6H3V4ZM9 11H21V13H9V11ZM3 18H21V20H3V18Z" />
     </svg>
   );
 };

src/assets/icons/Cancel.tsx

@@ -7,7 +7,7 @@ export const Cancel: React.FC<React.SVGProps<SVGSVGElement>> = props => {
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      fill={pallete.scheme.white}
+      fill={pallete.scheme.blue}
       {...props}
     >
       <path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z" />

src/assets/icons/HumanHead.tsx

@@ -0,0 +1,16 @@
+import pallete from 'shared/Pallete';
+
+export const HumanHead: React.FC<React.SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill={pallete.scheme.green}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M11 2C15.068 2 18.426 5.036 18.934 8.965L21.184 12.504C21.332 12.737 21.302 13.084 20.959 13.232L19 14.07V17C19 18.105 18.105 19 17 19H15.001L15 22H6V18.306C6 17.126 5.564 16.009 4.756 15.001C3.657 13.631 3 11.892 3 10C3 5.582 6.582 2 11 2ZM11 4C7.686 4 5 6.686 5 10C5 11.385 5.468 12.693 6.316 13.75C7.41 15.114 8 16.667 8 18.306V20H13L13.002 17H17V12.752L18.55 12.088L17.007 9.663L16.95 9.221C16.566 6.251 14.024 4 11 4ZM10.47 7.763L11 8.293L11.53 7.763C12.214 7.079 13.322 7.079 14.005 7.763C14.689 8.446 14.689 9.554 14.005 10.237L11 13.243L7.995 10.237C7.311 9.554 7.311 8.446 7.995 7.763C8.678 7.079 9.786 7.079 10.47 7.763Z" />
+    </svg>
+  );
+};

src/assets/icons/Logo.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import pallete from 'shared/Pallete';
 
-type logoColorToken = 'white' | 'black';
+type logoColorToken = 'white' | 'black' | 'blue';
 type logoSizeToken = 'small' | 'medium';
 
 interface LogoProps {
@@ -20,6 +20,8 @@ export const Logo: React.FC<React.SVGProps<SVGSVGElement> & LogoProps> = ({
         return pallete.scheme.white;
       case 'black':
         return pallete.scheme.black;
+      case 'blue':
+        return pallete.scheme.blue;
       default:
         return pallete.scheme.black;
     }
@@ -28,11 +30,11 @@ export const Logo: React.FC<React.SVGProps<SVGSVGElement> & LogoProps> = ({
   const { width, height } = useMemo(() => {
     switch (size) {
       case 'small':
-        return { width: '60', height: '24' };
+        return { width: '63', height: '25' };
       case 'medium':
         return { width: '100', height: '40' };
       default:
-        return { width: '60', height: '24' };
+        return { width: '63', height: '25' };
     }
   }, [size]);
 

src/assets/icons/Magnifier.tsx

@@ -0,0 +1,16 @@
+import pallete from 'shared/Pallete';
+
+export const Magnifier: React.FC<React.SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill={pallete.scheme.blue}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18.031 16.617L22.314 20.899L20.899 22.314L16.617 18.031C15.0237 19.3082 13.042 20.0029 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20.0029 13.042 19.3082 15.0237 18.031 16.617ZM16.025 15.875C17.2941 14.5699 18.0029 12.8204 18 11C18 7.132 14.867 4 11 4C7.132 4 4 7.132 4 11C4 14.867 7.132 18 11 18C12.8204 18.0029 14.5699 17.2941 15.875 16.025L16.025 15.875Z" />
+    </svg>
+  );
+};

src/assets/icons/RightArrow.tsx

@@ -1,16 +1,21 @@
 import pallete from 'shared/Pallete';
 
-export const RightArrow: React.FC<React.SVGProps<SVGSVGElement>> = props => {
+export const RightArrow: React.FC<React.SVGProps<SVGSVGElement>> = ({
+  color,
+}) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width={18}
       height={13}
       viewBox="0 0 320 512"
-      fill={pallete.scheme.blue}
-      {...props}
+      fill={color}
     >
       <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>
   );
 };
+
+RightArrow.defaultProps = {
+  color: pallete.scheme.blue,
+};

src/components/BottomSheet/BottomSheetComponent.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useState } from 'react';
+import { BottomSheet } from 'react-spring-bottom-sheet';
+import 'react-spring-bottom-sheet/dist/style.css';
+import { AxiosError } from 'axios';
+import toast from 'react-hot-toast';
+
+import { SideBarButton } from 'components/common/SideBarButton';
+import { WorkerList } from 'components/WorkerList';
+import { Modal } from 'components/common/Modal';
+import { Form } from 'components/Form';
+import { VerifyForm } from 'components/VerifyForm';
+import { Header } from 'components/common/Header';
+import { UserRule } from 'types/site.type';
+import { workerUrl } from 'libs/api/apiUrlControllers';
+import axiosClient from 'libs/axios/axiosClient';
+
+import { handleLogout } from './container';
+import { Menu } from 'components/Menu';
+import { EditForm } from 'components/EditForm';
+import { SearchInput } from 'components/SearchInput';
+
+interface BottomSheetProps {
+  cookies: {
+    [key: string]: string;
+  };
+}
+
+export const BottomSheetComponent: React.FC<BottomSheetProps> = ({
+  cookies,
+}) => {
+  const [userRules, setUserRules] = useState<UserRule>('NO_AUTH_USER');
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [verifyFormModalVisible, setVerifyFormModalVisible] =
+    useState<boolean>(false);
+  const [menuVisible, setMenuVisible] = useState<boolean>(false);
+  const [searchState, setSearchState] = useState<string>('');
+  const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    const { USER_TYPE, HRSESSION } = cookies;
+
+    if (USER_TYPE === 'GUEST' && HRSESSION) {
+      setUserRules('GUEST');
+    }
+
+    if (USER_TYPE === 'WORKER' && HRSESSION) {
+      setUserRules('WORKER');
+    }
+
+    if (USER_TYPE === 'MENTOR' && HRSESSION) {
+      setUserRules('MENTOR');
+    }
+  }, []);
+
+  const handleProfileRegister = () => {
+    axiosClient
+      .get(workerUrl.getMeWorker())
+      .then(function () {
+        setModalVisible(true);
+      })
+      .catch(function (error: AxiosError) {
+        if (error?.response?.status === 401) {
+          toast.error(
+            '로그인 정보가 일치하지 않아요\n자동으로 로그아웃 됩니다',
+          );
+          handleLogout();
+        } else {
+          setModalVisible(true);
+        }
+      });
+  };
+
+  const handleMentorRegister = () => {
+    axiosClient
+      .get(workerUrl.getMeWorker())
+      .then(function () {
+        setVerifyFormModalVisible(true);
+      })
+      .catch(function (error: AxiosError) {
+        if (error?.response?.status === 401) {
+          toast.error(
+            '로그인 정보가 일치하지 않아요\n자동으로 로그아웃 됩니다',
+          );
+          handleLogout();
+        } else {
+          setVerifyFormModalVisible(true);
+        }
+      });
+  };
+
+  return (
+    <>
+      <Header
+        userRules={userRules}
+        menuVisible={false}
+        setMenuVisible={() => console.log('herll')}
+      />
+      <SearchInput setSearchState={setSearchState} />
+      <BottomSheet
+        open={true}
+        blocking={false}
+        snapPoints={({ maxHeight }) => [0.27 * maxHeight, maxHeight * 0.735]}
+      >
+        {userRules === 'GUEST' && (
+          <SideBarButton
+            calloutText="내 프로필을 등록해볼까요?"
+            trigger={handleProfileRegister}
+            userRules="GUEST"
+          />
+        )}
+        {userRules === 'WORKER' && (
+          <SideBarButton
+            calloutText="이제 멘토가 되어볼까요?"
+            trigger={handleMentorRegister}
+            userRules="WORKER"
+          />
+        )}
+        <WorkerList searchState={searchState} userRules={userRules} />
+      </BottomSheet>
+      {modalVisible && (
+        <Modal setModalVisible={setModalVisible}>
+          <Form setSignUpFormVisible={setModalVisible} />
+        </Modal>
+      )}
+      {verifyFormModalVisible && (
+        <Modal setModalVisible={setVerifyFormModalVisible}>
+          <VerifyForm setVerifyFormVisible={setVerifyFormModalVisible} />
+        </Modal>
+      )}
+      {menuVisible && (
+        <Menu
+          setMenuVisible={setMenuVisible}
+          setEditModalVisible={setEditModalVisible}
+          userRules={userRules}
+        />
+      )}
+      {editModalVisible && (
+        <Modal setModalVisible={setEditModalVisible}>
+          <EditForm
+            setEditFormVisible={setEditModalVisible}
+            cookies={cookies}
+          />
+        </Modal>
+      )}
+    </>
+  );
+};

src/components/BottomSheet/container.ts

@@ -0,0 +1,3 @@
+export const handleLogout = () => {
+  window.location.href = process.env.baseUrl + '/api/v1/auth/logout';
+};

src/components/BottomSheet/index.ts

@@ -0,0 +1 @@
+export { BottomSheetComponent as BottomSheetComponent } from './BottomSheetComponent';

src/components/CompanyForm/CompanyForm.styles.tsx

@@ -11,7 +11,7 @@ export const FormModalBackground = styled.div`
   justify-content: center;
   align-items: center;
   background-color: ${pallete.scheme.white};
-  border-radius: 10px;
+  border-radius: 0.625rem;
   animation: ${boundInDown} 0.6s ease;
 `;
 

src/components/CompanyForm/CompanyForm.tsx

@@ -73,6 +73,11 @@ export const CompanyFormComponent: React.FC<CompanyFormProps> = ({
             case 400:
               toast.error(error.response.data.message);
               break;
+            case 401:
+              toast.error(
+                '로그인 정보가 없어요\n새로고침 후 다시 한번 로그인 해주세요',
+              );
+              break;
             default:
               toast.error(
                 '알 수 없는 이유로 등록에 실패했어요\[email protected]에 문의해주세요',

src/components/CompanyForm/container.ts

@@ -4,3 +4,7 @@ export interface InputListType {
   homepageUri: string;
   companyImgUri: string;
 }
+
+export const handleLogout = () => {
+  window.location.href = process.env.baseUrl + '/api/v1/auth/logout';
+};

src/components/CustomMapMarker/CustomMapMarker.tsx

@@ -45,7 +45,7 @@ export const CustomMapMarkerComponent: React.FC<MarkerProps> = ({
       <Button
         onClick={() => {
           router.push({
-            pathname: `/`,
+            pathname: router.pathname,
             query: { search: companyName },
           });
         }}

src/components/EditForm/EditForm.styles.tsx

@@ -10,7 +10,7 @@ export const FormWrapper = styled.span`
   justify-content: center;
   align-items: center;
   background-color: ${pallete.scheme.white};
-  border-radius: 10px;
+  border-radius: 0.625px;
   animation: ${boundInDown} 0.6s ease;
 `;
 
@@ -105,3 +105,13 @@ export const Submit = styled.input`
   border: none;
   cursor: pointer;
 `;
+
+export const WarningText = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 0.75rem;
+  font-size: 0.8rem;
+  gap: 0.5rem;
+  color: ${pallete.scheme.paragraph};
+`;