feat: 더미데이터 추가 및 버그 해결 (#20)

* feat: slope 데이터 추가 * feat: 잘못된 카메라 매칭 데이터 수정 * fix: hover와 색상문제 충돌 해결 * fix: 뷰포트 이상으로 리스트가 길어질 경우 잘못된 위치로 확대 되는 현상 해결
Nexters · Aug 20, 2024 · 4bfddc2 · 4bfddc2
1 parent ed696fb
commit 4bfddc2
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 79 deletions.
diff --git a/src/entities/slop/image/elysian-gangchon/pegasus-slop-path.tsx b/src/entities/slop/image/elysian-gangchon/pegasus-slop-path.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { cn } from '@/shared/lib';
+
+const PegasusSlopPath = ({ color }: { color?: string }) => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 376 210"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className={cn('fill-current', color ? color : 'fill-[#447EFF]')}
+        d="M197.5 121.5L197.916 120.876L197.5 121.5ZM261 164L259.455 155.479L252.848 161.078L261 164ZM157.152 108.536C157.56 108.606 157.948 108.332 158.018 107.923C158.088 107.515 157.814 107.127 157.406 107.057L157.152 108.536ZM160.535 107.653C160.13 107.57 159.733 107.831 159.649 108.237C159.566 108.642 159.827 109.039 160.233 109.122L160.535 107.653ZM163.305 109.791C163.709 109.884 164.111 109.631 164.203 109.227C164.296 108.824 164.043 108.421 163.639 108.329L163.305 109.791ZM166.735 109.067C166.333 108.967 165.926 109.212 165.827 109.615C165.727 110.017 165.972 110.423 166.374 110.523L166.735 109.067ZM169.425 111.306C169.825 111.412 170.236 111.174 170.342 110.774C170.448 110.373 170.21 109.963 169.81 109.856L169.425 111.306ZM172.873 110.698C172.474 110.584 172.06 110.816 171.946 111.214C171.833 111.613 172.065 112.027 172.463 112.141L172.873 110.698ZM175.487 113.027C175.884 113.147 176.302 112.923 176.422 112.527C176.542 112.13 176.318 111.712 175.922 111.592L175.487 113.027ZM178.956 112.542C178.561 112.414 178.139 112.63 178.011 113.024C177.883 113.418 178.099 113.841 178.493 113.969L178.956 112.542ZM181.478 114.97C181.869 115.107 182.296 114.9 182.433 114.509C182.569 114.117 182.362 113.69 181.971 113.554L181.478 114.97ZM184.964 114.636C184.576 114.49 184.143 114.686 183.998 115.074C183.852 115.461 184.048 115.894 184.436 116.04L184.964 114.636ZM187.36 117.187C187.744 117.345 188.182 117.161 188.339 116.778C188.496 116.395 188.313 115.957 187.93 115.8L187.36 117.187ZM190.861 117.064C190.484 116.893 190.04 117.059 189.868 117.437C189.697 117.814 189.864 118.258 190.241 118.43L190.861 117.064ZM193.059 119.789C193.428 119.978 193.88 119.833 194.069 119.465C194.259 119.097 194.114 118.644 193.745 118.455L193.059 119.789ZM196.555 120.014C196.2 119.8 195.739 119.915 195.525 120.269C195.312 120.624 195.426 121.085 195.78 121.299L196.555 120.014ZM198.314 122.933C198.662 123.159 199.126 123.06 199.352 122.713C199.577 122.366 199.479 121.901 199.131 121.675L198.314 122.933ZM201.602 123.25C201.252 123.03 200.789 123.136 200.569 123.487C200.349 123.838 200.455 124.301 200.806 124.521L201.602 123.25ZM203.321 126.08C203.674 126.296 204.136 126.186 204.352 125.832C204.569 125.479 204.458 125.017 204.105 124.801L203.321 126.08ZM206.625 126.334C206.27 126.12 205.809 126.233 205.595 126.588C205.381 126.942 205.494 127.403 205.849 127.618L206.625 126.334ZM208.372 129.135C208.728 129.348 209.188 129.232 209.401 128.877C209.614 128.521 209.498 128.061 209.143 127.848L208.372 129.135ZM211.671 129.357C211.316 129.146 210.855 129.262 210.643 129.618C210.431 129.974 210.548 130.434 210.904 130.646L211.671 129.357ZM213.44 132.154C213.796 132.365 214.256 132.248 214.468 131.892C214.679 131.535 214.562 131.075 214.206 130.864L213.44 132.154ZM216.742 132.369C216.386 132.158 215.926 132.275 215.714 132.631C215.503 132.988 215.62 133.448 215.976 133.659L216.742 132.369ZM218.512 135.165C218.868 135.376 219.328 135.259 219.54 134.903C219.751 134.547 219.634 134.087 219.278 133.875L218.512 135.165ZM221.813 135.384C221.457 135.172 220.997 135.289 220.785 135.644C220.572 136 220.689 136.46 221.044 136.673L221.813 135.384ZM223.573 138.185C223.929 138.398 224.389 138.282 224.602 137.927C224.815 137.572 224.7 137.111 224.345 136.898L223.573 138.185ZM226.873 138.419C226.518 138.205 226.057 138.319 225.843 138.673C225.629 139.028 225.743 139.489 226.097 139.703L226.873 138.419ZM228.615 141.229C228.969 141.445 229.43 141.333 229.646 140.979C229.861 140.625 229.749 140.164 229.395 139.948L228.615 141.229ZM231.912 141.488C231.56 141.271 231.098 141.382 230.881 141.734C230.664 142.087 230.774 142.549 231.127 142.766L231.912 141.488ZM233.63 144.315C233.981 144.534 234.444 144.427 234.663 144.075C234.882 143.724 234.774 143.261 234.423 143.042L233.63 144.315ZM236.925 144.611C236.574 144.39 236.111 144.495 235.89 144.845C235.669 145.195 235.773 145.658 236.123 145.879L236.925 144.611ZM238.605 147.461C238.954 147.685 239.418 147.584 239.642 147.236C239.866 146.887 239.765 146.423 239.416 146.199L238.605 147.461ZM241.896 147.809C241.549 147.582 241.084 147.678 240.857 148.025C240.63 148.371 240.726 148.836 241.073 149.063L241.896 147.809ZM243.523 150.69C243.867 150.921 244.333 150.829 244.564 150.485C244.795 150.141 244.703 149.675 244.36 149.444L243.523 150.69ZM246.804 151.11C246.463 150.874 245.996 150.96 245.761 151.3C245.525 151.641 245.61 152.108 245.951 152.344L246.804 151.11ZM248.35 154.031C248.687 154.272 249.155 154.194 249.396 153.857C249.638 153.521 249.56 153.052 249.223 152.811L248.35 154.031ZM251.611 154.556C251.279 154.308 250.809 154.376 250.561 154.708C250.313 155.04 250.381 155.51 250.713 155.758L251.611 154.556ZM253.044 157.546C253.369 157.803 253.841 157.747 254.097 157.422C254.354 157.097 254.299 156.626 253.974 156.369L253.044 157.546ZM256.275 158.25C255.959 157.982 255.486 158.021 255.218 158.336C254.949 158.652 254.988 159.125 255.303 159.393L256.275 158.25ZM257.476 161.331C257.777 161.615 258.252 161.602 258.536 161.3C258.82 160.999 258.806 160.524 258.505 160.24L257.476 161.331ZM260.606 162.375C260.329 162.067 259.854 162.042 259.547 162.32C259.239 162.597 259.214 163.071 259.491 163.379L260.606 162.375ZM155.613 108.293C156.065 108.356 156.58 108.437 157.152 108.536L157.406 107.057C156.822 106.957 156.292 106.873 155.821 106.808L155.613 108.293ZM160.233 109.122C161.186 109.319 162.215 109.542 163.305 109.791L163.639 108.329C162.54 108.078 161.5 107.852 160.535 107.653L160.233 109.122ZM166.374 110.523C167.362 110.767 168.382 111.029 169.425 111.306L169.81 109.856C168.758 109.577 167.731 109.313 166.735 109.067L166.374 110.523ZM172.463 112.141C173.461 112.424 174.471 112.719 175.487 113.027L175.922 111.592C174.897 111.281 173.879 110.983 172.873 110.698L172.463 112.141ZM178.493 113.969C179.492 114.292 180.489 114.626 181.478 114.97L181.971 113.554C180.971 113.206 179.963 112.868 178.956 112.542L178.493 113.969ZM184.436 116.04C185.428 116.413 186.406 116.796 187.36 117.187L187.93 115.8C186.96 115.402 185.969 115.014 184.964 114.636L184.436 116.04ZM190.241 118.43C191.219 118.874 192.161 119.327 193.059 119.789L193.745 118.455C192.823 117.981 191.859 117.517 190.861 117.064L190.241 118.43ZM195.78 121.299C196.234 121.572 196.669 121.847 197.084 122.124L197.916 120.876C197.48 120.585 197.026 120.298 196.555 120.014L195.78 121.299ZM197.084 122.124C197.478 122.387 197.889 122.657 198.314 122.933L199.131 121.675C198.71 121.402 198.305 121.135 197.916 120.876L197.084 122.124ZM200.806 124.521C201.608 125.024 202.448 125.544 203.321 126.08L204.105 124.801C203.235 124.267 202.399 123.75 201.602 123.25L200.806 124.521ZM205.849 127.618C206.668 128.113 207.51 128.619 208.372 129.135L209.143 127.848C208.282 127.333 207.442 126.828 206.625 126.334L205.849 127.618ZM210.904 130.646C211.736 131.141 212.582 131.644 213.44 132.154L214.206 130.864C213.348 130.355 212.502 129.852 211.671 129.357L210.904 130.646ZM215.976 133.659C216.813 134.156 217.659 134.658 218.512 135.165L219.278 133.875C218.425 133.368 217.579 132.866 216.742 132.369L215.976 133.659ZM221.044 136.673C221.884 137.173 222.727 137.678 223.573 138.185L224.345 136.898C223.497 136.39 222.653 135.885 221.813 135.384L221.044 136.673ZM226.097 139.703C226.937 140.21 227.777 140.719 228.615 141.229L229.395 139.948C228.555 139.436 227.713 138.926 226.873 138.419L226.097 139.703ZM231.127 142.766C231.965 143.282 232.8 143.798 233.63 144.315L234.423 143.042C233.59 142.524 232.753 142.006 231.912 141.488L231.127 142.766ZM236.123 145.879C236.959 146.407 237.786 146.935 238.605 147.461L239.416 146.199C238.594 145.671 237.763 145.141 236.925 144.611L236.123 145.879ZM241.073 149.063C241.903 149.608 242.72 150.15 243.523 150.69L244.36 149.444C243.552 148.902 242.73 148.356 241.896 147.809L241.073 149.063ZM245.951 152.344C246.771 152.911 247.571 153.473 248.35 154.031L249.223 152.811C248.437 152.248 247.63 151.681 246.804 151.11L245.951 152.344ZM250.713 155.758C251.522 156.362 252.3 156.959 253.044 157.546L253.974 156.369C253.218 155.772 252.429 155.168 251.611 154.556L250.713 155.758ZM255.303 159.393C256.083 160.056 256.809 160.702 257.476 161.331L258.505 160.24C257.816 159.59 257.071 158.927 256.275 158.25L255.303 159.393Z"
+      />
+    </svg>
+  );
+};
+
+export default PegasusSlopPath;
diff --git a/src/entities/slop/image/elysian-gangchon/puma-slop-path.tsx b/src/entities/slop/image/elysian-gangchon/puma-slop-path.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { cn } from '@/shared/lib';
+
+const PumaSlopPath = ({ color }: { color?: string }) => {
+  const defaultStrokeColor = 'stroke-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 376 210"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className={cn('stroke-current', strokeColorClass)}
+        d="M118 28C126.333 30.3333 136.5 32.5 151 39C157.452 41.8924 167.247 46.0257 179 48.5C188.5 50.5 197.833 52.3333 201 55"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+        strokeDasharray="3 3"
+      />
+    </svg>
+  );
+};
+
+export default PumaSlopPath;
diff --git a/src/entities/slop/image/high1/apollo3-slop-path.tsx b/src/entities/slop/image/high1/apollo3-slop-path.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { cn } from '@/shared/lib';
+
+const Apollo3SlopPath = ({ color }: { color?: string }) => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 376 210"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className={cn('fill-current', color ? color : 'fill-[#171D23]')}
+        d="M254.158 89.8591C254.357 89.4955 254.223 89.0399 253.859 88.8416C253.496 88.6432 253.04 88.7772 252.842 89.1409L254.158 89.8591ZM224 127.5L223.431 127.012L223.359 127.095L223.315 127.195L224 127.5ZM210.561 142.392C210.225 142.635 210.149 143.103 210.392 143.439C210.635 143.775 211.103 143.851 211.439 143.608L210.561 142.392ZM220 136.5L220.439 137.108L220.603 136.99L220.685 136.805L220 136.5ZM212.564 142.796C212.9 142.553 212.976 142.084 212.733 141.748C212.49 141.413 212.022 141.337 211.686 141.579L212.564 142.796ZM213.936 139.954C213.6 140.197 213.524 140.666 213.767 141.002C214.01 141.337 214.478 141.413 214.814 141.171L213.936 139.954ZM217.064 139.546C217.4 139.303 217.476 138.834 217.233 138.498C216.99 138.163 216.522 138.087 216.186 138.329L217.064 139.546ZM218.436 136.704C218.1 136.947 218.024 137.416 218.267 137.752C218.51 138.087 218.978 138.163 219.314 137.921L218.436 136.704ZM221.685 134.555C221.854 134.176 221.683 133.733 221.305 133.565C220.926 133.396 220.483 133.567 220.315 133.945L221.685 134.555ZM222.315 129.445C222.146 129.824 222.317 130.267 222.695 130.435C223.074 130.604 223.517 130.433 223.685 130.055L222.315 129.445ZM225.87 126.462C226.138 126.146 226.099 125.672 225.783 125.404C225.467 125.137 224.994 125.176 224.726 125.492L225.87 126.462ZM227.297 122.429C227.032 122.748 227.076 123.221 227.394 123.485C227.713 123.75 228.186 123.706 228.45 123.388L227.297 122.429ZM230.998 120.282C231.258 119.96 231.207 119.487 230.885 119.227C230.563 118.967 230.091 119.018 229.83 119.34L230.998 120.282ZM232.282 116.208C232.034 116.54 232.103 117.01 232.436 117.257C232.768 117.505 233.238 117.436 233.485 117.103L232.282 116.208ZM235.896 114.174C236.224 113.921 236.285 113.45 236.031 113.122C235.778 112.795 235.307 112.734 234.979 112.987L235.896 114.174ZM238.322 110.612C237.982 110.849 237.899 111.317 238.137 111.656C238.374 111.996 238.841 112.079 239.181 111.841L238.322 110.612ZM242.491 109.381C242.811 109.119 242.858 108.646 242.596 108.326C242.333 108.005 241.861 107.958 241.54 108.221L242.491 109.381ZM244.206 105.482C243.98 105.829 244.078 106.294 244.425 106.52C244.772 106.746 245.237 106.648 245.463 106.301L244.206 105.482ZM246.683 102.264C246.835 101.879 246.647 101.443 246.262 101.291C245.877 101.138 245.441 101.327 245.288 101.712L246.683 102.264ZM247.263 97.9048C247.05 98.2599 247.165 98.7206 247.52 98.9339C247.875 99.1472 248.336 99.0322 248.549 98.6771L247.263 97.9048ZM250.77 95.1856C250.998 94.8397 250.903 94.3746 250.557 94.1467C250.211 93.9189 249.746 94.0146 249.518 94.3605L250.77 95.1856ZM251.797 90.883C251.575 91.2328 251.679 91.6962 252.028 91.9182C252.378 92.1402 252.841 92.0367 253.063 91.687L251.797 90.883ZM211.439 143.608L212.564 142.796L211.686 141.579L210.561 142.392L211.439 143.608ZM214.814 141.171L217.064 139.546L216.186 138.329L213.936 139.954L214.814 141.171ZM219.314 137.921L220.439 137.108L219.561 135.892L218.436 136.704L219.314 137.921ZM220.685 136.805L221.685 134.555L220.315 133.945L219.315 136.195L220.685 136.805ZM223.685 130.055L224.685 127.805L223.315 127.195L222.315 129.445L223.685 130.055ZM224.569 127.988C224.956 127.537 225.396 127.021 225.87 126.462L224.726 125.492C224.253 126.049 223.815 126.563 223.431 127.012L224.569 127.988ZM228.45 123.388C229.313 122.349 230.188 121.286 230.998 120.282L229.83 119.34C229.026 120.337 228.156 121.395 227.297 122.429L228.45 123.388ZM233.485 117.103C234.032 116.368 234.471 115.736 234.671 115.335L233.329 114.665C233.198 114.927 232.841 115.456 232.282 116.208L233.485 117.103ZM234.671 115.335C234.708 115.262 234.812 115.118 235.039 114.899C235.256 114.689 235.544 114.447 235.896 114.174L234.979 112.987C234.606 113.276 234.269 113.556 233.995 113.821C233.731 114.077 233.48 114.362 233.329 114.665L234.671 115.335ZM239.181 111.841C240.279 111.074 241.441 110.241 242.491 109.381L241.54 108.221C240.537 109.043 239.414 109.848 238.322 110.612L239.181 111.841ZM245.463 106.301C245.926 105.59 246.25 104.811 246.25 104H244.75C244.75 104.412 244.582 104.904 244.206 105.482L245.463 106.301ZM246.25 104C246.25 103.588 246.389 103.007 246.683 102.264L245.288 101.712C244.97 102.517 244.75 103.306 244.75 104H246.25ZM248.549 98.6771C249.236 97.5336 250.007 96.3447 250.77 95.1856L249.518 94.3605C248.752 95.5229 247.967 96.7333 247.263 97.9048L248.549 98.6771ZM253.063 91.687C253.485 91.0222 253.862 90.403 254.158 89.8591L252.842 89.1409C252.568 89.6421 252.212 90.2291 251.797 90.883L253.063 91.687Z"
+      />
+    </svg>
+  );
+};
+
+export default Apollo3SlopPath;
diff --git a/src/entities/slop/model/elysian-gangchon.tsx b/src/entities/slop/model/elysian-gangchon.tsx
@@ -7,6 +7,8 @@ import JaguarSlopPath from '../image/elysian-gangchon/jaguar-slop-path';
 import LeopardSlopPath from '../image/elysian-gangchon/leopard-slop-path';
 import ElysianGangchonMap from '../image/elysian-gangchon/map';
 import PandaSlopPath from '../image/elysian-gangchon/panda-slop-path';
+import PegasusSlopPath from '../image/elysian-gangchon/pegasus-slop-path';
+import PumaSlopPath from '../image/elysian-gangchon/puma-slop-path';
 import RabbitSlopPath from '../image/elysian-gangchon/rabbit-slop-path';
 import ZebraSlopPath from '../image/elysian-gangchon/zebra-slop-path';
 import type { ResortInfo } from './model';
@@ -50,7 +52,7 @@ export const ELYSIAN_GANGCHON: ResortInfo = {
       id: 'pegasus-slop',
       level: 'INTERMEDIATE',
       name: '페가수스슬로프',
-      Element: () => <></>,
+      Element: PegasusSlopPath,
       webcamId: 'ski-house',
       isOpen: true,
     },
@@ -73,7 +75,7 @@ export const ELYSIAN_GANGCHON: ResortInfo = {
       id: 'puma-slop',
       level: 'INTERMEDIATE',
       name: '퓨마슬로프',
-      Element: () => <></>,
+      Element: PumaSlopPath,
       webcamId: 'alp-house',
       isOpen: true,
     },

diff --git a/src/entities/slop/model/gonjiam.tsx b/src/entities/slop/model/gonjiam.tsx
@@ -21,6 +21,7 @@ export const GONJIAM: ResortInfo = {
       level: 'UPPER_BEGINNER',
       name: '와이낫슬로프',
       Element: WhynotSlopPath,
+      webcamId: 'upper-base',
       isOpen: true,
     },
     {
@@ -37,14 +38,6 @@ export const GONJIAM: ResortInfo = {
       Element: Gram2SlopPath,
       isOpen: true,
     },
-    {
-      id: 'whynot1-slop',
-      level: 'UPPER_BEGINNER',
-      name: '와이낫슬로프 1',
-      Element: () => <></>,
-      webcamId: 'upper-base',
-      isOpen: true,
-    },
     {
       id: 'cnp1-slop',
       level: 'UPPER_BEGINNER',
@@ -95,7 +88,7 @@ export const GONJIAM: ResortInfo = {
       level: 'BEGINNER',
       name: '휘센슬로프',
       Element: WhisenSlopPath,
-      webcamId: 'upper-base',
+      webcamId: 'whisen-base',
       isOpen: true,
     },
   ],

diff --git a/src/entities/slop/model/high1.tsx b/src/entities/slop/model/high1.tsx
@@ -2,6 +2,7 @@
 
 import Apollo1SlopPath from '../image/high1/apollo1-slop-path';
 import Apollo2SlopPath from '../image/high1/apollo2-slop-path';
+import Apollo3SlopPath from '../image/high1/apollo3-slop-path';
 import Apollo4SlopPath from '../image/high1/apollo4-slop-path';
 import Apollo6SlopPath from '../image/high1/apollo6-slop-path';
 import Athena2SlopPath from '../image/high1/athena2-slop-path';
@@ -66,14 +67,6 @@ export const HIGH1: ResortInfo = {
       Element: Victoria2SlopPath,
       isOpen: true,
     },
-    {
-      id: 'victoria3-slop',
-      level: 'EXPERT',
-      name: '빅토리아슬로프 3',
-      Element: () => <></>,
-      webcamId: 'victoria-top',
-      isOpen: true,
-    },
     {
       id: 'hera1-slop',
       level: 'INTERMEDIATE',
@@ -114,7 +107,7 @@ export const HIGH1: ResortInfo = {
       id: 'apollo3-slop',
       level: 'ADVANCED',
       name: '아폴로슬로프 3',
-      Element: () => <></>,
+      Element: Apollo3SlopPath,
       isOpen: true,
     },
     {
@@ -125,29 +118,13 @@ export const HIGH1: ResortInfo = {
       webcamId: 'apollo4-mid',
       isOpen: true,
     },
-    {
-      id: 'apollo5-slop',
-      level: 'EXPERT',
-      name: '아폴로슬로프 5',
-      Element: () => <></>,
-      isOpen: true,
-    },
     {
       id: 'apollo6-slop',
       level: 'ADVANCED',
       name: '아폴로슬로프 6',
       Element: Apollo6SlopPath,
       isOpen: true,
     },
-    {
-      id: 'athena1-slop',
-      name: '아테나슬로프 1',
-      level: 'BEGINNER',
-      //TODO: 확인 필요
-      Element: () => <></>,
-      webcamId: 'athena1-entry',
-      isOpen: true,
-    },
     {
       id: 'athena2-slop',
       level: 'INTERMEDIATE',
@@ -163,13 +140,6 @@ export const HIGH1: ResortInfo = {
       Element: Athena3SlopPath,
       isOpen: true,
     },
-    {
-      id: 'athena3-1-slop',
-      level: 'BEGINNER',
-      name: '아테나슬로프 3-1',
-      Element: () => <></>,
-      isOpen: true,
-    },
   ],
   webcams: [
     {

diff --git a/src/pages/discovery-detail/ui/discovery-detail-page.tsx b/src/pages/discovery-detail/ui/discovery-detail-page.tsx
@@ -32,9 +32,9 @@ const DiscoveryDetailPage = ({ params }: { params: { resortId: number } }) => {
   }, []);
 
   const handleFocusSlopCamClick = ({ id }: { id: string }) => {
-    const { left, top, width, height } = containerRef.current!.getBoundingClientRect();
+    const { width, height } = containerRef.current!.getBoundingClientRect();
     const { boundedX, boundedY } = calculateWebcamPosition({
-      containerPosition: { left, top, width, height },
+      containerPosition: { left: 0, top: 0, width, height },
       position: {
         x: cameraPositions[id].x,
         y: cameraPositions[id].y,

diff --git a/src/pages/webcam/ui/webcam-mobile-map-page.tsx b/src/pages/webcam/ui/webcam-mobile-map-page.tsx
@@ -18,9 +18,9 @@ const WebCamMobileMapPage = ({ data }: { data: ResortInfo }) => {
   }, []);
 
   const handleFocusSlopCamClick = ({ id, scale }: { id: string; scale: number }) => {
-    const { left, top, width, height } = containerRef.current!.getBoundingClientRect();
+    const { width, height } = containerRef.current!.getBoundingClientRect();
     const { boundedX, boundedY } = calculateWebcamPosition({
-      containerPosition: { left, top, width, height },
+      containerPosition: { left: 0, top: 0, width, height },
       position: {
         x: cameraPositions[id].x,
         y: cameraPositions[id].y,