refactor: Flex wrapper 마이그레이션

[KYBee]

작업 내용

• 기존 SCSS 기반 flex wrapper 중 @sipe-team/side의 Flex로 바로 옮길 수 있는 영역을 점진적으로 전환했습니다.
• UserCard, ActiveVideoCard의 wrapper 구조를 Flex 사용으로 정리했습니다.
• token 도입 전 추가로 전환 가능한 Button, SponsorImage, ActiveCard, RecruitBarChart, Recruit의 정적 flex wrapper를 Flex로 이전했습니다.
• 전환 대상의 기존 렌더링 계약을 테스트로 보강했습니다.

변경 범위

• 반응형 의존성이 낮은 display, flex-direction, align-items, justify-content, gap, flex-wrap 스타일을 Flex prop으로 이동
• selector/반응형 구조 의존성이 남아 있는 스타일은 SCSS에 유지
• 마이그레이션 대상 컴포넌트/페이지 테스트 추가 및 정리

테스트 결과

• Button, SponsorImage, ActiveCard, ActiveVideoCard, UserCard, RecruitBarChart, Recruit 테스트로 주요 렌더링 계약을 확인했습니다.
• 링크, 이미지/fallback, optional UI, hover tooltip, 페이지 주요 섹션 렌더링이 유지되는지 검증했습니다.
• yarn test: 15개 테스트 파일 / 27개 테스트 통과

남은 작업

• 남은 flex 마이그레이션 후보는 대부분 모바일/데스크탑별 direction, gap, align, wrap 값이 달라 반응형 처리가 필요합니다.
• 현재 Flex에서 responsive prop을 직접 다루기 전까지는 selector/반응형 의존 스타일을 SCSS에 유지하는 방향이 안전합니다.
• 이후 responsive token/API가 정리되면 남은 3유형 영역을 이어서 전환할 예정입니다.

확인

• yarn install --immutable
• yarn test
• git diff --check

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sipe-team	Ready	Preview, Comment	Jul 27, 2026 4:22pm

[KYBee]

Netlify preview check 실패는 이번 Flex 마이그레이션 변경 때문이라기보다 Netlify 쪽 설정/환경 문제로 보입니다.

확인한 실패 원인은 다음과 같습니다.

1. Netlify가 pnpm run build를 실행하고 있음

   • 현재 sipe.team은 Yarn 기반 프로젝트라 pnpm run build 실행 시 아래 에러로 실패합니다.
   • Usage Error: This project is configured to use yarn

2. yarn build로 맞춰도 Google Sheet 관련 환경값이 없으면 실패함

   • 빌드 중 .script/gSheet.js가 실행되는데, 필요한 환경값이 없는 상태에서 replace를 호출하면서 실패합니다.
   • TypeError: Cannot read properties of undefined (reading 'replace')\n\n추가로, 이 Netlify preview check는 기존 PR 흐름에서 보던 필수 체크가 아니라 이번 PR에서 갑자기 추가된 것으로 보입니다.

[G-hoon]

이거 혹시 왜 삭제하신 걸까요...?

[G-hoon]

이 부분은 이번 Flex 마이그레이션과 무관한 기존 코드 인 걸로 보입니다. 머지 과정에서 실수로 빠진 거라면 복구 부탁드립니다.

[KYBee]

말씀 주신 부분 확인했습니다. 해당 justify="stretch"는 현재 프로젝트에서 사용하는 Flex 컴포넌트가 지원하는 유효한 CSS 값입니다.

Flex 컨테이너에서는 stretch와 기본값인 normal이 모두 시작점 정렬로 동작해 렌더링 결과는 같지만, 이번 마이그레이션 범위와 직접 관련 없는 변경이므로 기존 선언을 유지하는 것이 맞다고 판단했습니다. justify="stretch"는 복구하겠습니다.

[G-hoon]

이거 안쓰면, 그냥 인터페이스 수정하고, props 에 빼주시겠어요?

[KYBee]

맞습니다. 현재 UserCard에서 사용하지 않는 값인데 _period로 남겨 두었습니다. UserCardProps와 호출부, 테스트에서 period 전달을 제거하겠습니다.

[G-hoon]

이 내용은 props와 무관하게 aria-label="default user profile"을 항상 렌더링해서,

아래에 있는,
expect(screen.getByLabelText('default user profile')).toBeInTheDocument();
에서 실제 UserIcon 의 접근성을 검증하지 못하고 있습니다

실제 코드에서 aria-label 값을 넘겨주도록 수정하시거나,
<UserIcon aria-label="default user profile" className={styles.userIcon} />

이 mock 을 패스 스루 해주시면 어떨까요?
UserIcon: (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,

[KYBee]

맞습니다. mock이 aria-label을 직접 만들어 실제 컴포넌트의 접근성 계약을 검증하지 못하고 있었습니다. fallback UserIcon에 aria-label을 명시하고, mock은 전달받은 props를 그대로 적용하도록 수정하겠습니다.

[KYBee]

@G-hoon 님

피드백 반영 했습니다~

[G-hoon]

수고하셨습니다 !