1.0.0 버전업

README.md

@@ -1,12 +1,13 @@
-# 멘보샤
+# <span style="color:#ff772b">멘보샤</span>
 
 ## 프로젝트 소개
 
 - 새우를 그냥 튀긴 것보다 양쪽에 빵을 붙여 튀겨서 더 맛있게 만드는 것처럼 서로가 서로에게 빵과 새우의 존재가 될 수 있도록 도와주는 것을 목표로하는 플랫폼
 
-## 개발기간
+## 개발 기간
 
-- 23.12.01 ~ 24.03.01 +a
+- 23.12.01 ~ 24.03.17
+- 베타 테스트 기간 : 24.03.18 ~ 24.04.01
 
 ### 멤버구성
 
@@ -24,6 +25,73 @@
 
 ---
 
+## 기술 스택
+
+<h3 align="center">  
+  Language & Tools
+</h3>
+<p align="center">
+  <img src="https://img.shields.io/badge/HTML-white?logo=html5"/>
+  <img src= "https://img.shields.io/badge/CSS-blue?logo=css3"/>
+  <img src= "https://img.shields.io/badge/Scss-pink?logo=sass"/>
+  <img src= "https://img.shields.io/badge/TypeScript-white?logo=typeScript&logoColor=3178C6"/>
+  <img src= "https://img.shields.io/badge/VScode-white?logo=visualstudiocode&logoColor=007ACC"/>
+</p>
+
+<h3 align="center">  
+  FrameWork & Library
+</h3>
+
+<p align="center">
+<img src= "https://img.shields.io/badge/Next.js-black?logo=next.js&logoColor=white"/>
+  <img src= "https://img.shields.io/badge/React-blue?logo=react"/>
+  <img src= "https://img.shields.io/badge/Socket.io-white?logo=socket.io&logoColor=010101"/>
+  <img src= "https://img.shields.io/badge/MSW-white?logo=mockserviceworker&logoColor=black"/>
+   <img src= "https://img.shields.io/badge/Axios-white?logo=axios&logoColor=5A29E4"/>
+  <img src= "https://img.shields.io/badge/Styled--Components-DB7093?logo=styledcomponents&logoColor=white"/>
+</p>
+
+<h3 align="center">  
+  Global-State
+</h3>
+
+<p align="center">
+  <img src= "https://img.shields.io/badge/Recoil-3578E5?logo=Recoil&logoColor=white"/>
+</p>
+
+<h3 align="center">  
+  Module-Bundler
+</h3>
+
+<p align="center">
+   <img src= "https://img.shields.io/badge/WebPack-white?logo=webpack&logoColor=blue"/>
+</p>
+
+<h3 align="center">  
+  Cooperation-Tools
+</h3>
+
+<p align="center">
+   <img src= "https://img.shields.io/badge/ESLint-white?logo=eslint&logoColor=4B32C3"/>
+   <img src= "https://img.shields.io/badge/Prettier-black?logo=Prettier&logoColor=F7B93E"/>
+   <img src= "https://img.shields.io/badge/.ENV-black?logo=dotenv&logoColor=#ECD53F"/>
+</p>
+
+<h3 align="center">  
+  Communication
+</h3>
+
+<p align="center">
+   <img src= "https://img.shields.io/badge/Git-white?logo=git&logoColor=F05032"/>
+   <img src= "https://img.shields.io/badge/Github-black?logo=github&logoColor=#181717"/>
+   <img src= "https://img.shields.io/badge/Github--Actions-white?logo=githubactions&logoColor=2088FF"/>
+   <img src= "https://img.shields.io/badge/Slack-white?logo=slack&logoColor=4A154B"/>
+   <img src= "https://img.shields.io/badge/Notion-white?logo=notion&logoColor=000000"/>
+   <img src= "https://img.shields.io/badge/Discord-white?logo=Discord&logoColor=#5865F2"/>
+   <img src= "https://img.shields.io/badge/Figma-white?logo=figma&logoColor=#F24E1E"/>
+
+</p>
+
 ### 커밋 메시지 컨벤션
 
 `feat` : 새로운 기능 추가

dockerfile

@@ -57,15 +57,25 @@ ENV PORT 80
 
 CMD ["node", "server.js"]
 
+#######################################- 여기서부터 ngninx dockerfile -##########################################
 # #nginx 이미지 사용
 # FROM nginx:latest
 
-# #nignx와 certbot 설치
-# RUN apt-get update && apt-get install -y certbot python3-certbot-nginx
+# #nignx와 certbot 설치 -(+인증서 갱신을 위한 cron)
+# RUN apt-get update && apt-get install -y certbot python3-certbot-nginx cron
 
 # #nginx.conf(설정파일 복사)
 # COPY nginx.conf /etc/nginx/nginx.conf
 
+# #SSL 인증서 갱신을 위한 cron 스크립트 복사
+# COPY renew_ssl_cert.sh /renew_ssl_cert.sh
+
+# #스크립트 권한 부여
+# RUN chmod +x /renew_ssl_cert.sh
+
+# #cron 작업 추가
+# RUN echo "0 0 1 * * root /renew_ssl_cert.sh" >> /etc/crontab
+
 # #port
 # EXPOSE 80
 # EXPOSE 443
@@ -76,3 +86,4 @@ CMD ["node", "server.js"]
 
 # #컨테이너가 실행될 때 entrypoint.sh 실행
 # CMD ["/entrypoint.sh"]
+

next.config.js

@@ -34,24 +34,19 @@ const nextConfig = {
   //   ];
   // },
   //강제 리다이렉트 실행
-  async middleware() {
-    return ['./src/middleware'];
-  },
   rewrites() {
-    return {
-      beforeFiles: [
-        {
-          source: '/:path*',
-          has: [
-            {
-              type: 'host',
-              value: 'www.menbosha.kr',
-            },
-          ],
-          destination: 'https://menbosha.kr/:path*',
-        },
-      ],
-    };
+    return [
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'host',
+            value: 'www.menbosha.kr',
+          },
+        ],
+        destination: '//:path*',
+      },
+    ];
   },
   generateEtags: false,
   images: {

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "env-cmd -f .env.development next dev",
     "dev:mock": "env-cmd -f .env.mock next dev",
     "build": "next build",
     "start": "next start",

renew_ssl_cert.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+# Certbot을 사용하여 SSL 인증서 갱신
+certbot renew --quiet --nginx

src/apis/axiosInstance.ts

@@ -3,34 +3,13 @@ import axios from 'axios';
 const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
   withCredentials: true,
-  timeout: 5000,
+  timeout: 3000, //3초동안 요청 안가면 timeout
 });
 
 //토근 갱신
 const reNewToken = async () => {
-  try {
-    const response = await axios.get(
-      `${process.env.NEXT_PUBLIC_API_BASE_URL}auth/new-access-token`,
-    );
-    localStorage.setItem('accessToken', response.data.accessToken);
-  } catch (err) {
-    if (axios.isAxiosError(err) && err.response) {
-      //재발급 중 에러 발생 시
-      if (
-        (err.response.data.message === 'invalid token' &&
-          err.response.data.statusCode === 400) ||
-        (err.response.data.message === 'token not found' &&
-          err.response.data.statusCode === 404) ||
-        (err.response.data.message === 'token mismatch' &&
-          err.response.data.statusCode === 401)
-      ) {
-        window.location.href = '/';
-        setTimeout(() => {
-          window.localStorage.clear();
-        }, 0);
-      }
-    }
-  }
+  const response = await instance(`/auth/new-access-token`);
+  localStorage.setItem('accessToken', response.data.accessToken);
 };
 
 //요청 전 인터셉터
@@ -54,56 +33,88 @@ instance.interceptors.request.use(
 instance.interceptors.response.use(
   (response) => {
     if (response.status === 404) {
-      console.log('404 error');
+      window.location.href = '/404';
     }
     return response;
   },
   async (error) => {
-    if (
-      (error.response.data.statusCode === 401 &&
-        error.response.data.message === 'jwt expired') ||
-      (error.response.data.statusCode === 404 &&
-        error.response.data.message === 'token not found') ||
-      (error.response.data.statusCode === 401 &&
-        error.response.data.message === 'token mismatch')
+    console.log('인스턴스에러', error);
+    //요청 만료시
+    if (error.message === 'timeout of 3000ms exceeded') {
+      alert('요청시간이 초과되었습니다.');
+      window.location.href = '/';
+      window.localStorage.clear();
+      return;
+    }
+    //토큰 재발급
+    else if (
+      error.response.data.statusCode === 401 ||
+      error.response.data.statusCode === 404
     ) {
-      //토큰 재발급
       if (
         error.response.data.statusCode === 401 &&
         error.response.data.message === 'jwt expired'
       ) {
-        await reNewToken(); //스토리지에서 토큰 받아서 재발급 받는 로직
-        const accessToken = localStorage.getItem('accessToken');
+        try {
+          await reNewToken(); //스토리지에서 토큰 받아서 재발급 받는 로직
+          const accessToken = localStorage.getItem('accessToken');
 
-        error.config.headers['Authorization'] = ` Bearer ${accessToken}`;
+          error.config.headers['Authorization'] = `Bearer ${accessToken}`;
 
-        // 중단된 요청을(에러난 요청)을 토큰 갱신 후 재요청
-        const response = await instance(error.config);
-        return response;
+          // 중단된 요청을(에러난 요청)을 토큰 갱신 후 재요청
+          const response = await instance(error.config);
+          return response;
+        } catch (err) {
+          console.log('리프레쉬에레ㅓ', err);
+          if (axios.isAxiosError(err) && err.response) {
+            //재발급 중 에러 발생 시
+            if (
+              (err.response.data.message === 'invalid token' &&
+                err.response.data.statusCode === 400) ||
+              (err.response.data.message === 'token not found' &&
+                err.response.data.statusCode === 404) ||
+              (err.response.data.message === 'token mismatch' &&
+                err.response.data.statusCode === 401) ||
+              (err.response.data.statusCode === 400 &&
+                err.response.data.message === 'jwt must be provided')
+            ) {
+              alert('로그인 갱신에 실패했습니다. 재 로그인 부탁드립니다.');
+              window.location.href = '/';
+              window.localStorage.clear();
+              return;
+            }
+          }
+        }
       }
-      //클라이언트 access와 redis access가 다를 때, 없을 때
+      //클라이언트 access와 redis access가 다를 때 || 없을 때
       if (
         (error.response.data.statusCode === 401 &&
           error.response.data.message === 'token mismatch') ||
-        (error.response.data.statusCode === 404 &&
-          error.response.data.message === 'token not found')
+        (error.response.data.message === 'token not found' &&
+          error.response.data.statusCode === 404)
       ) {
         alert(error.response.data.message);
         window.location.href = '/';
-        setTimeout(() => {
-          window.localStorage.clear();
-        }, 0);
+        window.localStorage.clear();
+        return;
       }
     } else if (
-      error.response.data.message === 'jwt malformed' &&
-      error.response.data.statusCode === 400
+      error.response.data.statusCode === 400 &&
+      error.response.data.message === 'jwt malformed'
     ) {
       window.alert('로그인이 필요합니다.');
       window.location.href = '/';
       return;
+    } else if (
+      error.response.data.statusCode === 400 &&
+      error.response.data.message === 'jwt must be provided'
+    ) {
+      window.alert('토큰이 만료되었습니다.');
+      window.location.href = '/';
+      window.localStorage.clear();
+      return;
     }
-    return Promise.reject(error);
-    // return error;
+    return;
   },
 );
 

src/apis/help.ts

@@ -64,6 +64,7 @@ const HELP = {
         sortOrder: params.sortOrder,
         pageSize: params.pageSize,
         page: params.page,
+        userId: params.userId && params.userId,
       },
     });
     return result.data.contents;

src/apis/mentor.ts

@@ -63,7 +63,7 @@ const MENTOR = {
         loadOnlyPopular: params.loadOnlyPopular,
         orderField: params.orderField,
         sortOrder: params.sortOrder,
-        userId: params.userId ? params.userId : undefined,
+        userId: params.userId && params.userId,
       },
     });
     return result.data.contents;

src/apis/report.ts

@@ -0,0 +1,21 @@
+import { AxiosResponse } from 'axios';
+import instance from './axiosInstance';
+import { CreateReportRequestType } from '@/types/chat';
+
+const REPORT = {
+  path: `/users`,
+
+  /** 유저 신고하기 api [post] */
+  async createUserReport(content: CreateReportRequestType): Promise<any> {
+    const result: AxiosResponse = await instance.post(
+      `${REPORT.path}/${content.userId}/reports`,
+      {
+        type: content.isCheck,
+        report: content.report,
+      },
+    );
+    return result;
+  },
+};
+
+export default REPORT;

src/components/common/Seo.tsx

@@ -7,11 +7,29 @@ export default function Seo() {
         rel="icon"
         href="https://menbosha-s3.s3.ap-northeast-2.amazonaws.com/public/mainpage/titleLogo.svg"
       />
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css"
+      />
       <title>멘보샤</title>
       <meta
         name="naver-site-verification"
         content="f70d229d3e38d57d3101592c57fb452c85668743"
       />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content="https://menbosha.kr/" />
+      <meta property="og:title" content="멘보샤처럼 맛있게 우리의 멘토멘티" />
+      <meta property="og:image" content="https://example.com/image.jpg" />
+      <meta
+        property="og:description"
+        content="멘보샤 처럼 맛있는 멘토와 멘티를 진행해 보세요. 누구나 멘토가 될 수 있고, 누구나 멘티가 될 수 있습니다.  "
+      />
+      <meta property="og:site_name" content="멘보샤" />
+      <meta property="og:locale" content="ko_KR" />
+
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="630" />
     </Head>
   );
 }