Skip to content

[fix] 공고 컴포넌트 버그 수정 #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ghdtnals merged 2 commits into from
May 7, 2025
Merged

[fix] 공고 컴포넌트 버그 수정 #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73a98eb
fix: isPastDate 로직 수정
ghdtnals May 7, 2025
b5bc30f
fix: Post 컴포넌트 레이아웃 수정
ghdtnals May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions src/components/Post/Post.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function Post({
closed,
}: PostProps) {
const timeRange = formatTimeRange(startsAt, workhour);
const isPast = isPastDate(startsAt, workhour);
const isPast = isPastDate(startsAt);
const isDimmed = closed || isPast;
const { displayRate, rateText } = getPayRateText(
hourlyPay,
Expand All @@ -40,58 +40,58 @@ export default function Post({
<Link to={link} className="no-underline text-inherit block">
<article
className={cn(
"relative flex w-full flex-col rounded-xl border border-gray-20 bg-white p-3 shadow-md transition hover:shadow-lg md:p-4",
"relative flex w-full flex-col rounded-xl border border-gray-20 bg-white p-3 shadow-md transition hover:shadow-lg sm:p-4",
)}
>
<div className="relative">
<img
src={imageUrl}
alt={name}
className="w-full h-[84px] overflow-hidden rounded-xl object-cover md:h-40"
className="w-full h-[84px] overflow-hidden rounded-xl object-cover sm:h-40"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/default-image.png";
}}
/>
{isDimmed && (
<h3 className="absolute inset-0 flex items-center justify-center rounded-md bg-black/70 text-sm text-gray-30 md:text-[28px]">
<h3 className="absolute inset-0 flex items-center justify-center rounded-md bg-black/70 text-sm text-gray-30 sm:text-[28px]">
{closed ? "마감 완료" : "지난 공고"}
</h3>
)}
</div>

<div className={cn(isDimmed && "opacity-20")}>
<div className="mt-3 flex flex-col gap-2 md:mt-5">
<h3 className="text-base md:text-xl">{name}</h3>
<p className="flex items-start gap-[6px] text-xs font-normal text-gray-50 md:text-[14px] md:leading-[22px]">
<Time className="h-4 w-4 md:h-5 md:w-5" />
<div className="mt-3 flex flex-col gap-2 sm:mt-5">
<h3 className="text-base sm:text-xl">{name}</h3>
<p className="flex items-start gap-[6px] text-xs font-normal text-gray-50 sm:text-[14px] sm:leading-[22px]">
<Time className="h-4 w-4 sm:h-5 sm:w-5" />
{timeRange}
</p>
<p className="flex items-start gap-[6px] text-xs font-normal text-gray-50 md:text-[14px] md:leading-[22px]">
<Location className="h-4 w-4 md:h-5 md:w-5" />
<p className="flex items-start gap-[6px] text-xs font-normal text-gray-50 sm:text-[14px] sm:leading-[22px]">
<Location className="h-4 w-4 sm:h-5 sm:w-5" />
{address1}
</p>
</div>

<div className="mt-4 flex flex-col items-start md:flex-row md:items-center md:justify-between">
<h2 className="text-lg md:text-2xl">
<div className="mt-4 flex flex-col items-start sm:flex-row sm:items-center sm:justify-between">
<h2 className="text-lg sm:text-2xl">
{hourlyPay.toLocaleString()}원
</h2>

<span
className={cn(
"mt-[5px] flex items-center gap-[2px] text-xs font-normal text-red-40 md:text-sm md:text-white md:px-3 md:py-2 md:rounded-[20px]",
"mt-[5px] flex items-center gap-[2px] text-xs font-normal text-red-40 sm:text-sm sm:text-white sm:px-3 sm:py-2 sm:rounded-[20px]",
displayRate >= 50
? "md:bg-red-40"
? "sm:bg-red-40"
: displayRate >= 25
? "md:bg-red-30"
: "md:bg-red-20",
? "sm:bg-red-30"
: "sm:bg-red-20",
displayRate > 0 ? "" : "opacity-0",
)}
>
{rateText}
<ArrowUp className="hidden h-5 w-5 md:block" />
<ArrowUpBold className="h-4 w-4 md:hidden" />
<ArrowUp className="hidden h-5 w-5 sm:block" />
<ArrowUpBold className="h-4 w-4 sm:hidden" />
</span>
</div>
</div>
Expand Down
9 changes: 5 additions & 4 deletions src/utils/datetime.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,11 @@ export function formatTimeRange(startsAt: string, workhour: number): string {
* @param startsAt - ISO 8601 형식의 날짜 문자열
* @param workhour - 근무 시간 (시간 단위)
*/
export function isPastDate(startsAt: string, workhour: number): boolean {
const start = new Date(startsAt);
const end = new Date(start.getTime() + workhour * ONE_HOUR_MS);
return end.getTime() < Date.now();
export function isPastDate(startsAt: string): boolean {
const startMs = Date.parse(startsAt);
const nowMs = Date.now();

return startMs < nowMs;
}

export const getRelativeTimeFromNow = (input: string | Date): string => {
Expand Down