@sayren/mcp 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sayren/mcp",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "type": "module",
   "bin": {
     "sayren-mcp": "./dist/index.mjs"
@@ -12,8 +12,8 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.22.0",
     "zod": "^4.6.5",
-    "@sayren/store-sdk": "^0.5.0",
-    "@sayren/storefront-sdk": "^0.6.0"
+    "@sayren/storefront-sdk": "^0.7.0",
+    "@sayren/store-sdk": "^0.7.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.14",

package/template/.template-meta.json

@@ -7,8 +7,8 @@
     "zod": "^4.6.5"
   },
   "versions": {
-    "@sayren/store-sdk": "0.5.0",
-    "@sayren/storefront-sdk": "0.6.0",
+    "@sayren/store-sdk": "0.7.0",
+    "@sayren/storefront-sdk": "0.7.0",
     "@sayren/ui": "0.1.0"
   }
 }

package/template/src/components/site-header.tsx

@@ -18,6 +18,9 @@ export function SiteHeader() {
           <Link to="/orders" className="hover:text-point">
             주문 내역
           </Link>
+          <Link to="/account" className="hover:text-point">
+            내 정보
+          </Link>
         </nav>
       </div>
     </header>

package/template/src/lib/social-login.server.ts

@@ -10,6 +10,8 @@ export interface SocialLoginState {
   state: string;
   codeVerifier: string;
   redirectTo: string;
+  /** 로그인한 구매자가 소셜 계정을 연결하는 흐름이면 그 공급자 — 콜백이 로그인 대신 연결로 마무리한다 */
+  linkProvider?: "kakao" | "naver" | "google";
 }
 
 export function writeSocialLogin(value: SocialLoginState) {
@@ -38,6 +40,12 @@ export function readSocialLogin(): SocialLoginState | null {
     state: stored.state,
     codeVerifier: stored.codeVerifier,
     redirectTo: typeof stored.redirectTo === "string" ? stored.redirectTo : "/",
+    linkProvider:
+      stored.linkProvider === "kakao" ||
+      stored.linkProvider === "naver" ||
+      stored.linkProvider === "google"
+        ? stored.linkProvider
+        : undefined,
   };
 }
 

package/template/src/routeTree.gen.ts

@@ -10,6 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as AccountRouteImport } from './routes/account'
 import { Route as CartRouteImport } from './routes/cart'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AuthCallbackRouteImport } from './routes/auth.callback'
@@ -25,6 +26,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AccountRoute = AccountRouteImport.update({
+  id: '/account',
+  path: '/account',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const CartRoute = CartRouteImport.update({
   id: '/cart',
   path: '/cart',
@@ -73,6 +79,7 @@ const ProductsProductIdRoute = ProductsProductIdRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/cart': typeof CartRoute
   '/login': typeof LoginRoute
   '/auth/callback': typeof AuthCallbackRoute
@@ -85,6 +92,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/cart': typeof CartRoute
   '/login': typeof LoginRoute
   '/auth/callback': typeof AuthCallbackRoute
@@ -98,6 +106,7 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/cart': typeof CartRoute
   '/login': typeof LoginRoute
   '/auth/callback': typeof AuthCallbackRoute
@@ -112,6 +121,7 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/account'
     | '/cart'
     | '/login'
     | '/auth/callback'
@@ -124,6 +134,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/account'
     | '/cart'
     | '/login'
     | '/auth/callback'
@@ -136,6 +147,7 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
+    | '/account'
     | '/cart'
     | '/login'
     | '/auth/callback'
@@ -149,6 +161,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AccountRoute: typeof AccountRoute
   CartRoute: typeof CartRoute
   LoginRoute: typeof LoginRoute
   AuthCallbackRoute: typeof AuthCallbackRoute
@@ -169,6 +182,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/account': {
+      id: '/account'
+      path: '/account'
+      fullPath: '/account'
+      preLoaderRoute: typeof AccountRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/cart': {
       id: '/cart'
       path: '/cart'
@@ -237,6 +257,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AccountRoute: AccountRoute,
   CartRoute: CartRoute,
   LoginRoute: LoginRoute,
   AuthCallbackRoute: AuthCallbackRoute,

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

@@ -3,7 +3,7 @@ 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 { signIn } from "../lib/session.server";
+import { readToken, signIn } from "../lib/session.server";
 import { clearSocialLogin, readSocialLogin } from "../lib/social-login.server";
 
 /**
@@ -24,6 +24,28 @@ export const Route = createFileRoute("/auth/callback")({
         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({

package/template/src/routes/login.tsx

@@ -25,7 +25,7 @@ const getLoginMethods = createServerFn({ method: "GET" }).handler(async () => {
 
 /**
  * 소셜 로그인 시작 — state·PKCE verifier를 쿠키에 두고 공급자 로그인 화면 주소를 돌려준다. 돌아오는 곳은
- * `/auth/callback`이고, 이 앱의 주소가 콘솔의 스토어프런트 도메인에 등록돼 있어야 한다.
+ * `/auth/callback`이고, 이 앱의 주소가 콘솔의 스토어프론트 도메인에 등록돼 있어야 한다.
  */
 const startSocial = createServerFn({ method: "POST" })
   .validator(z.object({ provider: z.enum(["kakao", "naver", "google"]), redirectTo: z.unknown() }))