feat:1차 기능

Author: BaeDongWoo

.gitignore

@@ -11,6 +11,7 @@
 # production
 /build
 
+.env
 # misc
 .DS_Store
 .env.local

package-lock.json

@@ -10,10 +10,16 @@
     "@types/node": "^16.18.78",
     "@types/react": "^18.2.51",
     "@types/react-dom": "^18.2.18",
+    "firebase": "^10.8.0",
+    "firestore": "^1.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "styled-components": "^6.1.8",
+    "three": "^0.161.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

package.json

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.css

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

src/App.test.tsx

@@ -1,14 +1,18 @@
 import { BrowserRouter, Route, Router, Routes } from 'react-router-dom';
 import './App.css';
-import LoginPage from './pages/LoginPage';
-import SignUpPage from './pages/SignUpPage';
+import NicknameInput from './pages/StartPage';
+import WaitingPage from './pages/WaitingPage';
+import Background from './components/common/background/Background';
+import MainPage from './pages/MainPage';
 
 function App() {
   return (
     <BrowserRouter>
+      <Background />
       <Routes>
-        <Route path="/" element={<LoginPage />} />
-        <Route path="/signUp" element={<SignUpPage />} />
+        <Route path="/" element={<NicknameInput />} />
+        <Route path="/waiting" element={<WaitingPage />} />
+        <Route path="/room/:roomId/:roomTitle" element={<MainPage />} />
       </Routes>
     </BrowserRouter>
   );

src/App.tsx

@@ -14,6 +14,7 @@ const Modal = ({ setIsModal, roomList, setRoomList }: ModalProps) => {
   const [pwd, setPwd] = useState('');
   const [title, setTitle] = useState('');
   const addRoom = async () => {
+    if (title.trim() === '') return alert('공백은 입력하실 수 없습니다.');
     const roomId = new Date().getTime();
     const roomInfo = {
       roomTitle: title,

src/components/common/Modal.tsx

@@ -1,14 +1,12 @@
-import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 const UserProfile = ({ onClickReady, nickname, state, start }: any) => {
   const nick = localStorage.getItem('nickname');
   return (
     <Container>
       <div className="nickname">{nickname}</div>
-      <Ready state={state}>{state ? 'GO' : 'READY'}</Ready>
       <ReadyBtn
         onClick={onClickReady}
-        state={state}
+        state={state.toString()}
         disabled={nick !== nickname || start ? true : false}
       >
         {state ? 'GO' : 'READY'}
@@ -25,20 +23,20 @@ const Container = styled.div`
   align-items: center;
   justify-content: space-around;
 `;
-const Ready = styled.div<{ state: boolean }>`
-  color: ${({ state }) => (state ? 'black' : 'white')};
-`;
-const ReadyBtn = styled.button<{ state: boolean }>`
+
+const ReadyBtn = styled.button<{ state: string }>`
   width: 100px;
   cursor: pointer;
   font-weight: bold;
   font-size: 20px;
   color: #fff;
-  background-color: ${({ state }) => (state ? '#00aaaa' : '#696969')};
+  background-color: ${({ state }) =>
+    state === 'true' ? '#00aaaa' : '#696969'};
   height: 50px;
   border-radius: 10px;
   &:hover {
-    background-color: ${({ state }) => (state ? '#019696' : '#8b8b8b')};
+    background-color: ${({ state }) =>
+      state === 'true' ? '#019696' : '#8b8b8b'};
   }
 `;
 export default UserProfile;

src/components/login/LoginForm.tsx

@@ -7,6 +7,7 @@ const NicknameInput = () => {
   const nav = useNavigate();
   const [nickname, setNickname] = useState<string>('');
   const enterHandler = async () => {
+    if (nickname.trim() === '') return alert('공백은 입력하실 수 없습니다.');
     const user = await signInAnonymously(auth);
     localStorage.setItem('nickname', nickname);
     localStorage.setItem('uid', user.user.uid);

src/components/main/userprofile/UserProfile.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Greeting = () => {
-  const nickname = sessionStorage.getItem('nickname');
+  const nickname = localStorage.getItem('nickname');
   return (
     <Container>
       <h1>환영합니다 {nickname}님!!</h1>

src/components/signup/SingUpForm.tsx

@@ -14,7 +14,7 @@ const Room = ({ room }: RoomProps) => {
   const nav = useNavigate();
   const enterRoomHandler = () => {
     if (room.users < 2) {
-      nav(`/room/${room.roomId}`);
+      nav(`/room/${room.roomId}/${room.title}`);
     } else {
       alert('방에 입장할 수 없습니다.');
     }

src/components/start/NicknameInput.tsx

@@ -17,6 +17,9 @@ const Container = styled.div`
   height: 600px;
   display: flex;
   overflow: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
   flex-direction: column;
   align-items: center;
   padding-top: 50px;

src/components/waiting/Greeting.tsx

@@ -1,6 +1,6 @@
 import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
-// import { getFirestore } from 'firebase/firestore';
+import { getFirestore } from 'firebase/firestore';
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_FIREBASE_KEY,
   authDomain: process.env.REACT_APP_AUTH_DOMAIN,
@@ -10,6 +10,6 @@ const firebaseConfig = {
   appId: process.env.REACT_APP_ID,
 };
 const app = initializeApp(firebaseConfig);
-// const fireStore = getFirestore(app);
+const fireStore = getFirestore(app);
 const auth = getAuth(app);
-export { auth };
+export { auth, fireStore };

src/components/waiting/room/Room.tsx

@@ -0,0 +1,2 @@
+declare module 'firebase';
+declare module 'three';

src/components/waiting/room/RoomList.tsx

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

src/config/firebaseConfig.js

@@ -1,17 +1,13 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import './styled/Styled.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+root.render(<App />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))