Skip to content

Commit 7ecc3ab

Browse files
ljh130334ljh130334
committed
refactor: 작은 행동 알림 일부 스타일링 수정
1 parent a8c4d05 commit 7ecc3ab

File tree

14 files changed

+237
-190
lines changed

14 files changed

+237
-190
lines changed

‎src/app/(protected)/action/push/[taskId]/ActionPushPageClient.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,6 @@ export default function ActionPushPageClient({
9090
onTakePicture={() => handleTakePicture(task?.triggerAction ?? "")}
9191
/>
9292
</div>
93-
<div className="absolute bottom-0 left-1/2 aspect-[424/647] h-[250px] w-full max-w-md -translate-x-1/2 bg-red-500/15 mix-blend-color-dodge blur-[62px]"></div>
94-
<div className="relative flex flex-col gap-4 px-5"></div>
9593

9694
{screenState !== PushScreenState.FINAL_WARNING && (
9795
<button

‎src/app/(protected)/action/push/[taskId]/_component/ActionCard.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import { Badge } from '@/components/component/Badge';
1+
import { Badge } from "@/components/component/Badge";
22

33
type ActionCardProps = {
4-
badgeText: string;
5-
actionText: string;
6-
variant?: 'default' | 'drawer';
4+
badgeText: string;
5+
actionText: string;
6+
variant?: "default" | "drawer";
77
};
88

99
export default function ActionCard({
10-
badgeText,
11-
actionText,
12-
variant = 'default',
10+
badgeText,
11+
actionText,
12+
variant = "default",
1313
}: ActionCardProps) {
14-
const cardContent = (
15-
<div className="flex flex-col gap-3 rounded-2xl bg-[#6B6BE1]/[0.16] py-4 pl-4">
16-
<Badge>{badgeText}</Badge>
17-
<p className="text-lg font-semibold text-gray-normal">{actionText}</p>
18-
</div>
19-
);
14+
const cardContent = (
15+
<div className="flex flex-col gap-3 rounded-2xl bg-[#6B6BE1]/[0.16] py-4 pl-4">
16+
<Badge>{badgeText}</Badge>
17+
<p className="s1 bg-[linear-gradient(269deg,_#DDD9F8_6.08%,_#E4E4FF_31.42%,_#CCE4FF_62.59%)] bg-clip-text text-transparent">
18+
{actionText}
19+
</p>
20+
</div>
21+
);
2022

21-
return variant === 'default' ? (
22-
<div className="rounded-2xl bg-[#17191F]">{cardContent}</div>
23-
) : (
24-
cardContent
25-
);
23+
return variant === "default" ? (
24+
<div className="rounded-2xl bg-[#17191F]">{cardContent}</div>
25+
) : (
26+
cardContent
27+
);
2628
}

‎src/app/(protected)/action/push/[taskId]/_component/ActionDrawer.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,17 @@ export default function PushActionDrawer({
6666
className={`relative w-full ${
6767
screenState === PushScreenState.FINAL_WARNING ? "mb-[34px]" : ""
6868
}`}
69+
style={{
70+
background:
71+
screenState === PushScreenState.FINAL_WARNING
72+
? "linear-gradient(269deg, #DDD9F8 6.08%, #E4E4FF 31.42%, #CCE4FF 62.59%)"
73+
: "linear-gradient(104deg, #4F62FC -5.48%, #867CFF 87.33%)",
74+
borderImage:
75+
screenState === PushScreenState.FINAL_WARNING
76+
? "linear-gradient(269deg, #DDD9F8 6.08%, #E4E4FF 31.42%, #CCE4FF 62.59%)"
77+
: "linear-gradient(104deg, #4F62FC -5.48%, #867CFF 87.33%)",
78+
borderImageSlice: 1,
79+
}}
6980
onClick={handleTriggerClick}
7081
>
7182
시작하기

‎src/app/(protected)/action/push/[taskId]/_component/Header.tsx‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,39 @@
1-
import Image from 'next/image';
1+
import Image from "next/image";
2+
import React from "react";
23

34
export default function PushHeader({
4-
content,
5+
content,
56
}: {
6-
content: { icon: string; message: string; subMessage: string };
7+
content: { icon: string; message: string; subMessage: string };
78
}) {
8-
return (
9-
<div className="mt-[50px] flex flex-col items-center justify-center gap-3 px-5 pb-10 pt-5">
10-
<Image src={content.icon} alt="아이콘" width={60} height={60} />
11-
<p className="whitespace-pre-line text-t1 text-gray-strong">
12-
{content.message}
13-
</p>
14-
<p className="whitespace-pre-line text-center text-b2 text-gray-neutral">
15-
{content.subMessage}
16-
</p>
17-
</div>
18-
);
9+
const highlightStyles: Record<string, string> = {
10+
"한 번": "text-component-accent-primary",
11+
"두 번": "text-component-accent-primary",
12+
"마지막 기회":
13+
"bg-[linear-gradient(180deg,_#DD6875_0%,_#ED98A2_100%)] bg-clip-text text-transparent",
14+
};
15+
16+
const keywords = Object.keys(highlightStyles);
17+
const pattern = new RegExp(`(${keywords.join("|")})`, "g");
18+
const parts = content.message.split(pattern);
19+
20+
return (
21+
<div className="mt-[50px] flex flex-col items-center justify-center gap-3 px-5 pb-10 pt-5">
22+
<Image src={content.icon} alt="아이콘" width={40} height={40} />
23+
<p className="whitespace-pre-line text-t1 text-gray-strong text-center">
24+
{parts.map((part, index) =>
25+
keywords.includes(part) ? (
26+
<span key={index} className={highlightStyles[part]}>
27+
{part}
28+
</span>
29+
) : (
30+
<React.Fragment key={index}>{part}</React.Fragment>
31+
),
32+
)}
33+
</p>
34+
<p className="whitespace-pre-line text-center text-s2 text-gray-neutral">
35+
{content.subMessage}
36+
</p>
37+
</div>
38+
);
1939
}

‎src/app/(protected)/action/remind/[taskId]/_component/CountSelector.tsx‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
1-
import Image from 'next/image';
1+
import Image from "next/image";
22

33
interface ReminderCountSelectorProps {
4-
count: number;
5-
onIncrease: () => void;
6-
onDecrease: () => void;
7-
min?: number;
8-
max?: number;
4+
count: number;
5+
onIncrease: () => void;
6+
onDecrease: () => void;
7+
min?: number;
8+
max?: number;
99
}
1010

1111
export default function ReminderCountSelector({
12-
count,
13-
onIncrease,
14-
onDecrease,
15-
min = 1,
16-
max = 3,
12+
count,
13+
onIncrease,
14+
onDecrease,
15+
min = 1,
16+
max = 3,
1717
}: ReminderCountSelectorProps) {
18-
return (
19-
<div className="flex items-center justify-between px-5 py-[20.5px]">
20-
<p>다음 리마인더</p>
21-
<div className="flex h-8 w-[96px] items-center">
22-
<div
23-
className={`flex h-full w-1/3 cursor-pointer items-center justify-center rounded-[8px] text-center text-base leading-[145%] text-gray-normal bg-component-gray-secondary ${count === min || count === 0 ? 'opacity-40' : ''}`}
24-
onClick={onDecrease}
25-
>
26-
<Image
27-
src="/icons/remind/minus.svg"
28-
alt="왼쪽 화살표"
29-
width={16}
30-
height={16}
31-
/>
32-
</div>
33-
<div className="flex h-full w-1/3 items-center justify-center rounded-[8px] text-center text-s2 text-gray-normal">
34-
{count}
35-
</div>
36-
<div
37-
className={`flex h-full w-1/3 cursor-pointer items-center justify-center rounded-[8px] text-center text-base leading-[145%] text-gray-normal bg-component-gray-secondary ${count === max ? 'opacity-40' : ''}`}
38-
onClick={onIncrease}
39-
>
40-
<Image
41-
src="/icons/remind/plus.svg"
42-
alt="왼쪽 화살표"
43-
width={16}
44-
height={16}
45-
/>
46-
</div>
47-
</div>
48-
</div>
49-
);
18+
return (
19+
<div className="flex items-center justify-between px-5 py-[20.5px]">
20+
<p className="s2 text-gray-normal">알림 예정 시간</p>
21+
<div className="flex h-8 w-[96px] items-center">
22+
<div
23+
className={`flex h-full w-1/3 cursor-pointer items-center justify-center rounded-[8px] text-center text-base leading-[145%] text-gray-normal bg-component-gray-secondary ${count === min || count === 0 ? "opacity-40" : ""}`}
24+
onClick={onDecrease}
25+
>
26+
<Image
27+
src="/icons/remind/minus.svg"
28+
alt="왼쪽 화살표"
29+
width={16}
30+
height={16}
31+
/>
32+
</div>
33+
<div className="flex h-full w-1/3 items-center justify-center rounded-[8px] text-center text-s2 text-gray-normal">
34+
{count}
35+
</div>
36+
<div
37+
className={`flex h-full w-1/3 cursor-pointer items-center justify-center rounded-[8px] text-center text-base leading-[145%] text-gray-normal bg-component-gray-secondary ${count === max ? "opacity-40" : ""}`}
38+
onClick={onIncrease}
39+
>
40+
<Image
41+
src="/icons/remind/plus.svg"
42+
alt="왼쪽 화살표"
43+
width={16}
44+
height={16}
45+
/>
46+
</div>
47+
</div>
48+
</div>
49+
);
5050
}

‎src/app/(protected)/action/remind/[taskId]/_component/Header.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
interface RemindDescriptionProps {
2-
maxNotificationCount?: number;
2+
maxNotificationCount?: number;
33
}
44

55
export default function RemindDescription({
6-
maxNotificationCount = 3,
6+
maxNotificationCount = 3,
77
}: RemindDescriptionProps) {
8-
return (
9-
<div className="flex flex-col gap-[22px] mt-10 px-5">
10-
<p className="text-t2 text-white">
11-
작업을 시작할 때 까지
12-
<br />
13-
계속 리마인드 해드릴게요
14-
</p>
15-
<p className="text-b2 text-gray-neutral">
16-
선택하신 주기로 최대{'\u00A0'}
17-
<span className="font-semibold text-component-accent-primary">
18-
{maxNotificationCount}번
19-
</span>
20-
의 알림을 드려요
21-
</p>
22-
</div>
23-
);
8+
return (
9+
<div className="flex flex-col gap-3 mt-[30px] px-5">
10+
<p className="text-t2 text-gray-strong">
11+
작업을 시작할 때 까지
12+
<br />
13+
계속 리마인드 해드릴게요
14+
</p>
15+
<p className="text-b2 text-gray-neutral">
16+
선택하신 주기로 최대{"\u00A0"}
17+
<span className="text-component-accent-primary">
18+
{maxNotificationCount}
19+
</span>
20+
번의 알림을 드려요
21+
</p>
22+
</div>
23+
);
2424
}

‎src/app/(protected)/action/remind/[taskId]/_component/IntervalSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default function IntervalSelector({
6363
</p>
6464
{selectedInterval === item.value && (
6565
<Image
66-
src="/icons/common/check-primary.svg.svg"
66+
src="/icons/common/check-primary.svg"
6767
alt="체크"
6868
width={20}
6969
height={20}

‎src/app/(protected)/action/remind/[taskId]/_component/TaskDetails.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import { Badge } from '@/components/component/Badge';
2-
import IntervalSelector from './IntervalSelector';
1+
import { Badge } from "@/components/component/Badge";
2+
import IntervalSelector from "./IntervalSelector";
33

44
interface TaskDetailsProps {
5-
taskName: string;
6-
remainingTime: string;
7-
selectedInterval: number;
8-
onIntervalChange: (interval: number) => void;
5+
taskName: string;
6+
remainingTime: string;
7+
selectedInterval: number;
8+
onIntervalChange: (interval: number) => void;
99
}
1010

1111
export default function TaskDetails({
12-
taskName,
13-
remainingTime,
14-
selectedInterval,
15-
onIntervalChange,
12+
taskName,
13+
remainingTime,
14+
selectedInterval,
15+
onIntervalChange,
1616
}: TaskDetailsProps) {
17-
return (
18-
<div className="flex flex-col gap-3 px-5">
19-
<div className="flex items-center justify-between">
20-
<p>{taskName}</p>
21-
<Badge>마감까지 {remainingTime}</Badge>
22-
</div>
23-
<IntervalSelector
24-
selectedInterval={selectedInterval}
25-
onIntervalChange={onIntervalChange}
26-
/>
27-
</div>
28-
);
17+
return (
18+
<div className="flex flex-col gap-3 px-5">
19+
<div className="flex items-center justify-between">
20+
<p className="b3 text-gray-neutral">{taskName}</p>
21+
<Badge>마감까지 {remainingTime}</Badge>
22+
</div>
23+
<IntervalSelector
24+
selectedInterval={selectedInterval}
25+
onIntervalChange={onIntervalChange}
26+
/>
27+
</div>
28+
);
2929
}

‎src/app/(protected)/action/remind/[taskId]/_component/TimesList.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@ export default function ReminderTimesList({ times }: ReminderTimesListProps) {
66
return (
77
<div className="flex flex-col gap-3 px-[19.5px]">
88
{times.map((item) => (
9-
<div key={item.index} className="text-t2 bg-component-gray-primary rounded-[12px] text-gray-neutral px-5 py-4">
10-
<span className="text-component-accent-primary mr-2.5">
9+
<div
10+
key={item.index}
11+
className="flex items-center text-t2 bg-component-gray-primary rounded-[12px] text-gray-neutral px-5 py-4"
12+
>
13+
<span className="t3 text-component-accent-primary mr-2.5">
1114
{item.index}
1215
</span>
1316
{item.time}

0 commit comments

Comments
 (0)