From 449eed2b4fb8a2fc685098a88247b76bc934e869 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 26 Sep 2024 17:41:24 +0900
Subject: [PATCH] =?UTF-8?q?feat-fe:=20=EB=A7=88=EC=A7=80=EB=A7=89=20proces?=
 =?UTF-8?q?s=20column=EC=9D=98=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20(#732)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kim Da Eun <midekuna@gmail.com>
Co-authored-by: Jeongwoo Park <121204715+lurgi@users.noreply.github.com>
---
 .../dashboard/ProcessBoard/index.tsx          |  3 +-
 .../dashboard/ProcessColumn/index.tsx         |  5 +-
 .../dashboard/ProcessColumn/style.ts          |  5 +-
 frontend/src/mocks/processMockData.json       | 54 ++-----------------
 4 files changed, 11 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/dashboard/ProcessBoard/index.tsx b/frontend/src/components/dashboard/ProcessBoard/index.tsx
index fb8c4de92..a7c860606 100644
--- 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
index 86a818661..0094106b5 100644
--- 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
index 392dd0afe..25f2a3d50 100644
--- 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
index bc173434c..1d7b47dd0 100644
--- 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": "지원서를 확인한다."
     },
     {