Merge pull request #9 from TeamRecorDream/develop

[초기설정] 배포 확인

.github/workflows/deploy.yml

@@ -0,0 +1,38 @@
+name: Deploy
+
+on:
+  # main 브랜치에 푸시하면 팀 레포 fork한 개인 레포 Vercel 자동 배포되도록 설정
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    container: pandoc/latex
+    steps:
+      # workflow에 속한 레포지토리에 접근할 수 있도록 설정
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install mustache (to update the date)
+        run: apk add ruby && gem install mustache
+
+      - name: creates output
+        run: sh ./build.sh
+
+      - name: Pushes to another repository
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.AUTH_TOKEN }}
+        with:
+          source-directory: 'output'
+          destination-github-username: urjimyu
+          destination-repository-name: RecorDream-Web
+          user-email: ${{ secrets.OFFICIAL_ACCOUNT_EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: main
+
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY

.github/workflows/preview.yml

@@ -0,0 +1,46 @@
+name: pr-preview
+on:
+  # main, develop 브랜치를 향해 PR 올리면 임시 배포되도록 설정
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+    branches: [main, develop]
+
+# 권한 설정
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+  id-token: write
+  pages: write
+  deployments: write
+
+# 동시성 설정
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      # workflow에 속한 레포지토리에 접근할 수 있도록 설정
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - run: echo "PREVIEW_PATH=pr-preview/pr-${{ github.event.number }}" >> "$GITHUB_ENV"
+
+      # 종속성 설치 및 프로젝트 빌드
+      - name: Install and Build
+        run: yarn install && yarn build
+
+      # PR 프리뷰 배포
+      - name: Deploy PR Preview
+        uses: rossjrw/[email protected]
+        with:
+          token: ${{ secrets.AUTH_TOKEN}}
+          source-dir: ./dist/
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto

build.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cd ../
+mkdir output
+cp -R ./RecorDream-Web/* ./output
+cp -R ./output ./RecorDream-Web/

src/App.tsx

@@ -1,8 +1,21 @@
-import './App.css';
+import { RouterProvider } from "react-router-dom";
+import styled from "styled-components";
+import router from "./router/Router";
+import GlobalStyle from "./style/GlobalStyle";
+import { IcPcBackgrStars } from "./assets/svg/index";
 
 function App() {
-  return <></>;
+  return (
+    <AppWrapper>
+      <RouterProvider router={router} />
+      <GlobalStyle />
+    </AppWrapper>
+  );
 }
 
 export default App;
 
+const AppWrapper = styled(IcPcBackgrStars)`
+  border: none;
+  object-fit: cover;
+`;

src/assets/svg/index.ts

@@ -1,7 +1,7 @@
 export { default as Favicon } from "./Favicon";
-export { default as PcKakaotalk } from "./PcKakaotalk";
-export { default as PcBackgrHalfstars } from "./PcBackgrHalfstars";
-export { default as PcBackgrStars } from "./PcBackgrStars";
-export { default as PcBlank } from "./PcBlank";
-export { default as PcLogo } from "./PcLogo";
-export { default as PcRecordream } from "./PcRecordream";
+export { default as IcPcKakaotalk } from "./PcKakaotalk";
+export { default as IcPcBackgrHalfstars } from "./PcBackgrHalfstars";
+export { default as IcPcBackgrStars } from "./PcBackgrStars";
+export { default as IcPcBlank } from "./PcBlank";
+export { default as IcPcLogo } from "./PcLogo";
+export { default as IcPcRecordream } from "./PcRecordream";

src/hooks/useMobile.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+export function useMobile() {
+  function setScreenSize() {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+
+    const windowWidth =
+      window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    const maxWidth = Math.min(375, windowWidth);
+    document.documentElement.style.setProperty("max-width", `${maxWidth}px`);
+  }
+
+  useEffect(() => {
+    setScreenSize();
+    window.addEventListener("resize", setScreenSize);
+
+    return () => {
+      window.removeEventListener("resize", setScreenSize);
+    };
+  }, []);
+}

src/layouts/Layout.tsx

@@ -0,0 +1,14 @@
+import { useMobile } from "../hooks/useMobile";
+import { Outlet } from "react-router-dom";
+
+const Layout = () => {
+  useMobile();
+
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;

src/main.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

src/pages/LoginPage.tsx

@@ -0,0 +1,5 @@
+const LoginPage = () => {
+  return <div>LOGINPAGE</div>;
+};
+
+export default LoginPage;

src/router/Router.tsx

@@ -0,0 +1,22 @@
+import { createBrowserRouter } from "react-router-dom";
+import Layout from "../layouts/Layout";
+import LoginPage from "../pages/LoginPage";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      {
+        path: "/",
+        element: <LoginPage />,
+      },
+      // {
+      //   path: "/error",
+      //   element: <ErrorPage />,
+      // },
+    ],
+  },
+]);
+
+export default router;