버튼 컴포넌트 수정 (Issue #179) (#286)

* refactor: Button Sample로 변경 * refactor: ButtonSample -> Button으로 변경 * remove: 미션 현황 페이지 관련 코드 제거 * refactor: ButtonSample -> Button으로 변경 * refactor: 버튼 variants 및 size 상수화 * refactor: 기타 파라미터를 받는 rest 네이밍을 props로 수정
woowacourse-teams · Aug 16, 2024 · f381667 · f381667
1 parent 6ac9daa
commit f381667
Show file tree

Hide file tree

Showing 22 changed files with 88 additions and 605 deletions.
diff --git a/frontend/src/apis/missionAPI.ts b/frontend/src/apis/missionAPI.ts
@@ -1,22 +1,8 @@
 import { develupAPIClient } from './clients/develupClient';
 import { PATH } from './paths';
-import type {
-  Mission,
-  MissionWithDescription,
-  MissionSubmission,
-  SubmissionPayload,
-  Submission,
-} from '@/types';
+import type { Mission, MissionWithDescription, SubmissionPayload, Submission } from '@/types';
 import { populateMissionDescription } from './utils/populateMissionDescription';
 
-interface getMissionInProgressResponse {
-  data: MissionSubmission;
-}
-
-interface getMissionCompletedResponse {
-  data: MissionSubmission[];
-}
-
 interface getMissionByIdResponse {
   data: MissionWithDescription;
 }
@@ -38,30 +24,6 @@ export const getMissionById = async (id: number): Promise<MissionWithDescription
   return mission;
 };
 
-export const getMissionInProgress = async (): Promise<MissionSubmission> => {
-  const { data } = await develupAPIClient.get<getMissionInProgressResponse>(
-    PATH.submissionsInProgress,
-  );
-
-  return data;
-};
-
-export const getMissionCompleted = async (): Promise<MissionSubmission[]> => {
-  const { data } = await develupAPIClient.get<getMissionCompletedResponse>(PATH.submissions);
-
-  return data;
-};
-
-// getMissionInProgressResponse 타입 네이밍 변경 예정입니다 @프룬
-// 해당 타입이 미션 현황 페이지에서 쓰이는 api 반환값으로 많이 쓰이고 있음
-export const postCompleteReview = async (submissionId: number): Promise<MissionSubmission> => {
-  const { data } = await develupAPIClient.post<getMissionInProgressResponse>(
-    `${PATH.pairReview}/${submissionId}`,
-  );
-
-  return data;
-};
-
 export interface PostSubmissionResponse {
   data: Submission;
 }

diff --git a/frontend/src/components/MissionDetail/MissionDetailButtons.tsx b/frontend/src/components/MissionDetail/MissionDetailButtons.tsx
@@ -6,9 +6,8 @@ import useModal from '@/hooks/useModal';
 import Modal from '../common/Modal/Modal';
 import MissionProcess from '../ModalContent/MissionProcess';
 import useMissionStartMutation from '@/hooks/useMissionStartMutation';
-import Button from '../common/Button/Button';
-import { GithubIcon } from './MissionDetail.styled';
 import { useState } from 'react';
+import Button from '../common/Button/Button';
 
 interface MissionDetailButtonsProps {
   id: number;
@@ -38,10 +37,6 @@ export default function MissionDetailButtons({
     onSuccessCallback: handleStartMission,
   });
 
-  // const handleNavigateToMyPr = () => {
-  //   window.open('', '_blank'); // 추후 구현 예정입니다 @프룬
-  // };
-
   const handleMissionStart = () => {
     startMissionMutation({ missionId: id });
   };
@@ -52,42 +47,21 @@ export default function MissionDetailButtons({
 
   return (
     <S.MissionDetailButtonsContainer>
-      <Button type="icon" content="미션 코드 보러 가기" onHandleClick={handleNavigateToMission}>
-        <GithubIcon />
-      </Button>
       <S.ButtonWrapper>
         {userInfo && !isMissionStarted && (
-          <S.MissionButton
-            $bgColor="--primary-500"
-            $fontColor="--white-color"
-            $hoverColor="--primary-600"
-            onClick={handleMissionStart}
-          >
+          <Button variant="primary" size="half" onClick={handleMissionStart}>
             미션 시작하기
-          </S.MissionButton>
+          </Button>
         )}
         {userInfo && isMissionStarted && (
-          <S.MissionButton
-            $bgColor="--primary-500"
-            $fontColor="--white-color"
-            $hoverColor="--primary-600"
-            onClick={handleNavigateToSubmit}
-          >
+          <Button variant="primary" size="half" onClick={handleNavigateToSubmit}>
             미션 제출하기
-          </S.MissionButton>
+          </Button>
         )}
 
         <Modal isModalOpen={isModalOpen}>
           <MissionProcess handleModalClose={handleModalClose} onClick={handleNavigateToMission} />
         </Modal>
-
-        {/* <Button
-          content="내 PR 보러 가기"
-          $bgColor="--grey-200"
-          $hoverColor="--grey-300"
-          $fontColor="--black-color"
-          onHandleClick={handleNavigateToMyPr}
-        /> */}
       </S.ButtonWrapper>
 
       <S.InfoMsgWrapper onClick={handleModalOpen}>

diff --git a/frontend/src/components/MissionSubmit/SubmitBanner.styled.ts b/frontend/src/components/MissionSubmit/SubmitBanner.styled.ts
@@ -9,12 +9,11 @@ export const Container = styled.div`
 `;
 
 export const GithubIcon = styled(GithubLogo)`
-  width: 3rem;
-  height: 3rem;
-  margin-right: 2rem;
+  width: 2.2rem;
+  height: 2.2rem;
   display: flex;
   justify-content: center;
-  margin-bottom: 0.5rem;
+  margin-right: 0.3rem;
 `;
 
 export const BannerTitle = styled.h1`

diff --git a/frontend/src/components/ModalContent/MissionProcess/ModalProcess.styled.ts b/frontend/src/components/ModalContent/MissionProcess/ModalProcess.styled.ts
@@ -1,5 +1,6 @@
 import { styled } from 'styled-components';
 import closeIcon from '@/assets/images/close.svg';
+import Button from '@/components/common/Button/Button';
 
 export const MissionProcessContentContainer = styled.div`
   width: 53rem;
@@ -43,27 +44,9 @@ export const ButtonWrapper = styled.div`
   display: flex;
   justify-content: center;
   margin-top: 5rem;
+  gap: 0.8rem;
 `;
 
-export const Button = styled.button`
-  background-color: var(--grey-200);
-  color: var(--black-color);
-
-  width: fit-content;
-  padding: 1.2rem 1.8rem;
-  border-radius: 0.8rem;
-
-  display: flex;
-  gap: 0.3rem;
-  justify-content: center;
-  align-items: center;
-
-  white-space: nowrap;
-  font-size: 1.4rem;
-  font-weight: 500;
-  font-family: inherit;
-`;
-
-export const RightButton = styled(Button)`
-  margin-left: 0.8rem;
+export const ArrowButton = styled(Button)`
+  gap: 1.2rem;
 `;
diff --git a/frontend/src/components/ModalContent/MissionProcess/index.tsx b/frontend/src/components/ModalContent/MissionProcess/index.tsx
@@ -3,8 +3,8 @@ import * as S from './ModalProcess.styled';
 import LeftArrow from '@/assets/images/smallLeftArrow.svg';
 import RightArrow from '@/assets/images/smallRightArrow.svg';
 import ContentImage from '@/assets/images/contentImage.svg';
-import Button from '@/components/common/Button/Button';
 import { GithubIcon } from '@/components/MissionSubmit/SubmitBanner.styled';
+import Button from '@/components/common/Button/Button';
 
 const MOCK_CONTENT_LIST = [
   {
@@ -42,25 +42,26 @@ export default function MissionProcess({ handleModalClose, onClick }: MissionPro
       </S.CloseIconWrapper>
       <S.Title>어떻게 진행하나요?</S.Title>
       <ContentImage width={413} height={250} />
-      <S.Text>{currentContent?.content}</S.Text>{' '}
-      {/* TODO 현재 공통 컴포넌트 설정에는 아이콘 위치 같은게 고정이 되어있어서 일단 기본 태그로 구현해놓습니다 @버건디 */}
+      <S.Text>{currentContent?.content}</S.Text>
       <S.ButtonWrapper>
         {isEndContent ? (
           <>
-            <Button type="icon" content="미션 코드 보러 가기" onHandleClick={onClick}>
+            <Button variant="primary" onClick={onClick}>
               <GithubIcon />
+              미션 코드 보러 가기
             </Button>
           </>
         ) : (
           <>
-            <S.Button onClick={handlePreviousMissionProcess}>
+            <S.ArrowButton onClick={handlePreviousMissionProcess}>
               <LeftArrow />
               Prev
-            </S.Button>
-            <S.RightButton onClick={handleNextMissionProcess}>
+            </S.ArrowButton>
+
+            <S.ArrowButton onClick={handleNextMissionProcess}>
               Next
               <RightArrow />
-            </S.RightButton>
+            </S.ArrowButton>
           </>
         )}
       </S.ButtonWrapper>