Merge remote-tracking branch 'origin/develop' into feature/#197-영양사_페…

…이지_추가
BCSDLab · Apr 8, 2024 · 5353d5e · 5353d5e
2 parents 434e968 + 4cdcea9
commit 5353d5e
Show file tree

Hide file tree

Showing 39 changed files with 562 additions and 402 deletions.
diff --git a/.github/workflows/CHECK_PR_MERGED.yml b/.github/workflows/CHECK_PR_MERGED.yml
@@ -0,0 +1,26 @@
+on:
+  pull_request:
+    types: closed
+
+jobs:
+  check_pr_merged:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Check PR Merged
+        id: check_pr_merged
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const prUrl = context.payload.pull_request.html_url ?? context.payload.pull_request._links.html.href;
+            core.setOutput('pullRequestLink', JSON.stringify(prUrl));
+      - name: Send Slack Trigger
+        run: |
+          curl -X POST https://api-slack.internal.bcsdlab.com/api/pr-merged/frontend \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "pullRequestLink": ${{ steps.check_pr_merged.outputs.pullRequestLink }}
+              }'
diff --git a/.github/workflows/PICK_REVIEWER.yml b/.github/workflows/PICK_REVIEWER.yml
@@ -51,12 +51,6 @@ jobs:
               core.setOutput('reviewer2GithubName', reviewer2.githubName);
             }
 
-      - name: test valiable
-        uses: actions/github-script@v7
-        with: 
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: console.log(${{ steps.pick_random_reviewer.outputs.reviewer1Name }})
-
       - name: Add Reviewers
         uses: madrapps/add-reviewers@v1
         with:

diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
       name="description"
       content="backoffice for koin's store owner"
     />
+    <meta name="google" content="notranslate">
     <link rel="icon" type="image/png" sizes="32x32" href="https://static.koreatech.in/assets/favicons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="https://static.koreatech.in/assets/favicons/favicon-16x16.png">
     <link rel="apple-touch-icon" href="https://static.koreatech.in/assets/favicons/favicon-32x32.png" />

diff --git a/src/api/index.ts b/src/api/index.ts
@@ -1,8 +1,10 @@
+/* eslint-disable @typescript-eslint/no-throw-literal */
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-underscore-dangle */
-import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import API_PATH from 'config/constants';
 import { RefreshParams, RefreshResponse } from 'model/auth';
+import { CustomAxiosError, KoinError } from 'model/error';
 
 const client = axios.create({
   baseURL: `${API_PATH}`,
@@ -51,20 +53,46 @@ accessClient.interceptors.request.use(
   },
 );
 
+function isAxiosErrorWithResponseData(error: AxiosError<KoinError>) {
+  const { response } = error;
+  return response?.status !== undefined
+    && response.data.code !== undefined
+    && response.data.message !== undefined;
+}
+
+function createKoinErrorFromAxiosError(error: AxiosError<KoinError>): KoinError | CustomAxiosError {
+  if (isAxiosErrorWithResponseData(error)) {
+    const koinError = error.response!;
+    return {
+      type: 'KOIN_ERROR',
+      status: koinError.status,
+      code: koinError.data.code,
+      message: koinError.data.message,
+    };
+  }
+  return {
+    type: 'AXIOS_ERROR',
+    ...error,
+  };
+}
+
+client.interceptors.response.use(
+  (response) => response,
+  async (error) => { throw createKoinErrorFromAxiosError(error); },
+);
+
 accessClient.interceptors.response.use(
   (response) => response,
   async (error) => {
-    if (error.message) return Promise.reject(error.message);
-
     const originalRequest = error.config;
 
-    // accessToken만료시 새로운 accessToken으로 재요청
+    // accessToken 만료시 새로운 accessToken으로 재요청
     if (error.response?.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
-
       return refresh(originalRequest);
     }
-    return Promise.reject(error);
+
+    throw createKoinErrorFromAxiosError(error);
   },
 );
 
@@ -74,4 +102,10 @@ multipartClient.interceptors.request.use(
     return config;
   },
 );
+
+multipartClient.interceptors.response.use(
+  (response) => response,
+  async (error) => { throw createKoinErrorFromAxiosError(error); },
+);
+
 export { client, accessClient, multipartClient };
diff --git a/src/component/common/Header/index.tsx b/src/component/common/Header/index.tsx
@@ -9,7 +9,6 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { createPortal } from 'react-dom';
 import { postLogout } from 'api/auth';
 import useUserStore from 'store/user';
-import useStepStore from 'store/useStepStore';
 import styles from './Header.module.scss';
 import useMobileSidebar from './hooks/useMobileSidebar';
 import useMegaMenu from './hooks/useMegaMenu';
@@ -37,15 +36,13 @@ function Header() {
   } = useMobileSidebar(pathname, isMobile);
   const isMain = true;
   const { user, removeUser } = useUserStore();
-  const setStep = useStepStore((state) => state.setStep);
 
   const logout = () => {
     postLogout()
       .then(() => {
         sessionStorage.removeItem('access_token');
         localStorage.removeItem('refresh_token');
         removeUser();
-        setStep(0);
       });
   };
 

diff --git a/src/model/error/index.ts b/src/model/error/index.ts
@@ -0,0 +1,12 @@
+import { AxiosError } from 'axios';
+
+export interface KoinError {
+  type: 'KOIN_ERROR';
+  status: number;
+  code: number;
+  message: string;
+}
+
+export interface CustomAxiosError extends AxiosError {
+  type: 'AXIOS_ERROR';
+}
diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -2,20 +2,21 @@ import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ReactComponent as CancelIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
 import useAddMenuStore from 'store/addMenu';
-import useImageUpload from 'utils/hooks/useImageUpload';
 import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
-import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage'; import styles from './AddMenuImgModal.module.scss';
+import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage'; import useImagesUpload from 'utils/hooks/useImagesUpload';
+import styles from './AddMenuImgModal.module.scss';
 
 interface AddMenuImgModalProps {
   isOpen: boolean;
   closeModal: (event?: React.MouseEvent | React.KeyboardEvent) => void;
 }
 
 export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalProps) {
-  const { setImageUrl } = useAddMenuStore();
+  const { setImageUrls } = useAddMenuStore();
+
   const {
     imageFile, imgRef, saveImgFile, uploadError,
-  } = useImageUpload();
+  } = useImagesUpload();
 
   const triggerFileInput = () => {
     imgRef.current?.click();
@@ -28,10 +29,10 @@ export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalP
   };
   useEffect(() => {
     if (imageFile && !uploadError) {
-      setImageUrl(imageFile);
+      setImageUrls(imageFile);
       closeModal();
     }
-  }, [imageFile, uploadError, setImageUrl, closeModal]);
+  }, [imageFile, uploadError, setImageUrls, closeModal]);
 
   if (!isOpen) return null;
 
@@ -44,7 +45,7 @@ export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalP
         <span className={styles['content__main-text']}>이미지 추가</span>
         <span className={styles['content__sub-text']}>메뉴 사진을 추가할 수 있습니다.</span>
         <div className={styles['content__button-container']}>
-          <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleImageChange} ref={imgRef} />
+          <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleImageChange} ref={imgRef} multiple />
           <button type="button" className={styles['content__album-button']} onClick={triggerFileInput}>사진 앨범</button>
           <button type="button" className={styles['content__camera-button']} onClick={triggerCameraInput}>카메라 촬영</button>
         </div>

diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -5,9 +5,9 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import AddMenuImgModal from 'page/AddMenu/components/AddMenuImgModal';
 import useAddMenuStore from 'store/addMenu';
-import useImageUpload from 'utils/hooks/useImageUpload';
 import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
+import useImagesUpload from 'utils/hooks/useImagesUpload';
 import styles from './MenuImage.module.scss';
 
 interface MenuImageProps {
@@ -16,15 +16,16 @@ interface MenuImageProps {
 
 export default function MenuImage({ isComplete }: MenuImageProps) {
   const { isMobile } = useMediaQuery();
-  const { imageUrl, setImageUrl, removeImageUrl } = useAddMenuStore();
+  const { imageUrl, setImageUrls, removeImageUrl } = useAddMenuStore();
   const {
     value: isAddMenuImgModal,
     setTrue: openAddMenuImgModal,
     setFalse: closeAddMenuImgModal,
   } = useBooleanState(false);
+
   const {
     imageFile, imgRef, saveImgFile, uploadError,
-  } = useImageUpload();
+  } = useImagesUpload();
   const handleAddImage = () => {
     imgRef.current?.click();
   };
@@ -36,9 +37,9 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
   };
   useEffect(() => {
     if (imageFile) {
-      setImageUrl(imageFile);
+      setImageUrls(imageFile);
     }
-  }, [imageFile, setImageUrl]);
+  }, [imageFile, setImageUrls]);
   return (
     <div>
       {isMobile ? (
@@ -48,21 +49,6 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
             <div className={styles.mobile__header__condition}>(최대 이미지 3장)</div>
           </div>
           <div className={styles['mobile__new-image__container']}>
-            {imageUrl.map((image, index) => (
-              <div key={image} className={styles['mobile__new-image__item']}>
-                <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected']} />
-                {!isComplete && (
-                <button
-                  type="button"
-                  onClick={() => handleDeleteImage(image)}
-                  className={styles['mobile__delete-img-button']}
-                  aria-label="Delete image"
-                >
-                  <MobileDeleteImgIcon className={styles['mobile__delete-img-icon']} />
-                </button>
-                )}
-              </div>
-            ))}
             <button
               type="button"
               className={styles['mobile__new-image__add-btn']}
@@ -71,6 +57,21 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
               <ImgPlusIcon className={styles['mobile__new-image__plusIcon']} />
               <div className={styles['mobile__new-image__add-caption']}>이미지 추가</div>
             </button>
+            {imageUrl.map((image, index) => (
+              <div key={image} className={styles['mobile__new-image__item']}>
+                <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected']} />
+                {!isComplete && (
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteImage(image)}
+                    className={styles['mobile__delete-img-button']}
+                    aria-label="Delete image"
+                  >
+                    <MobileDeleteImgIcon className={styles['mobile__delete-img-icon']} />
+                  </button>
+                )}
+              </div>
+            ))}
           </div>
           <AddMenuImgModal
             isOpen={isAddMenuImgModal}
@@ -88,14 +89,14 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
               <div key={image} className={styles['new-image__item']}>
                 <img src={image} alt={`Selected ${index + 1}`} className={styles['new-image__selected']} />
                 {!isComplete && (
-                <button
-                  type="button"
-                  onClick={() => handleDeleteImage(image)}
-                  className={styles['new-image__delete-img-button']}
-                  aria-label="Delete image"
-                >
-                  <MobileDeleteImgIcon className={styles['new-image__delete-img-icon']} />
-                </button>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteImage(image)}
+                    className={styles['new-image__delete-img-button']}
+                    aria-label="Delete image"
+                  >
+                    <MobileDeleteImgIcon className={styles['new-image__delete-img-icon']} />
+                  </button>
                 )}
               </div>
             ))}
@@ -114,6 +115,7 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
               style={{ display: 'none' }}
               onChange={handleImageChange}
               ref={imgRef}
+              multiple
             />
           </div>
           <div className={styles['image-error-message']}>

diff --git a/src/page/AddMenu/components/MenuName/MenuName.module.scss b/src/page/AddMenu/components/MenuName/MenuName.module.scss
@@ -2,6 +2,7 @@
   &__container {
     margin-top: 5px;
     width: 100%;
+    margin-bottom: 24px;
   }
 
   &__caption {
@@ -18,13 +19,16 @@
     border: 0.5px solid #898a8d;
     padding: 8px;
     box-sizing: border-box;
-    margin-bottom: 24px;
 
     &::placeholder {
       color: #a1a1a1;
       font-size: 13px;
       font-weight: 400;
     }
+
+    &--error {
+      border: 0.5px #f7941e solid;
+    }
   }
 
   &__name-text {
@@ -67,6 +71,10 @@
     font-size: 20px;
     font-weight: 400;
   }
+
+  &--error {
+    border: 0.5px #f7941e solid;
+  }
 }
 
 .name-text {