오늘 할 일

• [x] 3주차 이슈 뽑기
• [x] 역할 분배, 이슈 assign
• [ ] 백엔드 이슈 input / output 논의
• [x] 백엔드 인가 수준 정하기
• [x] svg 뷰 방식 공유

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를 통해서 다시 렌더링

3주차 이슈뽑기