0716

client/package.json

@@ -40,5 +40,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:8080"
 }

client/src/components/Home/AddRoom.js

+import { useEffect, useState } from "react";
+import axios from 'axios'
+
+const INIT_ROOM = {
+  roomName: '',
+  owner: '123456',
+  member: '123456',
+  profileimg: [],
+}
+
 const AddRoom = () => {
+  const [room, setRoom] = useState(INIT_ROOM)
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false)
+  const [disabled, setDisabled] = useState(true)
+
+  useEffect(() => {
+    setDisabled(
+      !(
+        room.name &&
+        room.owner &&
+        room.member &&
+        room.profileimg
+      )
+    );
+  }, [room]);
+
+  //LocalStorage에 user id를 저장할때 id를 owner, member에 저장하기
+  //const userId = localStorage.getItem('id')
+  // setRoom({...room, [owner]: userId})
+  // setRoom({...room, [member]: userId})
+
+  function handleChange(event) {
+    const { name, value } = event.target
+    setRoom({ ...room, [name]: value })
+    console.log(room)
+  }
+
+  async function handleSubmit(event) {
+    event.preventDefault()
+    try {
+      console.log('룸룸', room)
+      let res = await axios.post("/room/create", room)
+      const Id = res.data.id
+      alert(`방참여코드는 ${Id}입니다`)
+      setSuccess(true)
+    } catch (error) {
+      // catchErrors(error, setError);
+    } finally {
+      // setLoading(false);
+    }
+  }
+
+  if (success) {
+    console.log('success', success)
+    alert('룸생성이 완료되었습니다!')
+    //return <Redirect to='/' />
+  }
+
+  const { name, owner, member, profileimg } = room;
+
   return (
     <div>
       <div className="mx-4 my-3 d-flex justify-content-between">
@@ -83,6 +143,7 @@ const AddRoom = () => {
       </div>
 
       {/* 방참여하기 모달 */}
+      <div className="form" onSubmit={handleSubmit}>
         <div className="modal" id="joinModal" tabIndex="-1" aria-hidden="true">
           <div className="modal-dialog">
             <div className="modal-content">
@@ -114,8 +175,11 @@ const AddRoom = () => {
             </div>
           </div>
         </div>
+      </div>
+
 
       {/* 방생성하기 모달 */}
+      <div className="form" onSubmit={handleSubmit}>
         <div className="modal" id="makeModal" tabIndex="-1" aria-hidden="true">
           <div className="modal-dialog">
             <div className="modal-content">
@@ -131,7 +195,12 @@ const AddRoom = () => {
               <div className="modal-body">
                 <h6>방프로필사진</h6>
                 <div className="mb-4">
-                <input type="file" className="upload-hidden" />
+                  <input
+                    type="file"
+                    className="upload-hidden"
+                    onChange={handleChange}
+                    name="profileimg"
+                    value={room.profileimg} />
                 </div>
                 <h6>방이름</h6>
                 <div className="input-group">
@@ -141,6 +210,9 @@ const AddRoom = () => {
                     placeholder="방이름을 입력해주세요"
                     aria-label="방이름 입력해주세요"
                     aria-describedby="basic-addon1"
+                    onChange={handleChange}
+                    name="name"
+                    value={room.name}
                   />
                 </div>
                 <div className="modal-footer">
@@ -153,6 +225,7 @@ const AddRoom = () => {
           </div>
         </div>
       </div>
+    </div>
   );
 };
 

controllers/room.controller.js

 import { Room } from "../models/index.js";
+//import { customAlphabet } from 'nanoid'
 import config from "../config/app.config.js";
+import isLength from 'validator/lib/isLength.js'
 
-const login = async (req, res) => {
+//const nanoid = customAlphabet('1234567890abcdef', 10)
+
+const roomJoin = async (req, res) => {
   try {
     console.log("login= ", req.body);
     res.json("안녕");
@@ -11,6 +15,35 @@ const login = async (req, res) => {
   }
 };
 
+const roomCreate = async (req, res) => {
+  const { name, owner, member, profileimg } = req.body;
+  const id = nanoid()
+  const Id = await Room.findOne({ id })
+  while (Id) {
+    id = nanoid()
+    Id = await Room.findOne({ id })
+  }
+
+  try {
+    if (!isLength(name, { min: 3, max: 20 })) {
+      return res.status(422).send('방이름은 3-20자여야 합니다.')
+    }
+
+    const newRoom = await new Room({
+      id,
+      name,
+      owner,
+      member,
+      profileimg,
+    }).save()
+    // console.log(newRoom)
+    res.json(newRoom)
+  } catch (error) {
+    console.log(error)
+    res.status(500).send('방생성 에러')
+  }
+}
+
 export default {
-  login,
+  roomJoin, roomCreate
 };

models/room.model.js

@@ -17,6 +17,10 @@ const RoomModel = (sequelize) => {
       member: {
         type: DataTypes.ARRAY(DataTypes.INTEGER),
       },
+      profileimg: {
+        type: DataTypes.STRING,
+        default: '3cd14b9bcb2007f324fcb82e0b566cce',
+      },
       channel: {
         type: DataTypes.ARRAY(DataTypes.JSON),
       },

routes/room.route.js

@@ -3,6 +3,8 @@ import roomCrtl from "../controllers/room.controller.js";
 
 const router = express.Router();
 
-router.route("/").get(roomCrtl.login);
+//router.route("/").get(roomCrtl.login);
+router.route("/room/create")
+    .post(roomCrtl.roomCreate)
 
 export default router;
\ No newline at end of file