Commit e851bc83 authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0129 머지

parents 308d5b7f 60db2082
...@@ -128,7 +128,7 @@ function Chat(props) { ...@@ -128,7 +128,7 @@ function Chat(props) {
return ( return (
<div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "90vh", position: "relative" }}> <div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "90vh", position: "relative" }}>
<div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}> <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
<a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a> <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
<div style={{ justifyContent: "center" }}> <div style={{ justifyContent: "center" }}>
<p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p> <p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
<p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p> <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
...@@ -147,31 +147,31 @@ function Chat(props) { ...@@ -147,31 +147,31 @@ function Chat(props) {
if (!(value.msg === '')) { if (!(value.msg === '')) {
if (value.sender === "system") { if (value.sender === "system") {
return ( return (
<Row style={{ background: "#F5F5F5", border:"none" }}> <Row style={{ background: "#F5F5F5", border: "none", justifyContent: "center" }}>
{value.msg} {value.msg}
</Row> </Row>
) )
} else if (!(value.sender === user.nickname)) { } else if (!(value.sender === user.nickname)) {
return ( return (
<Row key={index} className='m-1' > <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{ width: "95%", maxWidth: '95%' }}>
<Col xs={2}> <Col xs="auto">
<Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle /> <Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle />
</Col> </Col>
<Col xs={8}> <Col className="ml-2">
<Row><strong>{value.sender}</strong></Row> <Row><strong>{value.sender}</strong></Row>
<Row className='d-flex flex-wrap-nowrap'> <Row xs="auto" className='d-flex flex-wrap-nowrap'>
<Row className='border' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row> <Row style={{ width: 'max-content', maxWidth: '80%', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
<Col className='ml-1'>{value.time}</Col> <Col className="ml-1">{value.time}</Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
) )
} else { } else {
return ( //내가 보낸 메시지 return ( //내가 보낸 메시지
<Row key={index} className='m-1 justify-content-end'> <Row key={index} className='mt-2 justify-content-end' style={{ width: "100%" }}>
<Row className='d-flex flex-wrap-nowrap' > <Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{value.time}</Col> <Col xs="auto" className="ml-3">{value.time}</Col>
<Row className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: 'px', fontSize: 'x-large' }}>{value.msg}</Row> <Col className='mr-1' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Col>
</Row> </Row>
</Row> </Row>
) )
...@@ -188,7 +188,7 @@ function Chat(props) { ...@@ -188,7 +188,7 @@ function Chat(props) {
<Form.Group style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}> <Form.Group style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
<Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ width: "80%", height: "90%", borderColor: "#FFFFFF" }} /> <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ width: "80%", height: "90%", borderColor: "#FFFFFF" }} />
<Button type="submit" disabled={disabled} style={{ justifyContent: "center", width: "10%", height: "90%", borderRadius: "20px", backgroundColor: "#C1C1C1", borderColor: "#FFFFFF" }}> <Button type="submit" disabled={disabled} style={{ justifyContent: "center", width: "10%", height: "90%", borderRadius: "20px", backgroundColor: "#C1C1C1", borderColor: "#FFFFFF" }}>
<FiSend size="16px" color="FAFAFA" /> <FiSend size="16px" color="#FAFAFA" />
</Button> </Button>
</Form.Group> </Form.Group>
</Form> </Form>
......
...@@ -7,13 +7,9 @@ function OpenList(props) { ...@@ -7,13 +7,9 @@ function OpenList(props) {
if (props.roomCode){ if (props.roomCode){
props.closeChatRoom(props.roomCode) props.closeChatRoom(props.roomCode)
} }
console.log('e확인', e.target)
const roomCode = e.target.name const roomCode = e.target.name
// props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
props.openListroom(roomCode) props.openListroom(roomCode)
props.setRoomCode(roomCode) props.setRoomCode(roomCode)
// props.clearChat()
} }
return ( return (
......
...@@ -28,7 +28,6 @@ function RoomMake(props) { ...@@ -28,7 +28,6 @@ function RoomMake(props) {
const Id = res.data.roomId const Id = res.data.roomId
alert(`방암호는 ${Id}입니다`) alert(`방암호는 ${Id}입니다`)
props.handleCloseModal() props.handleCloseModal()
props.handleChato()
setRoom(INIT_ROOM) setRoom(INIT_ROOM)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -62,7 +61,6 @@ function RoomMake(props) { ...@@ -62,7 +61,6 @@ function RoomMake(props) {
<option>언어</option> <option>언어</option>
<option>취미</option> <option>취미</option>
</Form.Control> </Form.Control>
{/* <Form.Control type="text" /> */}
</Col> </Col>
</Form.Group> </Form.Group>
<Form.Group as={Row} controlId="chatIsOpen"> <Form.Group as={Row} controlId="chatIsOpen">
......
...@@ -54,7 +54,12 @@ function Home() { ...@@ -54,7 +54,12 @@ function Home() {
const [recievedTime, setRecievedTime] = useState('') const [recievedTime, setRecievedTime] = useState('')
const [leaveInfo, setLeaveInfo] = useState([{ roomName: "", leaveTime: "" }]) const [leaveInfo, setLeaveInfo] = useState([{ roomName: "", leaveTime: "" }])
const handleCloseModal = () => setShowModal(false); const handleCloseModal = () => {
setShowModal(false);
getClosedList()
getOpenList()
}
const handleShowModal = () => setShowModal(true); const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setShowEnter(false); const handleCloseEnter = () => setShowEnter(false);
const handleShowEnter = () => setShowEnter(true); const handleShowEnter = () => setShowEnter(true);
...@@ -67,7 +72,9 @@ function Home() { ...@@ -67,7 +72,9 @@ function Home() {
async function enterChatRoom(rCode) { //방 입장하기 async function enterChatRoom(rCode) { //방 입장하기
socket.emit('joinRoom', rCode) socket.emit('joinRoom', rCode)
socket.emit('newUser', { rmIf: rCode, userInfo: userName }) socket.emit('newUser', { rmIf: rCode, userInfo: userName })
setShow(true)
console.log(`joinRoom : ${rCode} 입장`) console.log(`joinRoom : ${rCode} 입장`)
console.log('show:', show)
//여기서 채팅 불러와서 넘겨주던가 해야할거 같은데 //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
} }
...@@ -81,7 +88,6 @@ function Home() { ...@@ -81,7 +88,6 @@ function Home() {
const userNick = response.data.nickname; const userNick = response.data.nickname;
await axios.put('/room/deleteMem', { userId: userId, roomId: roomId }) await axios.put('/room/deleteMem', { userId: userId, roomId: roomId })
setSysmsg(`${userNick}님이 나갔습니다.`) setSysmsg(`${userNick}님이 나갔습니다.`)
console.log(`${roomId}${userId} 탈퇴`)
setRoomCode("") setRoomCode("")
} }
...@@ -93,19 +99,16 @@ function Home() { ...@@ -93,19 +99,16 @@ function Home() {
async function getOpenList() { async function getOpenList() {
let res = await axios.get('/room/openlist') let res = await axios.get('/room/openlist')
console.log('getOpenlist', res.data)
setOpenlist(res.data) setOpenlist(res.data)
} }
//오픈채팅방에서 참가하기
async function openListroom(roomId) { async function openListroom(roomId) {
console.log(roomId)
const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } }) const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
setRoom(roomInf.data[0]) setRoom(roomInf.data[0])
setOpen(true)
setShow(false) setShow(false)
setOpen(true)
} }
//오픈채팅방에서 참가하기
async function attendListRoom() { async function attendListRoom() {
const roomId = room.roomId const roomId = room.roomId
const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId }) const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
...@@ -114,6 +117,7 @@ function Home() { ...@@ -114,6 +117,7 @@ function Home() {
if (tf.data) { if (tf.data) {
alert('참가되었습니다.') alert('참가되었습니다.')
setSysmsg(`${userNick}님이 들어왔습니다.`) setSysmsg(`${userNick}님이 들어왔습니다.`)
getClosedList()
} else { } else {
alert('이미 참가된 방입니다.') alert('이미 참가된 방입니다.')
} }
...@@ -186,34 +190,30 @@ function Home() { ...@@ -186,34 +190,30 @@ function Home() {
</Sdiv> </Sdiv>
</Col> </Col>
<Col style={{ padding: "5px", marginLeft: "15px" }}> <Col style={{ padding: "5px", marginLeft: "15px" }}>
<> {show ? <>
{(show || chat) ? {chat ? <Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} />
null
: <div style={{ position: "fixed", bottom: "20px", right: "30px" }}> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button> <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
<Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button> <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
</div> </div>} </>
} : <> {open ?
{chat ? <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
<Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} /> <div className="d-flex justify-content-center">
: null} <div className="mt-5 p-5 mr-2" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', position: "relative" }}>
{(open && !chat) ? <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
<div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark"> <h5> 관심분야 : {room.interest}</h5>
<div className="d-flex justify-content-center"> <h5> 참여인원 : {room.member.length}</h5>
<div className="mt-5 p-5 shadow w-75"> <h5 className="mb-3"> 방코드(방코드를 통해서도 참여할 있습니다.) : {room.roomId}</h5>
<h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2> <Row className='justify-content-center'>
<h5> 관심분야 : {room.interest}</h5> <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
<h5> 참여인원 : {room.member.length}</h5> <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
<h5 className="mb-3"> 방코드(방코드를 통해서도 참여할 있습니다.) : {room.roomId}</h5> </Row>
<Row className='justify-content-center'>
<Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
<Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
</Row>
</div>
</div> </div>
</div> </div>
: null} </div> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
</> <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
<Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
</div>} </>}
</Col> </Col>
</Row> </Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} /> <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
......
...@@ -38,8 +38,6 @@ function LogIn() { ...@@ -38,8 +38,6 @@ function LogIn() {
setSucces(true) setSucces(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
//setError(error.response.data)
//error객체가 들어감.
} finally { } finally {
setLoading(false) setLoading(false)
} }
......
...@@ -124,9 +124,9 @@ function ProfilePage() { ...@@ -124,9 +124,9 @@ function ProfilePage() {
</Row> </Row>
<Row className='m-3 justify-content-center'> <Row className='m-3 justify-content-center'>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<Button variant="outline-success" size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button> <Button size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
<Link to='/'> <Link to='/'>
<Button variant="outline-success" size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}> 화면으로</Button> <Button size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}> 화면으로</Button>
</Link> </Link>
</Form> </Form>
</Row> </Row>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment