From 120ab7bfe9a70c0bb22f6735d23786981f6d86c2 Mon Sep 17 00:00:00 2001
From: Sehui Jeong <46295659+SayisMe@users.noreply.github.com>
Date: Wed, 28 Jun 2023 14:10:17 +0900
Subject: [PATCH] =?UTF-8?q?Chore:=20=ED=82=A4=EC=9B=8C=EB=93=9C=203?=
 =?UTF-8?q?=EA=B0=9C=20css=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/users.tsx | 86 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 83 insertions(+), 3 deletions(-)

diff --git a/src/users.tsx b/src/users.tsx
index 04aab55..e18f453 100644
--- a/src/users.tsx
+++ b/src/users.tsx
@@ -170,9 +170,9 @@ export const UserList = () => {
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '0px 0px',
+            padding: '0px 30px',
             gap: '24px',
-            width: '365px',
+            width: 'auto',
             height: '72px',
             border: '2px dashed #072D57',
             borderRadius: '5px',
@@ -180,7 +180,87 @@ export const UserList = () => {
             order: 0,
             flexGrow: 0
           }}>
-          <p>{selectedUser.keyword && selectedUser.keyword.join(", ")}</p>
+          <p style={{
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: '8px 15px',
+            gap: '4px',
+
+            width: 'auto',
+            height: '32px',
+
+            backgroundColor: '#DDE2E8',
+            border: '1px solid #BABABA',
+            borderRadius: '2px',
+
+            flex: 'none',
+            order: 0,
+            flexGrow: 0,
+
+            fontFamily: 'Ubuntu',
+            fontStyle: 'normal',
+            fontWeight: '400',
+            fontSize: '20px',
+            lineHeight: '16px',
+
+            color: '#072D57'
+          }}>{selectedUser.keyword1st}</p>
+          <p style={{
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: '8px 15px',
+            gap: '4px',
+
+            width: 'auto',
+            height: '32px',
+
+            backgroundColor: '#DDE2E8',
+            border: '1px solid #BABABA',
+            borderRadius: '2px',
+
+            flex: 'none',
+            order: 0,
+            flexGrow: 0,
+
+            fontFamily: 'Ubuntu',
+            fontStyle: 'normal',
+            fontWeight: '400',
+            fontSize: '20px',
+            lineHeight: '16px',
+
+            color: '#072D57'
+          }}>{selectedUser.keyword2nd}</p>
+          <p style={{
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: '8px 15px',
+            gap: '4px',
+
+            width: 'auto',
+            height: '32px',
+
+            backgroundColor: '#DDE2E8',
+            border: '1px solid #BABABA',
+            borderRadius: '2px',
+
+            flex: 'none',
+            order: 0,
+            flexGrow: 0,
+
+            fontFamily: 'Ubuntu',
+            fontStyle: 'normal',
+            fontWeight: '400',
+            fontSize: '20px',
+            lineHeight: '16px',
+
+            color: '#072D57'
+          }}>{selectedUser.keyword3rd}</p>
           </div>
 
           {/* <p>{selectedUser.time}</p> */}