정산 상세 관리 메뉴에 계좌 수정 기능 추가

src/_workspace/AccountEditDialog/AccountEditDialog.tsx

@@ -0,0 +1,65 @@
+import type { ChangeEventHandler } from 'react';
+import { Dialog, Input, Modal } from '@/shared/design-system/ui';
+import { Dropdown, type DropdownOption } from '../Dropdown';
+
+interface AccountEditDialogProps {
+  open: boolean;
+  bankOptions: DropdownOption[];
+  bankValue: string;
+  bankPlaceholder?: string;
+  onBankChange: (value: string) => void;
+  accountNumber: string;
+  accountNumberPlaceholder?: string;
+  onAccountNumberChange: ChangeEventHandler<HTMLInputElement>;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+function AccountEditDialog(props: AccountEditDialogProps) {
+  const {
+    open,
+    bankOptions,
+    bankValue,
+    bankPlaceholder = '은행을 선택해주세요',
+    onBankChange,
+    accountNumber,
+    accountNumberPlaceholder = '계좌 번호를 입력해주세요',
+    onAccountNumberChange,
+    onCancel,
+    onConfirm,
+  } = props;
+
+  const isConfirmDisabled = !bankValue || !accountNumber;
+
+  return (
+    <Modal open={open} onClose={onCancel} ariaLabel="계좌 수정">
+      <Dialog
+        title="계좌 수정"
+        description="정산 받을 계좌를 입력해주세요."
+        mainAction={{
+          label: '확인',
+          onClick: onConfirm,
+          disabled: isConfirmDisabled,
+        }}
+        alternativeAction={{ label: '취소', onClick: onCancel }}
+      >
+        <Dropdown
+          label="은행 선택"
+          options={bankOptions}
+          value={bankValue}
+          onChange={onBankChange}
+          placeholder={bankPlaceholder}
+        />
+        <Input
+          label="계좌 번호"
+          placeholder={accountNumberPlaceholder}
+          value={accountNumber}
+          onChange={onAccountNumberChange}
+        />
+      </Dialog>
+    </Modal>
+  );
+}
+
+export { AccountEditDialog };
+export type { AccountEditDialogProps };

src/_workspace/AccountEditDialog/index.ts

@@ -0,0 +1,2 @@
+export { AccountEditDialog } from './AccountEditDialog';
+export type { AccountEditDialogProps } from './AccountEditDialog';

src/_workspace/Dropdown/Dropdown.styles.ts

@@ -0,0 +1,130 @@
+import styled, { css } from 'styled-components';
+import { getToken, applyTypography } from '@/shared/design-system';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${getToken('gap.4')};
+  width: 100%;
+`;
+
+export const Label = styled.span`
+  ${applyTypography('typography.body.small-semibold')}
+  color: ${getToken('fg.neutral')};
+`;
+
+export const TriggerWrap = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const Trigger = styled.button<{ $isOpen: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: ${getToken('gap.4')};
+  width: 100%;
+  padding: ${getToken('padding.4')} ${getToken('padding.5')};
+  background: ${getToken('fill.normal')};
+  border-radius: ${getToken('radius.lg')};
+  cursor: pointer;
+  ${({ $isOpen }) =>
+    $isOpen
+      ? css`
+          border: 2px solid ${getToken('border.primary.normal')};
+        `
+      : css`
+          border: 1px solid ${getToken('border.neutral')};
+        `}
+`;
+
+export const ValueText = styled.span<{ $isPlaceholder: boolean }>`
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  ${applyTypography('typography.body.medium')}
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  ${({ $isPlaceholder }) =>
+    $isPlaceholder
+      ? css`
+          color: ${getToken('fg.assistive')};
+          opacity: 0.5;
+        `
+      : css`
+          color: ${getToken('fg.normal')};
+        `}
+`;
+
+export const ChevronWrapper = styled.span<{ $isOpen: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: ${getToken('fg.assistive')};
+  transform: ${({ $isOpen }) => ($isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
+  transition: transform 0.2s ease-in-out;
+`;
+
+export const Panel = styled.div`
+  position: absolute;
+  top: calc(100% + ${getToken('gap.3')});
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${getToken('gap.1')};
+  background: ${getToken('fill.normal')};
+  border: 1px solid ${getToken('border.alternative')};
+  border-radius: ${getToken('radius.md')};
+  padding: ${getToken('padding.3')};
+  /* HACK: shadow2(0px 4px 8px rgba(0,0,0,0.12)) 매핑되는 shadow 시맨틱 토큰 없음 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+  /* HACK: 옵션이 많을 때 패널이 넘치지 않도록 max-height 제한. 대응 토큰 없어 직접 사용. */
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 10;
+`;
+
+export const OptionItem = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${getToken('gap.6')};
+  width: 100%;
+  padding: ${getToken('padding.3')};
+  border-radius: ${getToken('radius.sm')};
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:hover,
+  &:active {
+    background: ${getToken('fill.normal-pressed')};
+  }
+`;
+
+export const OptionLabel = styled.span<{ $isSelected: boolean }>`
+  ${({ $isSelected }) =>
+    $isSelected
+      ? applyTypography('typography.body.medium-semibold')
+      : applyTypography('typography.body.medium')}
+  color: ${({ $isSelected }) =>
+    $isSelected ? getToken('fg.primary.normal') : getToken('fg.normal')};
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  white-space: nowrap;
+`;
+
+export const ConfirmIconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: ${getToken('fg.primary.normal')};
+
+  svg path {
+    stroke: currentColor;
+  }
+`;

src/_workspace/Dropdown/Dropdown.tsx

@@ -0,0 +1,104 @@
+import { useState, useRef, useEffect, useId } from 'react';
+import SvgArrowDown from '@/shared/assets/svgs/icon/ArrowDown';
+import SvgConfirm from '@/shared/assets/svgs/icon/Confirm';
+import * as S from './Dropdown.styles';
+
+interface DropdownOption {
+  label: string;
+  value: string;
+}
+
+interface DropdownProps {
+  label?: string;
+  options: DropdownOption[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+function Dropdown(props: DropdownProps) {
+  const { label, options, value, onChange, placeholder = '선택' } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listboxId = useId();
+
+  const selectedOption = options.find((option) => option.value === value);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+
+    function handleOutsideClick(e: MouseEvent) {
+      if (!containerRef.current?.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+
+  function handleOptionClick(optionValue: string) {
+    onChange(optionValue);
+    setIsOpen(false);
+  }
+
+  return (
+    <S.Container ref={containerRef}>
+      {label && <S.Label>{label}</S.Label>}
+      <S.TriggerWrap>
+        <S.Trigger
+          type="button"
+          $isOpen={isOpen}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          aria-controls={isOpen ? listboxId : undefined}
+          onClick={() => setIsOpen((prev) => !prev)}
+        >
+          <S.ValueText $isPlaceholder={!selectedOption}>
+            {selectedOption?.label ?? placeholder}
+          </S.ValueText>
+          <S.ChevronWrapper $isOpen={isOpen}>
+            <SvgArrowDown width={24} height={24} />
+          </S.ChevronWrapper>
+        </S.Trigger>
+        {isOpen && (
+          <S.Panel id={listboxId} role="listbox">
+            {options.map((option) => (
+              <S.OptionItem
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={option.value === value}
+                onClick={() => handleOptionClick(option.value)}
+              >
+                <S.OptionLabel $isSelected={option.value === value}>
+                  {option.label}
+                </S.OptionLabel>
+                {option.value === value && (
+                  <S.ConfirmIconWrapper>
+                    <SvgConfirm width={14} height={10} />
+                  </S.ConfirmIconWrapper>
+                )}
+              </S.OptionItem>
+            ))}
+          </S.Panel>
+        )}
+      </S.TriggerWrap>
+    </S.Container>
+  );
+}
+
+export { Dropdown };
+export type { DropdownProps, DropdownOption };

src/_workspace/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownOption } from './Dropdown';