refactor: 기본 컬럼 문자열에 인터뷰 컬럼을 조건부로 추가하는 방식으로 리팩토링

Author: kanghaeun

src/pages/admin/Dashboard/components/ApplicantListSection/List/ApplicantList/index.styled.ts

@@ -7,7 +7,7 @@ export const Container = styled.div({
 export const ApplicantInfoCategoryList = styled.div<{ hasInterview: boolean }>`
   display: grid;
   grid-template-columns: ${({ hasInterview }) =>
-    hasInterview ? '1fr 1fr 1fr 1.2fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1fr 1.2fr 1.5fr 1fr'};
+    '1fr 1fr 1fr 1.2fr 1.5fr 1fr' + (hasInterview ? '1.2fr' : '')};
   background-color: #f9fbfc;
   border-bottom: 1.8px solid ${({ theme }) => theme.colors.gray100};
   padding: 1.7rem 0 1.5rem 0;
@@ -18,7 +18,7 @@ export const ApplicantInfoCategoryList = styled.div<{ hasInterview: boolean }>`
 
   @media (max-width: 1200px) {
     grid-template-columns: ${({ hasInterview }) =>
-      hasInterview ? '1fr 1fr 1fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1fr 1.5fr 1fr'};
+      '1fr 1fr 1fr 1.5fr 1fr' + (hasInterview ? '1.2fr' : '')};
 
     & > div:nth-of-type(4) {
       display: none;
@@ -27,16 +27,15 @@ export const ApplicantInfoCategoryList = styled.div<{ hasInterview: boolean }>`
 
   @media (max-width: ${({ theme }) => theme.breakpoints.web}) {
     grid-template-columns: ${({ hasInterview }) =>
-      hasInterview ? '1fr 1fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1.5fr 1fr'};
+      '1fr 1fr 1.5fr 1fr' + (hasInterview ? '1.2fr' : '')}
 
     & > div:nth-of-type(3) {
       display: none;
     }
   }
 
   @media (max-width: 768px) {
-    grid-template-columns: ${({ hasInterview }) =>
-      hasInterview ? '1fr 1.5fr 1fr 1.2fr' : '1fr 1.5fr 1fr'};
+    grid-template-columns: ${({ hasInterview }) => '1fr 1.5fr 1fr' + (hasInterview ? '1.2fr' : '')};
 
     & > div:nth-of-type(2) {
       display: none;

src/pages/admin/Dashboard/components/ApplicantListSection/List/ApplicantListItem/index.styled.ts

@@ -4,7 +4,7 @@ import type { ApplicantData } from '@/pages/admin/Dashboard/types/dashboard';
 export const ItemWrapper = styled.div<{ hasInterview: boolean }>`
   display: grid;
   grid-template-columns: ${({ hasInterview }) =>
-    hasInterview ? '1fr 1fr 1fr 1.2fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1fr 1.2fr 1.5fr 1fr'};
+    '1fr 1fr 1fr 1.2fr 1.5fr 1fr' + (hasInterview ? ' 1.2fr' : '')};
   gap: 1rem;
   align-items: center;
   padding: 1.5rem 0;
@@ -21,7 +21,7 @@ export const ItemWrapper = styled.div<{ hasInterview: boolean }>`
 
   @media (max-width: 1200px) {
     grid-template-columns: ${({ hasInterview }) =>
-      hasInterview ? '1fr 1fr 1fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1fr 1.5fr 1fr'};
+      '1fr 1fr 1fr 1.5fr 1fr' + (hasInterview ? ' 1.2fr' : '')};
 
     & > p:nth-of-type(4) {
       display: none;
@@ -30,7 +30,7 @@ export const ItemWrapper = styled.div<{ hasInterview: boolean }>`
 
   @media (max-width: ${({ theme }) => theme.breakpoints.web}) {
     grid-template-columns: ${({ hasInterview }) =>
-      hasInterview ? '1fr 1fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1.5fr 1fr'};
+      '1fr 1fr 1.5fr 1fr' + (hasInterview ? ' 1.2fr' : '')};
 
     & > p:nth-of-type(3) {
       display: none;
@@ -39,7 +39,7 @@ export const ItemWrapper = styled.div<{ hasInterview: boolean }>`
 
   @media (max-width: 768px) {
     grid-template-columns: ${({ hasInterview }) =>
-      hasInterview ? '1fr 1.5fr 1fr 1.2fr' : '1fr 1.5fr 1fr'};
+      '1fr 1.5fr 1fr' + (hasInterview ? ' 1.2fr' : '')};
 
     & > p:nth-of-type(2) {
       display: none;