Merge branch 'main' of https://github.com/hackersground-kr/hg-2024-Wo…

…owa-Siblings
hackersground-kr · Aug 26, 2024 · 5c4db59 · 5c4db59
2 parents fdba136 + 3f9dcd4
commit 5c4db59
Show file tree

Hide file tree

Showing 10 changed files with 266 additions and 14 deletions.
diff --git a/.github/workflows/server-deploy.yml b/.github/workflows/server-deploy.yml
@@ -13,16 +13,21 @@ jobs:
 
     steps:
 
+      - name: Check out code
+        uses: actions/checkout@v2
+
       - name: Log in to Azure
         uses: azure/login@v1
         with:
           creds: ${{ secrets.AZURE_CREDENTIALS }}
 
       - name: Build and deploy Container App
-        uses: azure/container-apps-deploy-action@v1
+        uses: azure/container-apps-deploy-action@v0
         with:
+          appSourcePath: ${{ github.workspace }}/canbus-server
           acrName: woowasiblings
           containerAppName: canbus-server
+          containerAppEnvironment: canbus-server-env
           resourceGroup: rg-2024-Woowa-Siblings
-          imageToDeploy: woowasiblings.azurecr.io/samples/hello-world
-          builderStack: ubuntu:latest
+          imageToBuild: woowasiblings.azurecr.io/canbus-server:${{ github.sha }}
+          dockerfilePath: Dockerfile
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# `{{ 팀 이름 }}` - `{{ 제품/서비스 이름 }}`
+# `우아한남매들` - `캔버스(Canbus)`
 
-해커그라운드 해커톤에 참여하는 `{{ 팀 이름 }}` 팀의 `{{ 제품/서비스 이름 }}`입니다.
+해커그라운드 해커톤에 참여하는 `우아한남매들` 팀의 `캔버스(Canbus)`입니다.
 
 ## 참고 문서
 

diff --git a/TOPIC.md b/TOPIC.md
@@ -2,7 +2,7 @@
 
 ## 팀명
 
-우아한 남매들
+우아한남매들
 
 ## 제품명
 

diff --git a/canbus-web/auth/signin/signin.html b/canbus-web/auth/signin/signin.html
@@ -68,14 +68,14 @@
 <body>
     <div class="login-container">
         <div class="label">아이디 또는 이메일</div>
-        <input type="email" placeholder="[email protected]">
+        <input type="email" placeholder="이메일을 입력해주세요">
 
         <div class="label">비밀번호</div>
-        <input type="password" placeholder="example1234!@">
+        <input type="password" placeholder="비밀번호를 입력해주세요">
 
         <button>로그인</button>
 
-        <a href="#" class="signup-link">캔버스가 처음이신가요? 회원가입</a>
+        <a href="../auth/register" class="signup-link">캔버스가 처음이신가요? 회원가입</a>
     </div>
 </body>
 </html>
diff --git a/canbus-web/auth/signup/signup.html b/canbus-web/auth/signup/signup.html
@@ -75,13 +75,13 @@
 <body>
     <div class="signup-container">
         <div class="label">이메일</div>
-        <input type="email" placeholder="[email protected]">
+        <input type="email" placeholder="이메일을 입력해주세요">
 
         <div class="label">비밀번호</div>
-        <input type="password" placeholder="example1234!@">
+        <input type="password" placeholder="비밀번호를 입력해주세요">
 
         <div class="label">비밀번호 확인</div>
-        <input type="password" placeholder="example1234!@">
+        <input type="password" placeholder="비밀번호를 다시 입력해주세요">
 
         <button>회원가입</button>
 

diff --git a/canbus-web/index.js b/canbus-web/index.js
@@ -2,7 +2,19 @@ const express = require('express')
 const app = express()
 
 app.get('/', (req, res) => {
-  res.send('Hello World!')
+  res.sendFile('/Users/yunseokgyu/Develop/Hackathon/hg-2024-Woowa-Siblings/canbus-web/main/main.html')
 })
 
-app.listen(5000)
+app.get('/auth/login', (req, res) => {
+  res.sendFile('/Users/yunseokgyu/Develop/Hackathon/hg-2024-Woowa-Siblings/canbus-web/auth/signin/signin.html')
+})
+
+app.get('/auth/register', (req, res) => {
+  res.sendFile('/Users/yunseokgyu/Develop/Hackathon/hg-2024-Woowa-Siblings/canbus-web/auth/signup/signup.html')
+})
+
+app.get('/map', (req, res) => {
+  res.sendFile('/Users/yunseokgyu/Develop/Hackathon/hg-2024-Woowa-Siblings/canbus-web/kakaomap/map.html')
+})
+
+app.listen(3000)
diff --git a/canbus-web/kakaomap/map.html b/canbus-web/kakaomap/map.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Kakao Map Mobile Example</title>
+    <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=6098f40a4999ebee23fff0c4d3eb2fe4"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        h1 {
+            font-size: 1.5em;
+            text-align: center;
+            padding: 10px 0;
+        }
+
+        #map {
+            width: 100%;
+            height: 100vh; /* 화면 높이의 80%를 차지하도록 설정 */
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            if (typeof kakao !== 'undefined') {
+                var container = document.getElementById('map'); 
+                var options = { 
+                    center: new kakao.maps.LatLng(33.450701, 126.570667), 
+                    level: 3 
+                };
+                var map = new kakao.maps.Map(container, options);
+            } else {
+                console.error("Kakao Map API failed to load.");
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/canbus-web/main/CalendarPlus.png b/canbus-web/main/CalendarPlus.png
diff --git a/canbus-web/main/main.html b/canbus-web/main/main.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>캔버스</title>
+
+    <!-- Pretendard 웹폰트 링크 -->
+    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css" rel="stylesheet">
+
+    <!-- Phosphor 아이콘 스타일 시트 -->
+    <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://unpkg.com/@phosphor-icons/[email protected]/src/bold/style.css"
+    />
+
+    <script src="https://unpkg.com/@phosphor-icons/[email protected]"></script>
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Pretendard', sans-serif;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        /* 페이지 스타일 */
+        .page {
+            display: none; /* 기본적으로 페이지를 숨김 */
+            width: 100%;
+            height: calc(100vh - 50px); /* 네비게이션 바 높이를 제외한 높이 */
+            text-align: center;
+            font-size: 2em;
+            margin-bottom: 55px;
+            overflow: auto; /* 스크롤이 필요한 경우를 대비하여 추가 */
+        }
+
+        .page.active {
+            display: block; /* 선택된 페이지만 보이도록 설정 */
+        }
+
+        .page-2 {
+            background-color: #dff4f4;
+        }
+
+        .page-3 {
+            background-color: #f4dfdf;
+        }
+
+        /* 네비게이션 바 스타일 */
+        .nav-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: #fff;
+            border-top: 1px solid #ddd;
+            display: flex;
+            justify-content: space-around;
+            padding: 10px 0;
+            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+            font-size: 10px; /* 폰트 크기 10px */
+            z-index: 10; /* 네비게이션 바를 다른 요소 위에 표시 */
+        }
+
+        .nav-item {
+            text-align: center;
+            color: #333;
+            cursor: pointer; /* 클릭 가능한 항목 표시 */
+            transition: color 0.3s;
+        }
+
+        .nav-item i {
+            display: block;
+            margin: 0 auto;
+            font-size: 24px; /* 아이콘 크기 */
+        }
+
+        .nav-item span {
+            display: block;
+            margin-top: 5px;
+            font-weight: 400; /* 기본적으로 Regular */
+        }
+
+        .nav-item.active span {
+            font-weight: 500; /* 선택된 아이템은 Medium */
+        }
+
+        .nav-item:hover {
+            color: #007bff; /* 호버 시 색상 변경 */
+        }
+    </style>
+</head>
+<body>
+
+    <!-- 페이지 컨텐츠 -->
+    <iframe id="page1" class="page page-1" src="/map"></iframe>
+    <div id="page2" class="page page-2">내 버스 페이지</div>
+    <div id="page3" class="page page-3">버스 노선 페이지</div>
+
+    <!-- 네비게이션 바 -->
+    <div class="nav-bar">
+        <div class="nav-item" data-target="page1">
+            <i class="ph-light ph-calendar-plus" alt="노선 신청"></i>
+            <span>노선 신청</span>
+        </div>
+        <div class="nav-item" data-target="page2">
+            <i class="ph-light ph-bus" alt="내 버스"></i>
+            <span>내 버스</span>
+        </div>
+        <div class="nav-item" data-target="page3">
+            <i class="ph-light ph-road-horizon" alt="버스 노선"></i>
+            <span>버스 노선</span>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const navItems = document.querySelectorAll('.nav-item');
+            const pages = document.querySelectorAll('.page');
+
+            // 아이콘 파일 경로 매핑
+            const iconMap = {
+                page1: {
+                    fill: "ph-fill ph-calendar-plus",
+                    outline: "ph-light ph-calendar-plus"
+                },
+                page2: {
+                    fill: "ph-fill ph-bus",
+                    outline: "ph-light ph-bus"
+                },
+                page3: {
+                    fill: "ph-fill ph-road-horizon",
+                    outline: "ph-light ph-road-horizon"
+                }
+            };
+
+            // 페이지 로드 시, 저장된 탭 정보를 가져와서 활성화
+            const savedPage = localStorage.getItem('selectedPage') || 'page1'; // 기본값은 page1
+            const activePage = document.getElementById(savedPage);
+            const activeNavItem = document.querySelector(`.nav-item[data-target=${savedPage}]`);
+
+            if (activePage && activeNavItem) {
+                activePage.classList.add('active');
+                activeNavItem.classList.add('active');
+                activeNavItem.querySelector('i').className = iconMap[savedPage].fill;
+            }
+
+            navItems.forEach(item => {
+                item.addEventListener('click', function() {
+                    // 모든 아이템과 페이지에서 active 클래스 제거
+                    navItems.forEach(i => {
+                        i.classList.remove('active');
+                        const target = i.getAttribute('data-target');
+                        const icon = i.querySelector('i');
+                        icon.className = iconMap[target].outline; // Outline 아이콘으로 변경
+                    });
+
+                    pages.forEach(page => page.classList.remove('active'));
+
+                    // 클릭된 아이템에 active 클래스 추가
+                    this.classList.add('active');
+
+                    // 클릭된 아이템에 대응하는 페이지 활성화
+                    const targetPage = this.getAttribute('data-target');
+                    document.getElementById(targetPage).classList.add('active');
+
+                    // 클릭된 아이템의 아이콘을 Fill 아이콘으로 변경
+                    const icon = this.querySelector('i');
+                    icon.className = iconMap[targetPage].fill;
+
+                    // 선택된 탭 정보를 localStorage에 저장
+                    localStorage.setItem('selectedPage', targetPage);
+                });
+            });
+        });
+    </script>
+
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json