SVG 뷰 방식 공유, 렌더링

테스트 용도를 위해서 간단하게 직사각형 두개로 이루어진 공연장 구성
- 섹션은 2개로 이루어져 있으며, 한 섹션은 9 * 5 좌석으로 이루어진다.
- A섹션은 9*5가 가득 채워진 좌석 배치를, B섹션은 중간중간 빈칸이 있는 좌석으로 이루어지게 해서
추후 데모를 위해서 살짝 더 복잡한 도형(도형을 어떻게 그렸지라는 신기함이 들도록)으로 변경하자

//위 svg 이미지에서 섹션들의 point들
const SECTIONS = [
  {
    id: "A",
    points: [
      [447.121, 869.114],
      [447.121 + 1118.19, 869.114],
      [447.121 + 1118.19, 869.114 + 1822.87],
      [447.121, 869.114 + 1822.87],
    ],
  },
  {
    id: "B",
    points: [
      [2662.6, 869.114],
      [2662.6 + 1118.11, 869.114],
      [2662.6 + 1118.11, 869.114 + 1822.9],
      [2662.6, 869.114 + 1822.9],
    ],
  },
];

//section 정보, 5개씩 4줄인 형태입니다
//placeId는 몰라서 string 넘었습니다. ㅠㅠ
//sectionB 는 중간에 한자리씩 빠진 형태입니다
const  sectionA= {
  "id": 1,
  "name": "A구역",
  "colLen": 5,
  "seats":[true,true,true,true,true,true,true,true,true,true,true,true,true,true,true,true,true,true,true,true],
  "placeId": "placeId" 
}

const sectionB={ 
 "id": 2,
  "name": "B구역",
  "colLen": 5,
  "seats":[true,true,false,true,true,true,true,false,true,true,true,true,false,true,true,true,true,false,true,true],
   "placeId": "placeId"
}

//DB  Place Table
{
	"id" : 1,
	"name" : "공연장 이름",
	"overview-points" : "1_points.json",
	"overview-svg-url" : "/static/1_overview.svg", //백그라운드가 들어갈 이미지 URL
	"overview-height" : 1180,
	"overview-width" : 1800,
	"sections" : [1, 2],
}

//DB 1_points.json
//point는 섹션 위치의 도형 꼭지점 좌표로 point를 통해서 도형을 그린다.
{
    id: "A",
    points: [
      [447.121, 869.114],
      [447.121 + 1118.19, 869.114],
      [447.121 + 1118.19, 869.114 + 1822.87],
      [447.121, 869.114 + 1822.87],
    ],
  },
  {
    id: "B",
    points: [
      [2662.6, 869.114],
      [2662.6 + 1118.11, 869.114],
      [2662.6 + 1118.11, 869.114 + 1822.9],
      [2662.6, 869.114 + 1822.9],
    ],
  },

Place 테이블에 Overview svg에 대한 넓이와 높이를 같이 저장해야한다.
- 테이블에 overview_height, overview_width 필드 추가해야한다.
- 이러면 정규화를 통해서 분리하는게 맞지 않나?
  - overview → overview_height, overview_width
  - 하지만 overview가 PK가 아니기 때문에 3정규화에 만족하지 않는다
  - 하지만 join의 수를 줄이기 위해서 반정규화를 생각해볼 수 있다.
  - 지금 설계된 DB 스키마는 조인의 수를 최대한 줄이는 방향으로 설계되어 있으므로 이 기조를 따라 반정규화로 가자.
- overview라는 데이터가 place 별로 중복되어 사용되는 경우가 없다고 판단해서 하나의 테이블에 유지하는 것이 더 효율적일 것 같다.
결론 : place table에 overview_height, overview_width 필드를 추가한다.

svg 렌더링 방식

백그라운드 이미지는 백엔드에서 전달해주는 url 을 통해서 호출해서 띄워준다.
섹션 렌더링
1. svg viewBox속성의 좌표 크기는 백엔드에 전달해주는 overview-height , overview-width 기준으로 작성
2. 각 섹션은 백엔드에서 전달된 section.points 의 꼭지점 좌표로 그린다. (viewBox 기준 좌표로 원본과 좌표가 일치된다)
좌석
1. section.seats 배열에서 boolean값을 통해서 존재하는 좌석을 렌더링 한다
2. 좌선 현항을 id를 통해서 다시 렌더링

현재 세션 선택하는 부분은 svg 태그들로 이루어져 있고 섹션 부분은 원본 이미지 위에 새롭게 svg를 그려서 넣은 상태

//실제 렌더링되는 SVG
<g class="hover:cursor-pointer">
	<path class="fill-primary" d="M 447.121,869.114L 1565.311,869.114,L 1565.311,2691.984,L 447.121,2691.984 z"></path>
	<text class="fill-typo-display text-[200px]" text-anchor="middle" dominant-baseline="middle" x="1006.2159999999999" y="1780.549">A</text>
</g>

 //api로 전송되는 데이터 
 { 
 "id": "A", 
 "points": [[447.121, 869.114], [1565.311, 869.114], [1565.311, 2691.984], [447.121, 2691.984]] 
 },

서버에서 실제 svg를 전송해주면 클라이언트 쪽에서는 바로 렌더링해서 편할 수 있다. 하지만 스타일리이 서버쪽에서 이루어져야하고 변경이 필요할 때 대응이 어렵다. 그래서 필요한 데이터만 서버에 저장, 전송 그 데이터를 바탕으로 클라이언트에서 렌더링한다 . 이렇게 필요한 데이터만 저장하고 전송한다면 서버에서 저장하는 데이터를 줄이고, 전송시에도 좀 더 작은 크기로 전송이 가능해진다.