[FEAT] 온보딩 화면 컴포넌트 구현

apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx

@@ -0,0 +1,71 @@
+import {
+  ChevronLeftIcon,
+  ChevronSmallRightIcon,
+  ChevronSmallRightWhiteIcon,
+} from "@repo/timo-design-system/icons";
+import { cn } from "@repo/timo-design-system/utils";
+
+export interface OnboardingButtonProps {
+  variant: "next" | "prev" | "start";
+  label: string;
+  isActive?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const OnboardingButton = ({
+  variant,
+  label,
+  isActive = false,
+  disabled = false,
+  onClick,
+}: OnboardingButtonProps) => {
+  if (variant === "prev") {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className="hover:bg-timo-gray-500 bg-timo-gray-200 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out"
+      >
+        <ChevronLeftIcon width={18} height={18} />
+        <span className="typo-headline-m-16 text-timo-gray-900">{label}</span>
+      </button>
+    );
+  }
+
+  if (variant === "start") {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className="bg-timo-blue-300 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2"
+      >
+        <span className="typo-headline-m-16 text-white">{label}</span>
+      </button>
+    );
+  }
+
+  const isDisabled = disabled || !isActive;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={isDisabled}
+      className={cn(
+        "flex items-center justify-center gap-2 rounded-[4px] px-4 py-2",
+        isActive ? "bg-timo-blue-300" : "bg-timo-gray-200",
+      )}
+    >
+      <span
+        className={cn(
+          "typo-headline-m-16",
+          isActive ? "text-white" : "text-timo-gray-700",
+        )}
+      >
+        {label}
+      </span>
+      {isActive ? <ChevronSmallRightWhiteIcon /> : <ChevronSmallRightIcon />}
+    </button>
+  );
+};

apps/timo-web/app/[locale]/onboarding/_components/OnboardingGoogleButton.tsx

@@ -0,0 +1,38 @@
+import googleLogo from "@repo/timo-design-system/assets/images/google-logo.svg";
+import { cn } from "@repo/timo-design-system/utils";
+import Image from "next/image";
+
+type OnboardingGoogleButtonVariant = "login" | "connectCalendar";
+
+interface OnboardingGoogleButtonProps {
+  variant: OnboardingGoogleButtonVariant;
+  label: string;
+  isSelected?: boolean;
+  onClick?: () => void;
+}
+
+export const OnboardingGoogleButton = ({
+  label,
+  isSelected = false,
+  onClick,
+}: OnboardingGoogleButtonProps) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center justify-center rounded-[4px] border py-2.5",
+        isSelected
+          ? "border-timo-blue-300 bg-timo-blue-50"
+          : "border-timo-gray-500 bg-white",
+      )}
+    >
+      <div className="flex items-center gap-2.5 px-2">
+        <div className="flex size-[22px] items-center justify-center">
+          <Image src={googleLogo} alt="Google" width={18} height={18} />
+        </div>
+        <span className="typo-headline-m-16 text-timo-blue-300">{label}</span>
+      </div>
+    </button>
+  );
+};

apps/timo-web/app/[locale]/onboarding/_components/OnboardingStepButton.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@repo/timo-design-system/utils";
+
+interface OnboardingStepButtonProps {
+  step: 1 | 2 | 3 | 4;
+}
+
+const STEPS = [1, 2, 3, 4] as const;
+
+export const OnboardingStepButton = ({ step }: OnboardingStepButtonProps) => {
+  return (
+    <ol className="flex items-center gap-2">
+      {STEPS.map((s) => (
+        <li
+          key={s}
+          className={cn(
+            "flex size-[19px] items-center justify-center rounded-full",
+            s === step ? "bg-timo-blue-300" : "bg-timo-blue-65",
+          )}
+        >
+          <span
+            className={cn(
+              "typo-caption-r-10",
+              s === step ? "text-white" : "text-timo-blue-100",
+            )}
+          >
+            {s}
+          </span>
+        </li>
+      ))}
+    </ol>
+  );
+};

apps/timo-web/app/[locale]/onboarding/_components/OnboardingTimeDropdown.tsx

@@ -0,0 +1,64 @@
+import {
+  ChevronDownGrayIcon,
+  ChevronUpGrayIcon,
+} from "@repo/timo-design-system/icons";
+import { Dropdown } from "@repo/timo-design-system/ui";
+import { cn } from "@repo/timo-design-system/utils";
+
+import { getAmPm } from "@/utils/get-am-pm";
+
+const TIME_OPTIONS = Array.from(
+  { length: 25 },
+  (_, i) => `${String(i).padStart(2, "0")}:00`,
+);
+
+interface OnboardingTimeDropdownProps {
+  value: string;
+  placeholder?: string;
+  onChange: (time: string) => void;
+}
+
+export const OnboardingTimeDropdown = ({
+  value,
+  placeholder,
+  onChange,
+}: OnboardingTimeDropdownProps) => {
+  return (
+    <Dropdown className="w-[150px]">
+      <Dropdown.Trigger className="group border-timo-gray-500 flex w-full items-center justify-between rounded-[4px] border bg-white px-4 py-3 text-left">
+        {value ? (
+          <div className="flex items-center gap-1">
+            <span className="typo-headline-b-16 text-timo-black">{value}</span>
+            <span className="typo-headline-b-16 text-timo-black">
+              {getAmPm(value)}
+            </span>
+          </div>
+        ) : (
+          <span className="typo-headline-b-16 text-timo-gray-700">
+            {placeholder}
+          </span>
+        )}
+        <ChevronDownGrayIcon className="group-aria-expanded:hidden" />
+        <ChevronUpGrayIcon className="hidden group-aria-expanded:block" />
+      </Dropdown.Trigger>
+
+      <Dropdown.Panel className="border-timo-gray-500 mt-1 h-[220px] w-full rounded-[4px] border py-3 pr-2.5 pl-4">
+        <div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto p-1 pr-3.5">
+          {TIME_OPTIONS.map((time) => (
+            <Dropdown.Item
+              key={time}
+              onClick={() => onChange(time)}
+              className={cn(
+                "typo-headline-b-16 flex w-full justify-between rounded-none",
+                value === time ? "text-timo-blue-300" : "text-timo-gray-700",
+              )}
+            >
+              <span>{time}</span>
+              <span>{getAmPm(time)}</span>
+            </Dropdown.Item>
+          ))}
+        </div>
+      </Dropdown.Panel>
+    </Dropdown>
+  );
+};

apps/timo-web/app/[locale]/onboarding/_containers/OnboardingButtonContainer.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { OnboardingButton } from "@/app/[locale]/onboarding/_components/OnboardingButton";
+
+interface OnboardingButtonContainerProps {
+  variant: "next" | "prev" | "start";
+  isActive?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const OnboardingButtonContainer = ({
+  variant,
+  isActive,
+  disabled,
+  onClick,
+}: OnboardingButtonContainerProps) => {
+  const t = useTranslations("Onboarding");
+
+  return (
+    <OnboardingButton
+      variant={variant}
+      label={t(`button.${variant}`)}
+      isActive={isActive}
+      disabled={disabled}
+      onClick={onClick}
+    />
+  );
+};

apps/timo-web/app/[locale]/onboarding/_containers/OnboardingGoogleButtonContainer.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { OnboardingGoogleButton } from "@/app/[locale]/onboarding/_components/OnboardingGoogleButton";
+
+interface OnboardingGoogleButtonContainerProps {
+  variant: "login" | "connectCalendar";
+  isSelected?: boolean;
+  onClick?: () => void;
+}
+
+export const OnboardingGoogleButtonContainer = ({
+  variant,
+  isSelected,
+  onClick,
+}: OnboardingGoogleButtonContainerProps) => {
+  const t = useTranslations("Onboarding");
+
+  return (
+    <OnboardingGoogleButton
+      variant={variant}
+      label={t(`onboardingGoogleButton.${variant}`)}
+      isSelected={isSelected}
+      onClick={onClick}
+    />
+  );
+};

apps/timo-web/app/[locale]/onboarding/_containers/OnboardingTimeContainer.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useState } from "react";
+
+import { OnboardingTimeDropdown } from "@/app/[locale]/onboarding/_components/OnboardingTimeDropdown";
+
+export const OnboardingTimeContainer = () => {
+  const [time, setTime] = useState("");
+
+  return (
+    <OnboardingTimeDropdown
+      value={time}
+      placeholder="01:00"
+      onChange={setTime}
+    />
+  );
+};

apps/timo-web/messages/en.json

@@ -40,5 +40,16 @@
     "tagLimit": "You can create up to <blue>8 tags</blue>, and to add more, please delete existing tags.",
     "todoLimitLine1": "You can add up to <blue>20 incomplete to-dos</blue>.",
     "todoLimitLine2": "To add a new to-do, please complete an existing one."
+  },
+  "Onboarding": {
+    "button": {
+      "next": "Next",
+      "prev": "Previous",
+      "start": "Get Started"
+    },
+    "onboardingGoogleButton": {
+      "login": "Continue with your Google account",
+      "connectCalendar": "Connect Google Calendar"
+    }
   }
 }

apps/timo-web/messages/ko.json

@@ -40,5 +40,16 @@
     "tagLimit": "태그는 <blue>최대 8개</blue>까지 만들 수 있으며, 추가하려면 기존 태그를 삭제해 주세요.",
     "todoLimitLine1": "완료되지 않은 투두는 <blue>최대 20개</blue>까지 추가할 수 있어요.",
     "todoLimitLine2": "새로운 투두를 추가하려면 기존 투두를 완료해주세요."
+  },
+  "Onboarding": {
+    "button": {
+      "next": "다음",
+      "prev": "이전",
+      "start": "시작하기"
+    },
+    "onboardingGoogleButton": {
+      "login": "Google 계정으로 계속하기",
+      "connectCalendar": "Google 캘린더 연결하기"
+    }
   }
 }

apps/timo-web/utils/get-am-pm.ts

@@ -0,0 +1,13 @@
+const HOURS_IN_DAY = 24;
+
+/**
+ * "HH:MM" 형식의 시간 문자열에서 오전/오후를 판별합니다.
+ * 24시("24:00")는 다음날 자정(오전)으로 취급합니다.
+ *
+ * @param time - "HH:MM" 형식의 시간 문자열
+ * @returns "AM" 또는 "PM"
+ */
+export const getAmPm = (time: string): "AM" | "PM" => {
+  const hour = parseInt(time.split(":")[0] ?? "0", 10);
+  return hour >= 12 && hour < HOURS_IN_DAY ? "PM" : "AM";
+};

packages/tailwind-config/scrollbar.css

@@ -4,8 +4,8 @@
 }
 
 *::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
 }
 
 *::-webkit-scrollbar-track {