1주차미션_unyeon

언년/week1/chapter1_erd_ha.html

@@ -0,0 +1,181 @@
+
+<style>
+#erd { width: 100%; overflow-x: auto; }
+#erd svg { min-width: 900px; }
+</style>
+<div id="erd"></div>
+<script type="module">
+import mermaid from 'https://esm.sh/mermaid@11/dist/mermaid.esm.min.mjs';
+const dark = matchMedia('(prefers-color-scheme: dark)').matches;
+await document.fonts.ready;
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'base',
+  fontFamily: '"Anthropic Sans", sans-serif',
+  themeVariables: {
+    darkMode: dark,
+    fontSize: '13px',
+    fontFamily: '"Anthropic Sans", sans-serif',
+    lineColor: dark ? '#9c9a92' : '#73726c',
+    textColor: dark ? '#c2c0b6' : '#3d3d3a',
+    primaryColor: dark ? '#2a2a3a' : '#e8eaf6',
+    primaryBorderColor: dark ? '#534AB7' : '#534AB7',
+    primaryTextColor: dark ? '#c2c0b6' : '#26215C',
+  },
+});
+const diagram = `erDiagram
+  region {
+    bigint id PK
+    varchar name
+    datetime created_at
+    datetime updated_at
+  }
+  member {
+    bigint id PK
+    varchar social_type
+    varchar social_id
+    varchar name
+    varchar nickname
+    varchar profile_image_url
+    varchar phone_num
+    boolean phone_verified
+    date birth
+    varchar gender
+    varchar address
+    varchar spec_address
+    int point
+    varchar status
+    datetime inactive_date
+    datetime created_at
+    datetime updated_at
+  }
+  terms {
+    bigint id PK
+    varchar title
+    text content
+    boolean optional
+    datetime created_at
+    datetime updated_at
+  }
+  member_agree {
+    bigint member_id FK
+    bigint terms_id FK
+    datetime created_at
+    datetime updated_at
+  }
+  food_category {
+    bigint id PK
+    varchar name
+    datetime created_at
+    datetime updated_at
+  }
+  member_prefer {
+    bigint member_id FK
+    bigint food_id FK
+    datetime created_at
+    datetime updated_at
+  }
+  store {
+    bigint id PK
+    bigint region_id FK
+    bigint food_category_id FK
+    varchar name
+    text description
+    decimal lat
+    decimal lng
+    varchar address
+    varchar status
+    datetime created_at
+    datetime updated_at
+  }
+  store_image {
+    bigint id PK
+    bigint store_id FK
+    varchar image_url
+    datetime created_at
+    datetime updated_at
+  }
+  store_hours {
+    bigint id PK
+    bigint store_id FK
+    varchar day_of_week
+    time open_time
+    time close_time
+    datetime created_at
+    datetime updated_at
+  }
+  mission {
+    bigint id PK
+    bigint store_id FK
+    varchar title
+    int reward
+    varchar spec
+    date dead_line
+    datetime created_at
+    datetime updated_at
+  }
+  member_mission {
+    bigint member_id FK
+    bigint mission_id FK
+    varchar status
+    datetime created_at
+    datetime updated_at
+  }
+  review {
+    bigint id PK
+    bigint member_id FK
+    bigint store_id FK
+    text content
+    decimal score
+    varchar owner_reply
+    datetime created_at
+    datetime updated_at
+  }
+  review_image {
+    bigint id PK
+    bigint review_id FK
+    varchar image_url
+    datetime created_at
+    datetime updated_at
+  }
+
+  region ||--o{ store : "1:N"
+  member ||--o{ member_agree : "약관동의"
+  terms ||--o{ member_agree : "약관목록"
+  member ||--o{ member_prefer : "선호음식"
+  food_category ||--o{ member_prefer : "음식분류"
+  food_category ||--o{ store : "가게분류"
+  store ||--o{ store_image : "가게이미지"
+  store ||--o{ store_hours : "영업시간"
+  store ||--o{ mission : "미션등록"
+  member ||--o{ member_mission : "미션도전"
+  mission ||--o{ member_mission : "미션현황"
+  member ||--o{ review : "리뷰작성"
+  store ||--o{ review : "가게리뷰"
+  review ||--o{ review_image : "리뷰이미지"
+`;
+const { svg } = await mermaid.render('erd-svg', diagram);
+document.getElementById('erd').innerHTML = svg;
+document.querySelectorAll('#erd svg.erDiagram .node').forEach(node => {
+  const firstPath = node.querySelector('path[d]');
+  if (!firstPath) return;
+  const d = firstPath.getAttribute('d');
+  const nums = d.match(/-?[\d.]+/g)?.map(Number);
+  if (!nums || nums.length < 8) return;
+  const xs = [nums[0], nums[2], nums[4], nums[6]];
+  const ys = [nums[1], nums[3], nums[5], nums[7]];
+  const x = Math.min(...xs), y = Math.min(...ys);
+  const w = Math.max(...xs) - x, h = Math.max(...ys) - y;
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('x', x); rect.setAttribute('y', y);
+  rect.setAttribute('width', w); rect.setAttribute('height', h);
+  rect.setAttribute('rx', '8');
+  for (const a of ['fill', 'stroke', 'stroke-width', 'class', 'style']) {
+    if (firstPath.hasAttribute(a)) rect.setAttribute(a, firstPath.getAttribute(a));
+  }
+  firstPath.replaceWith(rect);
+});
+document.querySelectorAll('#erd svg.erDiagram .row-rect-odd path, #erd svg.erDiagram .row-rect-even path').forEach(p => {
+  p.setAttribute('stroke', 'none');
+});
+</script>