Skip to content

fix: Stack 컴포넌트 props_to_style 형태로 변경 #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Obj277 merged 6 commits into from
Jul 1, 2025
Merged

fix: Stack 컴포넌트 props_to_style 형태로 변경 #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
acab833
feat: css제거하고 props_to_style 형태로 변경
Obj277 Jul 1, 2025
c08fcc3
fix: 필요없어진 파일 제거
Obj277 Jul 1, 2025
a2036c0
fix: tsbuildinfo 업데이트
Obj277 Jul 1, 2025
93a980d
fix: 필요없는 ./style.css export 경로 제거
Obj277 Jul 1, 2025
343917a
feat: build:clean | clean:dts 스크립트 추가
Obj277 Jul 1, 2025
510a44d
chore: changeset
Obj277 Jul 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/eleven-emus-occur.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@croquiscom/monolith': patch
---

Stack컴포넌트 css제거 및 props_to_style 형태로 변경
11 changes: 5 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,18 @@
"module": "dist/index.es.js",
"types": "dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.es.js",
"require": "./dist/index.cjs.js"
},
"./style.css": "./dist/monolith.css"
"types": "./dist/index.d.ts",
"import": "./dist/index.es.js",
"require": "./dist/index.cjs.js"
},
"files": [
"dist"
],
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"build:clean": "pnpm run build && pnpm run clean:dts",
"clean:dts": "find src -name '*.d.ts' -not -name 'vite-env.d.ts' -delete",
"build:docs": "typedoc",
"lint:prettier": "prettier . --write",
"lint": "eslint ./src --ext .ts,.tsx",
Expand Down
38 changes: 0 additions & 38 deletions src/components/stack/Stack.css
View file
Open in desktop

This file was deleted.

16 changes: 11 additions & 5 deletions src/components/stack/Stack.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe('Stack', () => {
<div>1번</div>
</Stack>,
);
expect(container.firstChild).toHaveClass('flex flex-column');
expect(container.firstChild).toHaveStyle({ display: 'flex', flexDirection: 'column' });
});

it('wrap prop이 정상적으로 적용됩니다', () => {
Expand All @@ -31,7 +31,7 @@ describe('Stack', () => {
<div>1번</div>
</Stack>,
);
expect(container.firstChild).toHaveClass('flex flex-wrap');
expect(container.firstChild).toHaveStyle({ display: 'flex', flexWrap: 'wrap' });
});

it('align prop이 정상적으로 적용됩니다', () => {
Expand All @@ -40,7 +40,7 @@ describe('Stack', () => {
<div>1번</div>
</Stack>,
);
expect(container.firstChild).toHaveClass('flex align-center');
expect(container.firstChild).toHaveStyle({ display: 'flex', alignItems: 'center' });
});

it('justify prop이 정상적으로 적용됩니다', () => {
Expand All @@ -49,7 +49,7 @@ describe('Stack', () => {
<div>1번</div>
</Stack>,
);
expect(container.firstChild).toHaveClass('flex justify-center');
expect(container.firstChild).toHaveStyle({ display: 'flex', justifyContent: 'center' });
});

it('gap prop이 정상적으로 적용됩니다', () => {
Expand Down Expand Up @@ -121,7 +121,13 @@ describe('Stack', () => {
<div>1번</div>
</Stack>,
);
expect(container.firstChild).toHaveClass('flex flex-column flex-nowrap align-center justify-center');
expect(container.firstChild).toHaveStyle({
display: 'flex',
flexDirection: 'column',
flexWrap: 'nowrap',
alignItems: 'center',
justifyContent: 'center',
});
expect(container.firstChild).toHaveStyle({
gap: '10px',
width: '100px',
Expand Down
18 changes: 9 additions & 9 deletions src/components/stack/Stack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { PropsWithChildren, CSSProperties, HTMLAttributes, forwardRef } from 'react';
import './Stack.css';
import { buildFlexClassNames } from './utils/buildFlexClassNames';

/** The props type of {@link Stack | 'Stack'}. */
export interface StackProps extends PropsWithChildren {
Expand Down Expand Up @@ -108,16 +106,17 @@ export const Stack = forwardRef<HTMLDivElement, StackProps & HTMLAttributes<HTML
pl,
pr,
pb,
style,
...props
},
ref,
) => {
const flex_classes = buildFlexClassNames({ direction, wrap, align, justify });
const combined_classes = [flex_classes, className]
.filter((cls) => cls && typeof cls === 'string' && cls.trim() !== '')
.join(' ');

const spacing_style: CSSProperties = {
const combined_style: CSSProperties = {
display: 'flex',
...(direction !== undefined && { flexDirection: direction }),
...(wrap !== undefined && { flexWrap: wrap }),
...(align !== undefined && { alignItems: align }),
...(justify !== undefined && { justifyContent: justify }),
...(gap !== undefined && { gap }),
...(width !== undefined && { width }),
...(height !== undefined && { height }),
Expand All @@ -131,10 +130,11 @@ export const Stack = forwardRef<HTMLDivElement, StackProps & HTMLAttributes<HTML
...(pl !== undefined && { paddingLeft: pl }),
...(pr !== undefined && { paddingRight: pr }),
...(pb !== undefined && { paddingBottom: pb }),
...style,
};

return (
<div ref={ref} className={combined_classes} style={spacing_style} {...props}>
<div ref={ref} className={className} style={combined_style} {...props}>
Copy link
Collaborator

@sunginHwang sunginHwang Jul 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 이슈원인 해결된거같아서 forwardRef 넣어두 될거같은데 검토한번만 부탁드려도될까요? 🙏

Copy link
Contributor Author

@Obj277 Obj277 Jul 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 그래서 forwardRef 다시 넣어뒀어요 🌝 @sunginHwang

{children}
</div>
);
Expand Down
33 changes: 0 additions & 33 deletions src/components/stack/utils/buildFlexClassNames.test.ts
View file
Open in desktop

This file was deleted.

38 changes: 0 additions & 38 deletions src/components/stack/utils/buildFlexClassNames.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion tsconfig.app.tsbuildinfo
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"root":["./src/index.ts","./src/vite-env.d.ts","./src/components/index.ts","./src/components/stack/stack.test.tsx","./src/components/stack/stack.tsx","./src/components/stack/utils/buildflexclassnames.test.ts","./src/components/stack/utils/buildflexclassnames.ts","./src/components/switch-case/switchcase.test.tsx","./src/components/switch-case/switchcase.tsx","./src/hooks/index.ts","./src/hooks/use-countdown-timer/usecountdowntimer.test.ts","./src/hooks/use-countdown-timer/usecountdowntimer.tsx","./src/hooks/use-debounce/usedebounce.test.ts","./src/hooks/use-debounce/usedebounce.ts","./src/hooks/use-delay-loading/usedelayloading.test.tsx","./src/hooks/use-delay-loading/usedelayloading.tsx","./src/hooks/use-is-mounted/useismounted.test.tsx","./src/hooks/use-is-mounted/useismounted.tsx","./src/hooks/use-isomorphic-layout-effect/useisomorphiclayouteffect.test.ts","./src/hooks/use-isomorphic-layout-effect/useisomorphiclayouteffect.ts","./src/hooks/use-mount/usemount.test.ts","./src/hooks/use-mount/usemount.ts","./src/hooks/use-preload-image/usepreloadimage.test.ts","./src/hooks/use-preload-image/usepreloadimage.ts","./src/hooks/use-throttle/usethrottle.test.ts","./src/hooks/use-throttle/usethrottle.ts","./src/utils/index.ts","./src/utils/compress-image/compressimage.test.ts","./src/utils/compress-image/compressimage.ts","./src/utils/create-array/createarray.test.ts","./src/utils/create-array/createarray.ts","./src/utils/debounce/debounce.test.ts","./src/utils/debounce/debounce.ts","./src/utils/delay/delay.test.ts","./src/utils/delay/delay.ts","./src/utils/is-android/isandroid.test.ts","./src/utils/is-android/isandroid.ts","./src/utils/is-equal/isequal.test.ts","./src/utils/is-equal/isequal.ts","./src/utils/is-ios/isios.test.ts","./src/utils/is-ios/isios.ts","./src/utils/throttle/throttle.test.ts","./src/utils/throttle/throttle.ts"],"version":"5.7.3"}
{"root":["./src/index.ts","./src/vite-env.d.ts","./src/components/index.ts","./src/components/stack/stack.test.tsx","./src/components/stack/stack.tsx","./src/components/switch-case/switchcase.test.tsx","./src/components/switch-case/switchcase.tsx","./src/hooks/index.ts","./src/hooks/use-countdown-timer/usecountdowntimer.test.ts","./src/hooks/use-countdown-timer/usecountdowntimer.tsx","./src/hooks/use-debounce/usedebounce.test.ts","./src/hooks/use-debounce/usedebounce.ts","./src/hooks/use-delay-loading/usedelayloading.test.tsx","./src/hooks/use-delay-loading/usedelayloading.tsx","./src/hooks/use-is-mounted/useismounted.test.tsx","./src/hooks/use-is-mounted/useismounted.tsx","./src/hooks/use-isomorphic-layout-effect/useisomorphiclayouteffect.test.ts","./src/hooks/use-isomorphic-layout-effect/useisomorphiclayouteffect.ts","./src/hooks/use-mount/usemount.test.ts","./src/hooks/use-mount/usemount.ts","./src/hooks/use-preload-image/usepreloadimage.test.ts","./src/hooks/use-preload-image/usepreloadimage.ts","./src/hooks/use-throttle/usethrottle.test.ts","./src/hooks/use-throttle/usethrottle.ts","./src/utils/index.ts","./src/utils/compress-image/compressimage.test.ts","./src/utils/compress-image/compressimage.ts","./src/utils/create-array/createarray.test.ts","./src/utils/create-array/createarray.ts","./src/utils/debounce/debounce.test.ts","./src/utils/debounce/debounce.ts","./src/utils/delay/delay.test.ts","./src/utils/delay/delay.ts","./src/utils/is-android/isandroid.test.ts","./src/utils/is-android/isandroid.ts","./src/utils/is-equal/isequal.test.ts","./src/utils/is-equal/isequal.ts","./src/utils/is-ios/isios.test.ts","./src/utils/is-ios/isios.ts","./src/utils/throttle/throttle.test.ts","./src/utils/throttle/throttle.ts"],"version":"5.7.3"}
1 change: 0 additions & 1 deletion tsconfig.tsbuildinfo
View file
Open in desktop

This file was deleted.