게시판 제외 99% 완성

Author: LSBeryl

app/(data)/gameData.js

@@ -0,0 +1,50 @@
+const gameData = [
+  {
+    game: "Grand Theft Auto V",
+    title: "이 스트리머는 gta5 고인물을 꿈꾸는 청정수 입니다.",
+    desc: [
+      "카지노를 털며 부자가 되길 원하지만 현실은 슈퍼마켓 털고 전과1범으로 잡히는 잡케,,",
+      "통장잔고는 백만원 미만,, 고인물이 되어 언젠가는 시청자들을 도와주길 바랍니다만, 현실은 시청자의 도움만 받는,, 만년 뉴비",
+    ],
+    img: "/gta5.jpg",
+  },
+  {
+    game: "Red Dead Redemption 2",
+    title: "억까 좀 그만 당하고싶어, 억까 전문 스트리머",
+    desc: [
+      "레드 데드 리뎀션 스토리 모드 플레이,, 방대한 스토리 라인 덕분에,, 깨는데 한 세월,,",
+      "저는,,, 서브 퀘스트 다 깨고 플레이 완 하고 싶다니깐요,,?",
+      "그래도 스토리가 방대해서 쇼츠는 잘 나와서 좋음.",
+    ],
+    img: "/rdr2.png",
+  },
+  {
+    game: "화이트데이",
+    title: "아니 이 게임은 도대체 엔딩이 몇개야?",
+    desc: [
+      "화이트데이 플레이 하는 잡케,근데 이거 엔딩이 도대체 몇개인거냐,,,",
+      "한소영이랑 러브러브 진 엔딩을 원하지만 현실은 버리고 도망가버리는 이 스트리머,, (시청자들에게 많이 혼났다는 후문)",
+    ],
+    img: "/white.jpg",
+  },
+  {
+    game: "Lethal Company",
+    title: "쓰레기 줍는 게임 맞아?",
+    desc: [
+      "아니 쓰레기 줍는 게임이라서 건설 육성 rpg 같은 게임이라 생각하고 플레이 했지만,,,",
+      "현실은 팀원들 버리고 도망가버리는 잡케, 소리 지리는건 여성 팀원들보다 더(?) 크다고 한다",
+    ],
+    img: "/lethal.jpg",
+  },
+  {
+    game: "Goose Goose Duck",
+    title: "명탐정 오리가 되고싶은 거위",
+    desc: [
+      "명탐정이 되고 싶어하는 코난(?) 잡케. 하지만, 내 주변에서 살덕(?)사건만 일어난다,,,",
+      "언젠가 명탐정이 되는 날이 올 것인가...?",
+    ],
+    img: "/goose.jpg",
+  },
+];
+
+export default gameData;

app/(data)/makeCalendar.js

@@ -0,0 +1,21 @@
+export default function makeCalendar(month) {
+  const date = new Date();
+  const temp = [[], [], [], [], [], []];
+  for (let i = 0; i < 6; i++) for (let j = 0; j < 7; j++) temp[i][j] = null;
+  let tempDay = 1;
+  let tempWeek = 0;
+  const firstDay = new Date(date.getFullYear(), month - 1, 1).getDay();
+  const lastDay = new Date(date.getFullYear(), month, 0).getDate();
+  for (let i = 0; i < firstDay; i++) temp[tempWeek][i] = null;
+  for (let i = firstDay; i < 7; i++) temp[tempWeek][i] = tempDay++;
+  tempWeek++;
+  for (let i = 1; i <= 5; i++) {
+    for (let j = 0; j < 7; j++) {
+      temp[tempWeek][j] = tempDay++;
+      if (tempDay > lastDay) break;
+    }
+    tempWeek++;
+    if (tempDay > lastDay) break;
+  }
+  return temp;
+}

app/(main)/game.jsx

@@ -0,0 +1,15 @@
+import styles from "../../styles/game.module.css";
+
+export default function Game({ game, desc, img, title }) {
+  return (
+    <div className={styles.box} style={{ backgroundImage: `url(${img})` }}>
+      <div>{game}</div>
+      <div>"{title}"</div>
+      <div>
+        {desc.map((msg, i) => (
+          <div key={i}>{msg}</div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/(main)/page.jsx

@@ -0,0 +1,76 @@
+"use client";
+
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { auth } from "../firebase";
+import { setPersistence, browserLocalPersistence } from "firebase/auth";
+import styles from "../../styles/main.module.css";
+import Game from "./game";
+import gameData from "../(data)/gameData";
+
+export default function Main() {
+  const [isLogin, setLogin] = useState(false); // 로그인 되어있는 상태인지 표시
+
+  const init = async () => {
+    // 처음 마운트 될 때 실행되는 함수
+    // ready 시킨 후 localStorage에 user 존재하면 자동로그인
+    // 비밀번호가 맞아야 로그인되므로(잡케만 로그인 가능) 로그아웃 구현은 나중에 필요하면 함
+    await auth.authStateReady();
+    setPersistence(auth, browserLocalPersistence).then(() => {
+      auth.onAuthStateChanged((user) => {
+        if (user) setLogin(true);
+      });
+    });
+  };
+
+  useEffect(() => {
+    init();
+  }, []);
+  return (
+    <div className={styles.main}>
+      <div className={styles.description}>
+        <div>
+          <div className={styles.ment}>
+            <div>
+              시청자와 같이 놀고 싶어 하는 종합게임 스트리머&nbsp;
+              <span className={styles.nick}>잡케</span>입니다!
+            </div>
+            <div>
+              저는 종합게임 스트리머이고, 주 컨텐츠는 GTA5 (GTA6 기다리다 현기증
+              나는 중), 공포게임, 인디게임 등 스팀게임을 주로 방송하고 있습니다.{" "}
+              <br />
+              현재 치지직과 유튜브 동시 송출 중이지만 차후 SOOP까지 송출할
+              계획이 있습니다. <br />
+              2월 26일부터 방송 시작하였고 부족한 점이 많지만 이쁘게 봐주세요!
+            </div>
+          </div>
+          <img src="/logo.png" alt="" />
+        </div>
+        <div className={styles.links}>
+          <Link href="https://chzzk.naver.com/cad491fc20e7092e40615955cae88e80">
+            <img src="/chzzk.jpg" />
+          </Link>
+          <Link href="https://discord.com/invite/v2s2F8FHFp">
+            <img src="/discord.png" />
+          </Link>
+          <Link href="https://www.youtube.com/@jobke_game">
+            <img src="/youtube.png" />
+          </Link>
+        </div>
+      </div>
+      <div className={styles.game}>
+        <div>지금까지 했던 게임들</div>
+        {gameData.map((data, i) => (
+          <Game
+            key={i}
+            game={data.game}
+            desc={data.desc}
+            img={data.img}
+            title={data.title}
+          />
+        ))}
+      </div>
+      {/* {isLogin ? null : <Link href="/auth">인증하기</Link>} */}
+    </div>
+  );
+}

app/(page)/articles.jsx

@@ -0,0 +1,3 @@
+export default function Articles() {
+  return <h3>게시판 기능은 곧 구현 예정입니다.</h3>;
+}

app/page.jsx renamed to app/(page)/auth.jsx

@@ -1,59 +1,34 @@
 "use client";
 
-import { styled } from "styled-components";
+import styles from "../../styles/auth.module.css";
 import { useEffect, useState } from "react";
-import { auth } from "./firebase.js";
+import { auth } from "../firebase";
 import {
   signInWithEmailAndPassword,
   setPersistence,
   browserLocalPersistence,
 } from "firebase/auth";
+import { useRouter } from "next/navigation";
 
-const Wrap = styled.div`
-  width: 100vw;
-  height: 100vh;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-`;
-
-const Form = styled.form`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`;
-
-const Input = styled.input``;
-
-const Error = styled.div`
-  color: #ff0000;
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export default function Page() {
+export default function Auth() {
   const [isReady, setReady] = useState(false); // 파이어베이스 로그인 준비 상태
+  const [isLogin, setLogin] = useState(false);
   const [password, setPassword] = useState(""); // 유저가 입력한 비밀번호
   const [isLoading, setLoading] = useState(false); // 로그인 버튼 누른 후 로딩되는 상태
   const [error, setError] = useState(""); // 로그인 실패 시 나타날 에러
-  const [isLogin, setLogin] = useState(false); // 로그인 되어있는 상태인지 표시
+  const route = useRouter();
 
   const init = async () => {
     // 처음 마운트 될 때 실행되는 함수
     // ready 시킨 후 localStorage에 user 존재하면 자동로그인
     // 비밀번호가 맞아야 로그인되므로(잡케만 로그인 가능) 로그아웃 구현은 나중에 필요하면 함
     await auth.authStateReady();
-    setReady(true);
     setPersistence(auth, browserLocalPersistence).then(() => {
       auth.onAuthStateChanged((user) => {
         if (user) setLogin(true);
       });
     });
-    return () => temp();
+    setReady(true);
   };
 
   useEffect(() => {
@@ -72,8 +47,7 @@ export default function Page() {
         "[email protected]",
         password
       ).then(() => {
-        // 매개변수에 credential 들어감
-        setLogin(true);
+        route.push("/");
       });
     } catch (e) {
       console.error(e);
@@ -84,31 +58,31 @@ export default function Page() {
   }
 
   return (
-    <Wrap>
+    <div className={styles.wrap}>
       {isReady ? (
         isLogin ? (
-          <>로그인 된 상태</>
+          <>이미 인증 완료된 상태입니다.</>
         ) : (
           <>
-            <Form onSubmit={submit}>
-              <Input
+            <form onSubmit={submit}>
+              <input
                 type="password"
-                placeholder="비밀번호"
+                placeholder="인증 코드 입력"
                 onInput={(e) => setPassword(e.target.value)}
               />
-              <Input type="submit" value={isLoading ? "인증 중..." : "인증"} />
-            </Form>
-            <Error>
+              <input type="submit" value={isLoading ? "인증 중..." : "인증"} />
+            </form>
+            <div className={styles.error}>
               {error ? (
                 <>
                   <div>인증 도중 오류가 발생하였습니다.</div>
                   <div>오류 메시지 : {error.message}</div>
                 </>
               ) : null}
-            </Error>
+            </div>
           </>
         )
       ) : null}
-    </Wrap>
+    </div>
   );
 }