device frame 폭(390) ≠ figma frame 폭(360)

안녕하세요, 로건입니다 👋

사소한데 디버깅에 한 시간을 날렸던 함정.

Storybook decorator는 iPhone 14/15 기준 390px wide인데, figma는 360px 기준으로 그려진 경우가 많음. 그대로 두면 카드 폭이 어긋나고 우측이 잘림.

해결은 outer container에 figma frame 폭을 명시하고 가운데 정렬:

const ScreenLayout = ({ children }: { children: ReactNode }) => (
  <View style={{ width: 360, alignSelf: "center", flex: 1 }}>
    {children}
  </View>
);

inner padding 기준 layout이라는 한 줄 규칙으로 정리해두면, 다음 변환도 흔들리지 않음.