프론트엔드 개발 서버 구축

.github/workflows/deploy_development.yml

@@ -0,0 +1,78 @@
+name: React Development Deploy
+on:
+  push:
+    branches:
+      - develop
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout Github Action
+        uses: actions/checkout@v3
+
+      - name: .env setting
+        run: |
+          echo "VITE_BASE_SERVER_URL=${{ secrets.VITE_BASE_DEV_SERVER_URL }}" >> .env
+          echo "VITE_APP_FCM_API_KEY=${{ secrets.VITE_APP_FCM_API_KEY }}" >> .env
+          echo "VITE_APP_FCM_AUTH_DOMAIN=${{ secrets.VITE_APP_FCM_AUTH_DOMAIN }}" >> .env
+          echo "VITE_APP_FCM_PROJECT_ID=${{ secrets.VITE_APP_FCM_PROJECT_ID }}" >> .env
+          echo "VITE_APP_FCM_STORAGE_BUCKET=${{ secrets.VITE_APP_FCM_STORAGE_BUCKET }}" >> .env
+          echo "VITE_APP_FCM_MESSAGING_SENDER_ID=${{ secrets.VITE_APP_FCM_MESSAGING_SENDER_ID }}" >> .env
+          echo "VITE_APP_FCM_APP_ID=${{ secrets.VITE_APP_FCM_APP_ID }}" >> .env
+          echo "VITE_APP_FCM_MEASUREMENT_ID=${{ secrets.VITE_APP_FCM_MEASUREMENT_ID }}" >> .env
+          echo "VITE_APP_FCM_VAPID_KEY=${{ secrets.VITE_APP_FCM_VAPID_KEY }}" >> .env
+
+      - name: Create appspec.yml
+        run: |
+          cat << EOF > appspec.yml
+          version: 0.0
+          os: linux
+          files:
+            - source: /
+              destination: /home/ubuntu/mallang-trip-dev
+              overwrite: yes
+          permissions:
+            - object: /home/ubuntu/mallang-trip-dev
+              owner: ubuntu
+              group: ubuntu
+              mode: 755
+          EOF
+
+      - name: Check Node version
+        run: node -v
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build -- --outDir=dev
+        env:
+          CI: ""
+
+      - name: Remove Dependencies
+        run: rm -rf node_modules
+
+      - name: zip create
+        run: zip -qq -r ./react-build.zip .
+        shell: bash
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        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: Upload to S3
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        run: |
+          aws s3 cp --region ap-northeast-2 ./react-build.zip s3://mallang-trip-react/react-build.zip
+
+      - name: Deploy # Deploy to EC2
+        run: aws deploy create-deployment
+          --application-name codedeploy-react
+          --deployment-config-name CodeDeployDefault.AllAtOnce
+          --deployment-group-name react-app
+          --s3-location bucket=mallang-trip-react,key=react-build.zip,bundleType=zip

.github/workflows/deploy.yml → .github/workflows/deploy_production.yml

@@ -1,4 +1,4 @@
-name: React Deploy
+name: React Production Deploy
 on:
   push:
     branches:
@@ -22,6 +22,22 @@ jobs:
           echo "VITE_APP_FCM_MEASUREMENT_ID=${{ secrets.VITE_APP_FCM_MEASUREMENT_ID }}" >> .env
           echo "VITE_APP_FCM_VAPID_KEY=${{ secrets.VITE_APP_FCM_VAPID_KEY }}" >> .env
 
+      - name: Create appspec.yml
+        run: |
+          cat << EOF > appspec.yml
+          version: 0.0
+          os: linux
+          files:
+            - source: /
+              destination: /home/ubuntu/mallang-trip
+              overwrite: yes
+          permissions:
+            - object: /home/ubuntu/mallang-trip
+              owner: ubuntu
+              group: ubuntu
+              mode: 755
+          EOF
+
       - name: Check Node version
         run: node -v
 
@@ -33,6 +49,9 @@ jobs:
         env:
           CI: ""
 
+      - name: Remove Dependencies
+        run: rm -rf node_modules
+
       - name: zip create
         run: zip -qq -r ./react-build.zip .
         shell: bash

.gitignore

@@ -24,4 +24,5 @@ dist-ssr
 *.sw?
 
 # dotenv environment variable files
-.env
+.env
+.env.development

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "production": "vite --mode production",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

src/pages/MyHeartPage/HeartItem/index.jsx

@@ -47,15 +47,18 @@ function HeartItem({
           : navigate(`/destination/detail/${destinationId}`)
       }
     >
-      <img
-        className="absolute top-0 left-0 object-cover object-center w-full h-full overflow-hidden rounded-lg"
-        src={image}
-        alt="heart-image"
-      />
+      {image ? (
+        <img
+          className="absolute top-0 left-0 object-cover object-center w-full h-full overflow-hidden rounded-lg"
+          src={image}
+          alt={name}
+        />
+      ) : null}
       <img
         className="absolute top-2 right-2 cursor-pointer z-10"
         src={heart ? FillHeart : EmptyHeart}
         onClick={heartClickHandler}
+        alt="image"
       />
       <div className="absolute top-0 left-0 flex flex-col items-center justify-center w-full h-full rounded-lg text-white bg-black bg-opacity-50">
         <div className="text-xl">{name}</div>

src/pages/PartyPage/PartyIntro/index.jsx

@@ -0,0 +1,11 @@
+function PartyIntro({ content }) {
+  if (!content) return;
+  return (
+    <div className="flex flex-col gap-1 my-7">
+      <p className="text-lg text-black font-bold">파티 소개</p>
+      <p className="text-sm text-darkgray">{content}</p>
+    </div>
+  );
+}
+
+export default PartyIntro;

src/pages/PartyPage/index.jsx

@@ -16,6 +16,7 @@ import ConfirmModal from "../../components/ConfirmModal";
 import CheckModal from "../../components/CheckModal";
 import PartyDate from "./PartyDate";
 import PartyMember from "./PartyMember";
+import PartyIntro from "./PartyIntro";
 import ToTalPrice from "./ToTalPrice";
 import JoinButton from "./JoinButton";
 import CreditInfo from "./CreditInfo";
@@ -285,6 +286,7 @@ function PartyPage() {
             startDate={partyData.startDate}
           />
         )}
+      <PartyIntro content={partyData.content} />
       <ToTalPrice
         totalPrice={
           user.userId === partyData.driverId