FE-feat/issue-100

frontend/src/components/auth/InputForm.tsx

@@ -0,0 +1,88 @@
+import EmailSVG from "../../assets/Email.svg"
+import UserSVG from "../../assets/User.svg"
+import PasswordSVG from "../../assets/Password.svg"
+
+import styled from "@emotion/styled";
+
+interface InputFormProps {
+  type: string;
+  name: string;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
+  title: string;
+  imgSVG: string;
+}
+
+function ChangeSVG(imgSVG: string){
+  switch(imgSVG){
+    case "Email":
+      return EmailSVG;
+    case "User":
+      return UserSVG;
+    case "Password":
+      return PasswordSVG;
+  }
+}
+
+export const InputForm = ({ type, name, value, onChange, title, imgSVG, ...rest }: InputFormProps) => {
+  return (
+    <InputFormWrapper>
+      <p>{title}</p>
+      <InputFormContainer>
+        {imgSVG && (
+          <picture>
+            <img src={ChangeSVG(imgSVG)} alt="img" />
+          </picture>
+        )}
+        {type === 'number' ? (
+          <StyledSelect name={name} value={value} onChange={onChange}>
+            {[1, 2, 3, 4, 5, 6].map((option) => (
+              <option key={option} value={option}>
+                {option} 명
+              </option>
+            ))}
+          </StyledSelect>
+        ) : (
+          <input type={type} name={name} value={value} onChange={onChange} {...rest} />
+        )}
+      </InputFormContainer>
+    </InputFormWrapper>
+  );
+};
+
+const InputFormWrapper = styled.section`
+  p {
+    font-size: var(--font-size-xs);
+    margin: 0;
+    padding: 1rem 0.5rem 0.3rem;
+  }
+`
+
+const InputFormContainer = styled.div`
+  height: 44px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 10px;
+  padding: 0 11px;
+
+  picture {
+
+  }
+
+  input {
+    font-size: var(--font-size-xs);
+    border: none;
+    outline: none;
+  }
+
+  border: solid 1px var(--color-crusta)
+`
+
+const StyledSelect = styled.select`
+  width: 100%;
+  border: none;
+  padding: 8px;
+  outline: none;
+`;

frontend/src/components/Button.tsx → frontend/src/components/common/Button.tsx

@@ -27,6 +27,7 @@ const StyledButton = styled.button`
   border-radius: 10px;
   cursor: pointer;
   transition: 0.3s ease;
+  align-items: center;
 
   &:hover {
     background-color: #000000;

frontend/src/components/roomPreview/CreateRoomPreview.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { InputForm } from '../../components/auth/InputForm';
+import axios from 'axios';
+import styled from "@emotion/styled"
+import Close from "../../assets/Close.svg"
+import { Button } from '../common/Button';
+
+interface CreateRoomPreviewProps {
+  onClose: () => void;
+  onAddRoom: () => void;
+  username: string;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void; 
+  newRoom: { roomName: string; description:string; owner:string; hashtag: string; capacity: number; };
+}
+
+const CreateRoomPreview: React.FC<CreateRoomPreviewProps> = ({ onClose, onAddRoom, newRoom, username, handleInputChange }) => {
+  const handleAddRoomClick = async () => {
+    try {
+      const roomWithOwner = { ...newRoom, owner: username };
+      console.log(roomWithOwner);
+      await axios.post('http://localhost:8001/user-service/create', roomWithOwner);
+
+      onAddRoom();
+      onClose();
+    } catch (error) {
+      console.error('Error creating room:', error);
+    }
+  };
+
+  return (
+    <CreateRoomPreviewWrapper>
+      <StyledCloseButton onClick={onClose} >
+        <img src={Close} alt='Close' width="16px"/>
+      </StyledCloseButton>
+      <h1>Create Room</h1>
+      <InputForm type="text" name="roomName" value={newRoom.roomName} title="방 이름" onChange={handleInputChange} />
+      <InputForm type="text" name="description" value={newRoom.description} title="방 설명" onChange={handleInputChange} />
+      <InputForm type="text" name="hashtag" value={newRoom.hashtag} title="해시태그" onChange={handleInputChange} />
+      <InputForm
+        type="number"
+        name="capacity"
+        value={newRoom.capacity.toString()}
+        title="인원 수"
+        onChange={handleInputChange}
+      />
+      <br/>
+      <Button onClick={handleAddRoomClick} label="Create Room" backgroundColor="primary"/>
+    </CreateRoomPreviewWrapper>
+  );
+};
+
+export default CreateRoomPreview;
+
+const CreateRoomPreviewWrapper = styled.main`
+  z-index:1000;
+  position: fixed; 
+  top: 50%; 
+  left: 30%; 
+  transform: translate(-50%, -50%); 
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  padding: 2rem;
+  border: solid 1px var(--color-wildsand);
+  border-radius: 0.3125rem;
+  background: var(----white-color, #FFF);
+
+  h1 {
+    color: #000;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 400;
+  }
+`
+
+const StyledCloseButton = styled.button`
+  display: flex;
+  margin-left: auto;
+  border: none;
+  background: none;
+`;

frontend/src/components/chattingRoomList/ChattingRoom.tsx → frontend/src/components/roomPreview/RoomPreview.tsx

@@ -14,7 +14,7 @@ const getImage = async () => {
 };
 
 
-export const ChattingRoom = () =>{
+export const RoomPreview = () =>{
 
   // 에러가 발생하면 react-query update를 하기
   const { isLoading, data, isError } = useQuery({

frontend/src/components/roomPreview/RoomPreviewList.tsx

@@ -0,0 +1,35 @@
+import { RoomPreview } from "./RoomPreview";
+import styled from '@emotion/styled';
+
+const RoomPreviewList = () => {
+	return (
+		<RoomPreviewListWrapper>
+			<RoomPreviewListSection>
+
+				{/* Grid */}
+        <ChattingRoomListGridContainer>
+          {Array.from({ length: 20 }).map((_, index) => (
+            <RoomPreview key={index} />
+          ))}
+        </ChattingRoomListGridContainer>
+
+			</RoomPreviewListSection>
+		</RoomPreviewListWrapper>
+	)
+};
+
+export default RoomPreviewList;
+
+
+const RoomPreviewListWrapper = styled.main`
+
+`
+
+const RoomPreviewListSection = styled.section`
+`
+
+export const ChattingRoomListGridContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 16px;
+`;

frontend/src/components/Search.tsx → frontend/src/components/welcome/Search.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import SearchSVG from "../assets/Search.svg"
+import SearchSVG from "../../assets/Search.svg"
 import { useState } from "react"
 
 export const Search = ()=>{

frontend/src/components/Sidebar.tsx → frontend/src/components/welcome/Sidebar.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import Home from "../assets/Home.svg"
-import Create from "../assets/Create.svg"
-import Star from "../assets/Star.svg"
-import Logout from "../assets/Logout.svg"
+import Home from "../../assets/Home.svg"
+import Create from "../../assets/Create.svg"
+import Star from "../../assets/Star.svg"
+import Logout from "../../assets/Logout.svg"
 
 interface SidebarProps{
   top: React.ReactNode;
@@ -17,7 +17,6 @@ interface SidebarItemProps {
 }
 
 
-
 export const Sidebar ={
   wrapper: ({ top, bottom }: SidebarProps) => (
     <SidebarWrapper>

frontend/src/hooks/useAuthQuery.ts

@@ -66,12 +66,10 @@ export const AuthApis = {
 
 
   signin: async (userInfo:UserInfo) => {
-    try {
       const response = await AuthApis.instance.post('/login', {
         email: userInfo.email,
         password: userInfo.password,
       });
-      const data = response.data;
 
       const rawAccessToken = response.headers.get('Accesstoken');
       const rawRefreshToken = response.headers.get('RefreshToken');
@@ -84,10 +82,7 @@ export const AuthApis = {
       localStorage.setItem('Accesstoken', Accesstoken);
       localStorage.setItem('Refreshtoken', Refreshtoken);
 
-      return data;
-    } catch (error) {
-      return null;
-    }
+      return response;
   },
 
   //refreshToken

frontend/src/pages/ChattingListPage.tsx

@@ -1,4 +1,4 @@
-import ChattingRoomList from "../components/chattingRoomList/ChattingRoomList";
+import ChattingRoomList from "../components/roomPreview/RoomPreviewList";
 
 
 const ChattingList: React.FC = () => {