refactor: apply flex component

StuBee2 · May 9, 2024 · 4d6690a · 4d6690a
1 parent f826c09
commit 4d6690a
Show file tree

Hide file tree

Showing 67 changed files with 517 additions and 905 deletions.
diff --git a/src/components/Common/Auth/SignIn/style.ts b/src/components/Common/Auth/SignIn/style.ts
@@ -67,7 +67,6 @@ export const Close = styled.img`
 
 export const Wave = styled.img`
   width: 100%;
-  height: auto;
 
   position: absolute;
   bottom: 0;

diff --git a/src/components/Common/Footer/style.ts b/src/components/Common/Footer/style.ts
@@ -70,7 +70,6 @@ export const LogoWrapper = styled.div`
 export const FooterItemContainer = styled.ul`
   font-weight: 700;
   li {
-    width: auto;
     padding: 1rem;
     height: 40px;
     cursor: pointer;

diff --git a/src/components/Common/Skeleton/Home/Main/index.tsx b/src/components/Common/Skeleton/Home/Main/index.tsx
@@ -1,24 +1,27 @@
-import {
-  MainItemContainer,
-  MainItemWrapper,
-  MainItemContent,
-} from "@src/components/Home/Main/style";
+import styled from "styled-components";
 import { SkeletonBox } from "../../Common/style";
 import * as S from "./style";
+import { Column, Flex } from "@src/styles/flex";
 
 const MainSkeleton = () => {
   return (
-    <MainItemContainer>
+    <Column $width={"100%"} $height={"100%"} $rowGap={"15px"}>
       <SkeletonBox width="200px" height="30px" />
-      <MainItemWrapper>
-        <MainItemContent>
+      <Column $width={"100%"} $height={"100%"} $wrap={"wrap"}>
+        <Row>
           {Array.from({ length: 9 }).map((_, idx) => (
             <S.MainItemSkeletonBox key={idx} />
           ))}
-        </MainItemContent>
-      </MainItemWrapper>
-    </MainItemContainer>
+        </Row>
+      </Column>
+    </Column>
   );
 };
 
 export default MainSkeleton;
+
+const Row = styled.div`
+  width: 100%;
+  height: 100%;
+  ${Flex({ flexWrap: "wrap", gap: "1.5rem" })}
+`;
diff --git a/src/components/Common/Skeleton/Home/Recommand/index.tsx b/src/components/Common/Skeleton/Home/Recommand/index.tsx
@@ -1,17 +1,19 @@
-import {
-  RecommandItemContainer,
-  RecommandItemWrapper,
-} from "@src/components/Home/Recommand/RecommandItem/style";
+import { RecommandItemContainer } from "@src/components/Home/Recommand/RecommandItem/style";
 import { SkeletonBox } from "../../Common/style";
+import { Row } from "@src/styles/flex";
 
 const RecommandSkeleton = () => {
   return (
     <RecommandItemContainer>
-      <RecommandItemWrapper>
+      <Row
+        $alignItems={"center"}
+        $columnGap={"1rem"}
+        $justifyContent={"center"}
+      >
         {Array.from({ length: 10 }).map((_, idx) => (
           <SkeletonBox key={idx} width="280px" height="180px" />
         ))}
-      </RecommandItemWrapper>
+      </Row>
     </RecommandItemContainer>
   );
 };

diff --git a/src/components/Common/Skeleton/ViewAll/All/index.tsx b/src/components/Common/Skeleton/ViewAll/All/index.tsx
@@ -1,11 +1,12 @@
-import { Container, Wrapper } from "@src/components/ViewAll/All/AllList/style";
+import { Wrapper } from "@src/components/ViewAll/All/AllList/style";
 import { CompanyContent } from "@src/components/ViewAll/style";
 import { SkeletonBox } from "../../Common/style";
 import * as S from "./style";
+import { Column } from "@src/styles/flex";
 
 const AllListSkeleton = () => {
   return (
-    <Container>
+    <Column $rowGap={"20px"}>
       <Wrapper>
         {Array.from({ length: 20 }).map((_, idx) => (
           <S.AllSkeletonBox key={idx}>
@@ -19,7 +20,7 @@ const AllListSkeleton = () => {
           </S.AllSkeletonBox>
         ))}
       </Wrapper>
-    </Container>
+    </Column>
   );
 };
 

diff --git a/src/components/Common/Skeleton/ViewAll/Rank/index.tsx b/src/components/Common/Skeleton/ViewAll/Rank/index.tsx
@@ -1,20 +1,17 @@
-import {
-  Container,
-  Wrapper,
-  Content,
-} from "@src/components/ViewAll/Rank/RankList/style";
+import { Wrapper } from "@src/components/ViewAll/Rank/RankList/style";
 import { CompanyContent } from "@src/components/ViewAll/style";
 import { SkeletonBox } from "../../Common/style";
 import * as S from "./style";
+import { Column, Row } from "@src/styles/flex";
 
 const RankSkeleton = () => {
   return (
     <>
       {Array.from({ length: 5 }).map((_, idx) => (
-        <Container key={idx}>
+        <Column $width={"100%"} $rowGap={"20px"} key={idx}>
           <SkeletonBox width="100px" height="20px" />
           <Wrapper>
-            <Content>
+            <Row $columnGap={"2rem"}>
               {Array.from({ length: 10 }).map((_, idx) => (
                 <S.RankSkeletonBox key={idx}>
                   <SkeletonBox width="100%" height="60%" />
@@ -26,9 +23,9 @@ const RankSkeleton = () => {
                   </CompanyContent>
                 </S.RankSkeletonBox>
               ))}
-            </Content>
+            </Row>
           </Wrapper>
-        </Container>
+        </Column>
       ))}
     </>
   );

diff --git a/...components/Company/CompanyDetail/CompanyDetailItem/CompanyDetailInfo/UserProfile/style.ts b/...components/Company/CompanyDetail/CompanyDetailItem/CompanyDetailInfo/UserProfile/style.ts
@@ -1,31 +1,27 @@
+import { Flex } from "@src/styles/flex";
 import { RollingPalette } from "@stubee2/stubee2-rolling-design-token";
 import styled from "styled-components";
 
 export const Container = styled.div`
   width: 100%;
   height: 50px;
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  ${Flex({ alignItems: "center", justifyContent: "flex-end" })}
 `;
 
 export const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
   position: absolute;
   top: 0;
   left: 0;
+  ${Flex({ alignItems: "center" })}
 `;
 
 export const ImgContainer = styled.div`
   width: 130px;
   height: 130px;
   border-radius: 100%;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  ${Flex({ alignItems: "center", justifyContent: "center" })}
 
   background-color: #fff;
   z-index: 1;
@@ -55,10 +51,7 @@ export const Content = styled.div<{
   position: absolute;
   left: 3.5rem;
 
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-  justify-content: center;
+  ${Flex({ flexDirection: "column", rowGap: "12px", justifyContent: "center" })}
 
   padding-left: 5.5rem;
   white-space: nowrap;
@@ -75,8 +68,8 @@ export const GithubId = styled.div`
   color: ${RollingPalette.unEmphasize.Base};
   font-size: 15px;
   font-weight: 500;
-  display: flex;
-  column-gap: 5px;
+
+  ${Flex({ columnGap: "5px" })}
   cursor: pointer;
 
   img {

diff --git a/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyStarGrades/index.tsx b/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyStarGrades/index.tsx
@@ -5,6 +5,7 @@ import * as S from "./style";
 import logo from "@src/assets/icons/Logo/logo.svg";
 import { CompanyStarGradeInfo } from "@src/types/Company/company.type";
 import { getRgb } from "@src/utils/Rgb/getRgb";
+import { Row } from "@src/styles/flex";
 
 interface Props {
   starGradeInfo: CompanyStarGradeInfo;
@@ -22,10 +23,10 @@ const CompanyStarGrades = ({ starGradeInfo }: Props) => {
           <p>{attr.companyName}</p>
         </S.CompanyBasicInfo>
         <S.ItemContainer>
-          <S.CompanyGradesText>
-            <img src={bolt} alt="이미지 없음" />
-            <p>평균 평점</p>
-          </S.CompanyGradesText>
+          <Row $columnGap={"5px"} $alignItems={"center"}>
+            <S.Image src={bolt} alt="이미지 없음" />
+            <S.Grade>평균 평점</S.Grade>
+          </Row>
           <S.ItemUl>
             {convertStarRatingObject(attr).map((item) => (
               <li key={item.id}>

diff --git a/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyStarGrades/style.ts b/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyStarGrades/style.ts
@@ -1,3 +1,4 @@
+import { Flex } from "@src/styles/flex";
 import { RollingPalette } from "@stubee2/stubee2-rolling-design-token";
 import styled from "styled-components";
 
@@ -17,28 +18,30 @@ export const Container = styled.div`
 `;
 
 export const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5rem;
-  align-items: center;
+  ${Flex({ flexDirection: "column", alignItems: "center", rowGap: "1.5rem" })}
+
   @media screen and (max-width: 1005px) {
-    flex-direction: row;
-    justify-content: center;
-    row-gap: 0;
-    column-gap: 15px;
+    ${Flex({
+      flexDirection: "row",
+      justifyContent: "center",
+      rowGap: "0",
+      columnGap: "15px",
+    })}
     white-space: nowrap;
   }
 `;
 
 export const CompanyBasicInfo = styled.div<{ backgroundColor: string }>`
   width: 100%;
   height: 150px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  row-gap: 15px;
+
+  ${Flex({
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    rowGap: "15px",
+  })}
+
   margin-bottom: 8px;
 
   img {
@@ -54,6 +57,7 @@ export const CompanyBasicInfo = styled.div<{ backgroundColor: string }>`
     font-size: 23px;
     font-weight: bold;
   }
+
   @media screen and (max-width: 1005px) {
     width: auto;
   }
@@ -65,9 +69,9 @@ export const ItemContainer = styled.div`
   background-color: ${RollingPalette.unEmphasize.Lightest};
   border: 1px solid #dddddd;
   padding: 1.5rem 1rem;
-  display: flex;
-  flex-direction: column;
-  row-gap: 1rem;
+
+  ${Flex({ flexDirection: "column", rowGap: "1rem" })}
+
   @media screen and (max-width: 1005px) {
     overflow: hidden;
     height: 90%;
@@ -76,48 +80,35 @@ export const ItemContainer = styled.div`
 `;
 
 export const ItemUl = styled.ul`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  ${Flex({ flexDirection: "column", justifyContent: "space-between" })}
   row-gap: 1.5rem;
   padding: 1rem 2rem;
 
   li {
-    display: flex;
-    flex-direction: column;
-    row-gap: 10px;
+    ${Flex({ flexDirection: "column", rowGap: "10px" })}
   }
   @media screen and (max-width: 1005px) {
-    flex-direction: row;
-    row-gap: 0;
-    column-gap: 20px;
-    padding: 1rem 1rem;
+    padding: 1rem;
     overflow-x: auto;
     overflow-y: auto;
+    ${Flex({ flexDirection: "row", rowGap: "0", columnGap: "20px" })}
   }
 `;
 
-export const CompanyGradesText = styled.div`
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
+export const Image = styled.img`
+  width: 22px;
+  height: 22px;
+`;
 
-  img {
-    width: 22px;
-    height: 22px;
-  }
-  p {
-    font-size: 18px;
-    font-weight: bold;
-  }
+export const Grade = styled.p`
+  font-size: 18px;
+  font-weight: bold;
 `;
 
 export const StarGradeContainer = styled.div`
-  display: flex;
-  align-items: center;
+  ${Flex({ alignItems: "center" })}
   @media screen and (max-width: 1005px) {
-    justify-content: center;
-    align-items: normal;
+    ${Flex({ alignItems: "normal", justifyContent: "center" })}
   }
 `;
 

diff --git a/src/components/Company/CompanyDetail/style.ts b/src/components/Company/CompanyDetail/style.ts
@@ -25,7 +25,6 @@ export const Wrapper = styled.div`
   @media screen and (max-width: 500px) {
     row-gap: 0rem;
   }
-
   overflow-y: auto;
   ::-webkit-scrollbar {
     display: none;