[FE][Feat] #184 : Canvas와 Map 레이어 구분 및 겹쳐서 보이게 구현

.github/workflows/auto-assign-reviewers.yml

@@ -2,7 +2,7 @@ name: 'Auto Assign Reviewers'
 
 on:
   pull_request:
-    types: [opened, labeled]
+    types: [opened]
 
 jobs:
   assign_reviewers:
@@ -43,12 +43,13 @@ jobs:
         with:
           script: |
             const targetBranch = context.payload.pull_request.base.ref;
-            const reviewers = targetBranch === 'main' ? 3 : 2;
-            core.setOutput('number_of_reviewers', reviewers);
+            const reviewers = (targetBranch === 'main' || targetBranch === 'development') ? 3 : 2;
+            return { number_of_reviewers: reviewers };
 
       - name: 'Assign Reviewers'
         uses: kentaro-m/[email protected]
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           configuration-path: '.github/auto_assign_config.yml'
           numberOfReviewers: ${{ steps.determine_reviewers.outputs.number_of_reviewers }}
+

.github/workflows/auto-merge.yml

@@ -19,27 +19,33 @@ jobs:
               repo: context.repo.repo,
               pull_number: context.payload.pull_request.number,
             });
-            core.setOutput('prResult', JSON.stringify(pr));
+            return { prResult: JSON.stringify(pr) }
 
       - name: 'Check Approvals and Labels'
         id: check
         uses: actions/github-script@v6
         with:
+          prResult: ${{ steps.pr.outputs.prResult }}
           script: |
-            const pr = JSON.parse(process.env.PR_RESULT);
+            const pr = JSON.parse(inputs.prResult);
             const reviews = await github.rest.pulls.listReviews({
               owner: context.repo.owner,
               repo: context.repo.repo,
               pull_number: pr.number,
             });
-            const approvals = reviews.data.filter(review => review.state === 'APPROVED');
+            const uniqueApprovers = new Set();
+            reviews.data.forEach(review => {
+              if (review.state === 'APPROVED') {
+                uniqueApprovers.add(review.user.login);
+              }
+            });
             const hasLabel = pr.labels.some(label => label.name === '확인 요청');
 
             // 메인 브랜치로 향하는 PR인 경우 리뷰어 3명, 다른 브랜치인 경우 2명 필요
-            const requiredApprovals = pr.base.ref === 'main' ? 3 : 2;
+            const requiredApprovals = (pr.base.ref === 'main' || pr.base.ref === 'development') ? 3 : 2;
 
             // Check 조건 결과를 출력에 설정
-            core.setOutput('result', approvals.length >= requiredApprovals && hasLabel);
+            return { result : uniqueApprovers.size >= requiredApprovals && hasLabel }; 
 
       - name: 'Change Label to 작업 완료'
         if: steps.check.outputs.result == 'true'

frontend/src/component/canvas/Canvas.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { useEffect, useRef } from 'react';
+
+interface ICanvasProps {
+  className?: string;
+  onClick?: () => void;
+  onMouseDown?: () => void;
+  onMouseUp?: () => void;
+  onMouseMove?: () => void;
+}
+
+export const Canvas = (props: ICanvasProps) => {
+  const { className, ...rest } = props;
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+
+    const context = canvas.getContext('2d');
+    if (!context) return;
+
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+  }, []);
+
+  return (
+    <canvas
+      ref={ref}
+      className={classNames('z-1000 absolute h-full w-full bg-transparent', className)}
+      {...rest}
+    />
+  );
+};

frontend/src/component/canvas/CanvasWithMap.tsx

@@ -0,0 +1,20 @@
+import { Canvas } from '@/component/canvas/Canvas.tsx';
+import { Map } from '@/component/maps/Map.tsx';
+import classNames from 'classnames';
+
+interface ICanvasWithMapProps {
+  className?: string;
+  lat: number;
+  lng: number;
+  zoom: number;
+  mapType: string;
+}
+
+export const CanvasWithMap = (props: ICanvasWithMapProps) => {
+  return (
+    <div className={classNames('relative h-screen', props.className)}>
+      <Canvas />
+      <Map lat={props.lat} lng={props.lng} type={props.mapType} zoom={props.zoom} />
+    </div>
+  );
+};

frontend/src/component/header/Header.tsx

@@ -23,7 +23,7 @@ export const Header = (props: IHeaderProps) => {
   return (
     <header
       className={classNames(
-        'z-2000 absolute flex w-full flex-col gap-2.5 bg-transparent p-4',
+        'absolute flex w-full flex-col gap-2.5 bg-transparent p-4',
         props.className,
       )}
     >

frontend/src/component/layout/header/LayoutHeader.tsx

@@ -7,7 +7,7 @@ export const LayoutHeader = () => {
   const { headerOption } = useContext(HeaderContext);
 
   return (
-    <Header className="z-1000">
+    <Header className="z-4000">
       <Header.MainLayout
         leftButton={headerOption.leftButton}
         rightButton={headerOption.rightButton}

frontend/src/pages/GuestView.tsx

@@ -1,6 +1,6 @@
-import { Map } from '@/component/maps/Map.tsx';
 import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider';
 import { useContext, useEffect } from 'react';
+import { CanvasWithMap } from '@/component/canvas/CanvasWithMap.tsx';
 
 export const GuestView = () => {
   const headerContext = useContext(HeaderContext);
@@ -12,9 +12,5 @@ export const GuestView = () => {
   }, []);
 
   // TODO: geoCoding API를 이용해서 현재 위치나 시작위치를 기반으로 자동 좌표 설정 구현 (현재: 하드코딩)
-  return (
-    <div className="h-screen">
-      <Map lat={37.3595704} lng={127.105399} type="naver" zoom={17} />
-    </div>
-  );
+  return <CanvasWithMap lat={37.3595704} lng={127.105399} zoom={14} mapType="naver" />;
 };

frontend/src/stories/example/example.test.ts

@@ -0,0 +1,7 @@
+import { describe, test, expect } from 'vitest';
+
+describe('Git CI 에러 방지용 테스트', () => {
+  test('테스트코드가 아무것도 없을 때 테스트가 에러나는 것 방지', () => {
+    expect(true).toBe(true);
+  });
+});

frontend/tailwind.config.js

@@ -66,8 +66,12 @@ module.exports = {
       },
       zIndex: {
         0: '0', // 메인 화면
-        1000: '1000', // 레이아웃
-        4000: '4000', // 캔버스
+        1000: '1000', // 캔바스
+        1001: '1001', // 캔바스
+        1002: '1002', // 캔바스
+        1003: '1003', // 캔바스
+        1004: '1004', // 캔바스
+        4000: '4000', // 레이아웃
         6000: '6000', // 모달, 알림 등 오버레이 요소
         // 필요에 따라 추가적인 z-index 값을 더 추가할 수 있습니다.
       },