Skip to content

Commit c2653eb

Browse files
cccwon2cccwon2
committed
refactor: review 피드백 반영
1 parent 2aabbcb commit c2653eb

File tree

6 files changed

+91
-285
lines changed

6 files changed

+91
-285
lines changed

‎src/app/components/card/cardList/MyApplicationListItem.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,17 +104,17 @@ const MyApplicationListItem = ({ createdAt, status, resumeId, resumeName, form }
104104
</div>
105105

106106
{/* 중앙 컨텐츠 영역 */}
107-
<div className="flex-1 space-y-4 py-6">
107+
<div className="flex-1 space-y-3 py-4">
108108
{/* 가게 정보 영역 */}
109-
<div className="flex items-center gap-3">
110-
<div className="relative h-12 w-12 overflow-hidden rounded-full md:h-14 md:w-14">
109+
<div className="flex items-center gap-2">
110+
<div className="relative h-10 w-10 overflow-hidden rounded-full md:h-14 md:w-14">
111111
<Image src={form.owner.imageUrl} alt={form.owner.storeName} fill className="object-cover" />
112112
</div>
113113
<span className="text-base font-medium text-gray-900 md:text-lg">{form.owner.storeName}</span>
114114
</div>
115115

116116
{/* 제목 */}
117-
<h3 className="text-lg font-bold text-gray-900 md:text-xl">{form.title}</h3>
117+
<div className="text-lg font-bold text-gray-900 md:text-xl">{form.title}</div>
118118

119119
{/* 설명 */}
120120
<p className="line-clamp-2 text-sm text-gray-600 md:line-clamp-2 md:text-base">{form.description}</p>

‎src/app/components/card/cardList/RecruitCondition.tsx‎

Lines changed: 54 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Image from "next/image";
21
import { formatRecruitDate, getWorkDaysDisplay } from "@/utils/workDayFormatter";
2+
import RecruitConditionItem from "./RecruitConditionItem";
33

44
interface RecruitConditionProps {
55
hourlyWage: number;
@@ -11,96 +11,69 @@ interface RecruitConditionProps {
1111
workEndTime: string;
1212
}
1313

14-
export const RecruitCondition: React.FC<RecruitConditionProps> = ({
14+
export const RecruitCondition = ({
1515
hourlyWage,
1616
recruitmentStartDate,
1717
recruitmentEndDate,
1818
isNegotiableWorkDays,
1919
workDays = [],
2020
workStartTime,
2121
workEndTime,
22-
}) => {
22+
}: RecruitConditionProps) => {
23+
const periodValue = (
24+
<>
25+
<span className="whitespace-normal md:hidden">
26+
{formatRecruitDate(recruitmentStartDate)}~{formatRecruitDate(recruitmentEndDate)}
27+
</span>
28+
<span className="hidden whitespace-normal md:inline">
29+
{formatRecruitDate(recruitmentStartDate, true)}~
30+
<br />
31+
{formatRecruitDate(recruitmentEndDate, true)}
32+
</span>
33+
</>
34+
);
35+
36+
const conditions = [
37+
{
38+
icon: {
39+
sm: "/icons/coin/coin-sm.svg",
40+
md: "/icons/coin/coin-md.svg",
41+
},
42+
label: "시급",
43+
value: `${hourlyWage.toLocaleString()}원`,
44+
},
45+
{
46+
icon: {
47+
sm: "/icons/calendar/calendar-clock-sm.svg",
48+
md: "/icons/calendar/calendar-clock-md.svg",
49+
},
50+
label: "기간",
51+
value: periodValue,
52+
},
53+
{
54+
icon: {
55+
sm: "/icons/calendar/calendar-sm.svg",
56+
md: "/icons/calendar/calendar-md.svg",
57+
},
58+
label: "요일",
59+
value: getWorkDaysDisplay(isNegotiableWorkDays, workDays),
60+
},
61+
{
62+
icon: {
63+
sm: "/icons/clock/clock-sm.svg",
64+
md: "/icons/clock/clock-md.svg",
65+
},
66+
label: "시간",
67+
value: `${workStartTime}~${workEndTime}`,
68+
},
69+
];
70+
2371
return (
2472
<div className="h-auto w-full sm:h-[156px] sm:w-[327px] sm:p-3 md:h-[336px] md:w-[640px]">
2573
<div className="grid h-full grid-cols-2 gap-2 sm:gap-3">
26-
{/* 시급 섹션 */}
27-
<div className="flex items-center gap-2 overflow-hidden rounded-lg border border-gray-200 p-1 sm:p-3 md:gap-6 md:p-6">
28-
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 bg-opacity-30 sm:h-9 sm:w-9 md:h-16 md:w-16">
29-
<div className="block md:hidden">
30-
<Image src="/icons/coin/coin-sm.svg" alt="coin" width={24} height={24} />
31-
</div>
32-
<div className="hidden md:block">
33-
<Image src="/icons/coin/coin-md.svg" alt="coin" width={36} height={36} />
34-
</div>
35-
</div>
36-
<div className="flex-1">
37-
<div className="text-[10px] font-medium text-gray-600 sm:text-xs md:text-xl">시급</div>
38-
<div className="text-xs font-semibold text-primary-orange-300 sm:text-sm md:text-2xl">
39-
{hourlyWage.toLocaleString()}원
40-
</div>
41-
</div>
42-
</div>
43-
44-
{/* 기간 섹션 */}
45-
<div className="flex items-center gap-2 overflow-hidden rounded-lg border border-gray-200 p-1 sm:p-3 md:gap-6 md:p-6">
46-
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 bg-opacity-30 sm:h-9 sm:w-9 md:h-16 md:w-16">
47-
<div className="block md:hidden">
48-
<Image src="/icons/calendar/calendar-clock-sm.svg" alt="calendar" width={24} height={24} />
49-
</div>
50-
<div className="hidden md:block">
51-
<Image src="/icons/calendar/calendar-clock-md.svg" alt="calendar" width={36} height={36} />
52-
</div>
53-
</div>
54-
<div className="flex-1">
55-
<div className="text-[10px] font-medium text-gray-600 sm:text-xs md:text-xl">기간</div>
56-
<div className="break-words text-xs font-semibold text-primary-orange-300 sm:text-sm md:text-2xl">
57-
<span className="whitespace-normal md:hidden">
58-
{formatRecruitDate(recruitmentStartDate)}~{formatRecruitDate(recruitmentEndDate)}
59-
</span>
60-
<span className="hidden whitespace-normal md:inline">
61-
{formatRecruitDate(recruitmentStartDate, true)}~
62-
<br />
63-
{formatRecruitDate(recruitmentEndDate, true)}
64-
</span>
65-
</div>
66-
</div>
67-
</div>
68-
69-
{/* 요일 섹션 */}
70-
<div className="flex items-center gap-2 overflow-hidden rounded-lg border border-gray-200 p-1 sm:p-3 md:gap-6 md:p-6">
71-
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 bg-opacity-30 sm:h-9 sm:w-9 md:h-16 md:w-16">
72-
<div className="block md:hidden">
73-
<Image src="/icons/calendar/calendar-sm.svg" alt="calendar" width={24} height={24} />
74-
</div>
75-
<div className="hidden md:block">
76-
<Image src="/icons/calendar/calendar-md.svg" alt="calendar" width={36} height={36} />
77-
</div>
78-
</div>
79-
<div className="flex-1">
80-
<div className="text-[10px] font-medium text-gray-600 sm:text-xs md:text-xl">요일</div>
81-
<div className="text-xs font-semibold text-primary-orange-300 sm:text-sm md:text-2xl">
82-
{getWorkDaysDisplay(isNegotiableWorkDays, workDays)}
83-
</div>
84-
</div>
85-
</div>
86-
87-
{/* 시간 섹션 */}
88-
<div className="flex items-center gap-2 overflow-hidden rounded-lg border border-gray-200 p-1 sm:p-3 md:gap-6 md:p-6">
89-
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 bg-opacity-30 sm:h-9 sm:w-9 md:h-16 md:w-16">
90-
<div className="block md:hidden">
91-
<Image src="/icons/clock/clock-sm.svg" alt="clock" width={24} height={24} />
92-
</div>
93-
<div className="hidden md:block">
94-
<Image src="/icons/clock/clock-md.svg" alt="clock" width={36} height={36} />
95-
</div>
96-
</div>
97-
<div className="flex-1">
98-
<div className="text-[10px] font-medium text-gray-600 sm:text-xs md:text-xl">시간</div>
99-
<div className="text-xs font-semibold text-primary-orange-300 sm:text-sm md:text-2xl">
100-
{workStartTime}~{workEndTime}
101-
</div>
102-
</div>
103-
</div>
74+
{conditions.map((condition, index) => (
75+
<RecruitConditionItem key={index} icon={condition.icon} label={condition.label} value={condition.value} />
76+
))}
10477
</div>
10578
</div>
10679
);

‎src/app/components/card/cardList/RecruitConditionItem.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Image from "next/image";
2+
3+
interface RecruitConditionItemProps {
4+
icon: {
5+
sm: string;
6+
md: string;
7+
};
8+
label: string;
9+
value: string | React.ReactNode;
10+
}
11+
12+
const RecruitConditionItem = ({ icon, label, value }: RecruitConditionItemProps) => {
13+
return (
14+
<div className="flex items-center gap-2 overflow-hidden rounded-lg border border-gray-200 p-1 sm:p-3 md:gap-6 md:p-6">
15+
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 bg-opacity-30 sm:h-9 sm:w-9 md:h-16 md:w-16">
16+
<div className="block md:hidden">
17+
<Image src={icon.sm} alt={label} width={24} height={24} />
18+
</div>
19+
<div className="hidden md:block">
20+
<Image src={icon.md} alt={label} width={36} height={36} />
21+
</div>
22+
</div>
23+
<div className="flex-1">
24+
<div className="text-[10px] font-medium text-gray-600 sm:text-xs md:text-xl">{label}</div>
25+
<div className="text-xs font-semibold text-primary-orange-300 sm:text-sm md:text-2xl">{value}</div>
26+
</div>
27+
</div>
28+
);
29+
};
30+
31+
export default RecruitConditionItem;

‎src/app/components/card/cardList/RecruitInfo.tsx‎

Lines changed: 0 additions & 107 deletions
This file was deleted.

‎src/app/components/card/cardList/RecruitListItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,13 +120,13 @@ const RecruitListItem = ({
120120
onClick={handlePrevImage}
121121
className="bg-black/30 hover:bg-black/50 absolute left-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-white transition-opacity md:h-10 md:w-10"
122122
>
123-
<BsChevronLeft className="h-5 w-5" />
123+
<BsChevronLeft className="h-3 w-3 md:h-5 md:w-5" />
124124
</button>
125125
<button
126126
onClick={handleNextImage}
127127
className="bg-black/30 hover:bg-black/50 absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-white transition-opacity md:h-10 md:w-10"
128128
>
129-
<BsChevronRight className="h-5 w-5" />
129+
<BsChevronRight className="h-3 w-3 md:h-5 md:w-5" />
130130
</button>
131131
</>
132132
)}

0 commit comments

Comments
 (0)