@sayren/mcp 0.1.8 → 0.1.10

package/template/src/routes/account.tsx

@@ -0,0 +1,213 @@
+import { ApiError, type SocialProvider } from "@sayren/storefront-sdk";
+import { createFileRoute, redirect, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestUrl } from "@tanstack/react-start/server";
+import { useState } from "react";
+import { z } from "zod";
+import { SubmitButton } from "../components/submit-button";
+import { apiFor, authFor } from "../lib/api.server";
+import { formatDateTime } from "../lib/format";
+import { readToken } from "../lib/session.server";
+import { SOCIAL_BUTTONS } from "../lib/social-buttons";
+import { writeSocialLogin } from "../lib/social-login.server";
+
+const PROVIDER_NAME: Record<SocialProvider, string> = {
+  kakao: "카카오",
+  naver: "네이버",
+  google: "구글",
+};
+
+const accountSearch = z.object({
+  linked: z.enum(["kakao", "naver", "google"]).optional().catch(undefined),
+  error: z.string().optional().catch(undefined),
+});
+
+/** 내 정보와 로그인 수단 — 로그인하지 않았으면 로그인 화면으로 보낸다 */
+const getAccount = createServerFn({ method: "GET" }).handler(async () => {
+  const accessToken = readToken();
+  if (!accessToken) throw redirect({ to: "/login", search: { redirectTo: "/account" } });
+  const [me, identities, store] = await Promise.all([
+    apiFor({ accessToken }).member.me(),
+    authFor().identities(accessToken),
+    apiFor().store.get(),
+  ]);
+  // 셀러가 켠 소셜 로그인만 연결할 수 있다
+  const providers = store.loginMethods.filter(
+    (method): method is SocialProvider => method !== "password",
+  );
+  return { me, identities, providers };
+});
+
+const providerInput = z.object({ provider: z.enum(["kakao", "naver", "google"]) });
+
+/**
+ * 소셜 계정 연결 시작 — 로그인과 같은 콜백(`/auth/callback`)으로 돌아오고, 쿠키의 `linkProvider`로 연결임을 안다.
+ * 연결은 흐름을 시작한 이 구매자에게만 된다(서버가 확인한다).
+ */
+const startLink = createServerFn({ method: "POST" })
+  .validator(providerInput)
+  .handler(async ({ data }) => {
+    const accessToken = readToken();
+    if (!accessToken) return { url: null, error: "다시 로그인해 주세요" };
+    const origin = new URL(getRequestUrl()).origin;
+    try {
+      const started = await authFor().linkIdp(accessToken, data.provider, {
+        redirectUri: `${origin}/auth/callback`,
+      });
+      writeSocialLogin({
+        state: started.state,
+        codeVerifier: started.codeVerifier,
+        redirectTo: "/account",
+        linkProvider: data.provider,
+      });
+      return { url: started.url, error: null };
+    } catch (error) {
+      return { url: null, error: accountErrorMessage(error) };
+    }
+  });
+
+const unlink = createServerFn({ method: "POST" })
+  .validator(providerInput)
+  .handler(async ({ data }) => {
+    const accessToken = readToken();
+    if (!accessToken) return { error: "다시 로그인해 주세요" };
+    try {
+      await authFor().unlinkIdp(accessToken, data.provider);
+      return { error: null };
+    } catch (error) {
+      return { error: accountErrorMessage(error) };
+    }
+  });
+
+const ERROR_MESSAGE: Record<string, string> = {
+  IDENTITY_IN_USE: "이 계정은 이미 다른 회원에 연결돼 있어요",
+  PROVIDER_ALREADY_LINKED:
+    "같은 서비스의 다른 계정이 이미 연결돼 있어요. 해제한 뒤 다시 연결해 주세요",
+  LAST_LOGIN_METHOD: "마지막 로그인 수단은 해제할 수 없어요. 다른 계정을 먼저 연결해 주세요",
+  access_denied: "연결을 취소했어요",
+  state_mismatch: "연결 요청이 만료됐어요. 다시 시도해 주세요",
+};
+
+function accountErrorMessage(error: unknown): string {
+  if (error instanceof ApiError)
+    return ERROR_MESSAGE[error.code] ?? "처리하지 못했어요. 잠시 후 다시 시도해 주세요";
+  return "처리하지 못했어요. 잠시 후 다시 시도해 주세요";
+}
+
+export const Route = createFileRoute("/account")({
+  validateSearch: accountSearch,
+  loader: () => getAccount(),
+  head: () => ({ meta: [{ title: "내 정보" }] }),
+  component: Account,
+});
+
+function Account() {
+  const { me, identities, providers } = Route.useLoaderData();
+  const { linked, error: callbackError } = Route.useSearch();
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const error =
+    actionError ??
+    (callbackError
+      ? (ERROR_MESSAGE[callbackError] ?? "연결하지 못했어요. 다시 시도해 주세요")
+      : null);
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const submitter = (event.nativeEvent as SubmitEvent).submitter as HTMLButtonElement | null;
+    const [action, provider] = (submitter?.value ?? "").split(":") as [string, SocialProvider];
+    if (!provider) return;
+    setPending(true);
+    setActionError(null);
+    if (action === "link") {
+      void startLink({ data: { provider } }).then((result) => {
+        // 공급자 화면은 다른 사이트라 문서째 이동한다
+        if (result.url) window.location.assign(result.url);
+        else {
+          setActionError(result.error);
+          setPending(false);
+        }
+      });
+      return;
+    }
+    void unlink({ data: { provider } }).then(async (result) => {
+      if (result.error) setActionError(result.error);
+      await router.invalidate();
+      setPending(false);
+    });
+  };
+
+  return (
+    <div className="mx-auto max-w-lg space-y-8 py-10">
+      <div className="space-y-1">
+        <h1 className="font-bold text-2xl">내 정보</h1>
+        <p className="text-muted text-sm">
+          {me.name}
+          {me.email ? ` · ${me.email}` : ""}
+        </p>
+      </div>
+
+      <section className="space-y-3">
+        <h2 className="font-bold text-lg">로그인 수단</h2>
+        {linked ? (
+          <p className="rounded-md bg-chip px-3 py-2 text-sm">
+            {PROVIDER_NAME[linked]} 계정을 연결했어요
+          </p>
+        ) : null}
+        <form onSubmit={submit}>
+          <ul className="divide-y divide-line rounded-lg border border-line">
+            <li className="flex items-center justify-between gap-3 px-4 py-3">
+              <span className="font-medium">이메일·비밀번호</span>
+              <span className="text-muted text-sm">
+                {identities.hasPassword ? "사용 중" : "없음"}
+              </span>
+            </li>
+            {identities.hasExternalAuth ? (
+              <li className="flex items-center justify-between gap-3 px-4 py-3">
+                <span className="font-medium">스토어 회원 계정</span>
+                <span className="text-muted text-sm">사용 중</span>
+              </li>
+            ) : null}
+            {providers.map((provider) => {
+              const identity = identities.identities.find((item) => item.provider === provider);
+              return (
+                <li key={provider} className="flex items-center justify-between gap-3 px-4 py-3">
+                  <span className="flex flex-col gap-0.5">
+                    <span className="font-medium">{PROVIDER_NAME[provider]}</span>
+                    <span className="text-muted text-xs">
+                      {identity
+                        ? `${identity.email ?? "이메일 비공개"} · ${formatDateTime(identity.linkedAt)} 연결`
+                        : "연결 안 됨"}
+                    </span>
+                  </span>
+                  {identity ? (
+                    <SubmitButton
+                      value={`unlink:${provider}`}
+                      disabled={pending}
+                      className="h-9 rounded-md border border-line px-3 text-sm disabled:opacity-50"
+                    >
+                      연결 해제
+                    </SubmitButton>
+                  ) : (
+                    <SubmitButton
+                      value={`link:${provider}`}
+                      disabled={pending}
+                      className={`h-9 rounded-md px-3 font-semibold text-sm disabled:opacity-50 ${SOCIAL_BUTTONS[provider].className}`}
+                    >
+                      연결
+                    </SubmitButton>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </form>
+        {error ? <p className="text-point text-sm">{error}</p> : null}
+        <p className="text-muted text-xs">
+          연결한 계정으로도 같은 회원으로 로그인해요. 마지막 로그인 수단은 해제할 수 없어요.
+        </p>
+      </section>
+    </div>
+  );
+}

package/template/src/routes/auth.callback.ts

@@ -0,0 +1,70 @@
+import { ApiError } from "@sayren/storefront-sdk";
+import { IdpCallbackError } from "@sayren/storefront-sdk/auth";
+import { createFileRoute } from "@tanstack/react-router";
+import { authFor } from "../lib/api.server";
+import { clearCartToken, readCartToken } from "../lib/cart-session.server";
+import { readToken, signIn } from "../lib/session.server";
+import { clearSocialLogin, readSocialLogin } from "../lib/social-login.server";
+
+/**
+ * 소셜 로그인에서 돌아오는 곳 — 쿠키에 둔 state·verifier로 1회용 code를 구매자 토큰으로 바꾸고 세션 쿠키를 심는다.
+ * 비회원 장바구니가 있으면 합친다. 실패하면 로그인 화면으로 이유를 들고 돌아간다.
+ *
+ * 화면이 없는 서버 라우트다. 공급자가 문서째 보내 오므로 응답은 리다이렉트 하나다.
+ */
+export const Route = createFileRoute("/auth/callback")({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        const url = new URL(request.url);
+        const stored = readSocialLogin();
+        clearSocialLogin();
+        const go = (location: string) =>
+          new Response(null, { status: 302, headers: { Location: location } });
+        const fail = (reason: string) => go(`/login?error=${encodeURIComponent(reason)}`);
+        if (!stored) return fail("state_mismatch");
+
+        // 계정 연결 — 로그인한 구매자에 공급자 계정을 붙이고 계정 화면으로 돌아간다
+        if (stored.linkProvider) {
+          const accessToken = readToken();
+          if (!accessToken) return go("/login?redirectTo=%2Faccount");
+          try {
+            await authFor().linkIdpCallback(accessToken, stored.linkProvider, {
+              code: url.searchParams.get("code"),
+              state: url.searchParams.get("state"),
+              error: url.searchParams.get("error"),
+              expectedState: stored.state,
+              codeVerifier: stored.codeVerifier,
+            });
+            return go(`/account?linked=${stored.linkProvider}`);
+          } catch (error) {
+            if (error instanceof IdpCallbackError)
+              return go(`/account?error=${encodeURIComponent(error.reason)}`);
+            if (error instanceof ApiError)
+              return go(`/account?error=${encodeURIComponent(error.code)}`);
+            throw error;
+          }
+        }
+
+        const cartToken = readCartToken();
+        try {
+          const tokens = await authFor().idpCallback({
+            code: url.searchParams.get("code"),
+            state: url.searchParams.get("state"),
+            error: url.searchParams.get("error"),
+            expectedState: stored.state,
+            codeVerifier: stored.codeVerifier,
+            cartToken: cartToken ?? undefined,
+          });
+          signIn(tokens);
+          if (cartToken) clearCartToken();
+          return go(stored.redirectTo);
+        } catch (error) {
+          if (error instanceof IdpCallbackError) return fail(error.reason);
+          if (error instanceof ApiError) return fail("provider_error");
+          throw error;
+        }
+      },
+    },
+  },
+});

package/template/{app → src}/routes/cart.tsx

@@ -1,17 +1,16 @@
-import { Form, Link, redirect } from "react-router";
+import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { useState } from "react";
+import { z } from "zod";
+import { SubmitButton } from "../components/submit-button";
 import { apiFor } from "../lib/api.server";
-import { cartCookie, readCartToken } from "../lib/cart-session.server";
+import { readCartToken, writeCartToken } from "../lib/cart-session.server";
 import { formatPrice } from "../lib/format";
 import { readToken } from "../lib/session.server";
-import type { Route } from "./+types/cart";
 
-export function meta() {
-  return [{ title: "장바구니" }];
-}
-
-export async function loader({ request, context }: Route.LoaderArgs) {
-  const accessToken = readToken(context);
-  const cartToken = await readCartToken(request);
+const getCart = createServerFn({ method: "GET" }).handler(async () => {
+  const accessToken = readToken();
+  const cartToken = readCartToken();
   // 비회원이 아직 장바구니를 만든 적이 없으면 서버에 물어볼 것이 없다
   if (!accessToken && !cartToken) {
     return {
@@ -19,42 +18,56 @@ export async function loader({ request, context }: Route.LoaderArgs) {
       loginRequired: false,
     };
   }
-  const api = apiFor(request, { accessToken, cartToken });
+  const api = apiFor({ accessToken, cartToken });
   // 회원만 주문받는 스토어면 비회원에게 주문 버튼 대신 로그인 안내를 보인다(담기는 그대로 된다)
   const [cart, store] = await Promise.all([api.cart.get(), accessToken ? null : api.store.get()]);
   return { cart, loginRequired: store ? !store.guestCheckout : false };
-}
+});
 
-export async function action({ request, context }: Route.ActionArgs) {
-  const form = await request.formData();
-  const intent = String(form.get("intent") ?? "");
-  const accessToken = readToken(context);
-  const cartToken = await readCartToken(request);
-  let issued: string | null = null;
-  const api = apiFor(request, {
-    accessToken,
-    cartToken,
-    onCartToken: (token) => {
-      issued = token;
-    },
+const changeCart = createServerFn({ method: "POST" })
+  .validator(
+    z.discriminatedUnion("intent", [
+      z.object({ intent: z.literal("remove"), cartItemId: z.string() }),
+      z.object({
+        intent: z.literal("update"),
+        cartItemId: z.string(),
+        quantity: z.number().int().min(1).max(999),
+      }),
+    ]),
+  )
+  .handler(async ({ data }) => {
+    const cartToken = readCartToken();
+    let issued: string | null = null;
+    const api = apiFor({
+      accessToken: readToken(),
+      cartToken,
+      onCartToken: (token) => {
+        issued = token;
+      },
+    });
+    if (data.intent === "remove") await api.cart.removeItem(data.cartItemId);
+    else await api.cart.updateItem(data.cartItemId, { quantity: data.quantity });
+    const token = issued ?? cartToken;
+    if (token) writeCartToken(token);
   });
 
-  if (intent === "remove") {
-    await api.cart.removeItem(String(form.get("cartItemId")));
-  } else if (intent === "update") {
-    await api.cart.updateItem(String(form.get("cartItemId")), {
-      quantity: Number(form.get("quantity")),
-    });
-  }
+export const Route = createFileRoute("/cart")({
+  loader: () => getCart(),
+  head: () => ({ meta: [{ title: "장바구니" }] }),
+  component: CartPage,
+});
 
-  const token = issued ?? cartToken;
-  return redirect("/cart", {
-    headers: token ? { "Set-Cookie": await cartCookie.serialize(token) } : undefined,
-  });
-}
+function CartPage() {
+  const { cart, loginRequired } = Route.useLoaderData();
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
 
-export default function CartPage({ loaderData }: Route.ComponentProps) {
-  const { cart, loginRequired } = loaderData;
+  const change = (data: Parameters<typeof changeCart>[0]["data"]) => {
+    setPending(true);
+    changeCart({ data })
+      .then(() => router.invalidate())
+      .finally(() => setPending(false));
+  };
 
   if (!cart.items.length) {
     return (
@@ -82,7 +95,11 @@ export default function CartPage({ loaderData }: Route.ComponentProps) {
               className="size-20 rounded-md bg-chip object-cover"
             />
             <div className="flex flex-1 flex-col gap-1">
-              <Link to={`/products/${item.productId}`} className="text-sm">
+              <Link
+                to="/products/$productId"
+                params={{ productId: item.productId }}
+                className="text-sm"
+              >
                 {item.productName}
               </Link>
               {item.optionName ? (
@@ -94,8 +111,18 @@ export default function CartPage({ loaderData }: Route.ComponentProps) {
                 </span>
               ) : null}
               <div className="flex items-center gap-3 pt-1">
-                <Form method="post" className="flex items-center gap-2">
-                  <input type="hidden" name="cartItemId" value={item.cartItemId} />
+                <form
+                  className="flex items-center gap-2"
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    const form = new FormData(event.currentTarget);
+                    change({
+                      intent: "update",
+                      cartItemId: item.cartItemId,
+                      quantity: Number(form.get("quantity")),
+                    });
+                  }}
+                >
                   <input
                     type="number"
                     name="quantity"
@@ -104,26 +131,20 @@ export default function CartPage({ loaderData }: Route.ComponentProps) {
                     defaultValue={item.quantity}
                     className="h-9 w-20 rounded-md border border-line px-2 text-sm"
                   />
-                  <button
-                    type="submit"
-                    name="intent"
-                    value="update"
-                    className="text-muted text-xs underline"
-                  >
+                  <SubmitButton disabled={pending} className="text-muted text-xs underline">
                     수량 변경
-                  </button>
-                </Form>
-                <Form method="post">
-                  <input type="hidden" name="cartItemId" value={item.cartItemId} />
-                  <button
-                    type="submit"
-                    name="intent"
-                    value="remove"
-                    className="text-muted text-xs underline"
-                  >
+                  </SubmitButton>
+                </form>
+                <form
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    change({ intent: "remove", cartItemId: item.cartItemId });
+                  }}
+                >
+                  <SubmitButton disabled={pending} className="text-muted text-xs underline">
                     삭제
-                  </button>
-                </Form>
+                  </SubmitButton>
+                </form>
               </div>
             </div>
             <span className="font-semibold text-sm">{formatPrice(item.totalPrice)}</span>
@@ -153,31 +174,26 @@ export default function CartPage({ loaderData }: Route.ComponentProps) {
               이 스토어는 회원만 주문할 수 있어요. 담은 상품은 로그인하면 그대로 이어져요
             </p>
             <Link
-              to="/login?redirectTo=/cart"
+              to="/login"
+              search={{ redirectTo: "/cart" }}
               className="flex h-12 items-center justify-center rounded-md bg-ink font-semibold text-white"
             >
               로그인하고 주문하기
             </Link>
           </div>
+        ) : purchasable.length ? (
+          /* 주문 조건은 URL에 둔다 — 새로고침·뒤로가기가 그대로 동작한다 */
+          <Link
+            to="/checkout"
+            search={{ cartItemId: purchasable.map((item) => item.cartItemId) }}
+            className="flex h-12 w-full items-center justify-center rounded-md bg-ink font-semibold text-white md:w-64"
+          >
+            주문하기
+          </Link>
         ) : (
-          /* 주문서는 GET으로 연다 — 진입 조건이 URL에 남아 새로고침·뒤로가기가 그대로 동작한다 */
-          <Form method="get" action="/checkout" className="w-full md:w-64">
-            {purchasable.map((item) => (
-              <input
-                key={item.cartItemId}
-                type="hidden"
-                name="cartItemId"
-                value={item.cartItemId}
-              />
-            ))}
-            <button
-              type="submit"
-              disabled={!purchasable.length}
-              className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
-            >
-              주문하기
-            </button>
-          </Form>
+          <span className="flex h-12 w-full items-center justify-center rounded-md bg-ink font-semibold text-white opacity-50 md:w-64">
+            주문하기
+          </span>
         )}
       </div>
     </div>

package/template/{app/routes/checkout-complete.tsx → src/routes/checkout.complete.tsx}

@@ -1,28 +1,35 @@
-import { Link } from "react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { z } from "zod";
 import { apiFor } from "../lib/api.server";
 import { formatPrice } from "../lib/format";
 import { readToken } from "../lib/session.server";
-import type { Route } from "./+types/checkout-complete";
 
-export function meta() {
-  return [{ title: "주문 완료" }];
-}
-
-export async function loader({ request, context }: Route.LoaderArgs) {
-  const orderId = new URL(request.url).searchParams.get("orderId");
-  if (!orderId) return { orderId: null, order: null };
+const completeSearch = z.object({ orderId: z.string().optional().catch(undefined) });
 
-  // 비회원은 주문 조회에 비밀번호가 필요하다 — 완료 화면에서는 주문번호만 보여 준다
-  const accessToken = readToken(context);
-  if (!accessToken) return { orderId, order: null };
+const getCompletedOrder = createServerFn({ method: "GET" })
+  .validator(completeSearch)
+  .handler(async ({ data }) => {
+    if (!data.orderId) return null;
+    // 비회원은 주문 조회에 비밀번호가 필요하다 — 완료 화면에서는 주문번호만 보여 준다
+    const accessToken = readToken();
+    if (!accessToken) return null;
+    return apiFor({ accessToken })
+      .myOrders.get(data.orderId)
+      .catch(() => null);
+  });
 
-  const api = apiFor(request, { accessToken });
-  const order = await api.myOrders.get(orderId).catch(() => null);
-  return { orderId, order };
-}
+export const Route = createFileRoute("/checkout/complete")({
+  validateSearch: completeSearch,
+  loaderDeps: ({ search }) => search,
+  loader: ({ deps }) => getCompletedOrder({ data: deps }),
+  head: () => ({ meta: [{ title: "주문 완료" }] }),
+  component: CheckoutComplete,
+});
 
-export default function CheckoutComplete({ loaderData }: Route.ComponentProps) {
-  const { orderId, order } = loaderData;
+function CheckoutComplete() {
+  const order = Route.useLoaderData();
+  const { orderId } = Route.useSearch();
 
   return (
     <div className="space-y-6 py-10 text-center">