이 글의 성격은 무엇인가요?
질문 / 문제 해결
내용을 설명해주세요
- appName: poomang
- 개발환경 : webview
- 발생시점 : qr test 시 발생
- package.json
{
"name": "platform-poomang",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev:app": "granite dev",
"build": "npm run build:prisma && next build && prisma generate",
"build:app": "BUILD_TARGET=app granite build",
"build:prisma": "prisma generate",
"start": "next start -H 0.0.0.0 -p 3000",
"lint": "next lint",
"deploy": "ait deploy",
"sentry:sourcemaps": "sentry-cli sourcemaps inject --org poomang --project content-provider .next && sentry-cli sourcemaps upload --org poomang --project content-provider .next"
},
"dependencies": {
"@apps-in-toss/web-framework": "^1.9.1",
"@toss/tds-mobile": "^2.2.1",
"@toss/tds-mobile-ait": "^2.2.1",
"@aws-sdk/client-dynamodb": "^3.350.0",
"@aws-sdk/signature-v4-crt": "^3.357.0",
"@aws-sdk/util-dynamodb": "^3.350.0",
"@bluehorse-corp/aws-utils": "^0.0.0",
"@bluehorse-corp/core-utils": "^0.0.0",
"@bluehorse-corp/figma-utils": "^0.0.6",
"@bluehorse-corp/google-utils": "^0.0.0",
"@bluehorse-corp/layout": "^1.1.2",
"@bluehorse-corp/notion-utils": "^0.0.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@granite-js/plugin-sentry": "^0.1.34",
"@hello-pangea/dnd": "^16.2.0",
"@hookform/resolvers": "^3.1.1",
"@mdx-js/loader": "^2.3.0",
"@mdx-js/react": "^2.3.0",
"@next/mdx": "^13.4.7",
"@prisma/client": "^4.15.0",
"@react-spring/web": "^9.7.2",
"@sentry/browser": "^10.33.0",
"@sentry/cli": "^2.58.4",
"@sentry/nextjs": "^7.120.4",
"@styled-system/should-forward-prop": "^5.1.5",
"@types/mdx": "^2.0.5",
"@types/node": "20.2.5",
"@types/react": "18.2.9",
"@types/react-dom": "18.2.4",
"async": "^3.2.4",
"aws-crt": "^1.15.18",
"cookie": "^0.5.0",
"date-fns": "^2.30.0",
"dotenv": "^16.1.4",
"encoding": "^0.1.13",
"eslint": "8.42.0",
"eslint-config-next": "13.4.4",
"framer-motion": "^10.12.16",
"github-markdown-css": "^5.2.0",
"lodash": "^4.17.21",
"nanoid": "^4.0.2",
"next": "13.4.4",
"pluralize": "^8.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.44.3",
"react-icons": "^4.9.0",
"styled-system": "^5.1.5",
"typescript": "5.1.3",
"underscore": "^1.13.6",
"yup": "^1.2.0"
},
"devDependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/typography": "^0.5.9",
"@types/async": "^3.2.20",
"@types/color": "^3.0.3",
"@types/cookie": "^0.5.1",
"@types/lodash": "^4.14.195",
"@types/pluralize": "^0.0.29",
"@types/underscore": "^1.11.5",
"autoprefixer": "^10.4.14",
"daisyui": "^3.1.0",
"postcss": "^8.4.24",
"prisma": "^4.15.0",
"tailwindcss": "^3.3.2",
"tsx": "^3.12.7"
}
}
안녕하세요 
요거 이번주 주말까지 해서 열심히 디버깅 해보겠습니다 
안녕하세요! 혹시 언제 완료되는지 확인가능할까요?
@eastroad87 혹시 테스트 ait파일을 한번 업로드해봐도 될까요 ?
@Dylan 다시 제가 재업로드하는걸까요? 아니면 ait 파일을 여기다 업로드 하는건가요?
@Dylan 대답 부탁드려요 ㅠ
2개 번들 (RN, Webview)를 각각 올려보았는데, 정상적으로 열리네요
혹시 프로젝트 구조가 어떻게 되어있나요 ?
새로운 프로젝트 생성 후 빌드 업로드해도 AccessDenied 에러가 나올까요 ?!
@Dylan 안녕하세요.
이전의 업로드한 사진들의 원인은 무엇이였나요? 현재는 해결된건가요?
그리고 업로드되고 QR 테스트를 해보니까 홈랜딩이 제대로 되고있지 않은것 같아요.
토스의 granite 의 sdk 화면만 보이고 있습니다.
또한 문의주신 프로젝트 구조는
platform.poomang.com 프로젝트 구조
루트 레벨 구조
platform.poomang.com/
├── src/ # 메인 앱 소스
├── poomang-ads/ # 광고 서비스 (별도 AWS Lambda 서브 프로젝트)
├── prisma/ # DB 스키마 (MySQL - 푸망 메인 DB)
├── public/ # 정적 파일
├── scripts/ # 빌드/배포 스크립트
├── docker-compose.yml # 로컬 개발용 (DynamoDB Local + Redis)
├── next.config.js # Next.js 설정
└── granite.config.ts # 토스 인하우스 앱 빌드 설정
src/ 핵심 구조
1. src/app/ — Next.js App Router 라우팅
루트 페이지 (page.tsx)
src/app/page.tsx는 서비스의 진입점(entry point) 역할을 하는 클라이언트 컴포넌트입니다.
'use client';
동작 흐름:
- 토스 앱 환경 감지:
@apps-in-toss/web-framework의getSchemeUri()를 통해 현재 접속 환경이 토스 앱인지 확인합니다. - 토스 앱이면 →
/p/tosstoss로 자동 리디렉트합니다. - 일반 웹 브라우저이면 → 관리자 페이지(
/admin) 링크가 있는 심플한 홈 화면을 렌더링합니다.
접속
↓
isTossApp() 확인
├─ true → router.replace('/p/tosstoss') (토스 파트너사 랜딩)
└─ false → 홈 UI 렌더 ("Poomang Contents Provider" + Admin 버튼)
주요 구현 포인트:
isChecking상태를 사용하여 환경 감지가 완료되기 전까지null을 반환, 화면 깜빡임(flicker) 방지- 일반 웹 접속자는 사실상 내부 관리자만 사용하므로
/admin링크만 노출
공개 페이지 (p/)
파트너사별 커스텀 랜딩 페이지입니다.
app/p/
├── index.ts # 파트너사 slug → 컴포넌트 매핑 레지스트리
├── [slug]/ # 동적 라우트: /p/hanahana, /p/wooribank 등
│ ├── page.tsx # DynamoDB에서 Company/Schedule/AdSlot 조회 후 Content 렌더
│ └── tests/
│ └── [testSlug]/ # 테스트 실행 페이지: /p/hanahana/tests/mbti
│ ├── page.tsx
│ └── test-player.tsx # iframe 기반 테스트 실행기 (RN WebView 연동)
├── hana1Q/ # 각 파트너사별 커스텀 UI 컴포넌트
├── hanahana/
├── wooribank/
├── scbank/
├── mgthebanking/
├── newhana/
├── kakaopay/
├── tosstoss/
├── todaytest/ ~ todaytest4/
├── test/
└── testable/
index.ts가 slug 문자열을 파트너사 React 컴포넌트에 매핑하는 레지스트리 역할을 합니다.
핵심 데이터 흐름
사용자 접속 / (page.tsx)
↓
isTossApp() 확인
├─ 토스 앱 → /p/tosstoss 리디렉트
└─ 일반 브라우저 → /admin 링크 노출
↓
사용자 접속 /p/hanahana ([slug]/page.tsx)
↓ DynamoDB 조회
Company 유효성 검사 → isActive, 기간 체크
↓
Schedule 조회 → 테마별 테스트 목록, 배너
↓
AdSlot 조회 → 광고 슬롯
↓
Content 컴포넌트 렌더 (hanahana/content.tsx)
↓ 테스트 클릭
/p/hanahana/tests/[testSlug]
↓ DynamoDB + 권한 검사
TestPlayer (iframe)
↓
poomang.com 테스트 iframe 삽입 (embed 토큰 인증)
↓ 완료 시
ReactNative / Android / iOS WebView 브릿지 이벤트 발송
위처럼 되어있습니다. 빠른 확인 부탁드리겠습니다.
안녕하세요
새로운 프로젝트(첨부해주신 사진) 생성하여 업로드시에 정상적으로 페이지가 열리는 것으로 볼때
구조상 문제가 있는 것 같아요
내부적으로 확인했을때 특이점을 발견하지 못했습니다.
현재 외부에 호스팅 되어있는 사이트를 웹뷰로 보여주고 계신걸까요 ?
@Dylan 안녕하세요.
맞습니다. 현재 외부에 호스팅 되어있는 사이트를 웹뷰로 보여지고있어요.
위 스크린샷 보셨듯이 granite 가 보여지는게 아닌 저희 웹뷰가 보여지고있는데 왜 저렇게 보여지는지 모르곘어요.
저희 문제라면 저화면이 보이는일은 없어야겠죠.
새 vite 웹 프로젝트 만들어서 가공 없이 한번 올려봐주실 수 있을까요 ?
다른 문제는 발견되고 있지 않아서, 혹시 빌드 방식이나 프로젝트 구성에 문제가 있는건 아닐지요 .. 
@Dylan 음…
글쌔요 프로젝트의 구성보다도 일단 toss 에서 제공 하는 granite 의 화면이 보여지는게 문제라고 생각되는데요?
저희꺼는 단순 웹뷰로 보여지고있는데
이게 만약 문제가 있으면 보여지지 않는게 정상이고 저희쪽에서 수정을 할텐데
현재는 저희 웹뷰는 아예 보여지지 않고있고 granite 의 화면이 보여지고 있는게 문제점이라 생각합니다.
그리고 패키지 코드를 올려드렸는데 토스측에서 똑같이 구성해서 보여줘도 문제가 있는지요?
제가 올려드린 패키지의 프로젝트는 새로 구성하기 어려운점은 현재 고객사들에게 웹뷰형태로 제공되는 서비스입니다. 제공할수 있는정보는 다 제공할수 있으니 한번 확인 부탁드릴게요.. 지금 2개월이 넘어가고있어요..
@Dylan vite 로 구성해서 올려보도록 하겠습니다. 그러니 위에 내용도 같이 확인 부탁드리겠습니다.