GDG-on-Campus-SKHU · ChoJeongHyeon · Jan 5, 2025 · Jan 5, 2025 · Jan 9, 2025 · Jan 9, 2025
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+#SERVICE_KEY
+.env
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,32 @@
+{
+  "name": "8week",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "less": "^4.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.12.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^6.0.1"
+  }
+}
@@ -0,0 +1,17 @@
+import { Routes, Route } from "react-router-dom";
+import MainPage from "./MainPage";
+import LoginPage from "./LoginPage";
+import MyPage from "./MyPage";
+
+function App() {
+  return (
+    <Routes>
+      {/* 로그인을 하면 내가 만든 메인페이지 기능을 사용할 수 있도록 들어가자 마자 로그인 화면이 나올 수 있도록 구현 */}
+      <Route path="" element={<LoginPage />} />
+      <Route path="/main" element={<MainPage />} />
+      <Route path="/my" element={<MyPage />} />
+    </Routes>
+  );
+}
+
+export default App;
@@ -0,0 +1,10 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+type AuthContextType = {
+  userName: string | null;
+  login: (name: string) => void;
+  logout: () => void;
+  isLoggedIn: boolean;
+};
+
+const AuthContext = createContext<AuthContextType | null>(null);
@@ -0,0 +1,20 @@
+.container {
+  width: 100wh;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background-color: black;
+}
+
+.nameBox {
+  width: 350px;
+  height: 100px;
+  padding: 10px;
+  border: 1px solid black;
+  border-radius: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  margin-top: 100px;
+}
@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import style from "./LoginPage.module.less";
+
+// 내가 만든 기능을 사용하기 위해서는 이름을 치고 들어가면 사용할 수 있도록 설정
+
+function LoginPage() {
+  const [name, setName] = useState(""); // 이름 최신화 하는 변수와 함수를 작성
+  const navigate = useNavigate();
+  // 유튜브 영상에서 나온 navigate로 함수 만들어서 사용
+  // 위에서 라우터 설치할 때 같이 설치되고 import 해주어야함
+
+  // input박스에서 사용할 onChange기능을 만든다.
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  };
+
+  // 버튼에서 사용할 기능
+  // 이름을 입력하였을 경우
+  // -> 기능을 사용할 수 있는 main 페이지로 이동
+  // -> 그렇지 않다면 경고문 나올 수 있도록 작성하기
+  const handleLogin = () => {
+    if (name.trim()) {
+      navigate("/main");
+    } else {
+      alert("이름을 입력해주세요.");
+    }
+  };
+
+  return (
+    <div className={style.container}>
+      <div className={style.nameBox}>
+        <span>
+          <input
+            type="text"
+            value={name}
+            onChange={handleNameChange}
+            placeholder="이름을 입력하세요"
+          />
+        </span>
+
+        <button onClick={handleLogin}>확인</button>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;
@@ -0,0 +1,71 @@
+html,
+body {
+  margin: 0; //magin 초기화
+  padding: 0; //magin 초기화
+  height: 100%; /* 화면 전체 높이를 100%로 설정 */
+  width: 100%; /* 화면 전체 너비를 100%로 설정 */
+  overflow: hidden; /* 화면을 넘는 요소를 숨깁니다. */
+}
+.appContainer {
+  margin: 0; //magin 초기화
+  padding: 0; //magin 초기화
+  height: 100vh; /* 화면 전체 높이를 100%로 설정 */
+  width: 100vw; /* 화면 전체 너비를 100%로 설정 */
+  overflow: hidden; /* 화면을 넘는 요소를 숨깁니다. */
+}
+.my {
+  text-align: right;
+  font-size: 10px;
+  color: white;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+.header {
+  height: 10%;
+  width: 100%;
+  font-size: 30px;
+  background-color: rgb(0, 0, 0);
+  color: white;
+  display: flex;
+  justify-content: center; /* 가로 가운데 정렬 */
+  align-items: center; /* 세로 가운데 정렬 */
+}
+main {
+  height: 80%;
+  width: 100%;
+  background-image: url("./assets/movietheater.png"); /* 배경 이미지 추가 */
+  background-size: cover; /* 배경 이미지를 화면에 맞게 확장 */
+  background-position: center; /* 배경 이미지를 중앙에 배치 */
+  background-repeat: no-repeat; /* 배경 이미지 반복을 방지 */
+  padding: 20px; /* 내부 여백 추가 */
+  color: white;
+}
+
+input {
+  padding: 10px;
+  font-size: 16px;
+  border: 2px solid white;
+  border-radius: 5px; /* 둥근 모서리 */
+  margin-left: 10px;
+  outline: none;
+}
+.date {
+  font-size: 20px;
+}
+
+footer {
+  height: 10%;
+  width: 100%;
+  background-color: rgb(0, 0, 0);
+  display: flex;
+}
+.footerContent {
+  color: white;
+  margin: 0px auto;
+}
+.buttonBox {
+  width: 50px;
+  height: 45px;
+  border-radius: 5px;
+}