[홈화면] 슬라이드 뷰, Application 뷰 컴포넌트 #25 pull develop

.github/workflows/main.yml

@@ -0,0 +1,126 @@
+# This is a basic workflow to help you get started with Actions
+
+name: NL-FE-Workflow
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the "main" branch
+  push:
+    branches:
+      - main
+      - develop
+
+  pull_request:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-18.04
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      # Skip this becuz ubuntu-latest supports below env + AWS CLI Tool
+      # https://github.com/actions/virtual-environments/blob/ubuntu18/20201108.1/images/linux/Ubuntu1804-README.md#cli-tools
+      #- name: Set Node version
+      #  uses: actions/setup-node@v3
+      #  with:
+      #    node-version: 16.16.0
+      #    cache: yarn
+      # 
+      # - name: Install AWS CLI
+      #   run: |
+      #     sudo apt-get update
+      #     sudo apt-get -y install awscli
+
+      - name: Check Node Version
+        run: node -v
+
+      - name: Install Dependencies
+        run: npm install
+        # run: npm install --legacy-peer-deps
+
+      - name: Build
+        run: CI=false npm run build # To ignore treating warnings
+
+      - name: Archive production artifacts   # upload file
+        uses: actions/upload-artifact@v3
+        with:
+          name: build                        # artifact name
+          path: |                            # upload path
+            build
+            scripts
+            appspec.yml
+  
+
+  deploy-main:
+
+    runs-on: ubuntu-18.04
+    needs: build
+    if: ${{ github.event_name == 'push' && github.ref_name == 'main' }}
+
+    steps:
+      - name: Download production artifacts  # download file
+        uses: actions/download-artifact@v3
+        with:
+          name: build                        # artifact name
+
+      - name: Create ZIP File 
+        run: zip -qq -r ./NL-FE-main-build.zip . -x "*node_modules*"
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@master
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: Upload to S3
+        run: aws s3 cp --region ap-northeast-2 ./NL-FE-main-build.zip s3://nl-fe-s3/NL-FE-main-build.zip
+
+      - name: Deploy to EC2
+        run: aws deploy create-deployment
+          --application-name NL_FE_main_CodeDeploy
+          --deployment-config-name CodeDeployDefault.AllAtOnce
+          --deployment-group-name NL_Homepage_FE_main
+          --s3-location bucket=nl-fe-s3,key=NL-FE-main-build.zip,bundleType=zip
+
+
+  deploy-develop:
+
+    runs-on: ubuntu-18.04
+    needs: build
+    if: ${{ github.event_name == 'push' && github.ref_name == 'develop' }}
+
+    steps:
+      - name: Download production artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: build
+
+      - name: Create ZIP File 
+        run: zip -qq -r ./NL-FE-develop-build.zip . -x "*node_modules*"
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@master
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: Upload to S3
+        run: aws s3 cp --region ap-northeast-2 ./NL-FE-develop-build.zip s3://nl-fe-s3/NL-FE-develop-build.zip
+
+      - name: Deploy to EC2
+        run: aws deploy create-deployment
+          --application-name NL_FE_dev_CodeDeploy
+          --deployment-config-name CodeDeployDefault.AllAtOnce
+          --deployment-group-name NL_Homepage_FE_dev
+          --s3-location bucket=nl-fe-s3,key=NL-FE-develop-build.zip,bundleType=zip

.gitignore

@@ -20,4 +20,4 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*

appspec.yml

@@ -0,0 +1,20 @@
+version: 0.0
+os: linux
+
+files:
+  - source: /
+    destination: /home/ubuntu/FE
+    overwrite: yes
+permissions:
+  - object: /
+    owner: ubuntu
+    group: ubuntu
+    mode: 755
+hooks:
+  AfterInstall:
+    # location은 프로젝트의 root경로를 기준
+    # 파일을 올린 후 진행해야하는 작업을 적은 deploy.sh 파일 경로를 적어줍니다.
+    # 필요 없을 경우 안 적어도 되는 것 같습니다(테스트 필요).
+    - location: scripts/deploy.sh
+      timeout: 300
+      runas: ubuntu

scripts/deploy.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+# REPOSITORY=/home/ubuntu/FE
+# cd $REPOSITORY
+pm2 reload all

src/components/activity/body/content/index.tsx

@@ -0,0 +1,118 @@
+import styled from "@emotion/styled";
+import { useNavigate } from "react-router-dom";
+import { ContentProps } from "..";
+import { Text } from "../../../common";
+import class1 from "../../../../assets/activity/defaultImg/class-1.png";
+import class2 from "../../../../assets/activity/defaultImg/class-2.png";
+import class3 from "../../../../assets/activity/defaultImg/class-3.png";
+import class4 from "../../../../assets/activity/defaultImg/class-4.png";
+import study1 from "../../../../assets/activity/defaultImg/study-1.png";
+import study2 from "../../../../assets/activity/defaultImg/study-2.png";
+import study3 from "../../../../assets/activity/defaultImg/study-3.png";
+import study4 from "../../../../assets/activity/defaultImg/study-4.png";
+import se1 from "../../../../assets/activity/defaultImg/se-1.png";
+import se2 from "../../../../assets/activity/defaultImg/se-2.png";
+import se3 from "../../../../assets/activity/defaultImg/se-3.png";
+import se4 from "../../../../assets/activity/defaultImg/se-4.png";
+import { keyframes } from "@emotion/react";
+
+const defaultImgs = {
+  클래스: [class1, class2, class3, class4],
+  스터디: [study1, study2, study3, study4],
+  특강: [se1, se2, se3, se4],
+};
+
+const ContentContainer = styled.div<{
+  thumbnail: string | null;
+  color: string;
+  randomImg: string;
+}>`
+  animation: ${keyframes`
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+      }`} 0.2s linear;
+  width: 305.43px;
+  height: 373.72px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 25px 20px;
+  overflow: hidden;
+  background-color: ${({ color }) => color};
+  position: relative;
+  border-radius: ${({ theme }) => theme.borderRadius.default};
+  cursor: pointer;
+  &::before {
+    content: "";
+    background-image: url(${({ thumbnail, randomImg }) =>
+      !thumbnail ? randomImg : thumbnail});
+    background-size: cover;
+    opacity: ${({ thumbnail }) => (thumbnail === null ? "1" : "0.5")};
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+  }
+  .top {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .generation {
+      width: 35px;
+      font-size: ${({ theme }) => theme.font.size.medium}px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: ${({ theme }) => theme.borderRadius.default};
+      background-color: ${({ theme }) => theme.background.white};
+      padding: 5px 0;
+      margin: 10px 0 0 0;
+    }
+  }
+  .bottom {
+    position: relative;
+  }
+`;
+
+const Content = ({
+  activity: { title, generation, leader, thumbnail, classification },
+}: {
+  activity: ContentProps;
+}) => {
+  const nav = useNavigate();
+  const color =
+    classification === "스터디"
+      ? "#8EA1FF"
+      : classification === "클래스"
+      ? "#FFC466"
+      : classification === "특강"
+      ? "#D5A0FF"
+      : "#000000";
+  const randomImg = defaultImgs[classification][Math.floor(Math.random() * 4)];
+  return (
+    <ContentContainer
+      color={color}
+      thumbnail={thumbnail}
+      randomImg={randomImg}
+      onClick={() => {
+        nav(title);
+      }}
+    >
+      <div className="top">
+        <Text size="xxlarge" weight="regular">
+          {title}
+        </Text>
+        <span className="generation">{generation}기</span>
+      </div>
+      <div className="bottom">
+        <Text size="medium">{leader}</Text>
+      </div>
+    </ContentContainer>
+  );
+};
+
+export default Content;