Merge pull request #20 from git-hubsalt/daun-up-patch-1

Daun up patch 1

.github/workflows/aws.yml

@@ -0,0 +1,94 @@
+# This workflow will build and push a new container image to Amazon ECR,
+# and then will deploy a new task definition to Amazon ECS, when there is a push to the "develop" branch.
+#
+# To use this workflow, you will need to complete the following set-up steps:
+#
+# 1. Create an ECR repository to store your images.
+#    For example: `aws ecr create-repository --repository-name my-ecr-repo --region us-east-2`.
+#    Replace the value of the `ECR_REPOSITORY` environment variable in the workflow below with your repository's name.
+#    Replace the value of the `AWS_REGION` environment variable in the workflow below with your repository's region.
+#
+# 2. Create an ECS task definition, an ECS cluster, and an ECS service.
+#    For example, follow the Getting Started guide on the ECS console:
+#      https://us-east-2.console.aws.amazon.com/ecs/home?region=us-east-2#/firstRun
+#    Replace the value of the `ECS_SERVICE` environment variable in the workflow below with the name you set for the Amazon ECS service.
+#    Replace the value of the `ECS_CLUSTER` environment variable in the workflow below with the name you set for the cluster.
+#
+# 3. Store your ECS task definition as a JSON file in your repository.
+#    The format should follow the output of `aws ecs register-task-definition --generate-cli-skeleton`.
+#    Replace the value of the `ECS_TASK_DEFINITION` environment variable in the workflow below with the path to the JSON file.
+#    Replace the value of the `CONTAINER_NAME` environment variable in the workflow below with the name of the container
+#    in the `containerDefinitions` section of the task definition.
+#
+# 4. Store an IAM user access key in GitHub Actions secrets named `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`.
+#    See the documentation for each action used below for the recommended IAM policies for this IAM user,
+#    and best practices on handling the access key credentials.
+
+name: Deploy to Amazon ECS
+
+on:
+  push:
+    branches: [ "main" ]
+
+env:
+  AWS_REGION: ap-northeast-2                   # set this to your preferred AWS region, e.g. us-west-1
+  ECR_REPOSITORY: githubsalt-frontend           # set this to your Amazon ECR repository name
+  ECS_SERVICE: githubsalt-frontend                 # set this to your Amazon ECS service name
+  ECS_CLUSTER: githubsalt-frontend                 # set this to your Amazon ECS cluster name
+  ECS_TASK_DEFINITION: githubsalt-frontend-revision1.json # set this to the path to your Amazon ECS task definition
+                                               # file, e.g. .aws/task-definition.json
+  CONTAINER_NAME: githubsalt-frontend-container           # set this to the name of the container in the
+                                               # containerDefinitions section of your task definition
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    environment: production
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - 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: ${{ env.AWS_REGION }}
+
+    - name: Login to Amazon ECR
+      id: login-ecr
+      uses: aws-actions/amazon-ecr-login@v1
+
+    - name: Build, tag, and push image to Amazon ECR
+      id: build-image
+      env:
+        ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+        IMAGE_TAG: ${{ github.sha }}
+      run: |
+        # Build a docker container and
+        # push it to ECR so that it can
+        # be deployed to ECS.
+        docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+        docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
+        echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG" >> $GITHUB_OUTPUT
+
+    - name: Fill in the new image ID in the Amazon ECS task definition
+      id: task-def
+      uses: aws-actions/amazon-ecs-render-task-definition@v1
+      with:
+        task-definition: ${{ env.ECS_TASK_DEFINITION }}
+        container-name: ${{ env.CONTAINER_NAME }}
+        image: ${{ steps.build-image.outputs.image }}
+
+    - name: Deploy Amazon ECS task definition
+      uses: aws-actions/amazon-ecs-deploy-task-definition@v1
+      with:
+        task-definition: ${{ steps.task-def.outputs.task-definition }}
+        service: ${{ env.ECS_SERVICE }}
+        cluster: ${{ env.ECS_CLUSTER }}
+        wait-for-service-stability: true

package.json

@@ -15,6 +15,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.12",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -1,27 +1,15 @@
+// src/App.tsx
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { GlobalStyles } from './styles/GlobalStyles';
 
-function App() {
+
+const App: React.FC = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-          initial commit
-        </a>
-      </header>
-    </div>
+      <>
+        <GlobalStyles />
+        <h1>App</h1>
+      </>
   );
-}
+};
 
-export default App;
+export default App;

src/index.css

@@ -8,6 +8,34 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
 }
+
+/* 393px보다 화면이 작은 경우 */
+@media screen and (max-width: 393px) {
+  body {
+    width: 100%; /* 화면 너비에 맞춤 */
+  }
+}
+
+/* 393px보다 화면이 큰 경우 */
+@media screen and (min-width: 394px) {
+  body {
+    width: 393px; /* 화면 너비를 393px로 고정 */
+    margin: 0 auto; /* 화면 중앙에 위치 */
+  }
+}
+
+:root {
+  --gray--0: #F4F4F4;
+  --gray--1: #EDEDED;
+  --gray--2: #E3E3E3;
+  --gray--3: #9B9B9B;
+  --gray--4: #575757;
+  --black: #000000;
+  --main: #89CEFA;
+  --sky--blue: #E3ECF2;
+  --kakao: #FFDD00;
+}

src/styles/GlobalStyles.ts

@@ -0,0 +1,90 @@
+// src/styles/GlobalStyles.ts
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyles = createGlobalStyle`
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 900;
+      src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 800;
+      src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 700;
+      src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 600;
+      src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 500;
+      src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 400;
+      src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 300;
+    src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 200;
+    src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 100;
+    src: url('/src/assets/fonts/PretendardVariable.woff2') format('woff');
+  }
+
+  body {
+    margin: 0;
+    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: "Pretendard", source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  }
+
+  /* 393px보다 화면이 작은 경우 */
+  @media screen and (max-width: 393px) {
+    body {
+      width: 100%; /* 화면 너비에 맞춤 */
+    }
+  }
+
+  /* 393px보다 화면이 큰 경우 */
+  @media screen and (min-width: 394px) {
+    body {
+      width: 393px; /* 화면 너비를 393px로 고정 */
+      margin: 0 auto; /* 화면 중앙에 위치 */
+    }
+  }
+
+  :root {
+    --gray--0: #F4F4F4;
+    --gray--1: #EDEDED;
+    --gray--2: #E3E3E3;
+    --gray--3: #9B9B9B;
+    --gray--4: #575757;
+    --black: #000000;
+    --main: #89CEFA;
+    --sky--blue: #E3ECF2;
+    --kakao: #FFDD00;
+  }
+`;