-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(ui): confirm 컴포넌트 개발 * feat(ui): confirm storybook 작성 * refactor(ui): 코드 간소화
- Loading branch information
1 parent
1f132fb
commit 8b1d4f7
Showing
7 changed files
with
164 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { useState } from 'react'; | ||
| import { Confirm as ConfirmComponent } from '.'; | ||
|
|
||
| type Confirm = typeof ConfirmComponent; | ||
|
|
||
| const meta: Meta<Confirm> = { | ||
| component: ConfirmComponent, | ||
| title: 'Components/Confirm', | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| export const Default: StoryObj<Confirm> = { | ||
| args: { | ||
| title: '제목입니다.', | ||
| description: '설명입니다.', | ||
| isOpen: false, | ||
| }, | ||
| render: (args) => { | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const [isOpen, setIsOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <ConfirmComponent | ||
| {...args} | ||
| isOpen={isOpen} | ||
| onClose={() => { | ||
| setIsOpen(false); | ||
| }} | ||
| onConfirm={() => { | ||
| setIsOpen(false); | ||
| }} | ||
| > | ||
| <button | ||
| type="button" | ||
| onClick={() => { | ||
| setIsOpen(false); | ||
| }} | ||
| > | ||
| Close! | ||
| </button> | ||
| </ConfirmComponent> | ||
| <button | ||
| type="button" | ||
| onClick={() => { | ||
| setIsOpen(true); | ||
| }} | ||
| > | ||
| Open! | ||
| </button> | ||
| </> | ||
| ); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { css } from '@emotion/react'; | ||
| import styled from '@emotion/styled'; | ||
| import type { ForwardedRef, ReactNode } from 'react'; | ||
| import { forwardRef } from 'react'; | ||
| import { Button } from '../Button'; | ||
| import { Modal } from '../Modal'; | ||
| import { Stack } from '../Stack'; | ||
| import { Text } from '../Text'; | ||
|
|
||
| type ConfirmProps = { | ||
| isOpen: boolean; | ||
| onClose: VoidFunction; | ||
| onConfirm: VoidFunction; | ||
| closeButtonText?: string; | ||
| confirmButtonText?: string; | ||
| title: string; | ||
| description?: string; | ||
| width?: string; | ||
| height?: string; | ||
| children: ReactNode; | ||
| }; | ||
|
|
||
| export const Confirm = forwardRef(function Confirm( | ||
| { | ||
| isOpen, | ||
| onClose, | ||
| onConfirm, | ||
| closeButtonText = '취소', | ||
| confirmButtonText = '확인', | ||
| title, | ||
| description, | ||
| width = '600px', | ||
| height = 'auto', | ||
| children, | ||
| ...props | ||
| }: ConfirmProps, | ||
| ref: ForwardedRef<HTMLDivElement> | ||
| ) { | ||
| return ( | ||
| <StyledConfirm ref={ref} isOpen={isOpen} width={width} height={height} {...props}> | ||
| <StyledConfirmHeader spacing={8} hasContent={Boolean(children)}> | ||
| <Text styleType="h2">{title}</Text> | ||
| {description && ( | ||
| <Text styleType="p3" color="gray600"> | ||
| {description} | ||
| </Text> | ||
| )} | ||
| </StyledConfirmHeader> | ||
| {children && <StyledConfirmContent>{children}</StyledConfirmContent>} | ||
| <StyledConfirmFooter> | ||
| <Stack direction="horizontal" spacing={16}> | ||
| <Button onClick={onClose} styleType="ghost" size="small"> | ||
| {closeButtonText} | ||
| </Button> | ||
| <Button onClick={onConfirm} styleType="primary" size="small"> | ||
| {confirmButtonText} | ||
| </Button> | ||
| </Stack> | ||
| </StyledConfirmFooter> | ||
| </StyledConfirm> | ||
| ); | ||
| }); | ||
|
|
||
| const StyledConfirm = styled(Modal)` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| `; | ||
|
|
||
| const StyledConfirmHeader = styled(Stack)<{ hasContent: boolean }>` | ||
| align-items: flex-start; | ||
| padding-bottom: 20px; | ||
| ${({ theme, hasContent }) => css` | ||
| border-bottom: 1px solid ${hasContent && theme.colors.gray200}; | ||
| `} | ||
| `; | ||
|
|
||
| const StyledConfirmContent = styled.div` | ||
| padding: 20px 0; | ||
| `; | ||
|
|
||
| const StyledConfirmFooter = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-end; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters