- {BANKS.map(({name, iconPosition}) => (
+ {BANKS.map(({name, displayName, iconPosition}) => (
diff --git a/client/src/components/Design/components/BankSendButton/BankSendButton.style.ts b/client/src/components/Design/components/BankSendButton/BankSendButton.style.ts
deleted file mode 100644
index bb6bbffb7..000000000
--- a/client/src/components/Design/components/BankSendButton/BankSendButton.style.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {css} from '@emotion/react';
-
-import {Theme} from '@components/Design/theme/theme.type';
-
-export const bankButtonStyle = (theme: Theme) =>
- css({
- width: '3.25rem',
- height: '1.5rem',
-
- backgroundColor: theme.colors.tertiary,
-
- borderRadius: '0.5rem',
- });
-
-export const isDepositedStyle = (theme: Theme) =>
- css({
- width: '3.25rem',
- height: '1.5rem',
-
- backgroundColor: theme.colors.grayContainer,
-
- borderRadius: '0.5rem',
- });
diff --git a/client/src/components/Design/components/BankSendButton/BankSendButton.tsx b/client/src/components/Design/components/BankSendButton/BankSendButton.tsx
deleted file mode 100644
index 893b7cf3d..000000000
--- a/client/src/components/Design/components/BankSendButton/BankSendButton.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import {useTheme} from '@components/Design/theme/HDesignProvider';
-
-import Icon from '../Icon/Icon';
-import Text from '../Text/Text';
-import Flex from '../Flex/Flex';
-
-import {bankButtonStyle, isDepositedStyle} from './BankSendButton.style';
-
-type BankSendButtonProps = React.HTMLAttributes & {
- onBankButtonClick: () => void;
- isDeposited?: boolean;
-};
-
-const BankSendButton = ({onBankButtonClick, isDeposited = false, ...buttonProps}: BankSendButtonProps) => {
- const {theme} = useTheme();
-
- return isDeposited ? (
-
- ) : (
-
- );
-};
-
-export default BankSendButton;
diff --git a/client/src/components/Design/components/Banner/Banner.stories.tsx b/client/src/components/Design/components/Banner/Banner.stories.tsx
new file mode 100644
index 000000000..fc726df10
--- /dev/null
+++ b/client/src/components/Design/components/Banner/Banner.stories.tsx
@@ -0,0 +1,26 @@
+/** @jsxImportSource @emotion/react */
+import type {Meta, StoryObj} from '@storybook/react';
+
+import Banner from './Banner';
+
+const meta = {
+ title: 'Components/Banner',
+ component: Banner,
+ tags: ['autodocs'],
+ parameters: {
+ // layout: 'centered',
+ },
+ argTypes: {},
+ args: {
+ onDelete: () => console.log(''),
+ title: '계좌번호가 등록되지 않았어요',
+ description: '계좌번호를 입력해야 참여자가 편하게 송금할 수 있어요',
+ buttonText: '등록하기',
+ },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Playground: Story = {};
diff --git a/client/src/components/Design/components/Banner/Banner.tsx b/client/src/components/Design/components/Banner/Banner.tsx
new file mode 100644
index 000000000..a7ac43c59
--- /dev/null
+++ b/client/src/components/Design/components/Banner/Banner.tsx
@@ -0,0 +1,43 @@
+/** @jsxImportSource @emotion/react */
+import type {BannerProps} from './Banner.type';
+
+import Flex from '../Flex/Flex';
+import Icon from '../Icon/Icon';
+import IconButton from '../IconButton/IconButton';
+import Text from '../Text/Text';
+import Button from '../Button/Button';
+
+const Banner = ({title, description, buttonText, onDelete, ...buttonProps}: BannerProps) => {
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default Banner;
diff --git a/client/src/components/Design/components/Banner/Banner.type.ts b/client/src/components/Design/components/Banner/Banner.type.ts
new file mode 100644
index 000000000..3dcdbc0f4
--- /dev/null
+++ b/client/src/components/Design/components/Banner/Banner.type.ts
@@ -0,0 +1,6 @@
+export type BannerProps = React.HTMLAttributes & {
+ onDelete: () => void;
+ title: string;
+ description?: string;
+ buttonText: string;
+};
diff --git a/client/src/components/Design/components/Banner/index.ts b/client/src/components/Design/components/Banner/index.ts
new file mode 100644
index 000000000..f7e7e8f2d
--- /dev/null
+++ b/client/src/components/Design/components/Banner/index.ts
@@ -0,0 +1 @@
+export {default as Banner} from './Banner';
diff --git a/client/src/components/Design/components/Button/Button.style.ts b/client/src/components/Design/components/Button/Button.style.ts
index 0d274f116..e17c9db92 100644
--- a/client/src/components/Design/components/Button/Button.style.ts
+++ b/client/src/components/Design/components/Button/Button.style.ts
@@ -17,6 +17,7 @@ const getButtonDefaultStyle = (theme: Theme) =>
css({
display: 'flex',
justifyContent: 'center',
+ alignItems: 'center',
lineHeight: '1',
transition: '0.2s',
transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
@@ -57,6 +58,14 @@ const getButtonSizeStyle = (size: ButtonSize) => {
fontSize: '1rem',
fontWeight: '700',
}),
+ semiLarge: css({
+ padding: '0.75rem 1rem',
+ borderRadius: '1rem',
+ fontFamily: 'Pretendard',
+ fontSize: '1rem',
+ fontWeight: '700',
+ height: '3rem',
+ }),
large: css({
padding: '1rem 1.5rem',
borderRadius: '1rem',
diff --git a/client/src/components/Design/components/Button/Button.type.ts b/client/src/components/Design/components/Button/Button.type.ts
index a0402b1dc..512e81105 100644
--- a/client/src/components/Design/components/Button/Button.type.ts
+++ b/client/src/components/Design/components/Button/Button.type.ts
@@ -1,6 +1,6 @@
import {Theme} from '@theme/theme.type';
-export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonSize = 'small' | 'medium' | 'semiLarge' | 'large';
export type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'loading';
export interface ButtonStyleProps {
diff --git a/client/src/components/Design/components/Carousel/Carousel.stories.tsx b/client/src/components/Design/components/Carousel/Carousel.stories.tsx
new file mode 100644
index 000000000..0a8b19930
--- /dev/null
+++ b/client/src/components/Design/components/Carousel/Carousel.stories.tsx
@@ -0,0 +1,27 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import Carousel from './Carousel';
+
+const meta = {
+ title: 'Components/Carousel',
+ component: Carousel,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ width: 430,
+ },
+ argTypes: {},
+ args: {
+ urls: [
+ 'https://wooteco-crew-wiki.s3.ap-northeast-2.amazonaws.com/%EC%BF%A0%ED%82%A4(6%EA%B8%B0)/image.png',
+ 'https://wooteco-crew-wiki.s3.ap-northeast-2.amazonaws.com/%EC%BF%A0%ED%82%A4%286%EA%B8%B0%29/4tyq1x19rsn.jpg',
+ 'https://img.danawa.com/images/descFiles/5/896/4895281_1_16376712347542321.gif',
+ ],
+ },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Playground: Story = {};
diff --git a/client/src/components/Design/components/Carousel/Carousel.style.ts b/client/src/components/Design/components/Carousel/Carousel.style.ts
new file mode 100644
index 000000000..addc2926b
--- /dev/null
+++ b/client/src/components/Design/components/Carousel/Carousel.style.ts
@@ -0,0 +1,94 @@
+import {css} from '@emotion/react';
+
+import {Theme} from '@components/Design/theme/theme.type';
+
+export const carouselWrapperStyle = css`
+ position: relative;
+ overflow: hidden;
+ display: flex;
+`;
+
+interface ImageCardContainerStyleProps {
+ currentIndex: number;
+ length: number;
+ translateX: number;
+ isDragging: boolean;
+}
+
+export const imageCardContainerStyle = ({
+ currentIndex,
+ length,
+ translateX,
+ isDragging,
+}: ImageCardContainerStyleProps) => css`
+ display: flex;
+ gap: 1rem;
+ margin-inline: 2rem;
+ transform: translateX(
+ calc(
+ (100vw - 3rem) * ${-currentIndex} +
+ ${(currentIndex === 0 && translateX > 0) || (currentIndex === length - 1 && translateX < 0) ? 0 : translateX}px
+ )
+ );
+ transition: ${isDragging ? 'none' : '0.2s'};
+ transition-timing-function: cubic-bezier(0.7, 0.62, 0.62, 1.16);
+`;
+
+interface ImageCardStyleProps {
+ theme: Theme;
+}
+
+export const imageCardStyle = ({theme}: ImageCardStyleProps) => css`
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ clip-path: inset(0 round 1rem);
+ background-color: ${theme.colors.gray};
+`;
+
+export const imageStyle = css`
+ width: calc(100vw - 4rem);
+ aspect-ratio: 3/4;
+ object-fit: contain;
+`;
+
+export const deleteButtonStyle = css`
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ padding: 0.5rem;
+ opacity: 0.48;
+ background-color: rgba(0, 0, 0, 0.5);
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+export const indicatorContainerStyle = css`
+ position: absolute;
+ left: 50%;
+ bottom: 1rem;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 0.25rem;
+ width: 8rem;
+`;
+
+interface IndicatorStyleProps {
+ index: number;
+ currentIndex: number;
+ theme: Theme;
+}
+
+export const indicatorStyle = ({index, currentIndex, theme}: IndicatorStyleProps) => css`
+ width: 100%;
+ height: 0.125rem;
+ border-radius: 0.0625rem;
+ opacity: ${index !== currentIndex ? 0.48 : 1};
+ background-color: ${index !== currentIndex ? theme.colors.lightGrayContainer : theme.colors.primary};
+ transition: 0.2s;
+ transition-timing-function: cubic-bezier(0.7, 0.62, 0.62, 1.16);
+ content: ' ';
+`;
diff --git a/client/src/components/Design/components/Carousel/Carousel.tsx b/client/src/components/Design/components/Carousel/Carousel.tsx
new file mode 100644
index 000000000..9b7b00bad
--- /dev/null
+++ b/client/src/components/Design/components/Carousel/Carousel.tsx
@@ -0,0 +1,36 @@
+/** @jsxImportSource @emotion/react */
+import {CarouselProps} from './Carousel.type';
+import CarouselIndicator from './CarouselIndicator';
+import CarouselDeleteButton from './CarouselDeleteButton';
+import {carouselWrapperStyle, imageCardContainerStyle, imageCardStyle, imageStyle} from './Carousel.style';
+import useCarousel from './useCarousel';
+
+const Carousel = ({urls, onClickDelete}: CarouselProps) => {
+ const {handleDragStart, handleDrag, handleDragEnd, theme, currentIndex, translateX, isDragging, handleClickDelete} =
+ useCarousel({urls, onClickDelete});
+
+ return (
+ = React.PropsWithChildren & {
+ targetRef: React.RefObject;
+ onClickOutside: () => void;
+};
+
+const ClickOutsideDetector = ({
+ targetRef,
+ onClickOutside,
+ children,
+}: ClickOutsideDetectorProps) => {
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ const targetNode = event.target as Node;
+
+ if (targetRef.current && !targetRef.current.contains(targetNode)) {
+ onClickOutside();
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [targetRef]);
+
+ return children;
+};
+
+export default ClickOutsideDetector;
diff --git a/client/src/components/Design/components/Dropdown/ButtonBase.tsx b/client/src/components/Design/components/Dropdown/ButtonBase.tsx
new file mode 100644
index 000000000..8c1c553d0
--- /dev/null
+++ b/client/src/components/Design/components/Dropdown/ButtonBase.tsx
@@ -0,0 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import {useTheme} from '@components/Design/theme/HDesignProvider';
+
+import Button from '../Button/Button';
+import Flex from '../Flex/Flex';
+
+import {dropdownButtonBaseStyle} from './Dropdown.style';
+import {DropdownProps} from './Dropdown.type';
+import DropdownButton from './DropdownButton';
+
+type ButtonBaseProps = DropdownProps & {
+ isOpen: boolean;
+ setIsOpen: React.Dispatch>;
+ dropdownRef: React.RefObject;
+};
+
+const ButtonBase = ({isOpen, setIsOpen, dropdownRef, baseButtonText, children}: ButtonBaseProps) => {
+ const {theme} = useTheme();
+
+ return (
+ <>
+
+ {isOpen && (
+
+
+ {children.map((button, index) => (
+
+
+ )}
+
+ );
+};
+
+export default ButtonBase;
diff --git a/client/src/components/Design/components/Dropdown/Dropdown.stories.tsx b/client/src/components/Design/components/Dropdown/Dropdown.stories.tsx
index 2504ecae7..bf324f8f7 100644
--- a/client/src/components/Design/components/Dropdown/Dropdown.stories.tsx
+++ b/client/src/components/Design/components/Dropdown/Dropdown.stories.tsx
@@ -19,7 +19,15 @@ const meta = {
),
],
+ argTypes: {
+ base: {
+ description: '',
+ control: {type: 'select'},
+ options: ['meatballs', 'button'],
+ },
+ },
args: {
+ baseButtonText: '정산 초대하기',
children: [
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+ );
+};
+
+export default Carousel;
diff --git a/client/src/components/Design/components/Carousel/Carousel.type.ts b/client/src/components/Design/components/Carousel/Carousel.type.ts
new file mode 100644
index 000000000..746ace1f2
--- /dev/null
+++ b/client/src/components/Design/components/Carousel/Carousel.type.ts
@@ -0,0 +1,4 @@
+export interface CarouselProps {
+ urls: string[];
+ onClickDelete?: (index: number) => void;
+}
diff --git a/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx b/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx
new file mode 100644
index 000000000..9f7154395
--- /dev/null
+++ b/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx
@@ -0,0 +1,17 @@
+import Icon from '../Icon/Icon';
+
+import {deleteButtonStyle} from './Carousel.style';
+
+interface Props {
+ onClick: () => void;
+}
+
+const CarouselDeleteButton = ({onClick}: Props) => {
+ return (
+
+ );
+};
+
+export default CarouselDeleteButton;
diff --git a/client/src/components/Design/components/Carousel/CarouselIndicator.tsx b/client/src/components/Design/components/Carousel/CarouselIndicator.tsx
new file mode 100644
index 000000000..971fa7d3e
--- /dev/null
+++ b/client/src/components/Design/components/Carousel/CarouselIndicator.tsx
@@ -0,0 +1,22 @@
+import {useTheme} from '@components/Design/theme/HDesignProvider';
+
+import {indicatorContainerStyle, indicatorStyle} from './Carousel.style';
+
+interface Props {
+ length: number;
+ currentIndex: number;
+}
+
+const CarouselIndicator = ({length, currentIndex}: Props) => {
+ const {theme} = useTheme();
+
+ return (
+
+ {urls &&
+ urls.map((url, index) => (
+
+ {urls.length !== 1 &&
+ 
+ {onClickDelete && handleClickDelete(index)} />}
+
+ ))}
+
+ {Array.from({length}).map((_, index) => (
+
+ ))}
+
+ );
+};
+
+export default CarouselIndicator;
diff --git a/client/src/components/Design/components/Carousel/useCarousel.tsx b/client/src/components/Design/components/Carousel/useCarousel.tsx
new file mode 100644
index 000000000..73cb1d0f6
--- /dev/null
+++ b/client/src/components/Design/components/Carousel/useCarousel.tsx
@@ -0,0 +1,48 @@
+import {useRef, useState} from 'react';
+
+import {useTheme} from '@components/Design/theme/HDesignProvider';
+
+import {CarouselProps} from './Carousel.type';
+
+const useCarousel = ({urls, onClickDelete}: CarouselProps) => {
+ const startX = useRef(0);
+ const [translateX, setTranslateX] = useState(0);
+ const [isDragging, setIsDragging] = useState(false);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const {theme} = useTheme();
+
+ const handleDragStart = (e: React.TouchEvent | React.MouseEvent) => {
+ setIsDragging(true);
+ startX.current = 'touches' in e ? e.touches[0].clientX : e.clientX;
+ };
+
+ const handleDrag = (e: React.TouchEvent | React.MouseEvent) => {
+ if (!isDragging) return;
+ const currentX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+ const deltaX = currentX - startX.current;
+ setTranslateX(deltaX);
+ };
+
+ const threshold = window.screen.width / 10;
+
+ const handleDragEnd = () => {
+ setIsDragging(false);
+ if (-translateX > threshold) {
+ setCurrentIndex(prev => (prev !== urls.length - 1 ? prev + 1 : prev));
+ }
+ if (+translateX > threshold) {
+ setCurrentIndex(prev => (prev !== 0 ? prev - 1 : prev));
+ }
+ setTranslateX(0);
+ };
+
+ const handleClickDelete = (index: number) => {
+ if (!onClickDelete) return;
+ onClickDelete(index);
+ if (urls.length !== 1 && index === urls.length - 1) setCurrentIndex(prev => prev - 1);
+ };
+
+ return {handleDragStart, handleDrag, handleDragEnd, theme, currentIndex, translateX, isDragging, handleClickDelete};
+};
+
+export default useCarousel;
diff --git a/client/src/components/Design/components/Chevron/Chevron.style.ts b/client/src/components/Design/components/Chevron/Chevron.style.ts
new file mode 100644
index 000000000..14b67e80e
--- /dev/null
+++ b/client/src/components/Design/components/Chevron/Chevron.style.ts
@@ -0,0 +1,9 @@
+import {css} from '@emotion/react';
+
+export const chevronStyle = css({
+ transition: 'transform 0.3s ease',
+});
+
+export const activeChevronStyle = css({
+ transform: 'rotate(180deg)',
+});
diff --git a/client/src/components/Design/components/Chevron/Chevron.tsx b/client/src/components/Design/components/Chevron/Chevron.tsx
new file mode 100644
index 000000000..9e5ac4947
--- /dev/null
+++ b/client/src/components/Design/components/Chevron/Chevron.tsx
@@ -0,0 +1,25 @@
+/** @jsxImportSource @emotion/react */
+import {chevronStyle, activeChevronStyle} from './Chevron.style';
+
+type ChevronProps = {
+ isActive: boolean;
+};
+
+const Chevron = ({isActive}: ChevronProps) => {
+ return (
+
+
+
+ );
+};
+
+export default Chevron;
diff --git a/client/src/components/Design/components/ClickOutsideDetector/index.tsx b/client/src/components/Design/components/ClickOutsideDetector/index.tsx
new file mode 100644
index 000000000..8eaf4da5b
--- /dev/null
+++ b/client/src/components/Design/components/ClickOutsideDetector/index.tsx
@@ -0,0 +1,32 @@
+import {useEffect} from 'react';
+
+type ClickOutsideDetectorProps
+ {base === 'meatballs' && (
+
+