배포 전 오류 수정 (#418)

* design: 버튼 위치 변경 및 필터 밑줄 스타일 변경 * fix: 러너 서포터 옵션값을 변경했을 때 본래의 게시물 리스트가 남아있는 오류 수정 * asset: asset 속성 값 수정 * feat: 리뷰 제안 취소 기능 msw 추가 * refactor: 누락된 메세지 상수화 완료 * feat: 피드백 작성 완료 메세지 추가 * design: 게시물 생성 페이지 잘린 글자 스타일 수정 * feat: 배포용 prod workflow 파일 생성 * design: 마이페이지 디자인 수정 * design: 프로필 페이지 스타일 수정 * fix: 러너, 서포터 옵션을 변경할 시 기존 리스트가 남아있는 오류 수정 * feat: 메인페이지 더보기 기능 토큰 존재 여부 검사 추가 * feat: 리뷰 제안 취소, 리뷰 완료 후 리로드 기능 추가 --------- Co-authored-by: 상규 <[email protected]>
woowacourse-teams · Aug 18, 2023 · 9437f93 · 9437f93
1 parent cf172bc
commit 9437f93
Show file tree

Hide file tree

Showing 15 changed files with 243 additions and 107 deletions.
diff --git a/.github/workflows/frontend_prod_cd.yml b/.github/workflows/frontend_prod_cd.yml
@@ -0,0 +1,59 @@
+name: frontend_cd
+
+on:
+  push:
+    branches:
+      - prod/FE
+
+defaults:
+  run:
+    working-directory: ./frontend
+
+permissions:
+  contents: read
+
+jobs:
+  build-and-upload:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Setup Repository
+        uses: actions/checkout@v3
+
+      - name: Setup node with cache
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Setup environment variables
+        run: |
+          echo "REACT_APP_BASE_URL=${{ secrets.REACT_APP_PROD_BASE_URL }}" >> .env
+
+      - name: Install Dependancies
+        run: npm install
+
+      - name: Build App
+        run: npm run build
+
+      - name: Upload frontend build file to artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: FrontendApplication
+          path: frontend/dist
+
+  deploy:
+    needs: build-and-upload
+    runs-on: [self-hosted, Linux, ARM64, deploy]
+
+    steps:
+      - name: Remove previous version app
+        working-directory: frontend/dist
+        run: rm -rf dist
+
+      - name: Download build file from artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: FrontendApplication
+          path: frontend/dist
diff --git a/frontend/src/assets/technicalLabelIcon.tsx b/frontend/src/assets/technicalLabelIcon.tsx
@@ -131,7 +131,7 @@ export const ReactIconWhite = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" {...props}>
       <g fill="none">
-        <rect width="256" height="256" fill="#00D8FF" rx="60"></rect>
+        <rect width="256" height="256" fill={props.color ?? '#00D8FF'} rx="60"></rect>
         <path
           fill="#ffffff"
           d="M128.001 146.951c10.304 0 18.656-8.353 18.656-18.656c0-10.303-8.352-18.656-18.656-18.656c-10.303 0-18.656 8.353-18.656 18.656c0 10.303 8.353 18.656 18.656 18.656Z"

diff --git a/frontend/src/components/ListFilter/ListFilter.tsx b/frontend/src/components/ListFilter/ListFilter.tsx
@@ -19,8 +19,14 @@ const ListFilter = ({ options, selectOption, width }: Props) => {
     <S.FilterContainer>
       <S.FilterList $width={width}>
         {options.map((option) => (
-          <S.FilterItem key={option.value} onClick={makeHandleClickOption(option.value)} $isSelected={option.selected}>
-            {option.label}
+          <S.FilterItem>
+            <S.FilterButton
+              key={option.value}
+              onClick={makeHandleClickOption(option.value)}
+              $isSelected={option.selected}
+            >
+              {option.label}
+            </S.FilterButton>
           </S.FilterItem>
         ))}
       </S.FilterList>
@@ -32,9 +38,11 @@ export default ListFilter;
 
 const appear = keyframes`
  0% {
+  transform-origin:left;
   transform: scaleX(0);
  }
  100% {
+  transform-origin:left;
   transform: scaleX(1);
  }
 `;
@@ -44,7 +52,10 @@ const underLine = css`
   margin-top: 5px;
   height: 3px;
   width: calc(100% + 10px);
+  border-radius: 1px;
+
   background-color: var(--baton-red);
+
   animation: 0.3s ease-in ${appear};
 `;
 
@@ -58,12 +69,16 @@ const S = {
     width: ${({ $width }) => $width ?? '920px'};
   `,
 
-  FilterItem: styled.li<{ $isSelected: boolean }>`
+  FilterItem: styled.li`
+    width: 150px;
+  `,
+
+  FilterButton: styled.button<{ $isSelected: boolean }>`
     display: flex;
     flex-direction: column;
     align-items: center;
 
-    width: 150px;
+    background-color: transparent;
 
     font-size: 26px;
     font-weight: 700;
@@ -72,7 +87,5 @@ const S = {
     &::after {
       ${({ $isSelected }) => ($isSelected ? underLine : null)}
     }
-
-    cursor: pointer;
   `,
 };
diff --git a/frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx b/frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx
@@ -1,5 +1,6 @@
 import { patchRequest } from '@/api/fetch';
 import Button from '@/components/common/Button/Button';
+import { ERROR_DESCRIPTION, ERROR_TITLE, TOAST_COMPLETION_MESSAGE, TOAST_ERROR_MESSAGE } from '@/constants/message';
 import { ToastContext } from '@/contexts/ToastContext';
 import { usePageRouter } from '@/hooks/usePageRouter';
 import { useToken } from '@/hooks/useToken';
@@ -22,34 +23,31 @@ const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId }:
 
   const cancelReview = () => {
     if (!token) {
-      showErrorToast({ title: '권한 오류', description: '로그인이 필요합니다.' });
+      showErrorToast(TOAST_ERROR_MESSAGE.NO_TOKEN);
       return;
     }
 
     patchRequest(`/posts/runner/${runnerPostId}/cancelation`, token)
       .then(() => {
-        showCompletionToast({ title: '취소 완료', description: '리뷰 제안을 취소했습니다.' });
-        goToMyPage();
+        showCompletionToast(TOAST_COMPLETION_MESSAGE.REVIEW_CANCEL);
+
+        setTimeout(window.location.reload, 2000);
       })
-      .catch((error: Error) => {
-        showErrorToast({ title: '요청 실패', description: error.message });
-      });
+      .catch((error: Error) => showErrorToast({ description: error.message, title: ERROR_TITLE.REQUEST }));
   };
 
   const finishReview = () => {
     if (!token) {
-      showErrorToast({ title: '권한 오류', description: '로그인이 필요합니다.' });
+      showErrorToast(TOAST_ERROR_MESSAGE.NO_TOKEN);
       return;
     }
 
     patchRequest(`/posts/runner/${runnerPostId}/done`, token)
       .then(() => {
-        showCompletionToast({ title: '리뷰 완료', description: '리뷰가 완료되었습니다.' });
-        goToMyPage();
+        showCompletionToast(TOAST_COMPLETION_MESSAGE.REVIEW_COMPETE);
+        setTimeout(window.location.reload, 2000);
       })
-      .catch((error: Error) => {
-        showErrorToast({ title: '요청 실패', description: error.message });
-      });
+      .catch((error: Error) => showErrorToast({ description: error.message, title: ERROR_TITLE.REQUEST }));
   };
 
   const handleClickCancelReviewButton = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -72,7 +70,7 @@ const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId }:
   const handleClickSupportFeedbackButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     if (!supporterId) {
-      showErrorToast({ title: '요청 실패', description: '서포터 정보가 없습니다.' });
+      showErrorToast({ title: ERROR_TITLE.ERROR, description: ERROR_DESCRIPTION.NO_SUPPORTER });
       return;
     }
 
@@ -92,13 +90,13 @@ const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId }:
           {isRunner ? '서포터 선택하기' : '리뷰 제안 취소'}
         </Button>
       );
-    case 'IN_PROGRESS': // 코드 보러가기 기능 추가 필요
+    case 'IN_PROGRESS':
       return isRunner ? null : (
         <Button colorTheme="WHITE" fontWeight={700} width="180px" height="40px" onClick={handleClickFinishButton}>
           리뷰 완료
         </Button>
       );
-    case 'DONE': // 러너 피드백 기능 추가 필요
+    case 'DONE':
       return isRunner ? (
         <Button
           colorTheme="WHITE"

diff --git a/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx b/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
@@ -39,7 +39,7 @@ const RunnerPostItem = ({
         {runnerProfile ? (
           <>
             <S.ProfileContainer>
-              <Avatar width="60px" height="60px" imageUrl={runnerProfile.imageUrl} />
+              <Avatar width="50px" height="50px" imageUrl={runnerProfile.imageUrl} />
               <S.ProfileName>{runnerProfile.name}</S.ProfileName>
             </S.ProfileContainer>
           </>
@@ -121,7 +121,7 @@ const S = {
   ProfileContainer: styled.div`
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: end;
 
     margin-bottom: 30px;
     gap: 10px;

diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
@@ -65,4 +65,14 @@ export const TOAST_COMPLETION_MESSAGE = {
     title: '선택 완료',
     description: '서포터 선택을 완료했어요',
   },
+
+  REVIEW_CANCEL: {
+    title: '취소 완료',
+    description: '취소를 완료했어요',
+  },
+
+  REVIEW_COMPETE: {
+    title: '리뷰 완료',
+    description: '리뷰를 완료했어요',
+  },
 };
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
@@ -145,4 +145,8 @@ export const handlers = [
   rest.post('*/posts/runner/:runnerPostId/application', async (req, res, ctx) => {
     return res(ctx.status(201));
   }),
+
+  rest.patch('*/posts/runner/:runnerPostId/cancelation', async (req, res, ctx) => {
+    return res(ctx.status(201));
+  }),
 ];
diff --git a/frontend/src/pages/GithubCallbackPage.tsx b/frontend/src/pages/GithubCallbackPage.tsx
@@ -38,7 +38,7 @@ function GithubCallbackPage() {
           const jwt = await response.headers.get('Authorization');
 
           if (!jwt) {
-            showErrorToast({ description: '토큰이 존재하지 않습니다', title: '권한 없음' });
+            showErrorToast(TOAST_ERROR_MESSAGE.NO_TOKEN);
 
             return;
           }

diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -32,12 +32,13 @@ const MainPage = () => {
   }, []);
 
   const handleClickPostButton = () => {
-    const token = getToken()?.value;
-    if (!token) {
-      goToLoginPage();
+    if (getToken()) {
+      goToRunnerPostCreatePage();
+
+      return;
     }
 
-    goToRunnerPostCreatePage();
+    goToLoginPage();
   };
 
   const getRunnerPost = () => {