refactor: side Flex 마이그레이션을 위한 테스트 추가 및 1유형 wrapper 전환

[KYBee]

Refactor: side Flex 마이그레이션을 위한 테스트 추가 및 1유형 wrapper 전환

작업 내용

• sipe.team에 Vitest 기반 컴포넌트 테스트 환경을 추가했습니다.
• Flex 마이그레이션 대상 컴포넌트의 현재 렌더링 계약을 테스트로 고정했습니다.
• 단순 flex wrapper를 @sipe-team/side의 Flex로 전환하는 1유형 마이그레이션을 적용했습니다.

---

변경 사항

• 테스트 인프라 추가
  • Vitest, Testing Library 설정 추가
  • 마이그레이션 대상 컴포넌트 테스트 작성
• 1유형 마이그레이션 적용
  • RecruitmentSummarySkeleton
  • People
  • Activity
  • ActivitiesSection
  • Card
  • RecruitBarChart
• 기존 SCSS에서 중복된 flex wrapper 선언 정리

---

확인 사항

• corepack yarn test 기준 테스트 통과
• 기존 sipe.team 내 @sipe-team/side Flex 사용 방식과 동일한 방향으로 적용
• 다른 유형들은 기존 SCSS 유지

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
sipe-team	Ready	Preview, Comment	Apr 27, 2026 3:26pm

[G-hoon]

vercel 에서 확인해보니 빌드 실패인 것 같은데.
코드를 보니 외부에서 이미 currentTab === 'post' ? ... : ...로 분기하셨는데,

에서 다시 currentTab === 'post' ? styles.cards : styles.videoCards 를 비교하고 계세요. TypeScript가 외부 분기로 currentTab을 'post' 아닌 값으로 좁혀놨기 때문에 안쪽 비교가 항상 false라서 에러가 납니다.

20:04:32.565 Running build in Washington, D.C., USA (East) – iad1
20:04:32.565 Build machine configuration: 2 cores, 8 GB
20:04:32.685 Cloning github.com/sipe-team/sipe.team (Branch: refact/replace-scss-flex-to-side-flex, Commit: 2cf7c19)
20:04:32.686 Previous build caches not available.
20:04:38.276 Cloning completed: 5.590s
20:04:38.850 Running "vercel build"
20:04:39.849 Vercel CLI 51.6.1
20:04:40.833 ➤ YN0000: Successfully set enableGlobalCache to false
20:04:40.851 Installing dependencies...
20:04:41.356 ➤ YN0000: · Yarn 4.5.0
20:04:41.386 ➤ YN0000: ┌ Resolution step
20:04:41.667 ➤ YN0077: │ @next/swc-linux-x64-gnu@npm:14.2.11: Your current architecture (linux-x64) is supported by this package, but is missing from the supportedArchitectures setting
20:04:41.668 ➤ YN0077: │ @esbuild/linux-x64@npm:0.27.7: Your current architecture (linux-x64) is supported by this package, but is missing from the supportedArchitectures setting
20:04:41.669 ➤ YN0077: │ @rollup/rollup-linux-x64-gnu@npm:4.60.2: Your current architecture (linux-x64) is supported by this package, but is missing from the supportedArchitectures setting
20:04:41.670 ➤ YN0000: └ Completed in 0s 283ms
20:04:41.671 ➤ YN0000: ┌ Post-resolution validation
20:04:41.671 ➤ YN0060: │ @types/node is listed by your project with version 20.16.1 (pfceb8), which doesn't satisfy what vite (via vitest) and other dependencies request (^20.19.0 || >=22.12.0).
20:04:41.671 ➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
20:04:41.671 ➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
20:04:41.723 ➤ YN0000: └ Completed
20:04:41.724 ➤ YN0000: ┌ Fetch step
20:04:45.868 ➤ YN0013: │ 104 packages were added to the project (+ 16.5 MiB).
20:04:45.869 ➤ YN0000: └ Completed in 4s 144ms
20:04:45.913 ➤ YN0000: ┌ Link step
20:04:57.361 ➤ YN0007: │ @vercel/speed-insights@npm:1.0.12 [5f85d] must be built because it never has been before or the last one failed
20:04:57.363 ➤ YN0007: │ esbuild@npm:0.27.7 must be built because it never has been before or the last one failed
20:04:57.651 ➤ YN0000: │ esbuild@npm:0.27.7 STDERR [esbuild] Failed to find package "@esbuild/linux-x64" on the file system
20:04:57.651 ➤ YN0000: │ esbuild@npm:0.27.7 STDERR 
20:04:57.651 ➤ YN0000: │ esbuild@npm:0.27.7 STDERR This can happen if you use the "--no-optional" flag. The "optionalDependencies"
20:04:57.651 ➤ YN0000: │ esbuild@npm:0.27.7 STDERR package.json feature is used by esbuild to install the correct binary executable
20:04:57.652 ➤ YN0000: │ esbuild@npm:0.27.7 STDERR for your current platform. This install script will now attempt to work around
20:04:57.652 ➤ YN0000: │ esbuild@npm:0.27.7 STDERR this. If that fails, you need to remove the "--no-optional" flag to use esbuild.
20:04:57.652 ➤ YN0000: │ esbuild@npm:0.27.7 STDERR 
20:04:57.653 ➤ YN0000: │ esbuild@npm:0.27.7 STDERR [esbuild] Trying to install package "@esbuild/linux-x64" using npm
20:04:59.051 ➤ YN0000: └ Completed in 13s 138ms
20:04:59.117 ➤ YN0000: · Done with warnings in 17s 762ms
20:04:59.194 Detected Next.js version: 14.2.11
20:04:59.195 Running "yarn run build"
20:05:02.540 Attention: Next.js now collects completely anonymous telemetry regarding usage.
20:05:02.541 This information is used to shape Next.js' roadmap and prioritize features.
20:05:02.541 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
20:05:02.541 https://nextjs.org/telemetry
20:05:02.542 
20:05:02.599   ▲ Next.js 14.2.11
20:05:02.600   - Experiments (use with caution):
20:05:02.600     · typedRoutes
20:05:02.600 
20:05:02.678    Creating an optimized production build ...
20:05:02.688    Downloading swc package @next/swc-linux-x64-gnu...
20:05:04.318    Downloading swc package @next/swc-linux-x64-musl...
20:05:08.317 Browserslist: caniuse-lite is outdated. Please run:
20:05:08.317   npx update-browserslist-db@latest
20:05:08.317   Why you should do it regularly: https://github.com/browserslist/update-db#readme
20:05:26.368  ✓ Compiled successfully
20:05:26.371    Skipping linting
20:05:26.371    Checking validity of types ...
20:05:32.706 Failed to compile.
20:05:32.706 
20:05:32.707 ./src/components/pages/Activity/index.tsx:62:17
20:05:32.707 Type error: This comparison appears to be unintentional because the types '"video" | undefined' and '"post"' have no overlap.
20:05:32.707 
20:05:32.707 �[0m �[90m 60 |�[39m             �[33m<�[39m�[33mdiv�[39m�[0m
20:05:32.708 �[0m �[90m 61 |�[39m               className�[33m=�[39m{�[0m
20:05:32.708 �[0m�[31m�[1m>�[22m�[39m�[90m 62 |�[39m                 currentTab �[33m===�[39m �[32m'post'�[39m �[33m?�[39m styles�[33m.�[39mcards �[33m:�[39m styles�[33m.�[39mvideoCards�[0m
20:05:32.709 �[0m �[90m    |�[39m                 �[31m�[1m^�[22m�[39m�[0m
20:05:32.709 �[0m �[90m 63 |�[39m               }�[0m
20:05:32.711 �[0m �[90m 64 |�[39m             �[33m>�[39m�[0m
20:05:32.712 �[0m �[90m 65 |�[39m               {activityData�[33m.�[39mmap((activity) �[33m=>�[39m (�[0m
20:05:32.841 Error: Command "yarn run build" exited with 1

[G-hoon]

내부 삼항 연산자를 지우고 그냥 className={styles.videoCards} 로 두면 해결됩니다.
그리고 가능하면 video 쪽도 일관성 있게 로 통일하는 게 PR 의도에도 맞아 보이는 것 같아요! (videoCards의 SCSS가 flex가 맞는지만 확인 부탁드립니다)

[G-hoon]

넵 고생하셨습니다

[KYBee]

@G-hoon 님 리뷰 감사합니다~ 코멘트를 제가 안 남겼었군요