Showing
5 changed files
with
11 additions
and
4 deletions
... | @@ -49,7 +49,7 @@ export const Chat: React.FC<ChatProps> = (props) => { | ... | @@ -49,7 +49,7 @@ export const Chat: React.FC<ChatProps> = (props) => { |
49 | 49 | ||
50 | return ( | 50 | return ( |
51 | <div className={props.w}> | 51 | <div className={props.w}> |
52 | - <div className={`${props.h} w-full rounded shadow flex flex-col overflow-y-scroll`}> | 52 | + <div className={`${props.h} w-full py-2 rounded shadow flex flex-col overflow-y-scroll`}> |
53 | {chatLines.map((line, i) => (<ChatLine key={16383+i} chatData={line}/>))} | 53 | {chatLines.map((line, i) => (<ChatLine key={16383+i} chatData={line}/>))} |
54 | <div ref={messageEndRef} /> | 54 | <div ref={messageEndRef} /> |
55 | </div> | 55 | </div> | ... | ... |
... | @@ -9,7 +9,7 @@ interface RoundInfoProps { | ... | @@ -9,7 +9,7 @@ interface RoundInfoProps { |
9 | 9 | ||
10 | export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { | 10 | export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { |
11 | return ( | 11 | return ( |
12 | - <div className='w-full p-3 flex items-center place-content-between'> | 12 | + <div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'> |
13 | <div>대충 타이머 위치</div> | 13 | <div>대충 타이머 위치</div> |
14 | <div>{wordChosen}</div> | 14 | <div>{wordChosen}</div> |
15 | <div>R{round}</div> | 15 | <div>R{round}</div> | ... | ... |
... | @@ -26,7 +26,7 @@ export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => { | ... | @@ -26,7 +26,7 @@ export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => { |
26 | }, []); | 26 | }, []); |
27 | 27 | ||
28 | return ( | 28 | return ( |
29 | - <div className={`w-40 h-144 rounded shadow flex flex-col items-center ${isInGame ? '' : 'hidden'}`}> | 29 | + <div className={`w-40 h-140 rounded shadow flex flex-col items-center ${isInGame ? '' : 'hidden'}`}> |
30 | <div className='mt-3' /> | 30 | <div className='mt-3' /> |
31 | {roles.map(x => ( | 31 | {roles.map(x => ( |
32 | <div key={x.username} className={`my-5 ease-linear transition-all duration-100 | 32 | <div key={x.username} className={`my-5 ease-linear transition-all duration-100 | ... | ... |
... | @@ -111,7 +111,7 @@ export const Room: React.FC = () => { | ... | @@ -111,7 +111,7 @@ export const Room: React.FC = () => { |
111 | <GameBoard isInGame={isInGame} /> | 111 | <GameBoard isInGame={isInGame} /> |
112 | { | 112 | { |
113 | isInGame ? ( | 113 | isInGame ? ( |
114 | - <Chat w='w-4/12' h='h-80' /> | 114 | + <Chat w='w-4/12' h='h-132' /> |
115 | ) : ( | 115 | ) : ( |
116 | <div className='w-full flex flex-col justify-center items-center'> | 116 | <div className='w-full flex flex-col justify-center items-center'> |
117 | <UserInfo users={roomData.users}/> | 117 | <UserInfo users={roomData.users}/> | ... | ... |
... | @@ -5,6 +5,13 @@ module.exports = { | ... | @@ -5,6 +5,13 @@ module.exports = { |
5 | extend: { | 5 | extend: { |
6 | spacing: { | 6 | spacing: { |
7 | 120: '30rem', | 7 | 120: '30rem', |
8 | + 124: '31rem', | ||
9 | + 128: '32rem', | ||
10 | + 132: '33rem', | ||
11 | + 136: '34rem', | ||
12 | + 140: '35rem', | ||
13 | + 160: '40rem', | ||
14 | + 200: '50rem', | ||
8 | }, | 15 | }, |
9 | }, | 16 | }, |
10 | }, | 17 | }, | ... | ... |
-
Please register or login to post a comment