[DESIGN] 인터뷰 검색 반응형 적용 #30

nyangnyanggompeng · Aug 2, 2023 · 8df0931 · 8df0931
1 parent e3a6245
commit 8df0931
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/components/Interview/MessageItem.tsx b/src/components/Interview/MessageItem.tsx
@@ -107,6 +107,7 @@ const StyledMessageItem = (theme: Theme) =>
       },
       '.content-wrap': {
         width: '100%',
+        gap: '1rem',
         '>div': {
           p: {
             width: 'calc(100% - 2.5rem)',
@@ -116,9 +117,8 @@ const StyledMessageItem = (theme: Theme) =>
       '&.user': {
         flexDirection: 'column',
         alignSelf: 'flex-end',
-        '> div': {
+        '> .icon': {
           alignSelf: 'flex-end',
-          textAlign: 'right',
         },
       },
     },

diff --git a/src/pages/InterviewSearch.tsx b/src/pages/InterviewSearch.tsx
@@ -10,6 +10,7 @@ import { getSearchList } from '../utils/Interview/interviewListFn';
 import { Theme, useTheme, css } from '@emotion/react';
 import { faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 import axios from 'axios';
+import { mq } from '../theme';
 
 const StyledInterviewSearch = (theme: Theme) =>
   css({
@@ -20,7 +21,7 @@ const StyledInterviewSearch = (theme: Theme) =>
       borderBottom: `1px solid ${theme.gray2}`,
       paddingBottom: '3rem',
       marginBottom: '3rem',
-      gap: '25rem',
+      flexWrap: 'wrap',
     },
     h3: {
       marginBottom: '0.5rem',
@@ -34,7 +35,7 @@ const StyledInterviewSearch = (theme: Theme) =>
       width: '50%',
 
       input: {
-        width: '64%',
+        flex: '1 1 50%',
       },
     },
 
@@ -56,6 +57,18 @@ const StyledInterviewSearch = (theme: Theme) =>
         },
       },
     },
+
+    [mq[0]]: {
+      '.subtit': {
+        flexDirection: 'column',
+        justifyContent: 'stretch',
+        alignItems: 'stretch',
+        gap: '2rem',
+        '> div': {
+          width: '100%',
+        },
+      },
+    },
   });
 
 interface SearchDataTypes {