[URH-70] useMockData 신규

[jeongbaebang]

👾 Pull Request

• 티켓: useMockData 신규

• 상태: 신규

1️⃣ Spec

• 필요한 더미데이터를 생성해주는 훅
• 타입을 포함한 객체를 전달하면 해당 타입과 맞는 더미 데이터 반환 (중첩 지원)
• 지원하는 mock 타입: string, number, boolean, image, date, UUID, array, object
• 범위값 조정 지원 (문자열길이, 숫자길이, 이미지 너비 높이, 날짜 범위)
• 생성된 mock 객체 타입 자동완성 지원

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

import React from 'react';
import useMockData from './hooks/useMockData';

const App = () => {
  const { mockData, addItem } = useMockData({
    schema: {
      user: {
        id: 'UUID',
        name: 'string',
        age: 'number',
        address: ['string', 'string'],
        profilePicture: 'image',
        registrationDate: 'date',
        isAdmin: 'boolean',
        inventory: {
          money: 'number',
          connectionUser: [
            {
              userId: 'UUID',
              name: 'string',
              isActive: 'boolean',
              address: ['string', 'number'],
            },
          ],
        },
      },
    },
    options: {
      count: 5, // Initial number of mock data items
      type: {
        name: { min: 5, max: 15 },
        number: { min: 1, max: 100 },
        image: {
          width: { min: 400, max: 800 },
          height: { min: 300, max: 600 },
        },
        date: {
          start: '2022-01-01',
          end: '2023-01-01',
        },
      },
    },
  });

  return (
    <div>
      <h1>Mock Data Example</h1>
      <button onClick={addItem}>Add New Item</button>
      <ul>
        {mockData.map((item, index) => (
          <li key={index}>
            <div>
              <strong>ID:</strong> {item.user.id}
            </div>
            <div>
              <strong>Name:</strong> {item.user.name}
            </div>
            <div>
              <strong>Age:</strong> {item.user.age}
            </div>
            <div>
              <strong>Address:</strong> {item.user.address.join(', ')}
            </div>
            <div>
              <strong>Profile Picture:</strong>
            </div>
            <img
              src={item.user.profilePicture}
              alt="Profile"
              style={{ width: '100px', height: '100px' }}
            />
            <div>
              <strong>Registration Date:</strong>{' '}
              {item.user.registrationDate.toDateString()}
            </div>
            <div>
              <strong>Admin:</strong> {item.user.isAdmin ? 'Yes' : 'No'}
            </div>
            <div>
              <strong>Inventory:</strong>
            </div>
            <div>
              <strong>Money:</strong> {item.user.inventory.money}
            </div>
            <div>
              <strong>Connection Users:</strong>
            </div>
            <ul>
              {item.user.inventory.connectionUser.map(
                (connection, connIndex) => (
                  <li key={connIndex}>
                    <div>
                      <strong>User ID:</strong> {connection.userId}
                    </div>
                    <div>
                      <strong>Name:</strong> {connection.name}
                    </div>
                    <div>
                      <strong>Active:</strong>
                      {connection.isActive ? 'Yes' : 'No'}
                    </div>
                    <div>
                      <strong>Address:</strong> {connection.address.join(', ')}
                    </div>
                  </li>
                )
              )}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

4️⃣ 관련 문서 (선택 사항)

• 없음

[suhyeoonn]

작업량이 많았을 텐데도 불구하고, 디테일한 부분까지 꼼꼼하게 신경 써주셨네요~! 👏
수고많으셨습니다!!

[foresec]

수고많으셨습니다! 재귀를 이용해서 mockdata를 만드는 방식이 인상적이네요😊

[foresec]

😊😀👍