deploy: 초기 배포 (#23)

* style : 전역 디자인 시스템 세팅

* style : 전역 디자인 시스템 세팅

* chore : 이슈 템플릿 수정

* refactor: build-test.yml 파일 수정 (#14)

- node_modules 캐싱 기능 추가
- main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정

Co-authored-by: wukddang <[email protected]>

* feature: deploy.yml 파일 추가 (#15)

* feature: deploy.yml 파일 추가
- main 브랜치에 push할 때 S3로 파일 업로드

* fix: pre-push 코드 수정

* fix: deploy.yml 파일 수정
- build폴더가 아닌 dist 폴더로 수정

---------

Co-authored-by: wukddang <[email protected]>

* [Style] 모바일 레이아웃 작업 (#19)

* style : 모바일 레이아웃 작업

* chore : 이슈, pr 템플릿 docs 수정

---------

Co-authored-by: judahhh <[email protected]>
Co-authored-by: wukddang <[email protected]>

.github/ISSUE_TEMPLATE/bug.md

@@ -1,23 +1,15 @@
 ---
-name: bug
-about: 버그를 수정합니다
-title: ''
-labels: ''
-assignees: ''
-
----
-
----
-name: bug issue template
-about: 'about need to fix bug'
-title: "🐛 [Bug] "
+name: Bug Issue Template
+about: '버그를 수정합니다!'
+title: '🐛 [Bug] '
 labels: Bug
 assignees: ''
 
 ---
+
 ## 🛠️ 어떤 버그를 고치나요?
 
 ## 버그 작업 브랜치
 
 ## ☑ Bug Fix TODOS
-- [x] 작업
+- [ ] 작업

.github/ISSUE_TEMPLATE/feature.md

@@ -1,23 +1,15 @@
 ---
-name: feature
-about: 기능을 추가합니다
-title: ''
-labels: ''
-assignees: ''
-
----
-
----
-name: feature request template
-about: feature
-title: "🚀 [Feature] "
+name: Feature issue template
+about: 새로운 기능을 추가합니다!
+title: '🚀 [Feature] '
 labels: Feature
 assignees: ''
 
 ---
+
 ## 🚀 어떤 기능을 만드나요?
 
 ## 작업 중인 브랜치
 
 ## ☑ Implement TODO
-- [x] 작업
+- [ ] 작업

.github/ISSUE_TEMPLATE/refactor.md

@@ -1,23 +1,16 @@
 ---
-name: refactor
-about: 코드를 리팩토링합니다
-title: ''
-labels: ''
+name: Refactor Issue Template
+about: '리팩토링이 필요한 코드를 수정합니다!'
+title: '🔨 [Refactor] '
+labels: 'Refactor'
 assignees: ''
 
 ---
 
----
-name: refactor issue template
-about: 'about need to refactor '
-title: " [Refactor] "
-labels: Refactor
-assignees: ''
 
----
 ## 🛠️ 리팩토링이 필요한 부분
 
 ## 리팩토링 작업 브랜치
 
 ## ☑ Refactoring TODO
-- [x] 작업
+- [ ] 작업

.github/ISSUE_TEMPLATE/style.md

@@ -1,23 +1,16 @@
 ---
-name: style
-about: 애플리케이션을 디자인합니다.
-title: ''
-labels: ''
+name: Style Issue Template
+about: '새로운 디자인을 만듭니다!'
+title: '💄 [Style] '
+labels: 'Style'
 assignees: ''
 
 ---
 
----
-name: style issue template
-about: 'make Style Component'
-title: "💄 [Style] "
-labels: Style
-assignees: ''
 
----
 ## ✨ 어떤 Style 작업인가요?
 
 ## 스타일 작업 브랜치
 
 ## ☑ Style TODO
-- [x] 작업
+- [ ] 작업

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,6 +4,6 @@ close: #
 
 ## 작업 내용 설명
 <!-- 스크린샷 및 작업내용을 적어주세요 -->
-- [x] 작업
+- 
 ## 리뷰어에게 한마디
 <!-- 리뷰어들이 참고해야 하는 사항을 적어주세요 -->

.github/workflows/build-test.yml

@@ -2,25 +2,41 @@ name: Build Test
 
 on:
   push:
-    branches: [main]
+    branches: [main, dev]
   pull_request:
-    branches: [main]
+    branches: [main, dev]
   workflow_dispatch:
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout code
+      - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Set up Node.js
+      - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: '18'
 
-      - name: Install dependencies
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v3
+        with:
+          # cache의 대상을 정합니다. npm에서 의존성이 설치되는 디렉터리인 node_modules를 대상으로 합니다.
+          path: '**/node_modules'
+          # cache를 무효화하를 결정하는 기준은 의존성이 변경되면 함께 변경되는 파일인 package-lock.json을 기준으로 합니다.
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          # key가 유효하지 않은 경우 runner의 운영체제 값과 node라는 suffix를 key로 복구합니다.
+          # 결과적으로 package-lock.json이 변경되지 않았다면 캐싱된 node_modules를 사용합니다.
+          # 만약 복구될 캐시가 없다면 아래에서 사용할 cache-hit는 false가 됩니다.
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        # 이전의 cache가 없다면 의존성을 설치합니다.
+        if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
 
       - name: Build React app

.github/workflows/deploy.yml

@@ -0,0 +1,53 @@
+name: CD
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v3
+        with:
+        # cache의 대상을 정합니다. npm에서 의존성이 설치되는 디렉터리인 node_modules를 대상으로 합니다.
+          path: '**/node_modules'
+          # cache를 무효화하를 결정하는 기준은 의존성이 변경되면 함께 변경되는 파일인 package-lock.json을 기준으로 합니다.
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          # key가 유효하지 않은 경우 runner의 운영체제 값과 node라는 suffix를 key로 복구합니다.
+          # 결과적으로 package-lock.json이 변경되지 않았다면 캐싱된 node_modules를 사용합니다.
+          # 만약 복구될 캐시가 없다면 아래에서 사용할 cache-hit는 false가 됩니다.
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        # 이전의 cache가 없다면 의존성을 설치합니다.
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Build React app
+        run: npm run build
+
+      - name: S3 Deploy
+        run: aws s3 sync ./dist s3://coffee-meet-frontend-s3/ --acl bucket-owner-full-control # 현재 build된 폴더에 접근 후 s3 버킷인 coffee-meet-frontend-s3에 파일 업로드
+        env: 
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+      - name: Invalidate CloudFront Cache # 새로 리소스를 업데이트할 때 기존 캐시 무효화
+        uses: chetan/invalidate-cloudfront-action@master
+        env:
+          AWS_DISTRIBUTION: ${{ secrets.AWS_DISTRIBUTION_ID }}
+          PATHS: '/index.html'
+        continue-on-error: true

.husky/pre-push

@@ -1,6 +1,7 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+npm install
 npm run lint
 npm run build
 rm -rf dist

index.html

@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>CoffeeMeet</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -15,6 +15,7 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^4.36.1",
     "axios": "^1.5.1",
+    "emotion-reset": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",

public/manifest.json

@@ -0,0 +1,15 @@
+{
+    "short_name": "CoffeeMeet",
+    "name": "CoffeeMeet",
+    "icons": [
+      {
+        "src": "coffee.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      }
+    ],
+    "start_url": "/index.html",
+    "display": "standalone",
+    "orientation": "landscape"
+  }
+

src/App.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from 'react-router-dom'
 
+import Layout from '@/components/layouts/Layout'
 import AdminPage from '@/pages/admin'
 import AdminLoginPage from '@/pages/admin/AdminLogin'
 import ChatListPage from '@/pages/chatList'
@@ -15,29 +16,29 @@ import RegisterPage from '@/pages/register'
 const App = () => {
   return (
     <Routes>
-      {/* <Route element={<Layout />}> */}
-      <Route element={<PrivateRoute auth={true} />}>
-        <Route path={'/'} element={<HomePage />} />
-        <Route path={'/profile/*'} element={<ProfilePage />} />
-        <Route path={'/chatting'} element={<ChattingPage />} />
-        <Route path={'/chat-list'} element={<ChatListPage />} />
-        <Route path={'*'} element={<NotFoundPage />}></Route>
-      </Route>
+      <Route element={<Layout />}>
+        <Route element={<PrivateRoute auth={true} />}>
+          <Route path={'/'} element={<HomePage />} />
+          <Route path={'/profile/*'} element={<ProfilePage />} />
+          <Route path={'/chatting'} element={<ChattingPage />} />
+          <Route path={'/chat-list'} element={<ChatListPage />} />
+          <Route path={'*'} element={<NotFoundPage />}></Route>
+        </Route>
 
-      <Route element={<PrivateRoute auth={false} />}>
-        <Route path={'/landing'} element={<LandingPage />} />
-        <Route path={'/login'} element={<LoginPage />} />
-        <Route path={'/register/*'} element={<RegisterPage />} />
-        <Route path={'/admin-login'} element={<AdminLoginPage />} />
-        <Route path={'*'} element={<NotFoundPage />}></Route>
-      </Route>
+        <Route element={<PrivateRoute auth={false} />}>
+          <Route path={'/landing'} element={<LandingPage />} />
+          <Route path={'/login'} element={<LoginPage />} />
+          <Route path={'/register/*'} element={<RegisterPage />} />
+          <Route path={'/admin-login'} element={<AdminLoginPage />} />
+          <Route path={'*'} element={<NotFoundPage />}></Route>
+        </Route>
 
-      <Route element={<PrivateRoute auth={true} superAuth={true} />}>
-        <Route path={'/admin/*'} element={<AdminPage />}></Route>
+        <Route element={<PrivateRoute auth={true} superAuth={true} />}>
+          <Route path={'/admin/*'} element={<AdminPage />}></Route>
+          <Route path={'*'} element={<NotFoundPage />}></Route>
+        </Route>
         <Route path={'*'} element={<NotFoundPage />}></Route>
       </Route>
-      <Route path={'*'} element={<NotFoundPage />}></Route>
-      {/* </Route> */}
     </Routes>
   )
 }

src/components/layouts/Layout.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled'
+import { Outlet } from 'react-router-dom'
+
+import { theme } from '@/styles/theme'
+
+const Layout = () => {
+  return (
+    <MainContainer>
+      <Outlet />
+    </MainContainer>
+  )
+}
+
+const MainContainer = styled.main`
+  position: relative;
+  max-width: 480px;
+  height: calc(var(--vh, 1vh) * 100);
+  margin: 0 auto;
+  background-color: ${theme.palette.GRAY200};
+`
+
+export default Layout