[chore] test s3 + cloud front 배포 및 ci / cd 구축

.github/workflows/develop-cd.yml

@@ -4,12 +4,15 @@ on:
   push:
     branches:
       - test
+  pull_request:
+    branches:
+      - test
   workflow_dispatch:
     inputs:
       branch:
-        description: "Select the branch to build and deploy"
+        description: 'Select the branch to build and deploy'
         required: true
-        default: "main"
+        default: 'main'
         type: choice
         options:
           - test
@@ -24,7 +27,8 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
         with:
-          ref: ${{ github.event.inputs.branch || github.ref_name }}
+          fetch-depth: 0
+          ref: ${{ github.head_ref || github.ref || github.event.inputs.branch || 'test' }}
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
@@ -55,13 +59,23 @@ jobs:
           echo "Building for branch: ${{ github.event.inputs.branch || github.ref_name }}"
           npm run build
 
-      - name: Deploy
+      - name: Deploy to s3
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --delete
         env:
-          SSH_PRIVATE_KEY: ${{ secrets.TEST_SSH_SECRETE }}
-          EC2_HOST: ${{ secrets.TEST_EC2_HOST }}
-          EC2_USERNAME: ${{ secrets.TEST_EC2_USERNAME }}
+          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          SOURCE_DIR: 'dist'
+
+      - name: Invalidate CloudFront Cache
         run: |
-          echo -e "$SSH_PRIVATE_KEY" > key.pem
-          chmod 600 key.pem
-          scp -o StrictHostKeyChecking=no -i key.pem -r dist/* $EC2_USERNAME@$EC2_HOST:/var/www/html/
-          ssh -o StrictHostKeyChecking=no -i key.pem $EC2_USERNAME@$EC2_HOST "sudo systemctl restart nginx"
+          aws cloudfront create-invalidation \
+            --distribution-id ${{ secrets.AWS_CLOUDFRONT_ID }} \
+            --paths "/*"
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}

src/App.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { router } from '@/routes/router';
+import { refreshAuthAtom } from '@/store/auth';
+import { useSetAtom } from 'jotai';
+import { useEffect } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+export const App = () => {
+  const refreshAuth = useSetAtom(refreshAuthAtom);
+
+  useEffect(() => {
+    refreshAuth();
+  }, []);
+
+  return <RouterProvider router={router} />;
+};

src/api/apiInstance.ts

@@ -1,7 +1,6 @@
-import { handleCookieOnRedirect } from '@/utils/cookie';
-
 import { NavigateFunction } from 'react-router-dom';
 
+import { API_BASE_URL } from '@/api/config';
 import { ServerIntendedError } from '@/api/types';
 import { PATH } from '@/routes/path';
 import axios, {
@@ -28,7 +27,7 @@ const processQueue = (error: AxiosError | null): void => {
     if (error) {
       prom.reject(error);
     } else {
-      prom.resolve(axios(prom.config));
+      prom.resolve(apiInstance(prom.config));
     }
   });
 
@@ -46,7 +45,8 @@ export const navigate = (path: string) => {
 };
 
 const apiInstance: AxiosInstance = axios.create({
-  baseURL: `/api/`,
+  baseURL: `${API_BASE_URL}/api/`,
+  withCredentials: true,
   headers: {
     'Content-Type': 'application/json',
   },
@@ -55,9 +55,9 @@ const apiInstance: AxiosInstance = axios.create({
 
 apiInstance.interceptors.request.use(
   (config) => {
-    const token = sessionStorage.getItem('Authorization');
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
+    // 헤더가 남아있을 경우 삭제
+    if (config.headers?.Authorization) {
+      delete config.headers.Authorization;
     }
     return config;
   },
@@ -92,7 +92,6 @@ apiInstance.interceptors.response.use(
       if (error.response.status === 401) {
         if (code === 100) {
           navigate(PATH.ENROLL);
-
           return Promise.reject(error);
         }
 
@@ -112,14 +111,11 @@ apiInstance.interceptors.response.use(
           return apiInstance
             .post('v1/reissue')
             .then(() => {
-              handleCookieOnRedirect();
-
               processQueue(null);
               return apiInstance(originalRequest);
             })
             .catch((reissueError: AxiosError) => {
               processQueue(reissueError);
-              sessionStorage.removeItem('Authorization');
               navigate(PATH.LOGIN);
 
               console.error('reissue error', reissueError);
@@ -132,7 +128,7 @@ apiInstance.interceptors.response.use(
 
         // 리프레시 토큰이 만료됨
         // sessionStorage.removeItem('Authorization');
-        // navigate(PATH.LOGIN);
+        navigate(PATH.LOGIN);
         return Promise.reject(error);
       }
     }

src/api/config.ts

@@ -0,0 +1,11 @@
+const getApiBaseUrl = () => {
+  const host = window.location.hostname;
+
+  if (host === 'localhost') return import.meta.env.VITE_LOCAL_URL;
+  if (host === 'test.codemonster.site') return import.meta.env.VITE_TEST_URL;
+  if (host === 'codemonster.site') return import.meta.env.VITE_BASE_URL;
+
+  return 'https://api.test.codemonster.site';
+};
+
+export const API_BASE_URL = getApiBaseUrl();

src/api/dashboard.ts

@@ -1,6 +1,6 @@
 import { isDevMode } from '@/utils/cookie.ts';
 
-import { subjectMock, teamArticlesMock, teamInfoMock } from '@/api/mocks.ts';
+import { subjectMock } from '@/api/mocks.ts';
 
 import apiInstance from './apiInstance';
 import { ITeamInfo } from './team';
@@ -22,19 +22,41 @@ export interface IArticle {
   articleTitle: string;
   articleBody: string;
   createdDate: string;
+  // TODO: 이미지 하나 허용으로 롤백
+  // imageUrls: string[] | null;
+  imageUrl: string | null;
   memberName: string;
   memberImage: string;
   isAuthor: boolean;
 }
 
 export interface IArticlesByDateResponse {
   content: IArticle[];
-  page: {
-    size: number;
-    number: number;
-    totalElements: number;
-    totalPages: number;
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+  number: number;
+  numberOfElements: number;
+  pageable: {
+    offset: number;
+    pageNumber: number;
+    pageSize: number;
+    paged: boolean;
+    unpaged: boolean;
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
   };
+  size: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  totalElements: number;
+  totalPages: number;
 }
 
 export interface ITopicResponse {
@@ -43,6 +65,9 @@ export interface ITopicResponse {
   articleTitle: string;
   articleBody: string;
   createdDate: string;
+  // TODO: 이미지 하나 허용으로 롤백
+  // imageUrls: string[] | null;
+  imageUrl: string | null;
   authorName: string;
   authorImageUrl: string;
 }
@@ -52,11 +77,11 @@ export const getTeamInfoAndTags = async (
   year: number,
   month: number
 ): Promise<ITeamInfoAndTagsResponse> => {
-  if (isDevMode()) {
-    await new Promise((r) => setTimeout(r, 1000));
+  // if (isDevMode()) {
+  //   await new Promise((r) => setTimeout(r, 1000));
 
-    return teamInfoMock.data;
-  }
+  //   return teamInfoMock.data;
+  // }
 
   const res = await apiInstance.get<ServerResponse<ITeamInfoAndTagsResponse>>(
     `/v1/teams/${teamId}/team-page`,
@@ -71,9 +96,9 @@ export const getArticlesByDate = async (
   date: string,
   page: number
 ): Promise<IArticlesByDateResponse> => {
-  if (isDevMode()) {
-    return teamArticlesMock.data;
-  }
+  // if (isDevMode()) {
+  //   return teamArticlesMock.data;
+  // }
 
   const res = await apiInstance.get<ServerResponse<IArticlesByDateResponse>>(
     `/v1/articles/${teamId}/by-date`,

src/api/mocks.ts

@@ -1082,7 +1082,7 @@ export const teamRecruitDetailMock = {
     teamRecruitId: 1,
     teamRecruitTitle: 'test',
     teamRecruitBody:
-      '<p dir="ltr"><span style="font-size: 22px;">▶️ 스터디 소개</span></p><ul><li value="1" class="editor-listitem"><span style="">이런 사람들과 함께해요</span></li><li value="2" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">팀 내에 운영진이 서비스를 직접 운영합니다</span></li><li value="2" class="editor-listitem"><span style="">사용자가 속한 팀에 정해진 날짜에 맞추어, 수준에 맞는 class에 맞는 문제를 제공해요</span></li></ul></li><li value="2" class="editor-listitem"><span style="">이렇게 참여해요</span></li><li value="3" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">정해진 날짜에 코테를 풀고 서비스에 기록을 하기만 하면 돼요</span></li><li value="2" class="editor-listitem"><span style="">백준 class1 ~ class4의 문제를 모두 제공해요</span></li><li value="3" class="editor-listitem"><span style="">코드블럭과 편집기, 링크/이미지 첨부 기능을 모두 제공해요</span></li><li value="4" class="editor-listitem"><span style="">운영진이 디코를 통해 푸는 날짜의 알림을 보내드려요</span></li></ul></li><li value="3" class="editor-listitem"><span style="">이런 혜택을 얻을 수 있어요</span></li><li value="4" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">문제를 직접 찾거나 고를 필요 없이 정해지는 문제를 풀 수 있어요</span></li><li value="2" class="editor-listitem"><span style="">코테를 혼자 매일 푸는 건 어렵잖아요. 팀원들과 함께 날짜에 맞춰 문제를 풀어요</span></li><li value="3" class="editor-listitem"><span style="">같은 문제를 푼 팀원들의 풀이를 보며 이해를 높일 수 있어요</span></li><li value="4" class="editor-listitem"><span style="">풀이에 도움이 되거나 추가적인 정보가 담긴 자료를 운영진들에게 공유받을 수 있어요</span></li></ul></li></ul><p><br></p><p><br></p><p dir="ltr"><span style="font-size: 22px;">▶️ 스터디 온보딩</span></p><ul><li value="1" class="editor-listitem"><span style="">이렇게 진행돼요</span></li><li value="2" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">코드몬스터 웹사이트와 디스코드를 병행해요. 100% 비대면인만큼 부담 없이 참여할 수 있어요! \uD83D\uDE0A</span></li></ul></li><li value="2" class="editor-listitem"><span style="">이렇게 함께할 수 있어요</span></li><li value="3" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">현재 2days / 4days / 6days 이렇게 세 가지 커리큘럼으로 나뉘어 스터디가 진행되고 있습니다</span></li><li value="2" class="editor-listitem"><span style="">방 이름은 일주일 중에 문제를 푸는 횟수를 뜻해요</span></li><li value="3" class="editor-listitem"><span style="">참여자가 함께하고 싶은 횟수(날짜)를 자유롭게 고를 수 있어요</span></li><li value="4" class="editor-listitem"><span style="">스터디 중간에 참여하는 팀을 얼마든지 바꿀 수 있어요 :)</span></li></ul></li></ul><p><br></p><p><br></p><p dir="ltr"><span style="font-size: 22px;">▶️ 사이트 온보딩</span></p><p dir="ltr"><span style="font-size: 14px;">코몬 팀이 기획/개발한 ‘코드몬스터’ 서비스를 이용해 스터디를 진행하게 돼요</span></p><ul><li value="1" class="editor-listitem"><span style="">아주 간단히 사이트를 설명해 드릴게요</span></li><li value="2" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">정해진 요일마다 코테 문제를 풀며 실력을 향상하고, 회고를 통해 배운 내용을 자기 것으로 만드는 것을 목표로 해요</span></li><li value="2" class="editor-listitem"><span style="">팀원은 팀장이 지정한 문제를 확인 후 풀이를 작성하며, 캘린더를 통해 기록을 모아볼 수 있어요</span></li></ul></li><li value="2" class="editor-listitem"><span style="">이렇게 가입하면 돼요</span></li><li value="3" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">카카오톡 계정으로 회원가입 후 닉네임을 본명으로 설정해주세요. 디스코드 프로필과 동일하게 이름을 설정하기 위함이니 양해 부탁드려요</span></li><li value="2" class="editor-listitem"><span style="">로그인을 완료했다면, 이 페이지 아래에 있는 </span><span class="editor-text-bold" style="">[신청하기]</span><span style="">에서 신청글을 작성해 보세요</span></li><li value="3" class="editor-listitem"><span style="">아래 템플릿을 복사해서 내용을 채워주세요!! 간단한 인사도 남겨주세요 </span></li><li value="4" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="color: #6E74FA;">(간단한 인사를 남겨주세요! 원하는 직무, 지나온 경험, 배우고 싶은 점, 이루고 싶은 꿈 모두 좋습니다)- 코테 경험:\r\n- 백준 티어:\r\n- 풀고 싶은 class:</span></li></ul></li><li value="4" class="editor-listitem"><span style="">신청 완료 후 하루~이틀을 기다려 주시면, 운영진이 빠르게 방으로 초대해 드려요</span></li></ul></li></ul><p><br></p><p><br></p><p dir="ltr"><span style="font-size: 14px;color: #3C42E0;">원하는 날짜를 고르셨나요?\r\n그럼 저희가 소통할 수 있는 디스코드로 함께 가보아요</span></p><p><br></p><p><br></p><p dir="ltr"><span style="font-size: 22px;">▶️ 디스코드 활용 안내</span></p><p dir="ltr"><span style="font-size: 14px;">디스코드 서버는 실시간 소통과 피드백을 위한 공간입니다. 스터디 참여를 위해서 꼭 가입이 필요해요!</span></p><p><br></p><ul><li value="1" class="editor-listitem"><span style="">디스코드는 이렇게 활용해요</span></li><li value="2" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">스터디 일정 알림 수신: 새 문제 업데이트, 스터디 일정 등 공지</span></li><li value="2" class="editor-listitem"><span style="">팀원 간 커뮤니케이션: 질의응답, 코드 리뷰, 회고 진행</span></li></ul></li><li value="2" class="editor-listitem"><span style="">이렇게 디스코드에 들어오면 돼요</span></li><li value="3" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="">해당 링크로 서버에 접속해 주세요(https://discord.gg/7yuEFZnKCR)</span></li><li value="2" class="editor-listitem"><span style="">서버 프로필을 본명 / ndays로 설정해 주세요 (임시완이 4days에 참여하고 싶다면 임시완 / 4days )</span></li><li value="3" class="editor-listitem"><span style="">프로필에 무사히 들어왔다면, [\uD83D\uDC4B\uD83C\uDFFB&nbsp;입장-인사방]으로 와주세요</span></li><li value="4" class="editor-listitem"><span style="">팀 가입에서 적었던 말들을 간단히 한번 더 적어주세요! 팀원들 간의 소통을 위함이에요 :)</span></li><li value="5" class="editor-listitem nested"><ul><li value="1" class="editor-listitem"><span style="color: #6E74FA;">(간단한 인사를 남겨주세요! 원하는 직무, 지나온 경험, 배우고 싶은 점, 이루고 싶은 꿈 모두 좋습니다)\r\n\r\n- 코테 경험:\r\n- 백준 티어:\r\n- 풀고 싶은 class:</span></li></ul></li><li value="5" class="editor-listitem"><span style="">조금만 기다려 주시면 새 권한을 부여해서 코테 방 입장을 도와드릴게요!</span></li></ul></li></ul><p><br></p><p><br></p><p dir="ltr"><span style="font-size: 14px;color: #3C42E0;">디코에 들어오셔서 인사도 남겨주셨나요?\r\n저희 운영진이 빠르게 환영해 드릴게요!!!\r\n</span></p><p><br></p><p><br></p><p dir="ltr"><span style="font-size: 22px;">▶️ 문의 및 지원</span></p><p dir="ltr"><span style="font-size: 14px;">코테 스터디 가입 이후 문의나 지원이 필요하시면 아래의 방법을 따라주세요.</span></p><ul><li value="1" class="editor-listitem"><span style="">운영 관련 질문: 디스코드 내 서버 운영자에게 DM</span></li><li value="2" class="editor-listitem"><span style="">코테 관련 기술 질문: 디스코드 내 코테 운영자에게 DM</span></li></ul><p><br></p><p><br></p><p dir="ltr"><span style="font-size: 14px;color: #3C42E0;">\uD83D\uDE47\uD83C\uDFFB‍♂️\r\n함께하게 되어서 영광입니다 !!!!\r\n\r\n이제 여정이 모두 끝났어요 \uD83D\uDC4F\uD83C\uDFFB\uD83D\uDC4F\uD83C\uDFFB\uD83D\uDC4F\uD83C\uDFFB\uD83D\uDC4F\uD83C\uDFFB\uD83D\uDC4F\uD83C\uDFFB\r\n잘 따라와 주셔서 다시 감사의 말을 전해요\r\n\r\n부족한 점, 에러, 문의 사항은 언제든 운영진에게 남겨주시면\r\n적극 반영해서 더욱 올바른 방향으로 서비스를 이끌도록 하겠습니다\r\n\r\n저희와 함께 한 문제씩 풀며, 밝은 미래를 준비해 보아요\r\n잘 부탁드려요 ! \uD83E\uDEE1</span></p><p><br></p><p><span style=""> </span></p>',
+      '<p dir="ltr"><span style="">image</span></p><p><br></p><p><img src="?" alt="붙여넣은 이미지"></p>',
     chatUrl: 'test',
     isRecruiting: true, // TODO:
     memberNickName: 'test',

src/api/mypage.ts

@@ -1,7 +1,4 @@
-import { isDevMode } from '@/utils/cookie.ts';
-
 import apiInstance from '@/api/apiInstance';
-import { myArticlesMock, myPageTeamMock } from '@/api/mocks.ts';
 import { ServerResponse } from '@/api/types';
 
 export type TeamAbstraction = {
@@ -12,9 +9,9 @@ export type TeamAbstraction = {
 };
 
 export const queryMyTeamInfo = async () => {
-  if (isDevMode()) {
-    return myPageTeamMock.data;
-  }
+  // if (isDevMode()) {
+  //   return myPageTeamMock.data;
+  // }
 
   const res =
     await apiInstance.get<ServerResponse<TeamAbstraction[]>>(
@@ -49,9 +46,9 @@ export type MyArticleResponse = {
 };
 
 export const queryMyArticles = async (teamId: number, page: number) => {
-  if (isDevMode()) {
-    return myArticlesMock.data;
-  }
+  // if (isDevMode()) {
+  //   return myArticlesMock.data;
+  // }
 
   const res = await apiInstance.get<ServerResponse<MyArticleResponse>>(
     `v1/articles/${teamId}/my-page`,