Overnap

css 폴리싱

...@@ -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 },
......