🚀 Deploy - S3 Bucket Build

.github/workflows/dev_cicd.yml

@@ -2,88 +2,43 @@ name: Web Application Develop Server CI/CD
 
 on:
   pull_request:
-    branches: [ "develop" ]
+    branches: [ "dev" ]
     types:
       - opened
       - synchronize
       - closed
 
 jobs:
-  CI:
-    runs-on: ubuntu-20.04
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      # Cache Gradle
-      - name: Cache Gradle
-        uses: actions/cache@v3
-        with:
-          path: |
-            ~/.gradle/caches
-            ~/.gradle/wrapper
-          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
-          restore-keys: |
-            ${{ runner.os }}-gradle-
-
-      ### runner application java 설정
-      - name: Set up JDK 17
-        uses: actions/setup-java@v3
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
         with:
-          java-version: '17'
-          distribution: 'temurin'
-
-      ### gradlew 실행 권한 부여
-      - name: Grant execute Permission for gradlew
+          node-version: ${{ matrix.node-version }}
+      - name: Create env file
         run: |
-          chmod +x gradlew
-
-      ### project build
-      - name: Build with Gradle
+          touch .env
+          echo REACT_APP_API_ENDPOINT=${{ secrets.AWS_S3_ENDPOINT }} >> .env
+          cat .env
+      - name: npm Install
         run: |
-          ./gradlew clean build -x test
-
-      ### Docker Image Build and Push
-      - name: Login to Docker Hub
-        if: github.event.pull_request.merged == true
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        if: github.event.pull_request.merged == true
-        uses: docker/setup-buildx-action@v2
-
-      - name: Build and push
-        if: github.event.pull_request.merged == true
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_REPONAME }}
-
-  # closed에 대한 server deploy
-  CD:
-    if: github.event.pull_request.merged == true
-    needs: [CI]
-
-    runs-on: ubuntu-20.04
-
-    steps:
-      ### SSH Connect and Docker Image Pull and Container Run
-      - name: Docker Image Pull and Container Run
-        uses: appleboy/ssh-action@v1.0.0
+          npm install
+      - name: npm Build
+        run: |
+          npm run build
+      - name: Deploy to S3
+        uses: jakejarvis/s3-sync-action@master
         with:
-          host: ${{ secrets.DEV_SSH_HOST }}
-          username: ${{ secrets.DEV_SSH_USERNAME }}
-          password: ${{ secrets.DEV_SSH_PASSWORD }}
-          key: ${{ secrets.DEV_SSH_KEY }}
-          port: ${{ secrets.DEV_SSH_PORT }}
-          script: |
-            docker stop was
-            docker rm was
-            docker image rm ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_REPONAME }}
-            docker run -d -p 8080:8080 --name was ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_REPONAME }}
+          args: --acl public-read --delete
+        env:
+          AWS_S3_BUCKET: ${{ secrets.AWS_STAGING_BUCKET_NAME }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.AWS_DEFAULT_REGION }}
+          SOURCE_DIR: "dist"

package.json

@@ -15,14 +15,17 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.1",
+    "react-speech-recognition": "^3.10.0",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
+    "regenerator-runtime": "^0.14.1",
     "styled-components": "^6.1.12"
   },
   "devDependencies": {
     "@types/node": "^22.4.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/react-speech-recognition": "^3.9.5",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",

src/App.tsx

@@ -1,4 +1,5 @@
 // App.tsx
+import 'regenerator-runtime/runtime'
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyle } from './style/globalStyle';

src/components/modal/dialogueDetail/DialogueDetailModal.tsx

@@ -0,0 +1,87 @@
+import * as S from "./style";
+import DoubleRightChevron from "../../../assets/icons/DoubleRightChevron.svg";
+import Microphone from "../../../assets/icons/Microphone.svg";
+import SizedBox from "@components/common/sized-box/SizedBox.tsx";
+import Badge from "@components/common/Badge.tsx";
+import {theme} from "../../../style/theme";
+import {Spacer} from "@components/common/spacer/style.ts";
+import useSpeechToText from "../../../hooks/useSpeechToText.ts";
+import {useEffect} from "react";
+
+interface props {
+    onClick: () => void;
+    isVisible: boolean;
+}
+
+export default function DialogueDetailModal(props: props) {
+
+    const { transcript, listening, toggleListening } = useSpeechToText();
+
+    const content = "질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받...질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠?";
+    const adminAnswer = false;
+
+    const isAnswered = false;
+
+    const isAdmin = true;
+
+    const answer = "질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받...질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받...질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받...질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건가요? 저보고 하라고요? 어쩌라고요? 킹받죠? 질문이 머예요? 먹는건";
+
+    useEffect(() => {
+        console.log(transcript);
+    }, [transcript]);
+
+    return (
+        <S.Overlay>
+            <S.Container isVisible={props.isVisible}>
+                <S.SvgIcon src={DoubleRightChevron} alt="DoubleRightChevron" onClick={props.onClick} width={"32px"} height={"32px"}/>
+                <SizedBox height={"40px"}/>
+                <S.Row>
+                    <S.Title>🚀 대화 상세</S.Title>
+                    <S.CreatedAt>참여날짜: 2021-08-01</S.CreatedAt>
+                </S.Row>
+                <SizedBox height={"20px"}/>
+                <S.Content>
+                    {content}
+                </S.Content>
+                <SizedBox height={"40px"}/>
+                <S.Line/>
+                <SizedBox height={"40px"}/>
+                {
+                    !isAdmin && (isAnswered ? (
+                        <>
+                            <S.Row>
+                                <Badge text={adminAnswer ? "관리자 답변" : "AI 답변"} color={adminAnswer ? theme.Colors.primary : theme.Colors.green} textColor={theme.Colors.white}/>
+                                <S.CreatedAt>작성날짜: 2021-08-01</S.CreatedAt>
+                            </S.Row>
+                            <SizedBox height={"20px"}/>
+                            <S.Content>
+                                {answer}
+                            </S.Content>
+                        </>
+                    ) : <>
+                        <S.Empty>이전에 유사한 질문이 없었어요... 관리자가 답변을 작성하기 전입니다...</S.Empty>
+                    </>)
+                }
+
+                {
+                    isAdmin && !isAnswered && (
+                        <>
+                            <S.InputContainer>
+                                <S.Input placeholder={"답변을 작성해주세요"}>
+                                    {transcript}
+                                </S.Input>
+                            </S.InputContainer>
+                            <SizedBox height={"12px"}/>
+                            <S.ButtonContainer>
+                                <Spacer flex={1} direction={"horizontal"}/>
+                                <S.SvgIcon src={Microphone} alt="Microphone" width={"24px"} height={"24px"} color={listening ? theme.Colors.green600 : theme.Colors.neutral} onClick={toggleListening}/>
+                                <SizedBox width={"12px"}/>
+                                <S.AnswerButton>답변하기</S.AnswerButton>
+                            </S.ButtonContainer>
+                        </>
+                    )
+                }
+            </S.Container>
+        </S.Overlay>
+    )
+}