softeer5th · jpark0506 · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025
diff --git a/.github/workflows/fe-deploy.yml b/.github/workflows/fe-deploy.yml
@@ -1,66 +1,66 @@
 name: FE CI / CD
 
 on:
-  push:
-    branches:
-      - fe
+    push:
+        branches:
+            - fe
 
 jobs:
-  CI:
-    runs-on: ubuntu-latest
+    CI:
+        runs-on: ubuntu-latest
 
-    env:
-      GCP_PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
-      IMAGE_NAME: uniro-fe
-      IMAGE_TAG: ${{ github.sha }}
+        env:
+            GCP_PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
+            IMAGE_NAME: uniro-fe
+            IMAGE_TAG: ${{ github.sha }}
 
-    steps:
-      - name: 코드 체크아웃
-        uses: actions/checkout@v4
+        steps:
+            - name: 코드 체크아웃
+              uses: actions/checkout@v4
 
-      - name: Google Cloud SDK 설정
-        uses: "google-github-actions/auth@v2"
-        with:
-          credentials_json: ${{ secrets.GCP_SA_KEY }}
+            - name: Google Cloud SDK 설정
+              uses: "google-github-actions/auth@v2"
+              with:
+                  credentials_json: ${{ secrets.GCP_SA_KEY }}
 
-      - name: Docker를 위한 gcloud 인증 설정
-        run: gcloud auth configure-docker --quiet
+            - name: Docker를 위한 gcloud 인증 설정
+              run: gcloud auth configure-docker --quiet
 
-      - name: Create .env from secret
-        run: |
-          echo "${{ secrets.FE_ENV }}" > uniro_frontend/.env
+            - name: Create .env from secret
+              run: |
+                  echo "${{ secrets.FE_ENV }}" > uniro_frontend/.env
 
-      - name: Docker 이미지 빌드 및 푸시
-        run: |
-          docker build -t gcr.io/${{ env.GCP_PROJECT_ID }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }} -f uniro_frontend/Dockerfile .
-          docker push gcr.io/${{ env.GCP_PROJECT_ID }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}
+            - name: Docker 이미지 빌드 및 푸시
+              run: |
+                  docker build -t gcr.io/${{ env.GCP_PROJECT_ID }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }} -f uniro_frontend/Dockerfile .
+                  docker push gcr.io/${{ env.GCP_PROJECT_ID }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}
 
-  CD:
-    runs-on: ubuntu-latest
-    needs: CI
+    CD:
+        runs-on: ubuntu-latest
+        needs: CI
 
-    env:
-      GCP_PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
-      IMAGE_NAME: uniro-fe
-      IMAGE_TAG: ${{ github.sha }}
-      DEPLOY_PATH: ${{ secrets.DEPLOY_SERVER_PATH }}
+        env:
+            GCP_PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
+            IMAGE_NAME: uniro-fe
+            IMAGE_TAG: ${{ github.sha }}
+            DEPLOY_PATH: ${{ secrets.DEPLOY_SERVER_PATH }}
 
-    steps:
-      - name: 배포 서버에 SSH로 연결하여 배포
-        uses: appleboy/ssh-action@v0.1.5
-        with:
-          host: ${{ secrets.DEPLOY_SERVER_HOST }}
-          username: ${{ secrets.DEPLOY_SERVER_USER }}
-          key: ${{ secrets.DEPLOY_SSH_KEY }}
-          envs: GCP_PROJECT_ID, IMAGE_NAME, IMAGE_TAG, DEPLOY_PATH, TEST
-          script: |
-            cd ${DEPLOY_PATH}
-            sudo docker ps -a --format '{{.ID}} {{.Names}}' \
-                | grep -v 'nginx-container' \
-                | awk '{print $1}' \
-                | xargs -r sudo docker stop || true
-            sudo docker rm $(sudo docker ps -a -q) || true
-            sudo docker login -u _json_key --password-stdin https://gcr.io <<< '${{ secrets.GCP_SA_KEY }}'
-            sudo docker pull gcr.io/${GCP_PROJECT_ID}/${IMAGE_NAME}:${IMAGE_TAG}
-            sudo docker run -d --name ${IMAGE_NAME} -p 3000:3000 gcr.io/${GCP_PROJECT_ID}/${IMAGE_NAME}:${IMAGE_TAG}
-            sudo docker network connect nginx_app-network ${IMAGE_NAME}
+        steps:
+            - name: 배포 서버에 SSH로 연결하여 배포
+              uses: appleboy/ssh-action@v0.1.5
+              with:
+                  host: ${{ secrets.DEPLOY_SERVER_HOST }}
+                  username: ${{ secrets.DEPLOY_SERVER_USER }}
+                  key: ${{ secrets.DEPLOY_SSH_KEY }}
+                  envs: GCP_PROJECT_ID, IMAGE_NAME, IMAGE_TAG, DEPLOY_PATH, TEST
+                  script: |
+                      cd ${DEPLOY_PATH}
+                      sudo docker ps -a --format '{{.ID}} {{.Names}}' \
+                          | egrep -v 'nginx-container|uniro-backoffice' \
+                          | awk '{print $1}' \
+                          | xargs -r sudo docker stop || true
+                      sudo docker rm $(sudo docker ps -a -q) || true
+                      sudo docker login -u _json_key --password-stdin https://gcr.io <<< '${{ secrets.GCP_SA_KEY }}'
+                      sudo docker pull gcr.io/${GCP_PROJECT_ID}/${IMAGE_NAME}:${IMAGE_TAG}
+                      sudo docker run -d --name ${IMAGE_NAME} -p 3000:3000 gcr.io/${GCP_PROJECT_ID}/${IMAGE_NAME}:${IMAGE_TAG}
+                      sudo docker network connect nginx_app-network ${IMAGE_NAME}
diff --git a/uniro_frontend/src/App.tsx b/uniro_frontend/src/App.tsx
@@ -8,6 +8,7 @@ import BuildingSearchPage from "./pages/buildingSearch";
 import NavigationResultPage from "./pages/navigationResult";
 import ReportRoutePage from "./pages/reportRoute";
 import ReportForm from "./pages/reportForm";
+import ReportHazardPage from "./pages/reportHazard";
 
 function App() {
 	return (
@@ -19,7 +20,8 @@ function App() {
 			<Route path="/map" element={<MapPage />} />
 			<Route path="/form" element={<ReportForm />} />
 			<Route path="/result" element={<NavigationResultPage />} />
-			<Route path="/report" element={<ReportRoutePage />} />
+			<Route path="/report/route" element={<ReportRoutePage />} />
+			<Route path="/report/hazard" element={<ReportHazardPage />} />
 		</Routes>
 	);
 }

diff --git a/uniro_frontend/src/assets/markers/report.svg b/uniro_frontend/src/assets/markers/report.svg
diff --git a/uniro_frontend/src/constant/enum/markerEnum.ts b/uniro_frontend/src/constant/enum/markerEnum.ts
@@ -7,4 +7,5 @@ export const enum Markers {
 	SELECTED_BUILDING = "selectedBuilding",
 	WAYPOINT = "waypoint",
 	NUMBERED_WAYPOINT = "numberedWayPoint",
+	REPORT = "report",
 }
diff --git a/uniro_frontend/src/constant/enum/messageEnum.ts b/uniro_frontend/src/constant/enum/messageEnum.ts
@@ -0,0 +1,6 @@
+export enum ReportHazardMessage {
+	DEFAULT = "선 위를 눌러 제보할 지점을 선택하세요",
+	CREATE = "이 지점으로 새로운 제보를 진행할까요?",
+	UPDATE = "이 지점에 제보된 기존 정보를 바꿀까요?",
+	ERROR = "선 위에서만 선택 가능해요",
+}
diff --git a/uniro_frontend/src/data/types/marker.d.ts b/uniro_frontend/src/data/types/marker.d.ts
@@ -10,4 +10,10 @@ export type MarkerTypes =
 	| Markers.ORIGIN
 	| Markers.NUMBERED_WAYPOINT
 	| Markers.WAYPOINT
-	| Markers.SELECTED_BUILDING;
+	| Markers.SELECTED_BUILDING
+	| Markers.REPORT;
+
+export type MarkerTypesWithElement = {
+	type: MarkerTypes;
+	element: AdvancedMarker;
+};
diff --git a/uniro_frontend/src/hooks/useReportHazard.ts b/uniro_frontend/src/hooks/useReportHazard.ts
@@ -0,0 +1,22 @@
+import { create } from "zustand";
+
+interface ReportedHazardEdge {
+	reportType: "CREATE" | "UPDATE" | undefined;
+	setReportType: (type: "CREATE" | "UPDATE") => void;
+	startNode: google.maps.LatLng | google.maps.LatLngLiteral | undefined;
+	endNode: google.maps.LatLng | google.maps.LatLngLiteral | undefined;
+	setNode: (
+		point1: google.maps.LatLng | google.maps.LatLngLiteral,
+		point2: google.maps.LatLng | google.maps.LatLngLiteral,
+	) => void;
+}
+
+const useReportHazard = create<ReportedHazardEdge>((set) => ({
+	reportType: undefined,
+	setReportType: (newType) => set(() => ({ reportType: newType })),
+	startNode: undefined,
+	endNode: undefined,
+	setNode: (point1, point2) => set(() => ({ startNode: point1, endNode: point2 })),
+}));
+
+export default useReportHazard;
diff --git a/uniro_frontend/src/pages/reportForm.tsx b/uniro_frontend/src/pages/reportForm.tsx
@@ -11,6 +11,7 @@ import Button from "../components/customButton";
 
 import useScrollControl from "../hooks/useScrollControl";
 import useModal from "../hooks/useModal";
+import useReportHazard from "../hooks/useReportHazard";
 
 const ReportForm = () => {
 	useScrollControl();
@@ -28,7 +29,11 @@ const ReportForm = () => {
 	const [FailModal, isFailOpen, openFail, closeFail] = useModal();
 	const [SuccessModal, isSuccessOpen, openSuccess, closeSuccess] = useModal();
 
+	const { reportType, startNode, endNode } = useReportHazard();
+
 	useEffect(() => {
+		console.log(reportType, startNode, endNode);
+
 		setTimeout(() => {
 			setReportMode("update");
 		}, 2000);