Skip to content

feat: 안내 가이드 초기 화면 (고유연동 설명까지 구현) - #24

Open
kiho-0 wants to merge 2 commits into
developfrom
feature/welcome-guide
Open

feat: 안내 가이드 초기 화면 (고유연동 설명까지 구현)#24
kiho-0 wants to merge 2 commits into
developfrom
feature/welcome-guide

Conversation

@kiho-0

@kiho-0 kiho-0 commented Jul 26, 2026

Copy link
Copy Markdown
Contributor

components/` (UI 컴포넌트)
SignupWelcomeStep.tsx

  • 회원가입 완료 가이드의 각 단계(캐릭터 안내, 연동 코드 안내)를 조건부로 렌더링하는 핵심 컴포넌트입니다.
  • 피그마 시안에 맞춰 폰트 크기, 타이틀 여백, 연동 코드 카드 박스 및 하단 설명문 레이아웃을 다듬었습니다.
    RssIcon.tsx
  • 연동 코드 카드 상단에 들어가는 RSS 아이콘 SVG 컴포넌트입니다.
  • React Native 호환을 위해 react-native-svg 모듈의 <Svg>, <G>, <Path> 태그로 변환하여 렌더링 에러(Crash)를 해결했습니다.
    CaringDogIcon.tsx / CaringLogo.tsx
  • 가이드 화면 상단 로고 및 서비스 캐릭터 이미지를 SVG 형태로 분리하여 관리하는 독립 컴포넌트입니다.

hooks (비즈니스 로직)
useSignupWelcome.ts

  • 가이드 화면의 스텝 이동, 연동 코드 복사 기능 등 상태 관리 및 핸들러 로직을 분리하여 관리하는 Custom Hook입니다.

styles(스타일)
SignupWelcomeStep.styles.ts

  • 가이드 화면 전체 레이아웃, 카드 박스 design, 버튼 및 텍스트 스타일을 정의한 StyleSheet 파일입니다.
  • 상단 여백(paddingTop) 및 중앙 정렬 구조를 수정하여 UI 위치를 재조정했습니다.

types(타입 정의)
auth.ts

  • 가이드 스텝 데이터(type, title, description 등) 및 Props에 사용되는 TypeScript interface/type을 정의합니다.

메인 스크린
SignupWelcomeScreen.tsx

  • 가이드 모듈의 메인 페이지로, 가입자 이름(userName) 데이터 수신 및 스텝 배열(steps)을 정의하여 SignupWelcomeStep으로 전달합니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant