[FEAT] 온보딩 캘린더 연동 단계 재활성화 및 Apple 캘린더 연동 UI 추가

apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendar.tsx

@@ -0,0 +1,38 @@
+import { PillButton } from "@repo/timo-design-system/ui";
+import Image from "next/image";
+
+interface SettingsCalendarProps {
+  iconSrc: string;
+  name: string;
+  isConnected: boolean;
+  connectLabel: string;
+  disconnectLabel: string;
+  onClick: () => void;
+}
+
+export const SettingsCalendar = ({
+  iconSrc,
+  name,
+  isConnected,
+  connectLabel,
+  disconnectLabel,
+  onClick,
+}: SettingsCalendarProps) => {
+  return (
+    <div className="bg-timo-gray-300 flex h-10.25 w-[243px] items-center justify-between gap-4 self-start rounded-lg px-2.5 py-1.5">
+      <div className="flex items-center gap-1.5">
+        <Image src={iconSrc} alt="" width={20} height={20} unoptimized />
+        <span className="typo-headline-m-16 text-timo-gray-700 whitespace-nowrap">
+          {name}
+        </span>
+      </div>
+
+      <PillButton
+        variant={isConnected ? "gray-dark" : "blue"}
+        onClick={onClick}
+      >
+        {isConnected ? disconnectLabel : connectLabel}
+      </PillButton>
+    </div>
+  );
+};

apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx

@@ -1,4 +1,3 @@
-import { PillButton } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 
 import type {
@@ -7,6 +6,7 @@ import type {
   SettingsTagItem,
 } from "@/app/[locale]/(main)/settings/_types/account/profile-type";
 
+import { SettingsCalendar } from "@/app/[locale]/(main)/settings/_components/account/SettingsCalendar";
 import { SettingsLanguageSectionContainer } from "@/app/[locale]/(main)/settings/_containers/account/SettingsLanguageSectionContainer";
 import { SettingsLogoutModalContainer } from "@/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer";
 import { SettingsTagsSectionContainer } from "@/app/[locale]/(main)/settings/_containers/account/SettingsTagsSectionContainer";
@@ -73,6 +73,7 @@ export const SettingsProfileView = ({
                   alt="Google"
                   width={20}
                   height={20}
+                  unoptimized
                 />
                 <span className="typo-headline-m-16 text-timo-gray-900">
                   {googleEmail}
@@ -88,26 +89,23 @@ export const SettingsProfileView = ({
           <h2 className="typo-headline-b-16 text-timo-gray-900">
             {labels.calendarSection}
           </h2>
-          <div className="bg-timo-gray-300 flex h-10.25 w-fit items-center gap-4 self-start rounded-lg px-2.5 py-1.5">
-            <div className="flex items-center gap-1.5">
-              <Image
-                src="/images/google-calendar.png"
-                alt=""
-                width={20}
-                height={20}
-              />
-              <span className="typo-headline-m-16 text-timo-gray-700 whitespace-nowrap">
-                Google Calendar
-              </span>
-            </div>
-
-            <PillButton
-              variant={isCalendarConnected ? "gray-dark" : "blue"}
-              onClick={onConnectCalendar}
-            >
-              {isCalendarConnected ? labels.disconnect : labels.connect}
-            </PillButton>
-          </div>
+          <SettingsCalendar
+            iconSrc="/images/google-calendar.png"
+            name="Google Calendar"
+            isConnected={isCalendarConnected}
+            connectLabel={labels.connect}
+            disconnectLabel={labels.disconnect}
+            onClick={onConnectCalendar}
+          />
+          {/* TODO: Apple 캘린더 연동 API 연결 후 연결 상태·onClick 연동 */}
+          <SettingsCalendar
+            iconSrc="/images/apple-calendar.png"
+            name="Apple Calendar"
+            isConnected={false}
+            connectLabel={labels.connect}
+            disconnectLabel={labels.disconnect}
+            onClick={() => {}}
+          />
         </section>
 
         <hr className="border-timo-gray-500" />

apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { TagLimitToastContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/toast/TagLimitToastContainer";
 import { SettingsCalendarDisconnectModal } from "@/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal";
@@ -12,6 +12,10 @@ import { useSettingsProfileLabels } from "@/app/[locale]/(main)/settings/_hooks/
 import { CreateTagModalContainer } from "@/components/tag/CreateTagModalContainer";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { MAX_CUSTOM_TAG_COUNT } from "@/schemas/tag/tag-schema";
+import {
+  clearCalendarConnectFailed,
+  hasCalendarConnectFailed,
+} from "@/utils/calendar/calendar-connect-failed";
 
 export const SettingsProfileContainer = () => {
   const tToast = useTranslations("Toast");
@@ -23,7 +27,7 @@ export const SettingsProfileContainer = () => {
     profileState.calendarConnected,
   );
   const [isCalendarConnectErrorToastOpen, setIsCalendarConnectErrorToastOpen] =
-    useState(false);
+    useState(hasCalendarConnectFailed);
   const [
     isCalendarDisconnectErrorToastOpen,
     setIsCalendarDisconnectErrorToastOpen,
@@ -33,6 +37,10 @@ export const SettingsProfileContainer = () => {
   const [isLanguageErrorToastOpen, setIsLanguageErrorToastOpen] =
     useState(false);
 
+  useEffect(() => {
+    clearCalendarConnectFailed();
+  }, []);
+
   const handleConnectCalendar = () => {
     if (isCalendarConnected) {
       overlay.open(({ isOpen, close, unmount }) => (

apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts

@@ -7,6 +7,7 @@ import type { SettingsLanguage } from "@/app/[locale]/(main)/settings/_types/acc
 
 import { useSettingsLanguageParam } from "@/app/[locale]/(main)/settings/_hooks/account/use-settings-language-param";
 import { useLogoutMutation } from "@/app/[locale]/(main)/settings/_queries/account/use-logout-mutation";
+import { CALENDAR_CONNECT_ORIGIN } from "@/constants/calendar";
 import {
   authorize,
   useDisconnectCalendar,
@@ -25,6 +26,7 @@ import {
   MAX_CUSTOM_TAG_COUNT,
   tagCreateDataSchema,
 } from "@/schemas/tag/tag-schema";
+import { setCalendarConnectOrigin } from "@/utils/calendar/calendar-connect-origin";
 import { getDefaultTagLabelKey, isDefaultTagId } from "@/utils/todo/tag-label";
 
 const LANGUAGE_REQUEST_MAP: Record<
@@ -99,13 +101,15 @@ export const useSettingsProfile = () => {
     }
 
     try {
-      const response = await authorize();
+      const response = await authorize({
+        redirectOrigin: window.location.origin,
+      });
       const url = response.data?.authorizationUrl;
       if (!url) {
         handlers.onConnectError?.();
         return;
       }
-      localStorage.setItem("calendarConnectOrigin", "settings");
+      setCalendarConnectOrigin(CALENDAR_CONNECT_ORIGIN.SETTINGS);
       window.location.assign(url);
     } catch {
       handlers.onConnectError?.();

apps/timo-web/app/[locale]/login/_containers/LoginContainer.tsx

@@ -3,9 +3,9 @@
 import { LogoTimoIcon } from "@repo/timo-design-system/icons";
 import { useTranslations } from "next-intl";
 
-import { OnboardingGoogleButtonContainer } from "@/app/[locale]/onboarding/_containers/OnboardingGoogleButtonContainer";
 import { LottiePlayer } from "@/components/lottie/LottiePlayer";
 import { ROUTES } from "@/constants/routes";
+import { AuthButtonContainer } from "@/containers/auth/AuthButtonContainer";
 import { Link } from "@/i18n/navigation";
 
 export const LoginContainer = () => {
@@ -42,8 +42,8 @@ export const LoginContainer = () => {
             <p className="typo-body-r-12 text-timo-gray-700">
               {t("connectLabel")}
             </p>
-            <OnboardingGoogleButtonContainer
-              variant="login"
+            <AuthButtonContainer
+              variant="googleLogin"
               onClick={() => {
                 const redirectOrigin = window.location.origin;
                 window.location.href = `${process.env.NEXT_PUBLIC_API_BASE_URL}/oauth2/authorization/google?redirect_origin=${encodeURIComponent(redirectOrigin)}`;

apps/timo-web/app/[locale]/oauth/calendar/callback/_containers/CalendarCallbackContainer.tsx

@@ -4,10 +4,24 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useRef } from "react";
 
+import type { CalendarConnectOrigin } from "@/constants/calendar";
+
+import { CALENDAR_CONNECT_ORIGIN } from "@/constants/calendar";
 import { ROUTES } from "@/constants/routes";
 import { useConnectCalendar } from "@/generated/endpoints/calendar/calendar";
 import { getGetMyProfileQueryKey } from "@/generated/endpoints/user/user";
 import { useRouter } from "@/i18n/navigation";
+import { markCalendarConnectFailed } from "@/utils/calendar/calendar-connect-failed";
+import { consumeCalendarConnectOrigin } from "@/utils/calendar/calendar-connect-origin";
+
+type Route = (typeof ROUTES)[keyof typeof ROUTES];
+
+const ACCESS_DENIED_ERROR = "access_denied";
+
+const CALENDAR_CONNECT_REDIRECT: Record<CalendarConnectOrigin, Route> = {
+  [CALENDAR_CONNECT_ORIGIN.ONBOARDING]: ROUTES.ONBOARDING,
+  [CALENDAR_CONNECT_ORIGIN.SETTINGS]: ROUTES.SETTINGS,
+};
 
 export const CalendarCallbackContainer = () => {
   const searchParams = useSearchParams();
@@ -21,16 +35,25 @@ export const CalendarCallbackContainer = () => {
   const hasRequested = useRef(false);
 
   useEffect(() => {
-    const origin = localStorage.getItem("calendarConnectOrigin");
-    const redirectTarget =
-      origin === "settings" ? ROUTES.SETTINGS : ROUTES.HOME;
+    if (hasRequested.current) return;
+    hasRequested.current = true;
+
+    const origin = consumeCalendarConnectOrigin();
+    const hasOrigin = origin !== null;
+    const redirectTarget = hasOrigin
+      ? CALENDAR_CONNECT_REDIRECT[origin]
+      : ROUTES.HOME;
+
+    const notifyConnectFailed = () => {
+      if (hasOrigin) markCalendarConnectFailed();
+    };
 
     if (error || !code || !state) {
+      // 사용자가 권한 동의를 취소한 경우(access_denied)는 실패로 보지 않습니다.
+      if (error !== ACCESS_DENIED_ERROR) notifyConnectFailed();
       router.replace(redirectTarget);
       return;
     }
-    if (hasRequested.current) return;
-    hasRequested.current = true;
 
     connectCalendar(
       { data: { authorizationCode: code, state } },
@@ -39,10 +62,10 @@ export const CalendarCallbackContainer = () => {
           await queryClient.invalidateQueries({
             queryKey: getGetMyProfileQueryKey(),
           });
-          localStorage.removeItem("calendarConnectOrigin");
           router.replace(redirectTarget);
         },
         onError: () => {
+          notifyConnectFailed();
           router.replace(redirectTarget);
         },
       },

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

@@ -34,34 +34,14 @@ export const OnboardingButton = ({
   }
 
   if (variant === "start") {
-    // TODO: 원래 start 버튼 (항상 활성 스타일) — CalendarConnect 단계 재활성화 시 아래 주석 해제 후 isActive 분기 제거
-    // 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>
-    // );
     return (
       <button
         type="button"
         onClick={onClick}
-        disabled={disabled || !isActive}
-        className={cn(
-          "flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out",
-          isActive ? "bg-timo-blue-300" : "bg-timo-gray-200",
-        )}
+        disabled={disabled}
+        className="bg-timo-blue-300 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2"
       >
-        <span
-          className={cn(
-            "typo-headline-m-16",
-            isActive ? "text-white" : "text-timo-gray-700",
-          )}
-        >
-          {label}
-        </span>
+        <span className="typo-headline-m-16 text-white">{label}</span>
       </button>
     );
   }

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

@@ -31,7 +31,7 @@ export const OnboardingSelectCard = ({
       type="button"
       onClick={onClick}
       className={cn(
-        "flex rounded-[4px] border px-4 py-2 text-left transition-colors duration-200 ease-in-out",
+        "flex rounded-[4px] border px-[15px] py-[7px] text-left transition-colors duration-200 ease-in-out",
         selected
           ? "border-timo-blue-300 bg-timo-blue-50"
           : "border-timo-gray-500 bg-white",

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

@@ -4,8 +4,7 @@ interface OnboardingStepButtonProps {
   step: 1 | 2 | 3 | 4;
 }
 
-// TODO: 구글 캘린더 연동 단계 재활성화 시 4 추가
-const STEPS = [1, 2, 3] as const;
+const STEPS = [1, 2, 3, 4] as const;
 
 export const OnboardingStepButton = ({ step }: OnboardingStepButtonProps) => {
   return (
@@ -20,7 +19,7 @@ export const OnboardingStepButton = ({ step }: OnboardingStepButtonProps) => {
         >
           <span
             className={cn(
-              "typo-caption-r-10 translate-y-px leading-none",
+              "typo-caption-r-10 tracking-normal",
               s === step ? "text-white" : "text-timo-blue-100",
             )}
           >