feat: use https

index.html

@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- 추후 제거 -->
+  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
   <title>CSEY</title>
   <link rel="stylesheet" href="index.css">
 </head>
@@ -16,6 +18,7 @@
   </div>
   <div id="root" class="hidden"></div>
   <script type="module" src="/src/main.tsx"></script>
+  <script type="module" src="/public/service-worker.js"></script>
 </body>
 
 </html>

nginx.conf

@@ -1,6 +1,10 @@
 server {
-    listen       8080;
-    server_name  csey;
+    listen       443 ssl;
+    server_name 203.253.21.193;
+
+    ssl on;
+    ssl_certificate /home/viskkh/domain.crt;
+    ssl_certificate_key /home/viskkh/domain.key;
 
     location / {
         root   /home/viskkh/dist/CSEY-client/dist;
@@ -17,3 +21,8 @@ server {
         root   /usr/share/nginx/html;
     }
 }
+
+server {
+    listen 80;
+    return 301 https:$host$request_uri;
+}

package.json

@@ -46,6 +46,7 @@
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-react": "^3.1.0",
     "babel-loader": "^8.3.0",
     "eslint": "^8.56.0",

public/service-worker.js

@@ -0,0 +1,14 @@
+self.addEventListener('push', function(event) {
+  const options = {
+    body: event.data.text(),
+    icon: 'icon.png',
+    badge: 'badge.png'
+  };
+  event.waitUntil(
+    self.registration.showNotification('Hi, Notification', options)
+  );
+});
+
+self.addEventListener('notificationclick', function(event) {
+  event.notification.close();
+});

service-worker.js

@@ -0,0 +1,14 @@
+self.addEventListener('push', function(event) {
+  const options = {
+    body: event.data.text(),
+    icon: 'icon.png',
+    badge: 'badge.png'
+  };
+  event.waitUntil(
+    self.registration.showNotification('Hi, Notification', options)
+  );
+});
+
+self.addEventListener('notificationclick', function(event) {
+  event.notification.close();
+});

src/App.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useContext } from 'react';
-import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 import { Modal } from '@mui/material';
+import { useContext, useEffect } from 'react';
+import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 import Wrapper from './AppStyles';
 import { useUserInfoQuery } from './api/query';
 import BottomNavbar from './components/BottomNavbar';
@@ -26,6 +26,17 @@ function App() {
     setSearchParams({});
     modalDispatch({ payload: 'close' });
   };
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/service-worker.js')
+        .then((registration) => {
+          console.log('Service Worker registered with scope:', registration.scope);
+        })
+        .catch((error) => {
+          console.log('Service Worker registration failed:', error);
+        });
+    }
+  }, []);
   return (
     <Wrapper>
       <HeaderLogo />

src/components/Modal/MyModal/index.tsx

@@ -1,11 +1,10 @@
-import { Modal } from "@mui/material";
-import * as s from "./styles";
-import { forwardRef, useContext, useState } from "react";
-import { ModalContext } from "../../../context/modal";
 import { useQueryClient } from "@tanstack/react-query";
+import { forwardRef, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { kakaoLogout } from "../../../api/axios";
 import { userContext } from "../../../context";
+import { ModalContext, MyModalProps } from "../../../context/modal";
+import * as s from "./styles";
 
 const Contents = {
   login: {
@@ -43,8 +42,8 @@ const MyModal = forwardRef(() => {
   };
   return (
     <s.Wrapper>
-      <s.Header>{Contents[modal.props.variant].header}</s.Header>
-      <s.Detail>{Contents[modal.props.variant].content}</s.Detail>
+      <s.Header>{Contents[(modal.props as MyModalProps).variant].header}</s.Header>
+      <s.Detail>{Contents[(modal.props as MyModalProps).variant].content}</s.Detail>
       <s.ButtonWrapper>
         <s.Button elevation={2} onClick={handleYesClick}>YES</s.Button>
         <s.Button elevation={2} onClick={handleNoClick}>NO</s.Button>

src/main.tsx

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import { UserProvider } from './context';
-import './index.css';
 import { ModalsProvider } from './context/modal';
+import './index.css';
 
 const queryClient = new QueryClient();
 
@@ -21,7 +21,6 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   </QueryClientProvider>
   // </React.StrictMode>
 );
-
 window.addEventListener('DOMContentLoaded', () => {
   const splashScreen = document.getElementById('splash-screen');
   const mainContent = document.getElementById('root');

vite.config.ts

@@ -1,3 +1,4 @@
+import basicSsl from '@vitejs/plugin-basic-ssl';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
@@ -12,16 +13,18 @@ export default defineConfig({
           icon: true,
         }
       }
-    )
+    ),
+    basicSsl()
   ],
   server: {
     port: 8080,
+    https: true,
     proxy: {
       '/api': {
-        target: 'http://203.253.21.193:7070', // 서버 url
-        // target: 'http://localhost:7070', // 서버 url
-        secure: true
+        target: 'https://203.253.21.193:7070', // 서버 url
+        // target: 'https://localhost:7070', // 서버 url
+        secure: false
       }
     }
-  }
+  },
 })