플러그인 옵션이 올바르지 않습니다

개발
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

안녕하세요.

Lovable로 생성한 React + Vite 프로젝트를 Apps In Toss Web Framework에 연결하는 과정에서 문제가 발생하여 문의드립니다.

환경

  • @apps-in-toss/web-framework 2.6.1

  • React + Vite (Lovable 생성 프로젝트)

  • appName: ninehabit

확인한 내용

  • npm run build 성공

  • npx tsc --noEmit 성공

  • granite.config.ts 생성 완료

  • icon URL 정상 접근 가능

  • appName 정상

  • npx ait init 완료

증상

  • granite dev 실행 시

  • npx ait build 실행 시

모두 아래 오류가 발생합니다.

[Apps In Toss Plugin] 플러그인 옵션이 올바르지 않습니다.
granite.config.ts 구성을 확인해주세요.

추가 확인
web-framework 내부 validateAppInTossWebPluginOptions 검증 코드까지 확인했습니다.

brand.displayName
brand.primaryColor
brand.icon
permissions
web.commands

검증 구조는 확인했지만 어떤 필드가 실패했는지 SDK가 출력하지 않아 원인 파악이 어렵습니다.

Lovable(Vite) 프로젝트 사용 시 추가 설정이 필요한지,
또는 web-framework 2.6.1에서 알려진 이슈가 있는지 확인 부탁드립니다.

감사합니다.

granite.config.ts 구성(들여쓰기 무시하고 올립니다.)
import { defineCon@apps-in-tossig } from ‘@apps-in-toss/web-framework/config’;

export default defineConfig({

appName: ‘ninehabit’,

brand: {

displayName: ‘나인해빗’,

primaryColor: ‘#3182F6’,

#icon은 앱정보에서 복사해서 붙였습니다.

icon: ‘https://static.toss.im/appsintoss/45643/98575343-fb5c-4d10-b91d-845a83d8d77c.png’,

},

web: {

host: ‘localhost’,

port: 5173,

commands: {

dev: ‘vite’,

build: ‘vite build’,

},

},

permissions: [],

outdir: ‘dist’,

});

2

안녕하세요 :slight_smile:

import { defineConfig } from '@apps-in-toss/web-framework/config';

export default defineConfig({
  appName: 'ninehabit',
  brand: {
    displayName: '나인해빗', 
    primaryColor: '#3182F6', 
    icon: 'https://static.toss.im/appsintoss/45643/98575343-fb5c-4d10-b91d-845a83d8d77c.png', 
  },
  web: {
    host: 'localhost',
    port: 5173,
    commands: {
      dev: 'vite',
      build: 'vite build',
    },
  },
  permissions: [],
  outdir: 'dist',
});

요거 고대로 카피해서 한번 시도 해봐주실 수 있을까요 ?

3

해결됐습니다. 어떤 차이가 있는건가요? 제가 볼때는 잘 모르겠습니다. 다른 앱을 추가할 계획이니 무엇을 조심해야하는지 설명부탁드립니다. 그리고 감사합니다.

4

음.. 저도 전달 주신 granite.config.ts 에 별다른 문제를 찾지 못해서 우선 임의로 만들어드렸습니다. :thinking:

5

이 granite.config.ts를 생성하실때 앱인토스에서 제공되는 커맨드를 사용해주셨을까요 ?
e.g. npx ait init

6

처음에는 직접 수정한 granite.config.ts를 사용했고, 계속 오류가 나고 진행이 안되서, 중간중간 여러 차례 수정하면서 appName, icon, commands 등을 변경했습니다. 그래도 안되더라구요.

오늘 안내해주신 granite.config.ts 내용을 그대로 적용했더니 정상적으로 AIT 빌드 및 업로드가 완료되었습니다.아무래도 초기 설정 파일이 ait init으로 생성된 원본과 달라졌거나, 제가 수정하는 과정에서 문제가 생겼던 것 같습니다.

도움 주셔서 감사합니다.