[Deploy] 배포 및 cicd

.github/workflows/ci.yaml

@@ -0,0 +1,39 @@
+name: CI
+
+on: [pull_request]
+
+jobs:
+    lint:
+        name: Lint
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v2
+              with:
+                  node-version: '18'
+            - name: Install pnpm
+              run: npm install -g pnpm
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Run lint
+              run: pnpm lint
+    build:
+        name: Build
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v2
+              with:
+                  node-version: '18'
+            - name: Install pnpm
+              run: npm install -g pnpm
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Run build
+              run: CI='false' pnpm build

.github/workflows/main.yaml

@@ -0,0 +1,52 @@
+name: cicd action
+
+on:
+    push:
+        branches:
+            - main
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout source code
+              uses: actions/checkout@v3
+
+            - name: Check Node.js version
+              run: node -v
+
+            - name: Install pnpm
+              run: npm install -g pnpm
+
+            - name: Create .env file
+              run: |
+                  echo "VITE_API_BASE_URL=${{ secrets.VITE_API_BASE_URL }}" >> .env
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Configure AWS credentials
+              uses: aws-actions/configure-aws-credentials@v4
+              with:
+                  aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                  aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+                  aws-region: ${{ secrets.AWS_REGION }}
+
+            - name: Generate build
+              run: pnpm run build
+
+            - name: Deploy to S3
+              run: |
+                  aws s3 cp --recursive --region ap-northeast-2 dist s3://${{ secrets.AWS_BUCKET_NAME }}
+
+            - name: Invalidate CloudFront Cache
+              run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} --paths "/*"
+              continue-on-error: true
+
+            - name: Notify Discord
+              if: success()
+              run: |
+                  curl -H "Content-Type: application/json" \
+                  -X POST \
+                  -d "{\"content\": \"✅ 배포가 완료되었습니다! 🎉 (브랜치: main)\"}" \
+                  ${{ secrets.DISCORD_WEBHOOK_URL }}

src/components/common/modalProvider.tsx

@@ -13,7 +13,6 @@ export const MODAL_TYPES = {
     ErrorModal: 'ErrorModal',
     DateCourseSearchFilterModal: 'DateCourseSearchFilterModal',
     SettingsModal: 'SettingsModal', //설정 모달 추가
-
 };
 
 export const MODAL_COMPONENTS = {

src/main.tsx

@@ -9,8 +9,10 @@ import { queryClient } from './api/queryClient.ts';
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
-    <QueryClientProvider client={queryClient}>
-        {import.meta.env.VITE_DEV_MODE && <ReactQueryDevtools initialIsOpen={false} />}
-        <App />
-    </QueryClientProvider>,
+    <StrictMode>
+        <QueryClientProvider client={queryClient}>
+            {import.meta.env.VITE_DEV_MODE && <ReactQueryDevtools initialIsOpen={false} />}
+            <App />
+        </QueryClientProvider>
+    </StrictMode>,
 );

src/pages/TestInputPage.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import EditableInputBox from '@/components/common/EditableInputBox';
 
-import SearchIcon from '@/assets/icons/Search_Blank.svg?react';
+// import SearchIcon from '@/assets/icons/Search_Blank.svg?react';
 
 export default function TestInputPage() {
     const [text, setText] = useState('');

src/pages/dateCourse/MakeCourse.tsx

@@ -10,7 +10,7 @@ export default function MakeCourse() {
     return (
         <div className="flex w-full h-full justify-center items-center py-[16px]">
             <div className="flex w-[967px] max-w-[80vw] flex-col gap-[40px]">
-                <GraySvgButton type="backward" size="small" onClick={() => navigate('/dateCourse')} />
+                <GraySvgButton type="backward" onClick={() => navigate('/dateCourse')} />
                 <img src={DateCourseImg} alt="" />
                 <div className="flex w-full text-center font-heading3 items-center justify-center">
                     WithTime은 당신의 데이트 스타일과 상황을 분석해,