Dorong Dorong 💻😴

3년간 회사에서 개발하면서 나름 경험을 쌓았다고 생각했습니다.

하지만 돌이켜보면 그 경험은 이미 잘 짜인 구조 안에서 주어진 역할만 수행했었던 것 같습니다.
디자이너와의 협업 방식은 이미 정형화되어 있었고, 디자인 시스템도 구축돼 있어서 시안을 받아 구현하는 데만 집중하면 됐거든요.

이번 프로젝트에서는 모든 걸 처음부터 만들어야 했습니다. 그 과정에서 많은 것들을 새롭게 깨달았고, 특히 디자이너와의 협업에서 여러 배움들이 있었습니다!

갑자기 보이기 시작한 것들

상태에 대한 정의

디자이너님과 같은 "상태"라는 단어를 사용하고 있었는데, 실제로는 다른 방식을 생각하고 있었습니다.

• 디자이너님이 말하는 상태는 주로 시각적인 변화 — 예를 들어 색깔, 테두리, 아이콘 같은 UI 요소들이었고,
• 제가 말하는 상태는 데이터의 상태 혹은 사용자 상호작용 — 예를 들어 에러 여부, 입력 완료 여부, 네트워크 상태 같은 것이었습니다.

아래에서 자세히 설명 하겠지만 개발했던 공통 컴포넌트로 설명해 보겠습니다.

처음 시안에는 "기본, 포커스, 에러, 비활성화" 정도만 정의돼 있었어요.

그런데 실제로 구현에 들어가면서 고민이 커졌습니다.

• 이메일 필드에서 오류 메시지가 뜨는 동시에 포커스가 가면 어떻게 보여줘야 하지?
• 네트워크 오류가 발생하면서 동시에 로딩 상태도 유지해야 한다면?
• 비밀번호 필드에서는 호버 + 에러 상태가 함께 오면 어떤 UI여야 할까?

이렇게 상태 조합 많아지기 시작했어요.
회사는 이미 디자인 시스템과 공통 컴포넌트가 잘 정리돼 있어서, 이런 조합들은 신경 쓸 필요가 거의 없었거든요.
하지만 이번 프로젝트에서는 모든 것을 직접 기획하고, 디자이너님과 논의하고, 구현까지 해보면서 "상태"를 정의한다는게 얼마나 복잡하고 섬세한 일인지 체감할 수 있었습니다.

가장 처음 시작된 소통이 시작된 화면

프로젝트 초기 디자이너님이 로그인 화면 시안을 가져왔습니다. 깔끔하고 직관적인 디자인이었습니다. 하지만 구현을 시작하면서 자연스럽게 몇 가지 궁금한 점들이 생겼어요.

"로그인 실패했을 때는 어떻게 표시할까요?"

디자이너님도 "아, 그러게요. 에러 메시지가 필요하겠네요"라고 해주셨고 함께 고민해봤습니다.

예시 코드는 실제 구현 코드와 차이가 있습니다.

type LoginErrorType = 'INVALID_CREDENTIALS' | 'NETWORK_ERROR' | 'UNKNOWN_ERROR';

interface LoginError {
  type: LoginErrorType;
  message: string;
  field?: 'email' | 'password'; // 개발 환경에서만 사용
}

interface LoginState {
  status: 'idle' | 'loading' | 'success' | 'error';
  error: LoginError | null;
}

// 에러 메시지 상수 분리
const LOGIN_ERROR_MESSAGES = {
  INVALID_CREDENTIALS: '이메일 또는 비밀번호를 확인해주세요.',
  NETWORK_ERROR: '네트워크 오류가 발생했습니다. 다시 시도해주세요.',
  UNKNOWN_ERROR: '알 수 없는 오류가 발생했습니다.',
} as const;

// 개발 환경용 상세 메시지
const DEV_ERROR_MESSAGES = {
  INVALID_EMAIL: '앗! 등록되지 않은 이메일이거나 잘못 입력했어요.',
  INVALID_PASSWORD: '앗! 비밀번호가 틀렸어요. 다시 한 번 확인해주세요.',
} as const;

const useLogin = () => {
  const [state, setState] = useState<LoginState>({
    status: 'idle',
    error: null,
  });

  // 환경별 에러 메시지 처리
  const getErrorMessage = (type: LoginErrorType, field?: 'email' | 'password'): LoginError => {
    const isDevelopment = process.env.NODE_ENV === 'development';
    
    if (isDevelopment && field) {
      return {
        type,
        message: field === 'email' ? DEV_ERROR_MESSAGES.INVALID_EMAIL : DEV_ERROR_MESSAGES.INVALID_PASSWORD,
        field,
      };
    }

    return {
      type,
      message: LOGIN_ERROR_MESSAGES[type],
    };
  };

  const login = async (email: string, password: string) => {
    setState({ status: 'loading', error: null });
    
    try {
      const user = await authService.findUserByEmail(email);
      if (!user) {
        setState({
          status: 'error',
          error: getErrorMessage('INVALID_CREDENTIALS', 'email'),
        });
        return;
      }

      const isValidPassword = await authService.validatePassword(email, password);
      if (!isValidPassword) {
        setState({
          status: 'error',
          error: getErrorMessage('INVALID_CREDENTIALS', 'password'),
        });
        return;
      }

      await authService.setSession(user);
      setState({ status: 'success', error: null });
    } catch (error) {
      setState({
        status: 'error',
        error: getErrorMessage('NETWORK_ERROR'),
      });
    }
  };

  return {
    ...state,
    login,
    isLoading: state.status === 'loading',
    isSuccess: state.status === 'success',
    isError: state.status === 'error',
  };
};

디자이너님은 로그인 화면에서 어떤 방식으로 에러 메시지를 띄울지 고민하고 계셨어요.

흔히 볼 수 있는 "아이디나 비밀번호가 일치하지 않습니다"와 같은 모호한 에러 메시지 대신, "이메일이 잘못되었습니다" 또는 "비밀번호가 잘못되었습니다"처럼 구체적으로 알려주는 게 사용자 입장에서 더 친절한 UX가 아닐까에 대해 논의하였습니다.

그리고 왜 많은 웹사이트들이 로그인 실패 시 "Incorrect username or password" 처럼 모호한 메시지를 사용하는 걸까요? 라는 의문에 도달했어요.

관련해서 찾아본 결과, tarunbatra.com 블로그에서는 보안적인 이유를 강조했습니다.

로그인 오류 메시지를 구체적으로 제공할 경우, 악의적인 사용자가 해당 정보를 기반으로 유효한 계정을 추측하거나 반복적으로 조합을 시도할 수 있게 됩니다.

예를 들어, "비밀번호가 잘못되었습니다"라는 메시지를 보면 해당 사용자명은 유효하다는 것을 알 수 있기 때문에, 공격자에게 단서를 주는 셈이죠. 반면 "아이디 또는 비밀번호가 일치하지 않습니다"처럼 모호하게 처리하면 공격자는 어떤 부분이 잘못되었는지 알 수 없기 때문에 보안상 더 안전해집니다.

하지만 그 당시엔 내부 베타 테스트를 진행할 예정이었던 동물병원 관계자분들의 요청이 있었고, 테스트 편의를 위해 로그인 오류 시 어떤 필드가 잘못되었는지를 분리해서 보여주는 UX를 채택하기로 했습니다.

사용자가 어떤 필드에서 문제가 생겼는지 직관적으로 알 수 있도록, 해당 필드 바로 아래에 에러 메시지를 띄우는 방식으로 협의했고, 실제 사용자 테스트에서도 긍정적인 반응을 얻을 수 있었습니다!

편하게 쓰던 공통 컴포넌트

알리니에서는 다양한 입력 필드가 필요했습니다.

이메일, 비밀번호, 전화번호, 사료명, 브랜드명 등등...

처음에 디자이너님이 만든 텍스트필드는 기본적이 모습이었는데, 구현하면서 함께 다양한 상태를 고민하게 되었습니다.

"비밀번호 필드에서 입력 내용을 확인할 수 있는 눈 모양 아이콘이 있으면 좋겠어요."

"맞아요! 그리고 사료 등록할 때 필수 입력 항목은 라벨에 별표(*)를 표시하면 어떨까요?"

이처럼 하나하나 기능이 추가되며 필요한 상태의 수는 기하급수적으로 늘어났습니다..

예를들어 아래처럼요. (실제 알리니 구현과 차이가 있습니다)

• 기본 상태 4가지
• 호버 상태 추가 → 4 × 2 = 8
• 읽기 전용(read-only) 고려 → 8 × 2 = 16
• 필수/선택 표시 → 16 × 2 = 총 32가지 상태 조합

그런데 가장 어려웠던 건 이런 조합들이 단순히 추가만 되는 게 아니라, 서로 충돌하거나 우선순위가 있다는 점이었어요.
예를 들어 disabled와 readOnly는 동시에 true일 수 있지만, 실제로는 disabled가 readOnly를 무시해요.

즉, disabled > readOnly인 거죠.
이런 상호 의존성과 우선순위는 처음엔 전혀 인지하지 못했고, 디자이너님과 함께 한참을 논의하면서 규칙을 정리해나갔습니다:

• disabled > readOnly (우선순위 존재)
• error와 success는 상호 배타적
• focus는 사용자의 직접적인 상호작용으로만 발생

예시 코드는 실제 구현 코드와 차이가 있습니다.

import { forwardRef, useState, useCallback, useMemo, useId } from 'react';

// 디자인 토큰
const INPUT_COLORS = {
  default: {
    border: '#e1e5e9',
    background: '#ffffff',
  },
  focused: {
    border: '#00b896', // 브랜드 컬러
    background: '#ffffff',
  },
  error: {
    border: '#ff6b6b', // 빨간색
    background: '#ffffff',
  },
  disabled: {
    border: '#f4f4f4',
    background: '#f9f9f9',
  },
} as const;

// 상태 우선순위 명시적 정의
const INPUT_STATE_PRIORITY = {
  disabled: 4,
  error: 3,
  focused: 2,
  default: 1,
} as const;

type InputState = keyof typeof INPUT_STATE_PRIORITY;

// Props 타입 분리
interface BaseInputProps {
  label?: string;
  required?: boolean;
  error?: string;
  disabled?: boolean;
  placeholder?: string;
  value?: string;
  onChange?: (value: string) => void;
  onFocus?: () => void;
  onBlur?: () => void;
}

interface TextInputProps extends BaseInputProps {
  type?: 'text' | 'email' | 'tel';
  leftIcon?: React.ReactNode;
  rightButton?: React.ReactNode;
}

interface PasswordInputProps extends BaseInputProps {
  type: 'password';
  showPasswordToggle?: boolean;
}

type InputProps = TextInputProps | PasswordInputProps;

// 상태 계산 로직 분리
const getInputState = (isFocused: boolean, error?: string, disabled?: boolean): InputState => {
  if (disabled) return 'disabled';
  if (error) return 'error';
  if (isFocused) return 'focused';
  return 'default';
};

const getInputStyles = (state: InputState) => {
  const colors = INPUT_COLORS[state];
  return {
    borderColor: colors.border,
    backgroundColor: colors.background,
  };
};

const TextInput = forwardRef<HTMLInputElement, InputProps>(({
  label,
  required = false,
  type = 'text',
  error,
  disabled = false,
  placeholder,
  value,
  onChange,
  onFocus,
  onBlur,
  ...props
}, ref) => {
  const [showPassword, setShowPassword] = useState(false);
  const [isFocused, setIsFocused] = useState(false);
  
  const inputId = useId();
  const errorId = useId();
  
  const inputType = useMemo(() => {
    if (type === 'password' && !showPassword) return 'password';
    return type === 'password' ? 'text' : type;
  }, [type, showPassword]);

  const currentState = useMemo(() => 
    getInputState(isFocused, error, disabled), 
    [isFocused, error, disabled]
  );

  const inputStyles = useMemo(() => 
    getInputStyles(currentState), 
    [currentState]
  );

  // 이벤트 핸들러들
  const handleFocus = useCallback(() => {
    if (disabled) return;
    setIsFocused(true);
    onFocus?.();
  }, [disabled, onFocus]);

  const handleBlur = useCallback(() => {
    setIsFocused(false);
    onBlur?.();
  }, [onBlur]);

  const togglePasswordVisibility = useCallback(() => {
    setShowPassword(prev => !prev);
  }, []);

  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    onChange?.(e.target.value);
  }, [onChange]);

  // 패스워드 토글 버튼
  const passwordToggleButton = type === 'password' && (
    <button
      type="button"
      onClick={togglePasswordVisibility}
      className="password-toggle"
      aria-label={showPassword ? '비밀번호 숨기기' : '비밀번호 보기'}
      disabled={disabled}
      style={{ 
        opacity: disabled ? 0.5 : 1,
        cursor: disabled ? 'not-allowed' : 'pointer'
      }}
    >
      {showPassword ? '🙈' : '👁️'}
    </button>
  );

  return (
    <div className="text-input">
      {label && (
        <label htmlFor={inputId} className="input-label">
          {label}
          {required && (
            <span className="required-indicator" aria-label="필수" style={{ color: '#ff6b6b' }}>
              *
            </span>
          )}
        </label>
      )}
      
      <div 
        className={`input-container input-container--${currentState}`}
        style={{
          ...inputStyles,
          border: `1px solid ${inputStyles.borderColor}`,
          borderRadius: '8px',
          padding: '12px',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
        }}
      >
        {'leftIcon' in props && props.leftIcon && (
          <span className="input-icon" aria-hidden="true">
            {props.leftIcon}
          </span>
        )}
        
        <input
          ref={ref}
          id={inputId}
          type={inputType}
          disabled={disabled}
          placeholder={placeholder}
          value={value}
          onChange={handleChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
          aria-describedby={error ? errorId : undefined}
          aria-invalid={!!error}
          style={{
            flex: 1,
            border: 'none',
            outline: 'none',
            backgroundColor: 'transparent',
            fontSize: '16px',
          }}
        />
        
        {passwordToggleButton}
        
        {'rightButton' in props && props.rightButton}
      </div>
      
      {error && (
        <span 
          id={errorId} 
          className="error-message" 
          role="alert"
          style={{
            color: '#ff6b6b',
            fontSize: '14px',
            marginTop: '4px',
            display: 'block',
          }}
        >
          {error}
        </span>
      )}
    </div>
  );
});

TextInput.displayName = 'TextInput';

// 사용 예시
const LoginForm = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
  });
  
  const { login, isLoading, error, status } = useLogin();
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await login(formData.email, formData.password);
  };
  
  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: '400px', margin: '0 auto' }}>
      <TextInput
        label="이메일"
        type="email"
        required
        value={formData.email}
        onChange={(email) => setFormData(prev => ({ ...prev, email }))}
        error={error?.field === 'email' ? error.message : undefined}
        placeholder="이메일을 입력해주세요"
        disabled={isLoading}
      />
      
      <div style={{ marginTop: '16px' }}>
        <TextInput
          label="비밀번호"
          type="password"
          required
          value={formData.password}
          onChange={(password) => setFormData(prev => ({ ...prev, password }))}
          error={error?.field === 'password' ? error.message : undefined}
          placeholder="비밀번호를 입력해주세요"
          disabled={isLoading}
          showPasswordToggle
        />
      </div>
      
      <button 
        type="submit" 
        disabled={isLoading}
        style={{
          width: '100%',
          padding: '12px',
          marginTop: '24px',
          backgroundColor: isLoading ? '#cccccc' : '#00b896',
          color: 'white',
          border: 'none',
          borderRadius: '8px',
          fontSize: '16px',
          cursor: isLoading ? 'not-allowed' : 'pointer',
        }}
      >
        {isLoading ? '로그인 중...' : '로그인'}
      </button>
      
      {error && !error.field && (
        <div style={{ 
          marginTop: '16px', 
          padding: '12px', 
          backgroundColor: '#ffebee',
          borderRadius: '8px',
          color: '#ff6b6b'
        }}>
          {error.message}
        </div>
      )}
    </form>
  );
};

"비활성화 상태일 때는 회색으로, 에러 상태일 때는 빨간색 테두리로 평범하게 가고 포커스 상태에서는 브랜드 컬러인 초록색으로 강조하면 좋겠어요"라는 의견으로 일치했습니다.

알레르기 기록의 시각화

알리니의 핵심 기능 중 하나가 반려견의 알레르기 반응을 기록하고 분석하는 건데, 이 부분에서 정말 많은 대화가 오갔습니다.

현재 구현된 상태와는 다르지만 아래와같은 고민을 했었어요.

"알레르기 정도를 어떻게 표현하면 좋을까요?"

"색깔로 구분하면 어떨까요? 빨간색은 심함, 주황색은 보통, 초록색은 낮음?"

"색약이 있는 사용자도 고려해야 할 것 같아요. 색깔과 함께 텍스트나 아이콘도 넣으면 어떨까요?"

예시 코드는 실제 구현 코드와 차이가 있습니다.

// 디자인 토큰 정의
const COLORS = {
  success: {
    main: '#00b896',
    background: '#e6f8f5',
    light: '#b3f0e6',
  },
  warning: {
    main: '#ffa726',
    background: '#fff3e0',
    light: '#ffd699',
  },
  error: {
    main: '#ff6b6b',
    background: '#ffebee',
    light: '#ffb3b3',
  },
  gray: {
    600: '#666666',
    500: '#999999',
    100: '#f5f5f5',
  },
} as const;

// 알레르기 레벨 타입
type AllergyLevel = 'low' | 'medium' | 'high';

// 알레르기 데이터 인터페이스
interface AllergyData {
  level: AllergyLevel;
  percentage: number;
  ingredients: string[];
  timestamp?: Date;
}

// 아이콘 컴포넌트들 (실제로는 아이콘 라이브러리 사용)
const CheckCircleIcon = ({ size = 16 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
  </svg>
);

const AlertCircleIcon = ({ size = 16 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
  </svg>
);

const XCircleIcon = ({ size = 16 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/>
  </svg>
);

// 알레르기 레벨 설정
interface AllergyLevelConfig {
  color: string;
  backgroundColor: string;
  text: string;
  icon: React.ReactNode;
  severity: number;
  description: string; // 접근성을 위한 설명 추가
}

const ALLERGY_LEVEL_CONFIG: Record<AllergyLevel, AllergyLevelConfig> = {
  low: {
    color: COLORS.success.main,
    backgroundColor: COLORS.success.background,
    text: '알레르기 낮음',
    icon: <CheckCircleIcon size={16} />,
    severity: 1,
    description: '알레르기 반응이 낮은 수준입니다',
  },
  medium: {
    color: COLORS.warning.main,
    backgroundColor: COLORS.warning.background,
    text: '알레르기 보통',
    icon: <AlertCircleIcon size={16} />,
    severity: 2,
    description: '알레르기 반응이 보통 수준입니다',
  },
  high: {
    color: COLORS.error.main,
    backgroundColor: COLORS.error.background,
    text: '알레르기 높음',
    icon: <XCircleIcon size={16} />,
    severity: 3,
    description: '알레르기 반응이 높은 수준입니다',
  },
} as const;

// Props 인터페이스
interface AllergyItemProps {
  level: AllergyLevel;
  percentage: number;
  ingredients?: string[];
  showDetails?: boolean;
  className?: string;
  onToggleDetails?: () => void;
}

// 퍼센티지 포맷팅 함수
const formatPercentage = (value: number): string => {
  return `${Math.round(value)}%`;
};

// 메인 컴포넌트
export const AllergyItem: React.FC<AllergyItemProps> = ({
  level,
  percentage,
  ingredients = [],
  showDetails = false,
  className = '',
  onToggleDetails,
}) => {
  const config = ALLERGY_LEVEL_CONFIG[level];
  
  return (
    <div
      className={`allergy-item ${className}`}
      style={{
        backgroundColor: config.backgroundColor,
        border: `1px solid ${config.color}20`, // 20% 투명도
        borderRadius: '12px',
        padding: '16px',
        marginBottom: '8px',
        transition: 'all 0.2s ease', // 부드러운 전환
      }}
      role="article"
      aria-label={`${config.description}, ${formatPercentage(percentage)}`}
    >
      <div 
        className="allergy-header"
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: showDetails && ingredients.length > 0 ? '12px' : '0',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span 
            className="allergy-icon" 
            style={{ color: config.color, display: 'flex', alignItems: 'center' }}
            aria-hidden="true"
          >
            {config.icon}
          </span>
          <span 
            className="allergy-text" 
            style={{ 
              color: config.color, 
              fontWeight: '600',
              fontSize: '14px',
            }}
          >
            {config.text}
          </span>
        </div>
        
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span 
            className="allergy-percentage"
            style={{
              fontWeight: '700',
              fontSize: '16px',
              color: config.color,
            }}
          >
            {formatPercentage(percentage)}
          </span>
          
          {ingredients.length > 0 && (
            <button
              onClick={onToggleDetails}
              style={{
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                padding: '4px',
                borderRadius: '4px',
                color: config.color,
                fontSize: '12px',
                transition: 'background-color 0.2s ease',
              }}
              aria-expanded={showDetails}
              aria-label={showDetails ? '세부사항 숨기기' : '세부사항 보기'}
            >
              {showDetails ? '▲' : '▼'}
            </button>
          )}
        </div>
      </div>

      {/* 색약 사용자를 위한 추가 시각적 요소 */}
      <div 
        style={{
          width: '100%',
          height: '4px',
          backgroundColor: `${config.color}30`,
          borderRadius: '2px',
          marginBottom: showDetails && ingredients.length > 0 ? '12px' : '0',
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            width: `${percentage}%`,
            height: '100%',
            backgroundColor: config.color,
            borderRadius: '2px',
            transition: 'width 0.3s ease',
          }}
          role="progressbar"
          aria-valuenow={percentage}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label={`알레르기 수준 ${formatPercentage(percentage)}`}
        />
      </div>

      {showDetails && ingredients.length > 0 && (
        <div className="allergy-details">
          <h4 
            style={{ 
              margin: '0 0 8px 0',
              fontSize: '12px',
              color: COLORS.gray[600],
              fontWeight: '600',
            }}
          >
            관련 성분 ({ingredients.length}개)
          </h4>
          <ul 
            className="allergy-ingredients"
            style={{
              margin: 0,
              padding: 0,
              listStyle: 'none',
              display: 'flex',
              flexWrap: 'wrap',
              gap: '6px',
            }}
          >
            {ingredients.map((ingredient, index) => (
              <li 
                key={`${ingredient}-${index}`}
                className="allergy-ingredient"
                style={{
                  backgroundColor: `${config.color}15`,
                  color: config.color,
                  padding: '4px 8px',
                  borderRadius: '12px',
                  fontSize: '12px',
                  fontWeight: '500',
                  border: `1px solid ${config.color}30`,
                }}
              >
                {ingredient}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

// 알레르기 목록 컴포넌트
interface AllergyListProps {
  allergies: AllergyData[];
  title?: string;
}

export const AllergyList: React.FC<AllergyListProps> = ({ 
  allergies, 
  title = "알레르기 분석 결과" 
}) => {
  const [expandedItems, setExpandedItems] = React.useState<Set<number>>(new Set());

  const toggleDetails = (index: number) => {
    setExpandedItems(prev => {
      const newSet = new Set(prev);
      if (newSet.has(index)) {
        newSet.delete(index);
      } else {
        newSet.add(index);
      }
      return newSet;
    });
  };

  // 데이터 정렬 (심각도 순)
  const sortedAllergies = React.useMemo(() => {
    return [...allergies].sort((a, b) => {
      const configA = ALLERGY_LEVEL_CONFIG[a.level];
      const configB = ALLERGY_LEVEL_CONFIG[b.level];
      return configB.severity - configA.severity; // 심각한 것부터
    });
  }, [allergies]);

  if (allergies.length === 0) {
    return (
      <div style={{ 
        textAlign: 'center', 
        padding: '40px 20px',
        color: COLORS.gray[500],
      }}>
        알레르기 데이터가 없습니다.
      </div>
    );
  }

  return (
    <div className="allergy-list" style={{ maxWidth: '600px', margin: '0 auto' }}>
      <h3 style={{ 
        fontSize: '18px', 
        fontWeight: '700', 
        marginBottom: '16px',
        color: COLORS.gray[600],
      }}>
        {title}
      </h3>
      
      {sortedAllergies.map((allergy, index) => (
        <AllergyItem
          key={index}
          level={allergy.level}
          percentage={allergy.percentage}
          ingredients={allergy.ingredients}
          showDetails={expandedItems.has(index)}
          onToggleDetails={() => toggleDetails(index)}
        />
      ))}
    </div>
  );
};

// 사용 예시
export const AllergyExample = () => {
  const sampleData: AllergyData[] = [
    {
      level: 'high',
      percentage: 85,
      ingredients: ['닭고기', '쌀', '옥수수'],
    },
    {
      level: 'medium',
      percentage: 45,
      ingredients: ['연어', '고구마'],
    },
    {
      level: 'low',
      percentage: 15,
      ingredients: ['당근', '브로콜리', '사과'],
    },
  ];

  return <AllergyList allergies={sampleData} title="우리 강아지 알레르기 분석" />;
};

"월별 통계를 보여줄 때 그래프로 표현하면 더 직관적일 것 같아요"라는 디자이너님의 제안에 어느정도 화면이 변경되었습니다!

마치며

진행하며 고민한 디테일들은 회사에선 이미 디자인 시스템이나 공통 컴포넌트에 반영되어 있어서, 별다른 고민 없이 가져다 쓰기만 했던 것들이었어요.

이번 프로젝트에서는 그런 요소들을 직접 기획하고, 디자인에 녹여내고, 컴포넌트로 구현하는 과정을 하나하나 경험해보니, 겉으로만 알고 있었던 UI 구성 요소들이 얼마나 많은 의도와 고민 속에서 만들어졌는지를 새삼 느낄 수 있었어요.

무엇보다 그런 과정이 생각보다 꽤 재밌었습니다!

글 초반에 이야기했던 ‘상태’에 대한 정의를 스터디원들과 함께 고민하고 찾아보던 중, 아래의 블로그 글을 접하게 되었고 큰 도움을 받았습니다. 👉 The Sorry State of States - velog.io/@tap_kim

저희가 겪고 있던 고민과 같은 내용을 보며 정말 반가웠고,
덕분에 막연했던 문제들을 조금 더 빠르게 정리하고, 명확한 기준을 세울 수 있었습니다.