feat-fe: 마지막 process column의 배경색 변경 (#732)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kim Da Eun <[email protected]> Co-authored-by: Jeongwoo Park <[email protected]>
woowacourse-teams · Sep 27, 2024 · 449eed2 · 449eed2
1 parent 9b13ed6
commit 449eed2
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 56 deletions.
diff --git a/frontend/src/components/dashboard/ProcessBoard/index.tsx b/frontend/src/components/dashboard/ProcessBoard/index.tsx
@@ -12,11 +12,12 @@ interface KanbanBoardProps {
 export default function ProcessBoard({ processes, showRejectedApplicant = false }: KanbanBoardProps) {
   return (
     <S.Wrapper>
-      {processes.map((process) => (
+      {processes.map((process, index) => (
         <ProcessColumn
           key={process.processId}
           process={process}
           showRejectedApplicant={showRejectedApplicant}
+          isPassedColumn={!showRejectedApplicant && index === processes.length - 1}
         />
       ))}
 

diff --git a/frontend/src/components/dashboard/ProcessColumn/index.tsx b/frontend/src/components/dashboard/ProcessColumn/index.tsx
@@ -17,9 +17,10 @@ import S from './style';
 interface ProcessColumnProps {
   process: Process;
   showRejectedApplicant: boolean;
+  isPassedColumn: boolean;
 }
 
-export default function ProcessColumn({ process, showRejectedApplicant }: ProcessColumnProps) {
+export default function ProcessColumn({ process, showRejectedApplicant, isPassedColumn = false }: ProcessColumnProps) {
   const { dashboardId, applyFormId } = useParams() as { dashboardId: string; applyFormId: string };
   const { processList } = useProcess({ dashboardId, applyFormId });
   const { mutate: moveApplicantProcess } = useApplicant({});
@@ -72,7 +73,7 @@ export default function ProcessColumn({ process, showRejectedApplicant }: Proces
   };
 
   return (
-    <S.ProcessWrapper>
+    <S.ProcessWrapper isPassedColumn={isPassedColumn}>
       <S.Header>
         <S.Title>{process.name}</S.Title>
         <ProcessDescription description={process.description} />

diff --git a/frontend/src/components/dashboard/ProcessColumn/style.ts b/frontend/src/components/dashboard/ProcessColumn/style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { hideScrollBar } from '@styles/utils';
 
-const ProcessWrapper = styled.section`
+const ProcessWrapper = styled.section<{ isPassedColumn: boolean }>`
   width: 100%;
   min-width: 28rem;
   max-width: 28rem;
@@ -10,7 +10,8 @@ const ProcessWrapper = styled.section`
   padding: 1.2rem;
   border-radius: 0.8rem;
   border: 0.1rem solid ${({ theme }) => theme.baseColors.grayscale[400]};
-  background-color: ${({ theme }) => theme.baseColors.grayscale[50]};
+  background-color: ${({ theme, isPassedColumn = false }) =>
+    isPassedColumn ? '#F9FFF9' : theme.baseColors.grayscale[50]};
 
   overflow-y: scroll;
   overflow-x: visible;

diff --git a/frontend/src/mocks/processMockData.json b/frontend/src/mocks/processMockData.json
@@ -95,56 +95,8 @@
           "averageScore": 3.0
         }
       ],
-      "name": "프로세스 3",
-      "description": "지원서를 확인한다."
-    },
-    {
-      "processId": 3,
-      "orderIndex": 4,
-      "applicants": [
-        {
-          "applicantId": 11,
-          "applicantName": "러기",
-          "createdAt": "2024-07-16T05:46:08.328593",
-          "isRejected": false,
-          "evaluationCount": 0,
-          "averageScore": 0
-        },
-        {
-          "applicantId": 12,
-          "applicantName": "도비",
-          "createdAt": "2024-07-16T05:46:08.341936",
-          "isRejected": false,
-          "evaluationCount": 5,
-          "averageScore": 3.6
-        },
-        {
-          "applicantId": 13,
-          "applicantName": "러시",
-          "createdAt": "2024-07-16T05:46:08.356121",
-          "isRejected": false,
-          "evaluationCount": 4,
-          "averageScore": 4.3
-        },
-        {
-          "applicantId": 14,
-          "applicantName": "냥인",
-          "createdAt": "2024-07-16T05:46:08.359131",
-          "isRejected": false,
-          "evaluationCount": 5,
-          "averageScore": 2.8
-        },
-        {
-          "applicantId": 15,
-          "applicantName": "렛서",
-          "createdAt": "2024-07-16T05:46:08.361759",
-          "isRejected": false,
-          "evaluationCount": 0,
-          "averageScore": 0
-        }
-      ],
-      "name": "프로세스 1",
-      "description": "지원서를 확인한다."
+      "name": "프로세스 2",
+      "description": "프로세스 2."
     },
     {
       "processId": 4,
@@ -239,7 +191,7 @@
           "averageScore": 5.0
         }
       ],
-      "name": "프로세스 2",
+      "name": "프로세스 1",
       "description": "지원서를 확인한다."
     },
     {