Merge pull request #88 from SWM-FIRE/FIRE-393-fe-각-input에-대한-에러-처리

Fire 393 fe 각 input에 대한 에러 처리

src/components/atoms/ThemeImages.tsx

@@ -0,0 +1,15 @@
+import Cosmos from '../../assets/theme/cosmos.png';
+import Fire from '../../assets/theme/fire.png';
+import Ocean from '../../assets/theme/ocean.png';
+import Travel from '../../assets/theme/travel.png';
+import Camping from '../../assets/theme/camp.png';
+
+const Themes = {
+  Cosmos,
+  Fire,
+  Ocean,
+  Travel,
+  Camping,
+};
+
+export default Themes;

src/components/main/CreateRoomForm.tsx

@@ -1,54 +1,144 @@
 import styled from 'styled-components';
+import React, { useState, KeyboardEvent } from 'react';
+import { ReactComponent as DeleteTag } from '../../assets/svg/deleteTag.svg';
+import { ReactComponent as Up } from '../../assets/svg/up.svg';
+import { ReactComponent as Down } from '../../assets/svg/down.svg';
 
 export default function CreateRoomForm() {
+  const [newTag, setNewTag] = useState('');
+  const [title, setTitle] = useState('');
+  const [detail, setDetail] = useState('');
+  // const [total, setTotal] = useState(1);
+  // const [theme, setTheme] = useState('fire');
+  const [tags, setTags] = useState([]);
+
+  const handleRoomNameChange = (e) => {
+    setTitle(e.target.value);
+  };
+
+  const handleRoomDescriptionChange = (e) => {
+    setDetail(e.target.value);
+  };
+
+  const handleTagChange = (e) => {
+    setNewTag(() => e.target.value);
+    if (newTag.includes(' ')) {
+      setNewTag((prev) => prev.trim().replace(/ /g, '-'));
+    }
+  };
+
+  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onAddTag();
+    }
+  };
+
+  const onAddTag = () => {
+    setTags([...tags, newTag.trim()]);
+    setNewTag('');
+  };
+
+  const onDeleteTag = (e, index) => {
+    console.log(e, index);
+    setTags(tags.filter((_, i) => i !== index));
+  };
+
+  const onSubmit = (e) => {
+    console.log(e);
+  };
+
   return (
     <Form>
       <Section>
-        <Label htmlFor="name">방 이름*</Label>
-        <Input id="name" type="text" placeholder="방 이름을 입력해주세요." />
+        <Label htmlFor="name">방 이름 *</Label>
+        <Input
+          id="name"
+          type="text"
+          value={title}
+          onChange={handleRoomNameChange}
+          placeholder="방 이름을 입력해주세요."
+          required
+        />
       </Section>
       <Section>
-        <Label htmlFor="description">설명*</Label>
+        <Label htmlFor="description">설명</Label>
         <Input
           id="description"
           type="text"
+          value={detail}
+          onChange={handleRoomDescriptionChange}
           placeholder="설명을 입력해주세요."
         />
       </Section>
       <Section>
-        <Label htmlFor="tag">태그*</Label>
+        <Label htmlFor="tag">태그</Label>
         <Input
           id="tag"
           type="text"
+          value={newTag}
+          onChange={handleTagChange}
+          onKeyPress={handleKeyPress}
           placeholder="태그 입력후 Enter를 눌러주세요."
         />
-        <Tags />
+        <Tags>
+          {tags.map((myTag, index) => (
+            <TagComponent key={myTag.concat(`${index}`)}>
+              <Tag key={myTag}>#{myTag}</Tag>
+              <TagButton type="button" onClick={(e) => onDeleteTag(e, index)}>
+                <DeleteTag />
+              </TagButton>
+            </TagComponent>
+          ))}
+        </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>
+        <Label htmlFor="total">최대 인원 수 *</Label>
+        <div style={{ width: '100%', display: 'flex' }}>
+          <Select
+            id="total"
+            placeholder="최대 인원 수를 선택해주세요."
+            required
+          >
+            <option value="" disabled selected>
+              최대 인원 수를 선택해주세요.
+            </option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+          </Select>
+          <SelectIcon>
+            <Up />
+            <Down />
+          </SelectIcon>
+        </div>
       </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>
+        <Label htmlFor="theme">테마 *</Label>
+        <div style={{ width: '100%', display: 'flex' }}>
+          <Select id="theme" placeholder="테마를 선택해주세요." required>
+            <option value="" disabled selected>
+              원하는 방 테마를 선택해주세요.
+            </option>
+            <option value="theme1">모닥불</option>
+            <option value="theme2">바다</option>
+            <option value="theme3">캠핑</option>
+            <option value="theme4">여행</option>
+            <option value="theme5">우주인</option>
+          </Select>
+          <SelectIcon>
+            <Up />
+            <Down />
+          </SelectIcon>
+        </div>
       </Section>
-      <Submit>방 생성하기</Submit>
+      <Submit onClick={onSubmit}>방 생성하기</Submit>
     </Form>
   );
 }
 
-const Form = styled.form`
+const Form = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -57,18 +147,20 @@ const Form = styled.form`
   color: #b0b8c1;
   font-size: 1.4rem;
   font-family: IBMPlexSansKRRegular, Arial;
+  overflow-y: auto;
 `;
 
 const Section = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 1.5rem;
+  margin-top: 2.9rem;
   width: 100%;
 `;
 
 const Label = styled.label`
   width: 100%;
+  line-height: 2.9rem;
 `;
 
 const Input = styled.input`
@@ -84,10 +176,36 @@ const Input = styled.input`
   padding: 0 1.6rem;
 `;
 
-const Tags = styled.div``;
+const Tags = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 1.2rem;
+  margin-top: 1.65rem;
+`;
+
+const TagComponent = styled.div`
+  display: flex;
+  align-items: center;
+  border-radius: 0.6rem;
+  background-color: rgba(69, 178, 107, 0.1);
+  padding: 0.5rem 1rem;
+`;
+
+const TagButton = styled.button`
+  cursor: pointer;
+  margin-left: 1rem;
+`;
+
+const Tag = styled.div`
+  color: rgba(69, 178, 107, 1);
+  font-family: IBMPlexSansKRRegular, Arial;
+`;
 
 const Select = styled.select`
-  width: 100%;
+  width: 95%;
   height: 4.9rem;
   margin-top: 0.25rem;
   background: transparent;
@@ -96,14 +214,44 @@ const Select = styled.select`
   color: #f9fafb;
   font-size: 1.5rem;
   background-color: #080909;
-  border-radius: 0.6rem;
+  border-top-left-radius: 0.6rem;
+  border-bottom-left-radius: 0.6rem;
   padding: 0 1.6rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  :required:invalid {
+    color: #909090;
+  }
+  option[value=''][disabled] {
+    display: none;
+  }
+`;
+
+const SelectIcon = styled.div`
+  width: 5%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4.9rem;
+  margin-top: 0.25rem;
+  background: transparent;
+  outline: none;
+  border: none;
+  color: #f9fafb;
+  font-size: 1.5rem;
+  background-color: #080909;
+  border-top-right-radius: 0.6rem;
+  border-bottom-right-radius: 0.6rem;
+  gap: 0.6rem;
+  flex-direction: column;
 `;
 
 const Submit = styled.button`
   color: #111827;
   border-radius: 1rem;
-  height: 5.5rem;
+  min-height: 5.5rem;
   width: 100%;
   font-size: 1.5rem;
   font-family: IBMPlexSansKRRegular, Arial;

src/components/main/CreateRoomModal.tsx

@@ -48,25 +48,26 @@ const Close = styled.div`
 
 const ModalBackground = styled.div`
   position: fixed;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: rgba(0, 0, 0, 0.7);
   justify-content: center;
   align-items: center;
-  top: 0;
   display: flex;
+  top: 0;
   z-index: 999;
 `;
 
 const ModalBox = styled.div`
   position: fixed;
   background-color: #23262f;
   border-radius: 2rem;
-  display: flex;
   width: 60.8rem;
+  height: 90%;
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  top: 16rem;
   padding: 3.2rem;
+  /* overflow: auto; */
 `;