Skip to content

Commit

Permalink
feat: 2차 스프린트 디자인 시스템 수정 (#83)
Browse files Browse the repository at this point in the history
* design: Title Component width 100%로 수정

* design: TopNav width 100%로 수정

* fix: index.tsx export 수정

* chore: v0.1.2 배포

* design: input 좌우 1rem 추가

* feat: MainLayout 추가

* chore: v0.1.3 배포

* feat: TopNav none 타입 추가

* chore: storybook-addon-react-router-v6 dev dependency 추가

* fix: ExpenseItem button props 넣을 수 있도록 수정

* design: button cursor pointer 전역설정

* refactor: BottomSheet component 구조 수정

* chore: v0.1.4 배포

* refactor: tab components 합성방식으로 변경

* feat: Flex component backgroundColor 받을 수 있도록 변경

* fix: 주석이 xml 내부에서 적용안되던 오류 해결

* chore: v0.1.5 배포

* refactor: flex background prop 로직 처리 방법 변경

* feat: MainLayout backgroundColor prop 추가

* fix: flex backgroundColor defaultValue 제거

* chore: v0.1.6 배포

* fix: MainLayout margin padding으로 변경

* fix: Switch 및 TopNav 내부 로직 변경

* test: Switch storybook 수정

* fix: TopNav navigate currentPath를 이용하도록 수정

* feat: v0.1.18 배포

* fix: TopNav navigate 변경

* design: tab item과 panel 사이에 gap 넣을 수 있도록 설정 및 flex container 사용

* refactor: in out type uppercase로 수정

* design: in out item font size 변경 및 텍스트 바꿔서 작성한 내용 수정

* test: InOutItem storybook 수정

* chore: v0.1.20 배포

* design: hasDragableItem 비활성화 시 마진 수정

* fix: props 네이밍 스토리북에 반영

* fix: navigate 뒤로가기 3번 발생하는 이슈 해결

* chore: v0.1.22 배포

* fix: Switch 내부의 불필요한 로직 제거

* chore: v0.1.23 배포

* fix: navigate path 로직 변경

* fix: 새로고침 됐을 때 해당 location 페이지를 유지하도록 수정

* style: children이 없는 태그 스스로 닫도록 수정

* style: todo 주석 제거

* chore: v0.1.25 배포

* design: fixedButton position 변경

* chore: v0.1.26 배포

* fix: 라우팅 변경 이동 오류 해결

* chore: v0.1.27 배포

* chore: v0.1.28 배포

* fix: location set 로직을 home 모드에서만 작동하도록 변경

* chore: v0.1.29 배포

* fix: TopNav navigation 로직 외부에서 넣도록 변경

* chore: v0.1.30 배포

* fix: index.ts 경로 문제로 제거

* chore: v0.1.13 배포

* chore: v0.1.32 배포

* fix: Fixed Button 하단 고정되도록 변경

* chore: v0.1.33 배포

* v0.1.35 배포

* fix: 가격과 원을 붙여서 표기

* fix: TopNav가 children이 없어도 작동하도록 변경

* fix: children이 필수가 아니도록 변경

* remove: 사용하지 않는 NavSwitch 제거

* chore: 파이프라인 테스트를 위한 push

* chore: 파이프라인 테스트를 위한 push

* remove: merge를 위한 /sever dir 삭제

* style: lint 적용

---------

Co-authored-by: 이태훈 <[email protected]>
Co-authored-by: pakxe <[email protected]>
  • Loading branch information
3 people authored Jul 29, 2024
1 parent 4d8697a commit ee1030c
Show file tree
Hide file tree
Showing 122 changed files with 439 additions and 4,057 deletions.
561 changes: 49 additions & 512 deletions HDesign/package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion HDesign/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "haengdong-design",
"version": "0.1.3",
"version": "0.1.35",
"description": "",
"main": "./dist/index.js",
"module": "./dist/index.js",
Expand Down Expand Up @@ -49,6 +49,7 @@
"globals": "^15.8.0",
"prettier": "3.3.2",
"storybook": "^8.2.2",
"storybook-addon-react-router-v6": "^2.0.15",
"ts-loader": "^9.5.1",
"tsc-alias": "^1.8.10",
"typescript": "^5.5.3",
Expand Down
2 changes: 1 addition & 1 deletion HDesign/src/components/BillItem/BillItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const BillItem: React.FC<BillItemProps> = ({
{name}
</Text>
<Text css={textStyle(theme)} size="body">
{price.toLocaleString('ko-kr')}
{price.toLocaleString('ko-kr')}
</Text>
</Flex>
</DragHandleItem>
Expand Down
20 changes: 9 additions & 11 deletions HDesign/src/components/BottomSheet/BottomSheet.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,15 @@ const meta = {
// layout: 'centered',
},
argTypes: {
fixedButtonVariants: {
fixedButtonProps: {
description: '',
control: {type: 'select'},
options: ['', 'primary', 'secondary', 'tertiary'],
},
fixedButtonText: {
description: '',
control: {type: 'text'},
control: {type: 'object'},
},
},
args: {
fixedButtonVariants: 'primary',
fixedButtonText: '하단 고정 버튼이에요',
fixedButtonProps: {
variants: 'primary',
},
},
} satisfies Meta<typeof BottomSheet>;

Expand All @@ -36,8 +32,10 @@ type Story = StoryObj<typeof meta>;

export const Playground: Story = {
args: {
fixedButtonVariants: 'primary',
fixedButtonText: '하단 고정 버튼이에요',
fixedButtonProps: {
variants: 'primary',
children: '하단 고정 버튼',
},
},
render: ({...args}) => {
const [isOpened, setIsOpened] = useState(false);
Expand Down
2 changes: 1 addition & 1 deletion HDesign/src/components/BottomSheet/BottomSheet.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const dimmedLayerStyle = (theme: Theme) =>

export const bottomSheetContainerStyle = (theme: Theme) =>
css({
position: 'absolute',
position: 'fixed',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
Expand Down
10 changes: 4 additions & 6 deletions HDesign/src/components/BottomSheet/BottomSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@
import {createPortal} from 'react-dom';

import {BottomSheetProps} from '@components/BottomSheet/BottomSheet.type';
import {useBottomSheet} from '@components/BottomSheet/useBottomSheet';
import FixedButton from '@components/FixedButton/FixedButton';

import {useTheme} from '@theme/HDesignProvider';

import {useBottomSheet} from './useBottomSheet';
import {bottomSheetContainerStyle, dimmedLayerStyle, indicatorStyle} from './BottomSheet.style';

const BottomSheet: React.FC<BottomSheetProps> = ({
fixedButtonVariants = 'primary',
isOpened = false,
children,
fixedButtonText,
fixedButtonProps,
...props
}: BottomSheetProps) => {
const {theme} = useTheme();
const {opened, handleClose} = useBottomSheet({isOpened, ...props});

// TODO: (@todari) : children 길이 길 때 overflow button에 안가리는 영역 처리
return createPortal(
<>
{opened && (
Expand All @@ -27,9 +27,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
<div css={bottomSheetContainerStyle(theme)}>
<div css={indicatorStyle(theme)} />
{children}
{(fixedButtonVariants || fixedButtonText) && (
<FixedButton variants={fixedButtonVariants} children={fixedButtonText} />
)}
{fixedButtonProps && <FixedButton {...fixedButtonProps} />}
</div>
</>
)}
Expand Down
5 changes: 3 additions & 2 deletions HDesign/src/components/BottomSheet/BottomSheet.type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {ButtonVariants} from '@components/Button/Button.type';

import {Theme} from '@theme/theme.type';

import {FixedButtonProps} from '../FixedButton/FixedButton.type';

export interface BottomSheetStyleProps {
theme?: Theme;
}
Expand All @@ -12,8 +14,7 @@ export interface BottomSheetCustomProps {
isOpened?: boolean;
onChangeOpen?: () => void;
onChangeClose?: () => void;
fixedButtonVariants?: ButtonVariants;
fixedButtonText?: string;
fixedButtonProps?: FixedButtonProps;
}

export type BottomSheetOptionProps = BottomSheetStyleProps & BottomSheetCustomProps;
Expand Down
23 changes: 18 additions & 5 deletions HDesign/src/components/BottomSheet/useBottomSheet.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,36 @@
import {useEffect, useState} from 'react';
import {useCallback, useEffect, useState} from 'react';

interface UseBottomSheetProps {
isOpened: boolean;
onChangeClose?: () => void;
onChangeOpen?: () => void;
}

export const useBottomSheet = ({isOpened, onChangeClose}: UseBottomSheetProps) => {
const [opened, setOpened] = useState(isOpened);
export const useBottomSheet = ({isOpened, onChangeClose, onChangeOpen}: UseBottomSheetProps) => {
const [opened, setOpened] = useState(false);

useEffect(() => {
setOpened(isOpened);
if (!isOpened) {
handleClose();
} else {
handleOpen();
}
}, [isOpened]);

const handleClose = () => {
const handleClose = useCallback(() => {
setOpened(false);
if (onChangeClose) {
onChangeClose();
}
};
}, []);

const handleOpen = useCallback(() => {
setOpened(true);
if (onChangeOpen) {
onChangeOpen();
}
}, []);

useEffect(() => {
document.body.style.overflow = 'hidden';
Expand Down
12 changes: 9 additions & 3 deletions HDesign/src/components/ExpenseList/ExpenseList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,34 @@

import Text from '@components/Text/Text';


import {Arrow} from '@assets/index';

import {useTheme} from '@theme/HDesignProvider';

import {useTheme} from '@theme/HDesignProvider';

import {ExpenseItemProps, ExpenseListProps} from './ExpenseList.type';
import {expenseItemStyle, expenseListStyle, expenseItemLeftStyle, TextStyle} from './ExpenseList.style';

// TODO: (@soha) 따로 파일 분리할까 고민중.. 여기서만 사용할 것 같긴 한데.. 흠
function ExpenseItem({name, price}: ExpenseItemProps) {
function ExpenseItem({name, price, ...buttonProps}: ExpenseItemProps) {
const {theme} = useTheme();
return (
<button css={expenseItemStyle}>
<button css={expenseItemStyle} {...buttonProps}>
<Text size="bodyBold" css={TextStyle(theme)}>
{name}
</Text>
<div css={expenseItemLeftStyle}>
<Text css={TextStyle(theme)}>{price.toLocaleString('ko-kr')} </Text>
<Text css={TextStyle(theme)}>{price.toLocaleString('ko-kr')}</Text>
<Arrow />
</div>
</button>
);
}
}

function ExpenseList({expenseList = []}: ExpenseListProps) {
function ExpenseList({expenseList = []}: ExpenseListProps) {
const {theme} = useTheme();
return (
Expand All @@ -35,5 +40,6 @@ function ExpenseList({expenseList = []}: ExpenseListProps) {
</div>
);
}
}

export default ExpenseList;
4 changes: 3 additions & 1 deletion HDesign/src/components/ExpenseList/ExpenseList.type.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
export interface ExpenseItemProps {
export interface ExpenseItemCustomProps {
name: string;
price: number;
}

export type ExpenseItemProps = React.ComponentProps<'button'> & ExpenseItemCustomProps;

export type ExpenseListProps = {
expenseList: ExpenseItemProps[];
};
5 changes: 3 additions & 2 deletions HDesign/src/components/FixedButton/FixedButton.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import {Theme} from '@theme/theme.type';
export const fixedButtonContainerStyle = (theme: Theme) =>
css({
display: 'flex',
position: 'absolute',

position: 'fixed',
maxWidth: '768px',
inset: 'auto 0 0',
margin: '0 auto',
backgroundColor: theme.colors.white,
boxSizing: 'border-box',
});
Expand Down
45 changes: 45 additions & 0 deletions HDesign/src/components/Flex/Flex.style.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import {css} from '@emotion/react';

import {changeCamelCaseToKebabCase} from '@/utils/ return str.replace(/([a-z])([A-Z])/changeCamelCaseToKebabCase';

import {FlexDirectionStrictType, FlexProps} from './Flex.type';

export const flexStyle = ({
justifyContent = 'flexStart',
alignItems = 'stretch',
flexDirection = 'row',
gap = '0',
padding = '0',
paddingInline = '0',
margin = '0',
width = 'auto',
height = 'auto',
backgroundColor,
theme,
...rest
}: FlexProps) =>
css({
display: 'flex',
justifyContent: changeCamelCaseToKebabCase(justifyContent),
alignItems: changeCamelCaseToKebabCase(alignItems),
// TODO: (@weadie) as를 사용하지 않으면 방법이 없음. css의 flexDirection속성은 string을 받지 않고 명확한 속성명(ex row-reverse)를 받고 싶어함. 다만 as를 사용해도 된다고 생각한 근거는 케밥함수가 FlexDirectionType에 명시된 모든 타입을 정확하게 변환하며, 받는 문자열이 FlexDirectionType에 제한되기 때문.
flexDirection: changeCamelCaseToKebabCase(flexDirection) as FlexDirectionStrictType,
gap,
padding,
paddingInline,
margin,
width,
height,
...rest,

backgroundColor: (() => {
switch (backgroundColor) {
case 'white':
return theme?.colors.white;
case 'gray':
return theme?.colors.grayContainer;
default:
return 'none';
}
})(),
});
35 changes: 5 additions & 30 deletions HDesign/src/components/Flex/Flex.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,15 @@
import {css} from '@emotion/react';

import {StrictPropsWithChildren} from '@/types/strictPropsWithChildren';
import {changeCamelCaseToKebabCase} from '@/utils/ return str.replace(/([a-z])([A-Z])/changeCamelCaseToKebabCase';
import {useTheme} from '@/theme/HDesignProvider';

import {FlexDirectionStrictType, FlexProps} from './Flex.type';

const flexStyle = ({
justifyContent = 'flexStart',
alignItems = 'stretch',
flexDirection = 'row',
gap = '0',
padding = '0',
paddingInline = '0',
margin = '0',
width = 'auto',
height = 'auto',
...rest
}: FlexProps) =>
css({
display: 'flex',
justifyContent: changeCamelCaseToKebabCase(justifyContent),
alignItems: changeCamelCaseToKebabCase(alignItems),
// TODO: (@weadie) as를 사용하지 않으면 방법이 없음. css의 flexDirection속성은 string을 받지 않고 명확한 속성명(ex row-reverse)를 받고 싶어함. 다만 as를 사용해도 된다고 생각한 근거는 케밥함수가 FlexDirectionType에 명시된 모든 타입을 정확하게 변환하며, 받는 문자열이 FlexDirectionType에 제한되기 때문.
flexDirection: changeCamelCaseToKebabCase(flexDirection) as FlexDirectionStrictType,
gap,
padding,
paddingInline,
margin,
width,
height,
...rest,
});
import {FlexProps} from './Flex.type';
import {flexStyle} from './Flex.style';

// TODO: (@weadie) 지정된 프롭 말고 다른 프롭도 가져올 수 있게 하자.
function Flex({children, ...props}: StrictPropsWithChildren<FlexProps>) {
return <div css={flexStyle(props)}>{children}</div>;
const {theme} = useTheme();
return <div css={flexStyle({theme, ...props})}>{children}</div>;
}

export default Flex;
9 changes: 5 additions & 4 deletions HDesign/src/components/Flex/Flex.type.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import {Theme} from '@/theme/theme.type';

export type FlexDirectionType = 'row' | 'column' | 'rowReverse' | 'columnReverse';
export type FlexDirectionStrictType = 'row' | 'column' | 'row-reverse' | 'column-reverse';
export type FlexBackgroundColor = 'gray' | 'white';

export interface FlexProps {
justifyContent?: 'flexStart' | 'center' | 'flexEnd' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
Expand All @@ -11,8 +14,6 @@ export interface FlexProps {
margin?: string;
width?: string;
height?: string;
}

export interface ExtendedFlexProps extends FlexProps {
[key: string]: string | undefined;
backgroundColor?: FlexBackgroundColor;
theme?: Theme;
}
4 changes: 2 additions & 2 deletions HDesign/src/components/InOutItem/InOutItem.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ const meta = {
},
inOutType: {
description: '',
control: {type: 'select', options: ['in', 'out']},
control: {type: 'select', options: ['IN', 'OUT']},
},
},
args: {
names: ['감자', '토다리'],
inOutType: 'out',
inOutType: 'OUT',
},
} satisfies Meta<typeof InOutItem>;

Expand Down
4 changes: 3 additions & 1 deletion HDesign/src/components/InOutItem/InOutItem.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ export const prefixStyle = css({
gap: '0.25rem',
});

export const textStyle = (theme: Theme) =>
export const textStyle = (theme: Theme, hasDragHandle: boolean) =>
css({
paddingLeft: hasDragHandle ? '0' : '0.5rem',

color: theme.colors.black,
});
Loading

0 comments on commit ee1030c

Please sign in to comment.