diff --git a/backend/chatroom-service/src/main/java/com/tadak/chatroomservice/global/CorsConfig.java b/backend/chatroom-service/src/main/java/com/tadak/chatroomservice/global/CorsConfig.java new file mode 100644 index 0000000..28824c2 --- /dev/null +++ b/backend/chatroom-service/src/main/java/com/tadak/chatroomservice/global/CorsConfig.java @@ -0,0 +1,2 @@ +package com.tadak.chatroomservice.global;public class CorsConfig { +} diff --git a/frontend/src/assets/Close.svg b/frontend/src/assets/Close.svg new file mode 100644 index 0000000..6bb2ecf --- /dev/null +++ b/frontend/src/assets/Close.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/components/InputForm.tsx b/frontend/src/components/InputForm.tsx deleted file mode 100644 index 7769c70..0000000 --- a/frontend/src/components/InputForm.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import EmailSVG from "../assets/Email.svg" -import UserSVG from "../assets/User.svg" -import PasswordSVG from "../assets/Password.svg" - -import styled from "@emotion/styled"; - - -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, placeholder, title, imgSVG, ...rest }) => { - return ( - -

{title}

- - - img - - - - - ); -}; - -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) -` \ No newline at end of file diff --git a/frontend/src/components/auth/InputForm.tsx b/frontend/src/components/auth/InputForm.tsx new file mode 100644 index 0000000..75e11d4 --- /dev/null +++ b/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) => 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 ( + +

{title}

+ + {imgSVG && ( + + img + + )} + {type === 'number' ? ( + + {[1, 2, 3, 4, 5, 6].map((option) => ( + + ))} + + ) : ( + + )} + + + ); +}; + +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; +`; diff --git a/frontend/src/components/auth/auth.tsx b/frontend/src/components/auth/auth.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/components/chattingRoomList/ChattingRoom.tsx b/frontend/src/components/chattingRoomList/ChattingRoom.tsx deleted file mode 100644 index 748fc16..0000000 --- a/frontend/src/components/chattingRoomList/ChattingRoom.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import { useEffect } from 'react'; -// import { useNotification } from 'web-notification'; -import axios from "axios" - -const getImage = async () => { - try { - const response = await axios.get('/thumbnails'); - const data = response.data; - return data.imageUrl; - } catch (error) { - console.error('Error fetching image:', error); - } -}; - - -export const ChattingRoom = () =>{ - - // 에러가 발생하면 react-query update를 하기 - const { isLoading, data, isError } = useQuery({ - queryKey: ["chattingRoomImage"], - queryFn: getImage, - staleTime: 5 * 1000 - }); - - if (isLoading) { - return
Loading...
; - } - - if (isError) { - return
에러
; - } - - return( -
-
- {/* 이미지 썸네일 */} -

썸네일

-
- {data && 썸네일} -
- - {/* 채팅룸 설명 */} -
- 방제목
- 즐겨찾기
- 방설명
- #카테고리 -
-
-
- ) -} \ No newline at end of file diff --git a/frontend/src/components/chattingRoomList/ChattingRoomList.tsx b/frontend/src/components/chattingRoomList/ChattingRoomList.tsx deleted file mode 100644 index 0c215c6..0000000 --- a/frontend/src/components/chattingRoomList/ChattingRoomList.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ChattingRoom } from "./ChattingRoom"; -import styled from '@emotion/styled'; - -const ChattingRoomList: React.FC = () => { - return ( -
-
-

This is ChattingRoomList Component!

- - {/* Grid */} - - {Array.from({ length: 16 }).map((_, index) => ( - - ))} - - -
-
- ) -}; - -export default ChattingRoomList; - - -export const ChattingRoomListGridContainer = styled.div` - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 16px; -`; \ No newline at end of file diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/common/Button.tsx similarity index 97% rename from frontend/src/components/Button.tsx rename to frontend/src/components/common/Button.tsx index 2c4e830..86ca15d 100644 --- a/frontend/src/components/Button.tsx +++ b/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; diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/common/Toast.tsx similarity index 100% rename from frontend/src/components/Toast.tsx rename to frontend/src/components/common/Toast.tsx diff --git a/frontend/src/components/roomPreview/CreateRoomPreview.tsx b/frontend/src/components/roomPreview/CreateRoomPreview.tsx new file mode 100644 index 0000000..016c60d --- /dev/null +++ b/frontend/src/components/roomPreview/CreateRoomPreview.tsx @@ -0,0 +1,88 @@ +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'; +import { RoomInfo } from '../../stores/useRoomStore'; + +interface CreateRoomPreviewProps { + onClose: () => void; + onAddRoom: () => void; + roominfo: RoomInfo; + username: string; + handleInputChange: (e: React.ChangeEvent) => void; + newRoom: { roomName: string; description:string; owner:string; category: string; capacity: number; }; +} + +const CreateRoomPreview: React.FC = ({ onClose, onAddRoom, roominfo, username, handleInputChange }) => { + const handleAddRoomClick = async () => { + try { + const roomWithOwner = { ...roominfo, owner: username }; + console.log(roomWithOwner); + await axios.post('http://localhost:8002/chatroom-service/create', roomWithOwner); + + onAddRoom(); + onClose(); + } catch (error) { + console.error('Error creating room:', error); + } + }; + + const handleCloseClick = () => { + onClose(); + } + + return ( + + + Close + +

Create Room

+ + + + +
+