Chore: 키워드 3개 css 적용

MoodMemo · Jun 28, 2023 · 120ab7b · 120ab7b
1 parent 7285741
commit 120ab7b
Showing 1 changed file with 83 additions and 3 deletions.
diff --git a/src/users.tsx b/src/users.tsx
@@ -170,17 +170,97 @@ 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',
             flex: 'none',
             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> */}