cicd 점검

.github/workflows/dev_cicd.yml

@@ -0,0 +1,50 @@
+name: CI/CD for Development
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    branches:
+      - dev
+
+jobs:
+  cicd:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.10.0
+          cache: yarn
+      - run: yarn install
+
+      - name: Create .env file
+        run: |
+          echo "VITE_NEW_API_URL=${{ secrets.VITE_NEW_API_URL }}" > .env
+          echo "VITE_DOMAIN=${{ secrets.VITE_DEV_DOMAIN }}" >> .env
+          echo "VITE_FIREBASE_API_KEY=${{ secrets.VITE_FIREBASE_API_KEY }}" >> .env
+          echo "VITE_FIREBASE_AUTH_DOMAIN=${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}" >> .env
+          echo "VITE_FIREBASE_PROJECT_ID=${{ secrets.VITE_FIREBASE_PROJECT_ID }}" >> .env
+          echo "VITE_FIREBASE_STORAGE_BUCKET=${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}" >> .env
+          echo "VITE_FIREBASE_MESSAGIN_ID=${{ secrets.VITE_FIREBASE_MESSAGIN_ID }}" >> .env
+          echo "VITE_FIREBASE_APP_ID=${{ secrets.VITE_FIREBASE_APP_ID }}" >> .env
+          echo "VITE_FIREBASE_MEASURENMENT_ID=${{ secrets.VITE_FIREBASE_MEASURENMENT_ID }}" >> .env
+          echo "VITE_KAKAO_REST_API_KEY=${{ secrets.VITE_KAKAO_REST_API_KEY }}" >> .env
+          echo "VITE_NAVER_CLIENT_ID=${{ secrets.VITE_NAVER_CLIENT_ID }}" >> .env
+          echo "VITE_NAVER_CLIENT_SECRET=${{ secrets.VITE_NAVER_CLIENT_SECRET }}" >> .env
+          echo "VITE_GOOGLE_CLIENT_ID=${{ secrets.VITE_GOOGLE_CLIENT_ID }}" >> .env
+          echo "VITE_GOOGLE_CLIENT_SECRET=${{ secrets.VITE_GOOGLE_CLIENT_SECRET }}" >> .env
+
+      - run: yarn build-dev
+
+      - name: deploy to s3
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --delete
+        env:
+          AWS_S3_BUCKET: ${{ secrets.DEV_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: ${{ secrets.DEV_SOURCE_DIR }}

.github/workflows/prod_cicd.yml

@@ -0,0 +1,50 @@
+name: CI/CD for Production
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  cicd:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.10.0
+          cache: yarn
+      - run: yarn install
+
+      - name: Create .env file
+        run: |
+          echo "VITE_NEW_API_URL=${{ secrets.VITE_NEW_API_URL }}" > .env
+          echo "VITE_DOMAIN=${{ secrets.VITE_PROD_DOMAIN }}" >> .env
+          echo "VITE_FIREBASE_API_KEY=${{ secrets.VITE_FIREBASE_API_KEY }}" >> .env
+          echo "VITE_FIREBASE_AUTH_DOMAIN=${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}" >> .env
+          echo "VITE_FIREBASE_PROJECT_ID=${{ secrets.VITE_FIREBASE_PROJECT_ID }}" >> .env
+          echo "VITE_FIREBASE_STORAGE_BUCKET=${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}" >> .env
+          echo "VITE_FIREBASE_MESSAGIN_ID=${{ secrets.VITE_FIREBASE_MESSAGIN_ID }}" >> .env
+          echo "VITE_FIREBASE_APP_ID=${{ secrets.VITE_FIREBASE_APP_ID }}" >> .env
+          echo "VITE_FIREBASE_MEASURENMENT_ID=${{ secrets.VITE_FIREBASE_MEASURENMENT_ID }}" >> .env
+          echo "VITE_KAKAO_REST_API_KEY=${{ secrets.VITE_KAKAO_REST_API_KEY }}" >> .env
+          echo "VITE_NAVER_CLIENT_ID=${{ secrets.VITE_NAVER_CLIENT_ID }}" >> .env
+          echo "VITE_NAVER_CLIENT_SECRET=${{ secrets.VITE_NAVER_CLIENT_SECRET }}" >> .env
+          echo "VITE_GOOGLE_CLIENT_ID=${{ secrets.VITE_GOOGLE_CLIENT_ID }}" >> .env
+          echo "VITE_GOOGLE_CLIENT_SECRET=${{ secrets.VITE_GOOGLE_CLIENT_SECRET }}" >> .env
+
+      - run: yarn build-prod
+
+      - name: deploy to s3
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --delete
+        env:
+          AWS_S3_BUCKET: ${{ secrets.PROD_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: ${{ secrets.PROD_SOURCE_DIR }}

package.json

@@ -19,19 +19,21 @@
     "dayjs": "^1.11.12",
     "express": "^4.19.2",
     "firebase": "^10.13.0",
+    "heic2any": "^0.0.4",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-overlay": "6.0.9",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.24.1",
+    "react-scripts": "4.0.3",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
     "request": "^2.88.2",
     "socket.io-client": "^4.7.5",
     "styled-components": "^6.1.11",
     "styled-reset": "^4.5.2",
-    "swiper": "^11.1.8",
-    "react-scripts": "4.0.3",
-    "react-error-overlay": "6.0.9"
+    "swiper": "^11.1.8"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",

src/App.tsx

@@ -1,47 +1,92 @@
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
 import Home from './pages/Home';
-import MyPage from './pages/Mypage';
-import MyPost from './pages/MyPost';
+import Login from './pages/Login';
+import SignUp from './pages/SignUp';
+import LoginComplete from './pages/Login/components/LoginComplete';
+import TermsAgreement from './pages/TermsAgreement';
+import KakaoCallback from './pages/Login/components/Kakao/KakaoCallback';
+import NaverCallback from './pages/Login/components/Naver/NaverCallback';
+
+import MyPage from './pages/MyPage';
 import ProfileEdit from './pages/ProfileEdit';
 import AccountSetting from './pages/AccountSetting';
 import AccountEdit from './pages/AccountEdit';
 import AccountCancel from './pages/AccountCancel';
 import Verification from './pages/verification';
-import Login from './pages/Login';
-import SignUp from './pages/SignUp';
+
 import ProfileViewer from './pages/ProfileViewer';
+
+import Post from './pages/Post';
+import MyPost from './pages/MyPost';
+import PostUpload from './pages/PostUpload';
+import PostImageSelect from './pages/PostImageSelect';
+import PostInstaConnect from './pages/PostInstaConnect';
+import PostInstaFeedSelect from './pages/PostInstaFeedSelect';
+
 import Chats from './pages/Chats';
 import ChatRoom from './pages/Chats/ChatRoom';
-import Upload from './pages/Upload';
-import Post from './pages/Post';
-import KakaoCallback from './pages/Login/components/Kakao/KakaoCallback';
-import NaverCallback from './pages/Login/components/Naver/NaverCallback';
-import GoogleCallback from './pages/Login/components/Google/GoogleCallback';
+
+import NotFound from './pages/NotFound';
+
+const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
+	const isAuthenticated = Boolean(localStorage.getItem('new_jwt_token'));
+	return isAuthenticated ? children : <Navigate to="/login" />;
+};
+
+// 인증이 필요한 페이지 배열
+const protectedRoutes = [
+	{ path: '/', element: <Home /> },
+
+	// 사용자 프로필 및 계정 관리
+	{ path: '/mypage', element: <MyPage /> },
+	{ path: '/profile/edit', element: <ProfileEdit /> },
+	{ path: '/account-setting', element: <AccountSetting /> },
+	{ path: '/account-edit', element: <AccountEdit /> },
+	{ path: '/account-cancel', element: <AccountCancel /> },
+	{ path: '/verification', element: <Verification /> },
+	{ path: '/users/:userId', element: <ProfileViewer /> },
+
+	{ path: '/post/:postId', element: <Post /> },
+	{ path: '/my-post/:postId', element: <MyPost /> },
+	{ path: '/upload', element: <PostUpload /> },
+	{ path: '/image-select', element: <PostImageSelect /> },
+	{ path: '/insta-connect', element: <PostInstaConnect /> },
+	{ path: '/insta-feed-select', element: <PostInstaFeedSelect /> },
+
+	// 메시지/채팅
+	{ path: '/chats', element: <Chats /> },
+	{ path: '/chats/:chatRoomId', element: <ChatRoom /> },
+];
+
+// 인증이 필요 없는 페이지 배열
+const publicRoutes = [
+	{ path: '/login', element: <Login /> },
+	{ path: '/signup', element: <SignUp /> },
+	{ path: '/login/complete', element: <LoginComplete /> },
+	{ path: '/terms-agreement', element: <TermsAgreement /> },
+
+	// 콜백
+	{ path: '/auth/kakao/callback', element: <KakaoCallback /> },
+	{ path: '/auth/naver/callback', element: <NaverCallback /> },
+];
+
 const App: React.FC = () => {
 	return (
 		<BrowserRouter>
 			<Routes>
-				<Route path="/" element={<Home />} />
-				<Route path="/chats/:roomId" element={<ChatRoom />} />
-				<Route path="/mypage" element={<MyPage />} />
-				<Route path="/my-post/:postId" element={<MyPost />} />
-				<Route path="/profile/edit" element={<ProfileEdit />} />
-				<Route path="/account-setting" element={<AccountSetting />} />
-
-				<Route path="/account-edit" element={<AccountEdit />} />
-				<Route path="/account-cancel" element={<AccountCancel />} />
-				<Route path="/Verification" element={<Verification />} />
-				<Route path="/login" element={<Login />} />
-				<Route path="/chats" element={<Chats />} />
-				<Route path="/upload" element={<Upload />} />
-				<Route path="/post/:postId" element={<Post />} />
-				<Route path="/users/:userId" element={<ProfileViewer />} />
-				<Route path="signup" element={<SignUp />} />
-
-				<Route path="/auth/kakao/callback" element={<KakaoCallback />}></Route>
-				<Route path="/auth/naver/callback" element={<NaverCallback />}></Route>
-				<Route path="/auth/google/callback" element={<GoogleCallback />}></Route>
+				{/* 인증이 필요한 페이지 */}
+				{protectedRoutes.map(({ path, element }) => (
+					<Route key={path} path={path} element={<ProtectedRoute>{element}</ProtectedRoute>} />
+				))}
+
+				{/* 인증이 필요 없는 페이지 */}
+				{publicRoutes.map(({ path, element }) => (
+					<Route key={path} path={path} element={element} />
+				))}
+
+				{/* 없는 페이지에 대한 처리 */}
+				<Route path="*" element={<NotFound />} />
 			</Routes>
 		</BrowserRouter>
 	);

src/apis/auth/dto.ts

@@ -0,0 +1,14 @@
+import { BaseSuccessResponse } from '../core/dto';
+
+// jwt를 이용한 사용자 정보 조회 응답
+export type getUserInfoByJwtResponse = BaseSuccessResponse<getUserInfoByJwtData>;
+// jwt를 이용한 사용자 정보 조회 응답 데이터
+export interface getUserInfoByJwtData {
+	userId: string;
+	name: string;
+	phoneNumber: string;
+	email: string;
+	nickname: string;
+	profilePictureUrl: string;
+	bio: string;
+}

src/apis/auth/index.ts

@@ -0,0 +1,5 @@
+import { getUserInfoByJwtResponse } from './dto';
+import { newRequest } from '../core';
+
+// jwt로 사용자 정보 조회 api /auth/me
+export const getUserInfoByJwtApi = () => newRequest.get<getUserInfoByJwtResponse>('/auth/me');

src/apis/chatting/dto.ts

@@ -0,0 +1,43 @@
+// 채팅방 리스트 조회
+// base response 형태를 따르지 않으므로 data 접미사를 사용했습니다.
+// response
+export interface ChatRoomData {
+	chatRoomId: number;
+	otherUser: OtherUserDto;
+	latestMessage: LatestMessageDto;
+}
+
+export interface OtherUserDto {
+	id: number;
+	nickname: string;
+	profilePictureUrl: string;
+}
+
+export interface LatestMessageDto {
+	content: string;
+	createdAt: string;
+}
+
+// 채팅방 전체 대화 내역 조회
+// 최근 메시지 수신
+// response
+export interface chatRoomMessagesData {
+	id: number;
+	content: string;
+	fromUser: FromUserDto;
+	toUser: ToUserDto;
+	createdAt: string;
+	toUserReadAt: any;
+}
+
+export interface FromUserDto {
+	id: number;
+	nickname: string;
+	profilePictureUrl: string;
+}
+
+export interface ToUserDto {
+	id: number;
+	nickname: string;
+	profilePictureUrl: string;
+}

src/apis/core/dto.ts

@@ -0,0 +1,9 @@
+// 새로운 서버 응답 타입
+export type BaseSuccessResponse<T = any> = {
+	isSuccess: boolean;
+	code: string;
+	data: T;
+};
+
+// 응답 body가 없을 경우
+export type EmptySuccessResponse = BaseSuccessResponse<void>;

src/apis/core/index.ts

@@ -5,8 +5,9 @@ import axios, {
 	AxiosResponse,
 	InternalAxiosRequestConfig,
 } from 'axios';
-import { JWT_KEY } from '../../config/constant';
+import { JWT_KEY, NEW_JWT_KEY } from '../../config/constant';
 
+// 기존 서버 응답 타입
 export type BaseResponse<T = any> = {
 	isSuccess: boolean;
 	message: string;
@@ -35,6 +36,43 @@ interface CustomInstance extends AxiosInstance {
 	patch<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
 }
 
+// 새로운 서버 axios 인스턴스
+export const newRequest: CustomInstance = axios.create({
+	baseURL: import.meta.env.VITE_NEW_API_URL,
+	timeout: 20000,
+	headers: {
+		accept: 'application/json',
+		Authorization: `Bearer ${NEW_JWT_KEY}`,
+	},
+});
+
+newRequest.interceptors.request.use(
+	(config) => {
+		const jwt = window.localStorage.getItem(NEW_JWT_KEY);
+		config.headers.Authorization = `Bearer ${jwt}`;
+		return config;
+	},
+	(error) => {
+		return Promise.reject(error);
+	},
+);
+
+newRequest.interceptors.response.use(
+	(response) => {
+		// 2XX 범위
+		// response body 반환
+		console.log('network log', response);
+		return response.data;
+	},
+	(error) => {
+		// 그 외
+		// error로 AxiosError 타입 반환
+		console.error(error);
+		return Promise.reject(error);
+	},
+);
+
+// 기존 서버 axios 인스턴스
 export const request: CustomInstance = axios.create({
 	baseURL: import.meta.env.VITE_API_URL,
 	timeout: 20000,