v0 + Claude Code + LINEミニアプリで美容室予約アプリを作ってみた

美容室向けの予約システムを作りたいです。
とりあえず1店舗で使うシステムを作ろうと思います。
美容室の経営者目線で要望を整理して欲しいです。

pnpm add @line/liff

// lib/liff.ts
import liff from '@line/liff';

class LiffService {
  private initialized = false;

  async init(liffId: string): Promise<void> {
    if (this.initialized) {
      return;
    }

    try {
      console.log('Starting LIFF initialization with ID:', liffId);

      // liff.init()を実行（Promise版を使用）
      await liff.init({ 
        liffId,
        withLoginOnExternalBrowser: true 
      });

      console.log('LIFF initialization completed');
      this.initialized = true;
    } catch (error) {
      console.error('LIFF initialization failed:', error);
      throw error;
    }
  }

  isInitialized(): boolean {
    return this.initialized;
  }

  isLoggedIn(): boolean {
    if (typeof window === 'undefined') {
      return false;
    }
    return liff.isLoggedIn();
  }

  isInClient(): boolean {
    if (typeof window === 'undefined') {
      return false;
    }
    return liff.isInClient();
  }

  async login(): Promise<void> {
    if (typeof window === 'undefined') {
      return;
    }
    if (!this.isLoggedIn()) {
      liff.login();
    }
  }

  logout(): void {
    if (typeof window === 'undefined') {
      return;
    }
    liff.logout();
  }

  async getProfile(): Promise<LiffProfile> {
    if (typeof window === 'undefined') {
      throw new Error('Not available on server side');
    }
    if (!this.isLoggedIn()) {
      throw new Error('User is not logged in');
    }

    const profile = await liff.getProfile();
    return {
      userId: profile.userId,
      displayName: profile.displayName,
      pictureUrl: profile.pictureUrl,
    };
  }

  async getAccessToken(): Promise<string> {
    if (typeof window === 'undefined') {
      throw new Error('Not available on server side');
    }
    if (!this.isLoggedIn()) {
      throw new Error('User is not logged in');
    }

    const token = liff.getAccessToken();
    if (!token) {
      throw new Error('Access token is not available');
    }
    return token;
  }

  // その他LIFF機能
}

// convex/mutations.ts
export const upsertLineUser = mutation({
  args: {
    lineUserId: v.string(),
    displayName: v.string(),
    pictureUrl: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
    const existingUser = await ctx.db
      .query("lineUsers")
      .withIndex("by_line_user_id", (q) => q.eq("lineUserId", args.lineUserId))
      .first();

    const now = new Date().toISOString();

    if (existingUser) {
      // 既存ユーザーの更新
      await ctx.db.patch(existingUser._id, {
        displayName: args.displayName,
        pictureUrl: args.pictureUrl,
        updatedAt: now,
      });
    } else {
      // 新規ユーザーの作成
      await ctx.db.insert("lineUsers", {
        lineUserId: args.lineUserId,
        displayName: args.displayName,
        pictureUrl: args.pictureUrl,
        createdAt: now,
        updatedAt: now,
      });
    }
  },
});

// hooks/use-liff.ts
if (loggedIn) {
  const userProfile = await liffService.getProfile();
  setProfile(userProfile);

  // 🆕 LINEユーザー情報を自動的にDBに保存
  try {
    await upsertLineUser({
      lineUserId: userProfile.userId,
      displayName: userProfile.displayName,
      pictureUrl: userProfile.pictureUrl,
    });
    console.log('LINE user saved to database:', userProfile.userId);
  } catch (dbError) {
    console.error('Failed to save LINE user to database:', dbError);
  }
}

// app/ConvexClientProvider.tsx
"use client";
import { ConvexProvider, ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export default function ConvexClientProvider({ children }) {
  return <ConvexProvider client={convex}>{children}</ConvexProvider>;
}