Refactor : RecruitIcon CSS 수정

src/app/components/card/cardList/RecruitIcon.tsx

@@ -26,11 +26,11 @@ export const RecruitIcon = ({
   const periodValue = (
     <>
       {/* 모바일에서 표시되는 기간 형식 */}
-      <span className="whitespace-normal md:hidden">
+      <span className="whitespace-normal lg:hidden">
         {formatRecruitDate(recruitmentStartDate)}~{formatRecruitDate(recruitmentEndDate)}
       </span>
       {/* 데스크탑에서 표시되는 기간 형식 */}
-      <span className="hidden whitespace-normal md:inline">
+      <span className="hidden whitespace-normal lg:inline">
         {formatRecruitDate(recruitmentStartDate, true)}~
         <br />
         {formatRecruitDate(recruitmentEndDate, true)}
@@ -76,9 +76,9 @@ export const RecruitIcon = ({
 
   return (
     // 반응형 컨테이너
-    <div className="h-auto w-full sm:h-[156px] sm:w-[327px] sm:p-3 md:h-[336px] md:w-[640px]">
+    <div className="h-auto w-auto p-3 lg:w-[640px]">
       {/* 2x2 그리드 레이아웃 */}
-      <div className="grid h-full grid-cols-2 gap-2 sm:gap-3">
+      <div className="grid h-full grid-cols-2 gap-2">
         {conditions.map((condition, index) => (
           <RecruitIconItem key={index} icon={condition.icon} label={condition.label} value={condition.value} />
         ))}

src/app/components/card/cardList/RecruitIconItem.tsx

@@ -12,21 +12,20 @@ interface RecruitIconItemProps {
 // 채용 공고의 근무 조건을 아이콘으로 표시하는 컴포넌트의 아이템 컴포넌트
 const RecruitIconItem = ({ icon, label, value }: RecruitIconItemProps) => {
   return (
-    <div className="flex items-center gap-2 overflow-hidden rounded-lg border border-grayscale-200 p-1 sm:p-3 md:gap-6 md:p-6">
-      <div className="flex h-6 w-6 items-center justify-center rounded-full bg-grayscale-100 bg-opacity-30 sm:h-9 sm:w-9 md:h-16 md:w-16">
-        <div className="block md:hidden">
+    <div className="flex h-[54px] items-center gap-2 overflow-hidden rounded-lg border border-grayscale-200 p-2 lg:h-[167px] lg:gap-6 lg:p-[30px]">
+      <div className="flex h-9 w-9 items-center justify-center rounded-full bg-grayscale-100 bg-opacity-30 lg:h-14 lg:w-14">
+        <div className="block lg:hidden">
           <Image src={icon.sm} alt={label} width={24} height={24} />
         </div>
-        <div className="hidden md:block">
+        <div className="hidden lg:block">
           <Image src={icon.md} alt={label} width={36} height={36} />
         </div>
       </div>
       <div className="flex-1">
-        <div className="text-grayscale-600 text-[10px] font-medium sm:text-xs md:text-xl">{label}</div>
-        <div className="text-xs font-semibold text-primary-orange-300 sm:text-sm md:text-2xl">{value}</div>
+        <div className="text-grayscale-600 text-[10px] font-medium sm:text-xs lg:text-xl">{label}</div>
+        <div className="text-xs font-semibold text-primary-orange-300 sm:text-sm lg:text-2xl">{value}</div>
       </div>
     </div>
   );
 };
-
 export default RecruitIconItem;

src/utils/workDayFormatter.ts

@@ -13,7 +13,7 @@ export const formatRecruitDate = (date: Date, isMd: boolean = false) => {
 };
 
 export const getWorkDaysDisplay = (isNegotiableWorkDays: boolean, workDays: string[] = []) => {
-  if (isNegotiableWorkDays) return "요일협의";
+  if (isNegotiableWorkDays) return "요일 협의";
   if (!workDays.length) return "-";
 
   // 요일 순서 정의
@@ -30,7 +30,7 @@ export const getWorkDaysDisplay = (isNegotiableWorkDays: boolean, workDays: stri
   // 유효한 요일만 필터링
   const validWorkDays = translatedWorkDays.filter((day) => dayOrder.includes(day));
   const sortedDays = validWorkDays.sort((a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b));
-  console.log("getWorkDaysDisplay", sortedDays);
+  // console.log("getWorkDaysDisplay", sortedDays);
 
   const result: string[] = [];
   let startDay = sortedDays[0];