Commit d3329f24 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

리스트 스타일

parent cba6865f
import React from 'react' import React from 'react'
import { Badge, ListGroup } from 'react-bootstrap'; import { Badge, ListGroup } from 'react-bootstrap';
import "../Pages/Home.css";
const INIT_LIST = [{ const INIT_LIST = [{
interest: '', interest: '',
...@@ -62,7 +63,8 @@ function ClosedList(props) { ...@@ -62,7 +63,8 @@ function ClosedList(props) {
<div> <div>
{props.closedlist.map((item, index) => {props.closedlist.map((item, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}> <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}
className='rounded-0'>
{item.roomName} {item.roomName}
{/* {[index] ? <Badge className='ml-2' pill variant='danger'>{unreadnumber[index]}</Badge> : ''} */} {/* {[index] ? <Badge className='ml-2' pill variant='danger'>{unreadnumber[index]}</Badge> : ''} */}
</ListGroup.Item> </ListGroup.Item>
......
import React from 'react' import React from 'react'
import { ListGroup } from 'react-bootstrap'; import { ListGroup } from 'react-bootstrap';
import "../Pages/Home.css";
function OpenList(props) { function OpenList(props) {
function enterChatRoomCH(e) { function enterChatRoomCH(e) {
if (props.roomCode){ if (props.roomCode) {
props.closeChatRoom(props.roomCode) props.closeChatRoom(props.roomCode)
} }
const roomCode = e.target.name const roomCode = e.target.name
...@@ -16,7 +17,7 @@ function OpenList(props) { ...@@ -16,7 +17,7 @@ function OpenList(props) {
<div> <div>
{props.openlist.map((item, index) => {props.openlist.map((item, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}> <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} className='rounded-0'>
{item.roomName} {item.roomName}
</ListGroup.Item> </ListGroup.Item>
</ListGroup> </ListGroup>
......
...@@ -5,3 +5,7 @@ ...@@ -5,3 +5,7 @@
.nav-tabs .nav-item.nav-link.active { .nav-tabs .nav-item.nav-link.active {
color:slateblue !important; color:slateblue !important;
} }
.list-group-item-action{
border-top: none;
}
...@@ -200,7 +200,7 @@ function Home() { ...@@ -200,7 +200,7 @@ function Home() {
: <> {open ? <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark"> : <> {open ? <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75"> <div className="mt-5 p-5 shadow w-75">
<h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2> <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
<h5> 관심분야 : {room.interest}</h5> <h5> 관심분야 : {room.interest}</h5>
<h5> 참여인원 : {room.member.length}</h5> <h5> 참여인원 : {room.member.length}</h5>
<h5 className="mb-3"> 방코드(방코드를 통해서도 참여할 있습니다.) : {room.roomId}</h5> <h5 className="mb-3"> 방코드(방코드를 통해서도 참여할 있습니다.) : {room.roomId}</h5>
......
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