Skip to content

style: 인스타그램 랜딩 CTA 위계 변경 + 로고 크기 정합 #492

Description

@iOdiO89

구현할 기능

인스타그램 프로필 링크로 진입하는 랜딩 페이지 마감 다듬기.

1. 버튼 위치·위계 변경

스토어 전환이 막혔을 때 뜨는 CTA 두 개의 순서를 바꾸고, 앱 설치가 primary 가 되게 한다.

현재는 웹으로 계속 보기 가 위·primary, 앱 설치하러 가기 가 아래·secondary 다.

app/open-app/_components/AppStoreRedirect.tsx:60-67

<Button size="lg" onClick={handleWebContinueClick}>웹으로 계속 보기</Button>
<Button variant="secondary" size="lg" onClick={handleStoreRetryClick}> 설치하러 가기</Button>

2. 아이콘 크기 확인

루트(스플래시) 로고와 랜딩 페이지 로고 크기가 달라 보인다. 동일한지 확인 후 맞춘다.

참고

로고는 세 곳 모두 같은 상수를 쓰고 있다 — 원본 146px200/146 으로 scale.

  • app/_components/SplashClient.tsxSPLASH_SCALE = SPLASH_LOGO_WIDTH(200) / LOGIN_LOGO_WIDTH(146)
  • app/open-app/_components/AppStoreRedirect.tsx:18SPLASH_LOGO_SCALE = 200 / 146
  • app/open/_components/OpenLanding.tsx:23 — 동일

다만 스플래시는 애니메이션으로 scale: 1(146px) 까지 줄어들며 위치도 이동한다 (SplashClient.tsx 의 shrink 단계). 랜딩은 200px 고정이라, 비교 시점에 따라 크기가 달라 보일 수 있다.

  • 어느 상태를 기준으로 맞출지 확인 필요 (스플래시 초기 200px / 축소 후 146px)
  • 하단 CTA 컨테이너가 공통 BottomCta 를 쓰지 않고 fixed + z-20 하드코딩이다 — 하단 바 스펙 통일 이슈와 함께 볼 수 있다

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions