페이지 API 데이터 구조에 대한 고민

메인 페이지

스니커즈 래플 플랫폼의 페이지 구현을 위해 API 데이터를 어떻게 보내줄지 고민했습니다.

기획 방향

핵심 정보

현재는 MVP에 집중하는 단계이기에, 래플 이벤트 전체 조회 외 특별한 컴포넌트들은 구현하지 않은 상태입니다. 래플 컴포넌트는 물론 여러 래플들로 구성되어있습니다. 래플은 신발의 이미지, 이름, 가격, 최근 가격 정보 등이 올 수 있는데, MVP 단계에서는 앞의 3가지 정보만 구현하려 합니다.

래플 전체 조회 GET /raffles

{
  "data" : {
    {

    'raffleId': '001',
    'productModelNumb': '002',
    'productImg': 'url/3.jpg',
    'productPrice': 254,000,

  },
    {
    'raffleId': '001',
    'productModelNumb': '002',
    'productImg': 'url/3.jpg',
    'productPrice': 254,000,
  },
}

키-값 구조

/raffles 주소로 GET 요청 시 'data'라는 키의 값으로 요청한 데이터가 반환되도록 했습니다.

data 라는 키로 전달해주는 것이 직관적이고 또 추후 반환받는 데이터가 몇개인지 알려주는 count 프로퍼티를 추가할 가능성도 있기 때문에 data라는 키로 프로퍼티를 구성해주었습니다. 이러한 키-값 관련 컨벤션이 있는지도 시간이 된다면 찾아볼 생각입니다.

데이터 상세

데이터의 주요 내용은 아래와 같습니다.

• raffleId : raffle 테이블의 PK값입니다. 예) 123, 212
• productName : 제품명입니다. product 테이블에는 productName과 productModel명이 있습니다. 실제 패션업계에서도 이 두 정보를 구분하여 사용하는데, productName은 닉네임이고, productModel은 상품의 Primary key라고 보시면 됩니다. 모델명은 상세페이지에서 보여주어도 되는 세부 정보에 포함되기 때문에 여기서는 productName만 보여주는 것이 적절합니다.
• productImg
• productPrice : 현재는 KRW 기준으로 전달할 예정입니다. 패션업계에서 오더시트를 작성할 때 수출업을 하는 기업인 경우 usd 기준으로 하는 것이 좋지만, 일단 mvp 단계에서는 이 정도로만 해두기로 합니다.

상세 페이지

데이터 구조 개괄

백엔드 관점에서 가장 관심이 가는 페이지는 상세 페이지입니다. 이전 루트 페이지에서는 여러 래플들을 보여주었다면, 상세 페이지에서는 하나의 래플에 대한 상세 정보를 보여줍니다.

상세 페이지의 데이터의 유형은 총 3단계로 구분할 수 있습니다.

• 제품 정보
• 과거 래플 히스토리 정보
• 현재 래플 추이 정보

예시로 정리해보겠습니다.

래플 상세 조회 GET /raffles/:raffleId

{
  "data" : {
    "productInfo": {
        "raffleId": "001",
        "productModelNumb": "002",
        "productName": "Jordan retro",
        "productImg": "url.com/3.jpg",
        "productColor": "red/white mix",
  },
  "previousRaffleHistory": {
     "priceMinMax" : [120000, 340000],
     "previousPriceHistory": [
      {"date": "2022-01-28", "averagePrice": 354,000},
      {"date": "2022-02-02", "averagePrice": 310,000},
      {"date": "2022-02-12", "averagePrice": 304,000},
      {"date": "2022-02-20", "averagePrice": 224,000},
     ]
  },
  "currentRaffleHistory": [
    {"bidId": 001, "bidSize": 275, "bidPrice": 210,000, "bidQuanty": 1, "createdAt": datetime},
    {"bidId": 002, "bidSize": 285, "bidPrice": 295,000, "bidQuanty": 1, "createdAt": datetime},
    {"bidId": 003, "bidSize": 255, "bidPrice": 270,000, "bidQuanty": 2, "createdAt": datetime},
    {"bidId": 004, "bidSize": 245, "bidPrice": 320,000, "bidQuanty": 1, "createdAt": datetime},
    {"bidId": 005, "bidSize": 235, "bidPrice": 220,000, "bidQuanty": 2, "createdAt": datetime},
  ],
}

데이터 구조 상세

제품 정보(productInfo)

• productId : 현재 래플이 다루고 있는 상품 정보
• productModelNumb : 상품의 모델명. 패션업계에서 보통 sku넘버라고 부르는 정보
• productName : 상품의 닉네임
• productImg
• productColor

과거 래플 히스토리 정보(previousRaffleHistory) : 최근 5주간 가격 변동 추이

• priceMinMax : 최근 5주기간 동안 최저가와 최고가 정보를 담은 배열
• previousPriceHistory : 주차 별 체결 데이터
• currentRaffleHistory : 현재

과거 래플 히스토리 정보

1주차를 하나의 프로퍼티로 시각화

최근 5주간 가격 변동 추이를 기준으로 합니다. 문제는 어떤 관점에 따라 달라진다는 점인데, 1) 1주짜리 래플 이벤트가 5번 진행되었다도 될 수 있고, 2) 5주 동안 계속 여러번 래플 이벤트가 있어왔는데, 각 주당 최고 또는 평균 입찰가일 수도 있습니다.

주차로 구분하지 않고 시계열 순으로 시각화

와이어 프레임에 나타난 대로 1주차를 하나의 프로퍼티로 표현할 경우, 고민해야할 문제가 더 생깁니다. 만약 1주간 데이터가 없는 경우, 그 주차는 빈칸이 되어버립니다. 물론 테스트모드에서 각 주차별로 더미 이벤트 데이터를 인위적으로 생성할 수 있겠지만, 현실과는 다소 멀어지는 방향이라는 생각이 듭니다.

팀원과 이에 대해 상의한 결과 주차로 구분하지 않고, 주차별로 구분할 필요 없이 시계열 순으로 우선 데이터를 보여주는 것이 의견으로 좁혀졌습니다. 그 이유는 굳이 지금 이를 다 정할 필요는 없다는 것이 컸습니다. 현재 프로젝트 스코프 상 라이브러리를 활용하여 시각화를 할 예정인데, 라이브러리에 어차피 시계열 데이터를 전달할 것이고(추정) 그에 따라 어떻게 시각화할지는 라이브러리 마다 다르기 때문입니다. 구현 단계에 가서 휴리스틱하게 결정하는 것이 프로젝트 관리 관점에서 더 좋은 판단이라는 생각을 했습니다.

그래프 용 데이터셋 전달 방식

Recharts

import React, { PureComponent } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },

react-chartjs-2

import { Line } from 'react-chartjs-2';

<Line
  datasetIdKey='id'
  data={{
    labels: ['Jun', 'Jul', 'Aug'],
    datasets: [
      {
        id: 1,
        label: '',
        data: [5, 6, 7],
      },
      {
        id: 2,
        label: '',
        data: [3, 2, 1],
      },
    ],
  }}
/>

프로젝트 상세 페이지에서는 그래프로 래플 가격 히스토리를 시각화합니다. 시각화를 하기 위해선 데이터셋이 필요하고 데이터셋은 나름의 형식이 있습니다. 라이브러리 또는 그래프 유형마다 데이터셋의 형식이 달라지지만 대부분 객체들을 모은 배열 형식인 것으로 보입니다. 아직 라이브러리와 그래프 옵션을 선택하지 않은 상황이기 때문에 객체로 보내준다는 것만 알고 데이터셋을 준비하려 합니다.

https://recharts.org/en-US/examples/CustomizedLabelLineChart
https://react-chartjs-2.js.org/docs/working-with-datasets/