refactor: CompanyInfo 반응형 디자인 수정

kakao-tech-campus-2nd-step3 · Nov 6, 2024 · ee475cb · ee475cb
1 parent 03313f2
commit ee475cb
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 14 deletions.
diff --git a/src/pages/myCompanyPage/MyCompany.tsx b/src/pages/myCompanyPage/MyCompany.tsx
@@ -1,7 +1,7 @@
 import Layout from '@/features/layout';
 import { Flex, InnerContainer, Image } from '@/components/common';
 import CompanyInfo from '@/pages/myPage/employer/Companies/CompanyInfo';
-import { imageStyle, innerContainerStyle } from './MyCompany.styles';
+import { companyWrapperStyle, imageStyle, innerContainerStyle } from './MyCompany.styles';
 import RecruitmentList from '@/pages/myCompanyPage/Recruitments/RecruitmentList';
 import { CompanyData, RecruitmentItem } from '@/types';
 
@@ -15,14 +15,9 @@ export default function MyCompany({ companyData, recruitmentsData }: MyCompanyPr
     <Layout>
       <div>
         <InnerContainer css={innerContainerStyle}>
-          <Flex
-            direction="column"
-            alignItems="center"
-            gap={{ y: '60px' }}
-            css={{ position: 'relative', minHeight: '600px' }}
-          >
+          <Flex direction="column" alignItems="center" gap={{ y: '60px' }}>
             {companyData && (
-              <Flex alignItems="center" gap={{ x: '150px' }}>
+              <Flex alignItems="center" gap={{ x: '150px' }} css={companyWrapperStyle}>
                 <Image url={companyData.logoImage} size={{ width: '280px', height: '120px' }} css={imageStyle} />
                 <CompanyInfo {...companyData} />
               </Flex>

diff --git a/src/pages/myPage/employer/Companies/CompanyInfo.styles.ts b/src/pages/myPage/employer/Companies/CompanyInfo.styles.ts
@@ -32,14 +32,10 @@ export const infoStyle = css`
       gap: '30px',
     },
     tablet: {
-      flexDirection: 'row',
-      justifyContent: 'center',
-      width: '100%',
-      gap: '10px',
-    },
-    mobile: {
       flexDirection: 'column',
+      justifyContent: 'center',
       alignItems: 'center',
+      width: '100%',
       gap: '10px',
     },
   })}