Merge branch 'main' of https://github.com/Hufsthon2024Oeteco/FE

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy Vite React App to k3s
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build the Vite app
+        run: npm run build
+
+      - name: Build Docker image
+        run: docker build -t ${{ secrets.DOCKER_REGISTRY }}/oeteco_front:latest .
+
+      - name: Push Docker image
+        run: docker push ${{ secrets.DOCKER_REGISTRY }}/oeteco_front:latest
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Set up KUBECONFIG
+        run: |
+          mkdir $HOME/.kube
+          echo "${{ secrets.KUBECONFIG }}" > $HOME/.kube/config
+
+      - name: Install kubectl
+        uses: azure/setup-kubectl@v3
+        with:
+          version: 'latest'
+
+      - name: Rollout restart the deployment
+        run: |
+          kubectl rollout restart -n lgtu deployments/oeteco-front

default.conf

@@ -0,0 +1,27 @@
+server {
+    listen 80 default_server;
+
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+
+    location ~* \.(?:manifest|appcache|html?|xml|json)$ {
+      expires -1;
+    }
+
+    location ~* \.(?:css|js)$ {
+      try_files $uri =404;
+      expires 1y;
+      access_log off;
+      add_header Cache-Control "public";
+    }
+
+		# 파일 확장자를 포함하는 모든 경로 (예, /devicesFile.js) 
+    location ~ ^.+\..+$ {
+      try_files $uri =404;
+    }
+
+		# 파일 확장자가 없는 모든 경로 (예, /devices)
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

dockerfile

@@ -0,0 +1,5 @@
+FROM nginx:alpine
+COPY build /usr/share/nginx/html
+COPY default.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

src/pages/mainpage/Main.js

@@ -24,20 +24,44 @@ const Container = styled.div`
   height: 100%;
 
   color: ${themeGet("color.dark")};
+  
   background-color: ${themeGet("color.light_gray")};
 
   font-size: ${themeGet("font.h1.size")};
 
   img{
     width: 250px;
     height: 250px;
+
+    margin-top: 166px;
   }
 
   span{
     font-weight: 700;
   }
 `;
 
+const Wrapper=styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Header=styled.p`
+  font-size: 48px;
+  color: ${themeGet('color.black')};
+  font-weight: 700;
+`;
+
+const Info=styled.div`
+  color: ${themeGet('color.black')};
+  font-size: 18px;
+  font-weight: 400;
+
+  span{
+    font-weight: 600;
+  }
+`;
+
 const StartButton=styled.button`
   text-align: center;
 
@@ -64,9 +88,11 @@ function Main() {
     <CustomColumn $width='100%' $height='100vh' $alignItems='center' $justifyContent='center'>
       <Container>
         <img src="./Logo.svg"  />
-        <h1>별자리</h1>
-        <p><span>스타</span>트업 <span>자리</span> 정보</p>
-        <Link to={'/area'}>
+        <Wrapper>
+          <Header>별자리</Header>
+          <Info><span>스타</span>트업 <span>자리</span> 정보</Info>
+        </Wrapper>
+        <Link to={'/arealocation'}>
           <StartButton>시작하기</StartButton>
         </Link>
       </Container>