refactor: 작은 행동 알림 일부 스타일링 수정

src/app/(protected)/action/complete/_component/CharacterMotivation.tsx

@@ -5,15 +5,15 @@ interface Props {
 	nickname: string;
 }
 
-export default function CharacterMotivation({
-	currentTask,
-	nickname,
-}: Props) {
+export default function CharacterMotivation({ currentTask, nickname }: Props) {
 	return (
-		<div className="mt-[30px] flex items-center justify-center text-center text-t3 font-semibold text-white">
+		<div className="mt-[30px] flex items-center justify-center text-center text-t3 font-semibold text-gray-strong">
 			잘했어요! 이제
 			<br />
-			{currentTask.persona?.name} {nickname}으로
+			<span className="text-component-accent-secondary">
+				{currentTask.persona?.name} {nickname}
+			</span>
+			으로
 			<br />
 			몰입해볼까요?
 		</div>

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

@@ -90,8 +90,6 @@ export default function ActionPushPageClient({
 					onTakePicture={() => handleTakePicture(task?.triggerAction ?? "")}
 				/>
 			</div>
-			<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>
-			<div className="relative flex flex-col gap-4 px-5"></div>
 
 			{screenState !== PushScreenState.FINAL_WARNING && (
 				<button

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

@@ -1,26 +1,28 @@
-import { Badge } from '@/components/component/Badge';
+import { Badge } from "@/components/component/Badge";
 
 type ActionCardProps = {
-  badgeText: string;
-  actionText: string;
-  variant?: 'default' | 'drawer';
+	badgeText: string;
+	actionText: string;
+	variant?: "default" | "drawer";
 };
 
 export default function ActionCard({
-  badgeText,
-  actionText,
-  variant = 'default',
+	badgeText,
+	actionText,
+	variant = "default",
 }: ActionCardProps) {
-  const cardContent = (
-    <div className="flex flex-col gap-3 rounded-2xl bg-[#6B6BE1]/[0.16] py-4 pl-4">
-      <Badge>{badgeText}</Badge>
-      <p className="text-lg font-semibold text-gray-normal">{actionText}</p>
-    </div>
-  );
+	const cardContent = (
+		<div className="flex flex-col gap-3 rounded-2xl bg-[#6B6BE1]/[0.16] py-4 pl-4">
+			<Badge>{badgeText}</Badge>
+			<p className="s1 bg-[linear-gradient(269deg,_#DDD9F8_6.08%,_#E4E4FF_31.42%,_#CCE4FF_62.59%)] bg-clip-text text-transparent">
+				{actionText}
+			</p>
+		</div>
+	);
 
-  return variant === 'default' ? (
-    <div className="rounded-2xl bg-[#17191F]">{cardContent}</div>
-  ) : (
-    cardContent
-  );
+	return variant === "default" ? (
+		<div className="rounded-2xl bg-[#17191F]">{cardContent}</div>
+	) : (
+		cardContent
+	);
 }

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

@@ -66,6 +66,17 @@ export default function PushActionDrawer({
 						className={`relative w-full ${
 							screenState === PushScreenState.FINAL_WARNING ? "mb-[34px]" : ""
 						}`}
+						style={{
+							background:
+								screenState === PushScreenState.FINAL_WARNING
+									? "linear-gradient(269deg, #DDD9F8 6.08%, #E4E4FF 31.42%, #CCE4FF 62.59%)"
+									: "linear-gradient(104deg, #4F62FC -5.48%, #867CFF 87.33%)",
+							borderImage:
+								screenState === PushScreenState.FINAL_WARNING
+									? "linear-gradient(269deg, #DDD9F8 6.08%, #E4E4FF 31.42%, #CCE4FF 62.59%)"
+									: "linear-gradient(104deg, #4F62FC -5.48%, #867CFF 87.33%)",
+							borderImageSlice: 1,
+						}}
 						onClick={handleTriggerClick}
 					>
 						시작하기

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

@@ -1,19 +1,39 @@
-import Image from 'next/image';
+import Image from "next/image";
+import React from "react";
 
 export default function PushHeader({
-  content,
+	content,
 }: {
-  content: { icon: string; message: string; subMessage: string };
+	content: { icon: string; message: string; subMessage: string };
 }) {
-  return (
-    <div className="mt-[50px] flex flex-col items-center justify-center gap-3 px-5 pb-10 pt-5">
-      <Image src={content.icon} alt="아이콘" width={60} height={60} />
-      <p className="whitespace-pre-line text-t1 text-gray-strong">
-        {content.message}
-      </p>
-      <p className="whitespace-pre-line text-center text-b2 text-gray-neutral">
-        {content.subMessage}
-      </p>
-    </div>
-  );
+	const highlightStyles: Record<string, string> = {
+		"한 번": "text-component-accent-primary",
+		"두 번": "text-component-accent-primary",
+		"마지막 기회":
+			"bg-[linear-gradient(180deg,_#DD6875_0%,_#ED98A2_100%)] bg-clip-text text-transparent",
+	};
+
+	const keywords = Object.keys(highlightStyles);
+	const pattern = new RegExp(`(${keywords.join("|")})`, "g");
+	const parts = content.message.split(pattern);
+
+	return (
+		<div className="mt-[50px] flex flex-col items-center justify-center gap-3 px-5 pb-10 pt-5">
+			<Image src={content.icon} alt="아이콘" width={40} height={40} />
+			<p className="whitespace-pre-line text-t1 text-gray-strong text-center">
+				{parts.map((part, index) =>
+					keywords.includes(part) ? (
+						<span key={index} className={highlightStyles[part]}>
+							{part}
+						</span>
+					) : (
+						<React.Fragment key={index}>{part}</React.Fragment>
+					),
+				)}
+			</p>
+			<p className="whitespace-pre-line text-center text-s2 text-gray-neutral">
+				{content.subMessage}
+			</p>
+		</div>
+	);
 }

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

@@ -1,50 +1,50 @@
-import Image from 'next/image';
+import Image from "next/image";
 
 interface ReminderCountSelectorProps {
-  count: number;
-  onIncrease: () => void;
-  onDecrease: () => void;
-  min?: number;
-  max?: number;
+	count: number;
+	onIncrease: () => void;
+	onDecrease: () => void;
+	min?: number;
+	max?: number;
 }
 
 export default function ReminderCountSelector({
-  count,
-  onIncrease,
-  onDecrease,
-  min = 1,
-  max = 3,
+	count,
+	onIncrease,
+	onDecrease,
+	min = 1,
+	max = 3,
 }: ReminderCountSelectorProps) {
-  return (
-    <div className="flex items-center justify-between px-5 py-[20.5px]">
-      <p>다음 리마인더</p>
-      <div className="flex h-8 w-[96px] items-center">
-        <div
-          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' : ''}`}
-          onClick={onDecrease}
-        >
-          <Image
-            src="/icons/remind/minus.svg"
-            alt="왼쪽 화살표"
-            width={16}
-            height={16}
-          />
-        </div>
-        <div className="flex h-full w-1/3 items-center justify-center rounded-[8px] text-center text-s2 text-gray-normal">
-          {count}
-        </div>
-        <div
-          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' : ''}`}
-          onClick={onIncrease}
-        >
-          <Image
-            src="/icons/remind/plus.svg"
-            alt="왼쪽 화살표"
-            width={16}
-            height={16}
-          />
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex items-center justify-between px-5 py-[20.5px]">
+			<p className="s2 text-gray-normal">알림 예정 시간</p>
+			<div className="flex h-8 w-[96px] items-center">
+				<div
+					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" : ""}`}
+					onClick={onDecrease}
+				>
+					<Image
+						src="/icons/remind/minus.svg"
+						alt="왼쪽 화살표"
+						width={16}
+						height={16}
+					/>
+				</div>
+				<div className="flex h-full w-1/3 items-center justify-center rounded-[8px] text-center text-s2 text-gray-normal">
+					{count}
+				</div>
+				<div
+					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" : ""}`}
+					onClick={onIncrease}
+				>
+					<Image
+						src="/icons/remind/plus.svg"
+						alt="왼쪽 화살표"
+						width={16}
+						height={16}
+					/>
+				</div>
+			</div>
+		</div>
+	);
 }

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

@@ -1,24 +1,24 @@
 interface RemindDescriptionProps {
-  maxNotificationCount?: number;
+	maxNotificationCount?: number;
 }
 
 export default function RemindDescription({
-  maxNotificationCount = 3,
+	maxNotificationCount = 3,
 }: RemindDescriptionProps) {
-  return (
-    <div className="flex flex-col gap-[22px] mt-10 px-5">
-      <p className="text-t2 text-white">
-        작업을 시작할 때 까지
-        <br />
-        계속 리마인드 해드릴게요
-      </p>
-      <p className="text-b2 text-gray-neutral">
-        선택하신 주기로 최대{'\u00A0'}
-        <span className="font-semibold text-component-accent-primary">
-          {maxNotificationCount}번
-        </span>
-        의 알림을 드려요
-      </p>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-3 mt-[30px] px-5">
+			<p className="text-t2 text-gray-strong">
+				작업을 시작할 때 까지
+				<br />
+				계속 리마인드 해드릴게요
+			</p>
+			<p className="text-b2 text-gray-neutral">
+				선택하신 주기로 최대{"\u00A0"}
+				<span className="text-component-accent-primary">
+					{maxNotificationCount}
+				</span>
+				번의 알림을 드려요
+			</p>
+		</div>
+	);
 }

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

@@ -63,7 +63,7 @@ export default function IntervalSelector({
 							</p>
 							{selectedInterval === item.value && (
 								<Image
-									src="/icons/common/check-primary.svg.svg"
+									src="/icons/common/check-primary.svg"
 									alt="체크"
 									width={20}
 									height={20}

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

@@ -1,29 +1,29 @@
-import { Badge } from '@/components/component/Badge';
-import IntervalSelector from './IntervalSelector';
+import { Badge } from "@/components/component/Badge";
+import IntervalSelector from "./IntervalSelector";
 
 interface TaskDetailsProps {
-  taskName: string;
-  remainingTime: string;
-  selectedInterval: number;
-  onIntervalChange: (interval: number) => void;
+	taskName: string;
+	remainingTime: string;
+	selectedInterval: number;
+	onIntervalChange: (interval: number) => void;
 }
 
 export default function TaskDetails({
-  taskName,
-  remainingTime,
-  selectedInterval,
-  onIntervalChange,
+	taskName,
+	remainingTime,
+	selectedInterval,
+	onIntervalChange,
 }: TaskDetailsProps) {
-  return (
-    <div className="flex flex-col gap-3 px-5">
-      <div className="flex items-center justify-between">
-        <p>{taskName}</p>
-        <Badge>마감까지 {remainingTime}</Badge>
-      </div>
-      <IntervalSelector
-        selectedInterval={selectedInterval}
-        onIntervalChange={onIntervalChange}
-      />
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-3 px-5">
+			<div className="flex items-center justify-between">
+				<p className="b3 text-gray-neutral">{taskName}</p>
+				<Badge>마감까지 {remainingTime}</Badge>
+			</div>
+			<IntervalSelector
+				selectedInterval={selectedInterval}
+				onIntervalChange={onIntervalChange}
+			/>
+		</div>
+	);
 }

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

@@ -6,8 +6,11 @@ export default function ReminderTimesList({ times }: ReminderTimesListProps) {
 	return (
 		<div className="flex flex-col gap-3 px-[19.5px]">
 			{times.map((item) => (
-				<div key={item.index} className="text-t2 bg-component-gray-primary rounded-[12px] text-gray-neutral px-5 py-4">
-					<span className="text-component-accent-primary mr-2.5">
+				<div
+					key={item.index}
+					className="flex items-center text-t2 bg-component-gray-primary rounded-[12px] text-gray-neutral px-5 py-4"
+				>
+					<span className="t3 text-component-accent-primary mr-2.5">
 						{item.index}
 					</span>
 					{item.time}