ChannelSingle.js 1.59 KB
Newer Older
우지원's avatar
우지원 committed
1
import { Link, useParams } from 'react-router-dom'
우지원's avatar
우지원 committed
2

Kim, Chaerin's avatar
Kim, Chaerin committed
3
const ChannelSingle = (props) => {
우지원's avatar
우지원 committed
4
5
6
  const { roomId, channelId } = useParams()
  console.log('props', props.channel)
  console.log('hi', channelId)
Kim, Chaerin's avatar
Kim, Chaerin committed
7
8
  return (
    <div>
우지원's avatar
우지원 committed
9
      <div className="overflow-auto" style={{ height: '610px' }}>
Kim, Chaerin's avatar
Kim, Chaerin committed
10
11
        {props.channel.map((el) => (
          <div className="mb-3">
우지원's avatar
우지원 committed
12
            <Link to={`/room/${roomId}/${el.channelName}`}>
Kim, Chaerin's avatar
Kim, Chaerin committed
13
14
              <div
                className="m-3 p-1 row"
우지원's avatar
우지원 committed
15
                style={{ backgroundColor: '#E0CEE8' }}
Kim, Chaerin's avatar
Kim, Chaerin committed
16
              >
우지원's avatar
우지원 committed
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
                {el.channelName === channelId ? (
                  <img
                    className="col-auto mt-2"
                    src="/fullSpeaker.png"
                    width="25px"
                    height="25px"
                  />
                ) : (
                  <img
                    className="col-auto mt-2"
                    src="/emptySpeaker.png"
                    width="25px"
                    height="25px"
                  />
                )}
                <h5 className="col mt-2" style={{ color: 'black' }}>
Kim, Chaerin's avatar
Kim, Chaerin committed
33
34
                  {el.channelName}
                </h5>
우지원's avatar
우지원 committed
35
              </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
36
            </Link>
우지원's avatar
우지원 committed
37

Kim, Chaerin's avatar
Kim, Chaerin committed
38
39
40
            {el.joinName &&
              el.joinName.map((e) => (
                <div>
우지원's avatar
우지원 committed
41
                  <ul className="mx-5" style={{ color: '#76D079' }}>
Kim, Chaerin's avatar
Kim, Chaerin committed
42
                    <li>
우지원's avatar
우지원 committed
43
                      <p style={{ color: 'black' }}>{e}</p>
Kim, Chaerin's avatar
Kim, Chaerin committed
44
45
46
47
48
49
                    </li>
                  </ul>
                </div>
              ))}
          </div>
        ))}
seoyeon's avatar
seoyeon committed
50
51
      </div>
    </div>
우지원's avatar
우지원 committed
52
53
  )
}
Kim, Chaerin's avatar
Kim, Chaerin committed
54

우지원's avatar
우지원 committed
55
export default ChannelSingle