feat(flex): support responsive prop values by KYBee · Pull Request #284 · sipe-team/side

KYBee · 2026-06-30T06:27:52Z

Changes

Flex의 기존 단일 값 prop 계약을 유지하면서 { sm, md, lg } responsive 값을 추가로 받을 수 있도록 확장했습니다.
direction, align, justify, wrap, gap에서 단일 값과 breakpoint 객체 값을 모두 지원합니다.
responsive class와 media query는 현재 Flex 패키지 내부 계약으로 처리합니다.
추후 @sipe-team/tokens에 정식 breakpoint token이 정의되면, 외부 사용 방식은 유지하고 내부 구현만 token 기반으로 교체할 수 있습니다.
@sipe-team/flex minor / @sipe-team/side patch changeset을 추가했습니다.

Visuals

Storybook Flex/Responsive 예시를 추가했습니다.

Checklist

Have you written the functional specifications?
Have you written the test code?

Additional Discussion Points

기존 사용 방식은 계속 호환됩니다.
sipe.team 마이그레이션은 이 PR 배포 이후 별도 PR에서 진행할 수 있습니다.

Validation

mise exec -- pnpm --filter @sipe-team/flex test -- run src/Flex.test.tsx
mise exec -- pnpm --filter @sipe-team/flex typecheck
mise exec -- pnpm --filter @sipe-team/flex lint
mise exec -- pnpm --filter @sipe-team/flex build
mise exec -- pnpm --filter @sipe-team/side typecheck
mise exec -- pnpm --filter @sipe-team/side build
git diff --check origin/dev..HEAD

changeset-bot · 2026-06-30T06:28:00Z

🦋 Changeset detected

Latest commit: f4f7b57

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@sipe-team/flex	Minor
@sipe-team/side	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-06-30T06:28:02Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (2)

main
release/v1

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: dfa7f150-7a98-45e4-ad3a-f7aa9ddbc9ba

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/flex-responsive-contract-kybee-dev

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

codecov · 2026-06-30T06:29:05Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
packages/flex/src/Flex.css.ts	`100.00% <ø> (ø)`
packages/flex/src/Flex.test.tsx	`100.00% <100.00%> (ø)`
packages/flex/src/Flex.tsx	`100.00% <100.00%> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Yeom-JinHo · 2026-07-13T11:26:01Z

+type FlexBreakpoint = 'sm' | 'md' | 'lg';
+type ResponsiveValue<T> = T | Partial<Record<FlexBreakpoint, T>>;
+type ResponsiveStyleVariants<T extends string> = Record<FlexBreakpoint, Record<T, string>>;


export 하지 않으면 사용부에서 한번 더 정의해야해서 export를 해야할꺼 같습니다~

오 감사합니다. 반영하겠습니다!

Yeom-JinHo · 2026-07-13T11:26:51Z

+  md: 'screen and (min-width: 780px)',
+  lg: 'screen and (min-width: 1060px)',


780, 1060으로 잡은 이유는 몬가요?

780/1060은 기존 @sipe-team/tokens layout breakpoint(md/lg) 값과 맞춘 값입니다. 해당 token export가 deprecated 상태라 Flex 내부에 로컬 상수로 두고, 그 맥락을 코드 주석에 추가했습니다.

osohyun0224

고생많으셨습니다 bb

G-hoon · 2026-07-18T09:23:04Z

+    getResponsiveClassNames(direction, 'row', styles.direction),
+    getResponsiveClassNames(align, 'normal', styles.align),
+    getResponsiveClassNames(justify, 'normal', styles.justify),
+    getResponsiveClassNames(wrap, 'nowrap', styles.wrap),


이거 gap 은 없는데 혹시 의도하신 걸까요...?

gap={{ md: '16px', lg: '24px' }}처럼 sm을 생략하면
780px 미만 화면에서 --side-flex-gap-sm이 설정 안 되서
폴백 없이 무효화되고 gap이 0이 되는 것 같은데.

이게 다른 prop들과 동작이 다른데, 의도하신 걸까요?

G-hoon · 2026-07-18T09:27:43Z

+      [mediaQuery.lg]: style,
+    },
+  })),
+});


responsiveGap 처럼 하나의 style() 호출 안에서
@media 우선순위를 명시하는 방식으로 바꾸는 게 더 안전할 것 같습니다.

나중에 이 함수 근처에 다른 mediaQuery.lg 참조가 먼저 추가되거나
객체 프로퍼티 순서가 바뀌면,
lg 값이 적용돼야 할 1060px 이상 화면에서 md 값이 대신 적용되는 일이 생길 수도 있을 것 같습니다.

G-hoon · 2026-07-18T09:33:23Z

@KYBee 질문이 있습니다.

<Flex gap={{ sm: '8px' }}>
  <div>부모 아이템 1</div>
  <div>부모 아이템 2</div>

  <Flex gap={{ lg: '2px' }}>   {/* sm 생략 */}
    <div>자식 아이템 1</div>
    <div>자식 아이템 2</div>
  </Flex>
</Flex>

의 케이스에 대해서,
자식 엘리먼트에 sm 이 없을 경우 부모로 올라가서, sm 값을 찾아서 사용하는데.
이 경우엔 자식 요소가 sm: 8px 을 상속받아서 사용하는데 의도된 동작이 맞을까요?

코드를 작성하는 입장에서는, 자식 요소의 Flex gap 속성 값이
sm: 0px 로 생각하고 이렇게 작성할 수도 있을 것 같은데.
의도치 않게 부모에 있는 Flex의 요소를 상속 받아서 쓰게 되지 않나 생각이 들어서요.

나중에 Flex 를 매우 복잡하게 사용해야 할 때는, 의도치 못한 이슈가 발생할 수도 있을 것 같은데.
다른 디자인 컴포넌트나 라이브러리 참고한 게 있으면 같이 공유해주시면 좋을 것 같습니다.

KYBee marked this pull request as ready for review June 30, 2026 06:30

KYBee requested review from 3o14, G-hoon, Yeom-JinHo, froggy1014, haedawn, minjeeki, minji0214 and osohyun0224 as code owners June 30, 2026 06:30

KYBee marked this pull request as draft June 30, 2026 06:31

KYBee added 3 commits June 30, 2026 15:41

feat(flex): support responsive prop values

6c6daa6

test(flex): cover responsive prop contract

3730979

docs(flex): add responsive story

594a33d

KYBee force-pushed the feature/flex-responsive-contract-kybee-dev branch from fa78aeb to 594a33d Compare June 30, 2026 06:44

KYBee marked this pull request as ready for review June 30, 2026 07:00

Yeom-JinHo reviewed Jul 13, 2026

View reviewed changes

fix(flex): export responsive helper types

f4f7b57

Yeom-JinHo approved these changes Jul 17, 2026

View reviewed changes

osohyun0224 approved these changes Jul 18, 2026

View reviewed changes

G-hoon reviewed Jul 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(flex): support responsive prop values#284

feat(flex): support responsive prop values#284
KYBee wants to merge 4 commits into
devfrom
feature/flex-responsive-contract-kybee-dev

KYBee commented Jun 30, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 30, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 30, 2026 •

edited

Loading

Review skipped

Uh oh!

codecov Bot commented Jun 30, 2026 •

edited

Loading

Uh oh!

Yeom-JinHo Jul 13, 2026

Uh oh!

KYBee Jul 14, 2026

Uh oh!

Yeom-JinHo Jul 13, 2026

Uh oh!

KYBee Jul 14, 2026

Uh oh!

osohyun0224 left a comment

Uh oh!

G-hoon Jul 18, 2026

Uh oh!

G-hoon Jul 18, 2026

Uh oh!

G-hoon commented Jul 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		md: 'screen and (min-width: 780px)',
		lg: 'screen and (min-width: 1060px)',

Uh oh!

Conversation

KYBee commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Visuals

Checklist

Additional Discussion Points

Validation

Uh oh!

changeset-bot Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

codecov Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Yeom-JinHo Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

KYBee Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Yeom-JinHo Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

KYBee Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

osohyun0224 left a comment

Choose a reason for hiding this comment

Uh oh!

G-hoon Jul 18, 2026

Choose a reason for hiding this comment

Uh oh!

G-hoon Jul 18, 2026

Choose a reason for hiding this comment

Uh oh!

G-hoon commented Jul 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

KYBee commented Jun 30, 2026 •

edited

Loading

changeset-bot Bot commented Jun 30, 2026 •

edited

Loading

coderabbitai Bot commented Jun 30, 2026 •

edited

Loading

codecov Bot commented Jun 30, 2026 •

edited

Loading