Fire 392 fe 방 생성하는 UI 제작

src/App.tsx

@@ -7,6 +7,7 @@ import Room from './pages/Room';
 import Ready from './pages/Ready';
 import LandingPage from './pages/LandingPage';
 import Main from './pages/Main';
+import Test from './pages/Test';
 
 const queryClient = new QueryClient();
 
@@ -27,6 +28,7 @@ function App() {
           <Route path="/ready">
             <Route path=":roomId" element={<Ready />} />
           </Route>
+          <Route path="/test" element={<Test />} />
         </Routes>
       </BrowserRouter>
     </QueryClientProvider>

src/components/main/CreateRoom.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
+import modal from '../../stores/createRoomModalStore';
 
 export default function CreateRoom() {
+  const { openModal } = modal();
+
   return (
     <Container>
       <DetailContainer>
         <Title>새로 방 생성</Title>
         <Detail>우리모두 모여서 도란도란 코딩해요.</Detail>
       </DetailContainer>
-      <Enter>방 만들기 →</Enter>
+      <Enter onClick={openModal}>방 만들기 →</Enter>
     </Container>
   );
 }

src/components/main/CreateRoomForm.tsx

@@ -0,0 +1,113 @@
+import styled from 'styled-components';
+
+export default function CreateRoomForm() {
+  return (
+    <Form>
+      <Section>
+        <Label htmlFor="name">방 이름*</Label>
+        <Input id="name" type="text" placeholder="방 이름을 입력해주세요." />
+      </Section>
+      <Section>
+        <Label htmlFor="description">설명*</Label>
+        <Input
+          id="description"
+          type="text"
+          placeholder="설명을 입력해주세요."
+        />
+      </Section>
+      <Section>
+        <Label htmlFor="tag">태그*</Label>
+        <Input
+          id="tag"
+          type="text"
+          placeholder="태그 입력후 Enter를 눌러주세요."
+        />
+        <Tags />
+      </Section>
+      <Section>
+        <Label htmlFor="max">최대 인원 수*</Label>
+        <Select id="max" placeholder="최대 인원 수를 선택해주세요.">
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+          <option value="4">4</option>
+        </Select>
+      </Section>
+      <Section>
+        <Label htmlFor="theme">테마*</Label>
+        <Select id="theme" placeholder="테마를 선택해주세요.">
+          <option value="theme1">모닥불</option>
+          <option value="theme2">바다</option>
+          <option value="theme3">캠핑</option>
+          <option value="theme4">여행</option>
+          <option value="theme5">우주인</option>
+        </Select>
+      </Section>
+      <Submit>방 생성하기</Submit>
+    </Form>
+  );
+}
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  margin-top: 1.5rem;
+  color: #b0b8c1;
+  font-size: 1.4rem;
+  font-family: IBMPlexSansKRRegular, Arial;
+`;
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1.5rem;
+  width: 100%;
+`;
+
+const Label = styled.label`
+  width: 100%;
+`;
+
+const Input = styled.input`
+  height: 4.9rem;
+  width: 100%;
+  margin-top: 0.25rem;
+  background: transparent;
+  outline: none;
+  color: #f9fafb;
+  font-size: 1.5rem;
+  background-color: #080909;
+  border-radius: 0.6rem;
+  padding: 0 1.6rem;
+`;
+
+const Tags = styled.div``;
+
+const Select = styled.select`
+  width: 100%;
+  height: 4.9rem;
+  margin-top: 0.25rem;
+  background: transparent;
+  outline: none;
+  border: none;
+  color: #f9fafb;
+  font-size: 1.5rem;
+  background-color: #080909;
+  border-radius: 0.6rem;
+  padding: 0 1.6rem;
+`;
+
+const Submit = styled.button`
+  color: #111827;
+  border-radius: 1rem;
+  height: 5.5rem;
+  width: 100%;
+  font-size: 1.5rem;
+  font-family: IBMPlexSansKRRegular, Arial;
+  background-color: #f3f4f6;
+  margin-top: 7.85rem;
+  cursor: pointer;
+`;

src/components/main/CreateRoomModal.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ReactComponent as X } from '../../assets/svg/X.svg';
+import modal from '../../stores/createRoomModalStore';
+
+export default function ScreenModal({ children }) {
+  const { closeModal } = modal();
+  return (
+    <ModalBackground onClick={closeModal}>
+      <ModalBox onClick={(e) => e.stopPropagation()}>
+        <ModalController>
+          <Title>방 생성하기</Title>
+          <Close onClick={closeModal}>
+            <X />
+          </Close>
+        </ModalController>
+        {children}
+      </ModalBox>
+    </ModalBackground>
+  );
+}
+
+const ModalController = styled.div`
+  svg {
+    height: 100%;
+    width: 3.2rem;
+  }
+  height: 3.2rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Title = styled.h1`
+  font-size: 2.4rem;
+  font-family: IBMPlexMonoRegular;
+  color: #f9fafb;
+`;
+
+const Close = styled.div`
+  cursor: pointer;
+  svg {
+    height: 100%;
+    width: 3.2rem;
+  }
+`;
+
+const ModalBackground = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  display: flex;
+  z-index: 999;
+`;
+
+const ModalBox = styled.div`
+  position: fixed;
+  background-color: #23262f;
+  border-radius: 2rem;
+  display: flex;
+  width: 60.8rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  top: 16rem;
+  padding: 3.2rem;
+`;

src/components/main/Header.tsx

@@ -10,6 +10,7 @@ export default function Header({ modalHandler }: { modalHandler: () => void }) {
   const clickLogo = () => {
     navigate('/#/');
   };
+
   return (
     <Container>
       <Logo onClick={clickLogo}>modoco</Logo>

src/pages/Main.tsx

@@ -1,14 +1,29 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import RoomCards from '../components/main/RoomCards';
 import Header from '../components/main/Header';
 import MainTitle from '../components/main/MainTitle';
 import Modal from '../components/layout/Modal';
 import LoginModal from '../components/login/LoginModal';
 import useSetSelf from '../hooks/useSetSelf';
+import UserStore from '../stores/userStore';
+import ModalStore from '../stores/createRoomModalStore';
+import CreateRoomModal from '../components/main/CreateRoomModal';
+import CreateRoomForm from '../components/main/CreateRoomForm';
 
 export default function Main() {
   const [isModal, setIsModal] = useState(false);
+  const { setNickname, uid, setUid, setAvatar } = UserStore();
+  const { isOpenCreateRoomModal } = ModalStore();
+
+  useEffect(() => {
+    if (localStorage.getItem('uid')) {
+      console.log('existing user', uid);
+      setNickname(localStorage.getItem('nickname'));
+      setUid(localStorage.getItem('uid'));
+      setAvatar(localStorage.getItem('avatar'));
+    }
+  }, []);
 
   useSetSelf();
   const closeModalHandler = () => {
@@ -30,6 +45,11 @@ export default function Main() {
           <LoginModal modalHandler={closeModalHandler} />
         </Modal>
       )}
+      {isOpenCreateRoomModal && (
+        <CreateRoomModal>
+          <CreateRoomForm />
+        </CreateRoomModal>
+      )}
     </>
   );
 }

src/pages/Test.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { useEffect, useRef } from 'react';
+import Lottie from 'lottie-web';
+import FireJson from '../assets/theme/fire.json';
+import OceanJson from '../assets/theme/ocean.json';
+import CosmosJson from '../assets/theme/cosmos.json';
+import CampingJson from '../assets/theme/camping.json';
+
+export default function Test() {
+  const fireRef = useRef<HTMLDivElement>(null);
+  const oceanRef = useRef<HTMLDivElement>(null);
+  const cosmosRef = useRef<HTMLDivElement>(null);
+  const campingRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    Lottie.loadAnimation({
+      container: fireRef.current,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: FireJson,
+    });
+    Lottie.loadAnimation({
+      container: oceanRef.current,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: OceanJson,
+    });
+    Lottie.loadAnimation({
+      container: cosmosRef.current,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: CosmosJson,
+    });
+    Lottie.loadAnimation({
+      container: campingRef.current,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: CampingJson,
+    });
+  }, []);
+  return (
+    <Container>
+      <Image>
+        <File ref={oceanRef} />
+      </Image>
+      <Image>
+        <Camp ref={campingRef} />
+      </Image>
+      <Image>
+        <Cosmos ref={cosmosRef} />
+      </Image>
+      <Image>
+        <File ref={fireRef} />
+      </Image>
+    </Container>
+  );
+}
+
+const Cosmos = styled.div`
+  position: absolute;
+  top: -10%;
+  left: -45%;
+  width: 200%;
+`;
+
+const Camp = styled.div`
+  position: absolute;
+  top: -6%;
+  left: -22%;
+  width: 145%;
+`;
+
+const File = styled.div`
+  width: 100%;
+`;
+
+const Image = styled.div`
+  width: 20rem; // change image size
+  background-color: gray;
+  position: relative;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 1rem;
+`;

src/stores/createRoomModalStore.ts

@@ -0,0 +1,14 @@
+import create from 'zustand';
+
+interface Modal {
+  isOpenCreateRoomModal: boolean;
+  closeModal: () => void;
+  openModal: () => void;
+}
+const ModalStore = create<Modal>((set) => ({
+  isOpenCreateRoomModal: false,
+  closeModal: () => set(() => ({ isOpenCreateRoomModal: false })),
+  openModal: () => set(() => ({ isOpenCreateRoomModal: true })),
+}));
+
+export default ModalStore;