From 554b226930ab829f83fc8bee345ad6e780667928 Mon Sep 17 00:00:00 2001 From: ghdtnals Date: Mon, 28 Apr 2025 14:46:27 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20PostCard=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Post/PostCard.tsx | 103 +++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 src/components/Post/PostCard.tsx diff --git a/src/components/Post/PostCard.tsx b/src/components/Post/PostCard.tsx new file mode 100644 index 0000000..9043592 --- /dev/null +++ b/src/components/Post/PostCard.tsx @@ -0,0 +1,103 @@ +import { cn } from "@/utils/cn"; +import { formatTimeRange } from "@/utils/datetime"; +import IconLocation from "@/assets/icon/location.svg?react"; +import IconTime from "@/assets/icon/time.svg?react"; +import IconArrow from "@/assets/icon/arrow-up.svg?react"; + +const getPayRateText = (hourlyPay?: number, originalPay?: number): string => { + if (hourlyPay === undefined || originalPay === undefined) { + return ""; + } + + const rawRate = ((hourlyPay - originalPay) / originalPay) * 100; + const displayRate = Math.min(Math.round(rawRate), 100); + return `기존 시급보다 ${displayRate}%`; +}; + +interface PostCardProps { + name: string; + imageUrl: string; + address1: string; + description: string; + originalHourlyPay?: number; + hourlyPay?: number; + startsAt?: string; + workhour?: number; + isShopInfo?: boolean; + backgroundColor?: string; + children?: React.ReactNode; +} + +export default function PostCard({ + name, + imageUrl, + address1, + description, + hourlyPay, + originalHourlyPay, + startsAt, + workhour, + isShopInfo = false, + backgroundColor = "#ffffff", + children = null, +}: PostCardProps) { + const rateText = getPayRateText(hourlyPay, originalHourlyPay); + + const timeRange = + startsAt && workhour !== undefined + ? formatTimeRange(startsAt, workhour) + : ""; + + return ( +
+
+ {name} +
+
+
+ {!isShopInfo ? ( + <> +
+

시급

+
+

+ {hourlyPay?.toLocaleString()}원 +

+ + {rateText} + + +
+
+
+ + {timeRange} +
+ + ) : ( +

식당

+ )} + {isShopInfo &&

{name}

} +
+ + {address1} +
+

+ {description} +

+
+ {children &&
{children}
} +
+
+ ); +} From 0ef5e8dbb32dc7978b3d386ef9e01730c5da2083 Mon Sep 17 00:00:00 2001 From: ghdtnals Date: Mon, 28 Apr 2025 20:18:46 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=8B=9C=EA=B8=89=20=EC=9D=B8?= =?UTF-8?q?=EC=83=81=EB=A5=A0=20=EA=B3=84=EC=82=B0=20=EC=9C=A0=ED=8B=B8?= =?UTF-8?q?=EB=A6=AC=ED=8B=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/payRate.ts | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/utils/payRate.ts diff --git a/src/utils/payRate.ts b/src/utils/payRate.ts new file mode 100644 index 0000000..44297f6 --- /dev/null +++ b/src/utils/payRate.ts @@ -0,0 +1,28 @@ +/** + * 시급 인상률 계산 유틸리티 + * @param hourlyPay 현재 시급 + * @param originalPay 기존 시급 + * @returns { rawRate, displayRate, rateText } + */ +export const getPayRateText = ( + hourlyPay?: number, + originalPay?: number, +): { + rawRate: number; + displayRate: number; + rateText: string; +} => { + if (hourlyPay === undefined || originalPay === undefined) { + return { + rawRate: 0, + displayRate: 0, + rateText: "", + }; + } + + const rawRate = ((hourlyPay - originalPay) / originalPay) * 100; + const displayRate = Math.min(Math.round(rawRate), 100); + const rateText = `기존 시급보다 ${displayRate}%`; + + return { rawRate, displayRate, rateText }; +}; From 261b457dddeac3f75a58770cfbcd97497b6c85c8 Mon Sep 17 00:00:00 2001 From: ghdtnals Date: Mon, 28 Apr 2025 22:22:22 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20ArrowUpBold=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icon/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/assets/icon/index.ts b/src/assets/icon/index.ts index 7b44892..0d92395 100644 --- a/src/assets/icon/index.ts +++ b/src/assets/icon/index.ts @@ -2,6 +2,7 @@ import Active from "./active.svg?react"; import ArrowLeft from "./arrow-left.svg?react"; import ArrowRight from "./arrow-right.svg?react"; import ArrowUp from "./arrow-up.svg?react"; +import ArrowUpBold from "./arrow-up-bold.svg?react"; import Camera from "./camera.svg?react"; import Check from "./check.svg?react"; import Close from "./close.svg?react"; @@ -16,6 +17,7 @@ import Time from "./time.svg?react"; export { ArrowUp, + ArrowUpBold, ArrowLeft, ArrowRight, Close, From 5c5c11ce30363b1f300faae660689af499673726 Mon Sep 17 00:00:00 2001 From: ghdtnals Date: Mon, 28 Apr 2025 22:25:28 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20PostCard=20=EB=B0=8F=20Post=20?= =?UTF-8?q?=EC=9C=A0=ED=8B=B8=ED=95=A8=EC=88=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Post/Post.tsx | 29 ++++++----------------------- src/components/Post/PostCard.tsx | 29 +++++++++-------------------- 2 files changed, 15 insertions(+), 43 deletions(-) diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx index 6f495cf..8567a40 100644 --- a/src/components/Post/Post.tsx +++ b/src/components/Post/Post.tsx @@ -1,25 +1,8 @@ import { cn } from "@/utils/cn"; import { Link } from "react-router-dom"; import { formatTimeRange, isPastDate } from "@/utils/datetime"; -import IconTime from "@/assets/icon/time.svg?react"; -import IconLocation from "@/assets/icon/location.svg?react"; -import IconArrow from "@/assets/icon/arrow-up.svg?react"; -import IconArrowBold from "@/assets/icon/arrow-up-bold.svg?react"; - -const getPayRateText = ( - hourlyPay: number, - originalPay: number, -): { - rawRate: number; - displayRate: number; - rateText: string; -} => { - const rawRate = ((hourlyPay - originalPay) / originalPay) * 100; - const displayRate = Math.min(Math.round(rawRate), 100); - const rateText = `기존 시급보다 ${displayRate}%`; - - return { rawRate, displayRate, rateText }; -}; +import { getPayRateText } from "@/utils/payRate"; +import { Location, Time, ArrowUp, ArrowUpBold } from "@/assets/icon"; interface PostProps { name: string; @@ -76,11 +59,11 @@ export default function Post({

{name}

- +

- + {address1}

@@ -102,8 +85,8 @@ export default function Post({ )} > {rateText} - - + + )} diff --git a/src/components/Post/PostCard.tsx b/src/components/Post/PostCard.tsx index 9043592..0084fb3 100644 --- a/src/components/Post/PostCard.tsx +++ b/src/components/Post/PostCard.tsx @@ -1,18 +1,7 @@ import { cn } from "@/utils/cn"; import { formatTimeRange } from "@/utils/datetime"; -import IconLocation from "@/assets/icon/location.svg?react"; -import IconTime from "@/assets/icon/time.svg?react"; -import IconArrow from "@/assets/icon/arrow-up.svg?react"; - -const getPayRateText = (hourlyPay?: number, originalPay?: number): string => { - if (hourlyPay === undefined || originalPay === undefined) { - return ""; - } - - const rawRate = ((hourlyPay - originalPay) / originalPay) * 100; - const displayRate = Math.min(Math.round(rawRate), 100); - return `기존 시급보다 ${displayRate}%`; -}; +import { getPayRateText } from "@/utils/payRate"; +import { Location, Time, ArrowUp } from "@/assets/icon"; interface PostCardProps { name: string; @@ -25,7 +14,7 @@ interface PostCardProps { workhour?: number; isShopInfo?: boolean; backgroundColor?: string; - children?: React.ReactNode; + buttons?: React.ReactNode; } export default function PostCard({ @@ -39,9 +28,9 @@ export default function PostCard({ workhour, isShopInfo = false, backgroundColor = "#ffffff", - children = null, + buttons = null, }: PostCardProps) { - const rateText = getPayRateText(hourlyPay, originalHourlyPay); + const { rateText } = getPayRateText(hourlyPay, originalHourlyPay); const timeRange = startsAt && workhour !== undefined @@ -75,12 +64,12 @@ export default function PostCard({ {rateText} - +
- +
@@ -89,14 +78,14 @@ export default function PostCard({ )} {isShopInfo &&

{name}

}
- + {address1}

{description}

- {children &&
{children}
} + {buttons &&
{buttons}
} ); From cf8d6ed50747670d908e5b8ebb296de2a16116d9 Mon Sep 17 00:00:00 2001 From: ghdtnals Date: Mon, 28 Apr 2025 22:30:49 +0900 Subject: [PATCH 5/5] =?UTF-8?q?chore:=20theme.css=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/theme.css b/src/styles/theme.css index 24cfea8..aaa9762 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -23,5 +23,9 @@ --color-green-10: #d4f7d4; --color-green-20: #20a81e; + --color-violet: #5534da; + + --color-primary: #ea3c12; + --color-kakao: #fee500; }