diff --git a/src/components/Common/Auth/SignIn/style.ts b/src/components/Common/Auth/SignIn/style.ts index eb2325c..a71d06f 100644 --- 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 index 832fbda..f3858ac 100644 --- 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 index 44aa22b..3aaebad 100644 --- 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 ( - + - - + + {Array.from({ length: 9 }).map((_, idx) => ( ))} - - - + + + ); }; 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 index d93d13a..26bc0b7 100644 --- 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 ( - + {Array.from({ length: 10 }).map((_, idx) => ( ))} - + ); }; diff --git a/src/components/Common/Skeleton/ViewAll/All/index.tsx b/src/components/Common/Skeleton/ViewAll/All/index.tsx index ba3b110..e4264a5 100644 --- 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 ( - + {Array.from({ length: 20 }).map((_, idx) => ( @@ -19,7 +20,7 @@ const AllListSkeleton = () => { ))} - + ); }; diff --git a/src/components/Common/Skeleton/ViewAll/Rank/index.tsx b/src/components/Common/Skeleton/ViewAll/Rank/index.tsx index 702a6eb..22cea70 100644 --- 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) => ( - + - + {Array.from({ length: 10 }).map((_, idx) => ( @@ -26,9 +23,9 @@ const RankSkeleton = () => { ))} - + - + ))} ); diff --git a/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyDetailInfo/UserProfile/style.ts b/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyDetailInfo/UserProfile/style.ts index 2fb6fda..01d1dad 100644 --- a/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyDetailInfo/UserProfile/style.ts +++ b/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyDetailInfo/UserProfile/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"; @@ -5,17 +6,14 @@ 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` @@ -23,9 +21,7 @@ export const ImgContainer = styled.div` 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 index f77ca53..6d004fa 100644 --- 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) => {

{attr.companyName}

- - 이미지 없음 -

평균 평점

- + + + 평균 평점 + {convertStarRatingObject(attr).map((item) => (
  • diff --git a/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyStarGrades/style.ts b/src/components/Company/CompanyDetail/CompanyDetailItem/CompanyStarGrades/style.ts index 8a08a6e..b05ba53 100644 --- 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,15 +18,15 @@ 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; } `; @@ -33,12 +34,14 @@ export const Wrapper = styled.div` 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 index 56bb678..0e02675 100644 --- 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; diff --git a/src/components/Home/Main/Rank/RankItem/index.tsx b/src/components/Home/Main/Rank/RankItem/index.tsx index e8df653..188baf7 100644 --- a/src/components/Home/Main/Rank/RankItem/index.tsx +++ b/src/components/Home/Main/Rank/RankItem/index.tsx @@ -4,9 +4,10 @@ import smileFace from "@src/assets/icons/Home/smileFace.svg"; import { getDateText } from "@stubee2/stubee2-rolling-util"; import { useNavigate } from "react-router-dom"; import logo from "@src/assets/icons/Logo/logo.svg"; -import { RankCategoryTitle, RankNumber } from "./style"; +import { MainItemWrap, RankCategoryTitle, RankNumber } from "./style"; import { getRgb } from "@src/utils/Rgb/getRgb"; import { useGetCompanyRankSelectQuery } from "@src/services/Company/queries"; +import { Column } from "@src/styles/flex"; interface Props { rankCategory: string; @@ -16,19 +17,20 @@ function RankItem({ rankCategory }: Props) { const { data: rankInfo } = useGetCompanyRankSelectQuery(rankCategory, { suspense: true, }); + const rankInfoSlicing = rankInfo?.slice(0, 9); const navigate = useNavigate(); return ( <> {rankInfoSlicing?.length!! > 0 ? ( - + 이미지 없음

    {getCompanyRankIntroduce(rankCategory)}

     - - + + {rankInfoSlicing?.map((item, idx) => ( - + {item.companyDetails.description} @@ -67,13 +69,13 @@ function RankItem({ rankCategory }: Props) { {getDateText(new Date(item.createdAt))} - + ))} - - -     + + + ) : (

    BEST 기업 랭킹에 등록된 회사가 없습니다.

    )} diff --git a/src/components/Home/Main/Rank/RankItem/style.ts b/src/components/Home/Main/Rank/RankItem/style.ts index 74a8aa8..891dd93 100644 --- a/src/components/Home/Main/Rank/RankItem/style.ts +++ b/src/components/Home/Main/Rank/RankItem/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"; @@ -6,16 +7,20 @@ export const RankCategoryTitle = styled.div` font-weight: bold; color: ${RollingPalette.unEmphasize.Dark}; - display: flex; - align-items: center; - column-gap: 5px; + ${Flex({ columnGap: "5px", alignItems: "center" })} img { width: 24px; - headers: 24px; + height: 24px; } `; +export const MainItemWrap = styled.div` + width: 100%; + height: 100%; + ${Flex({ flexWrap: "wrap", gap: "1.5rem" })} +`; + export const RankNumber = styled.div` width: 40px; height: 40px; @@ -26,9 +31,7 @@ export const RankNumber = styled.div` top: 0; left: 0; - display: flex; - align-items: center; - justify-content: center; + ${Flex({ alignItems: "center", justifyContent: "center" })} font-size: 20px; color: #fff; diff --git a/src/components/Home/Main/Rank/index.tsx b/src/components/Home/Main/Rank/index.tsx index b07c238..7e5bfc7 100644 --- a/src/components/Home/Main/Rank/index.tsx +++ b/src/components/Home/Main/Rank/index.tsx @@ -8,6 +8,7 @@ import MainSkeleton from "@src/components/Common/Skeleton/Home/Main"; import { MainContainer, MainTitle, MainWrapper } from "../style"; import { ViewAll } from "../../style"; import { useNavigate } from "react-router-dom"; +import { Column, Row } from "@src/styles/flex"; const Rank = () => { const [rankCategorySelect, setRankCategorySelect] = useState("total"); @@ -16,8 +17,8 @@ const Rank = () => { return ( - - + + 이미지 없음

    @@ -26,7 +27,7 @@ const Rank = () => { navigate("/ranking")}>전체보기 - + {COMPANY_RANK_ITMES.map((item) => ( @@ -39,7 +40,7 @@ const Rank = () => { ))} - + 회사 랭킹을 갖고오지 못했습니다.}> }> diff --git a/src/components/Home/Main/Rank/style.ts b/src/components/Home/Main/Rank/style.ts index 4a25e6e..26a17b9 100644 --- a/src/components/Home/Main/Rank/style.ts +++ b/src/components/Home/Main/Rank/style.ts @@ -1,16 +1,9 @@ +import { Flex } from "@src/styles/flex"; import { RollingPalette } from "@stubee2/stubee2-rolling-design-token"; import styled from "styled-components"; -export const RankCategoriesContainer = styled.div` - display: flex; - flex-direction: column; - row-gap: 15px; -`; - export const RankCategoriesUl = styled.ul` - display: flex; - column-gap: 15px; - align-items: center; + ${Flex({ alignItems: "center", columnGap: "15px" })} overflow-x: hidden; overflow-y: hidden; @@ -34,9 +27,7 @@ export const RankCategoryLi = styled.li<{ isSelect: boolean }>` background-color: ${({ isSelect }) => isSelect && RollingPalette.main.Base}; cursor: pointer; - display: flex; - align-items: center; - justify-content: center; + ${Flex({ alignItems: "center", justifyContent: "center" })} border-radius: 10px; transform: scale(1); @@ -50,8 +41,3 @@ export const RankCategoryLi = styled.li<{ isSelect: boolean }>` background-color: ${({ isSelect }) => (isSelect ? "#2b3f94" : "#dddddd")}; } `; - -export const TitleContainer = styled.div` - display: flex; - column-gap: 3px; -`; diff --git a/src/components/Home/Main/Search/SearchItem/index.tsx b/src/components/Home/Main/Search/SearchItem/index.tsx index 46ca053..6f5133d 100644 --- a/src/components/Home/Main/Search/SearchItem/index.tsx +++ b/src/components/Home/Main/Search/SearchItem/index.tsx @@ -5,6 +5,7 @@ import logo from "@src/assets/icons/Logo/logo.svg"; import { getRgb } from "@src/utils/Rgb/getRgb"; import { NoneData } from "./style"; import { useGetCompanySerachListQuery } from "@src/services/Company/queries"; +import { Column, Row } from "@src/styles/flex"; interface Props { company: string; @@ -18,9 +19,9 @@ const SearchItem = ({ company }: Props) => { const companyList = searchCompany?.pages; return ( - - - + + + {companyList![0].data.length!! > 0 ? ( companyList!.map((data) => data.data.map((item) => ( @@ -51,7 +52,7 @@ const SearchItem = ({ company }: Props) => { - + {item.companyDetails.description} @@ -59,7 +60,7 @@ const SearchItem = ({ company }: Props) => { {getDateText(new Date(item.createdAt))} - + )) @@ -73,9 +74,9 @@ const SearchItem = ({ company }: Props) => {

    )} - - - +     +     + ); }; diff --git a/src/components/Home/Main/style.ts b/src/components/Home/Main/style.ts index 1694a54..f16bfc9 100644 --- a/src/components/Home/Main/style.ts +++ b/src/components/Home/Main/style.ts @@ -1,4 +1,5 @@ import { FadeInAnimation } from "@src/styles/common.style"; +import { Flex } from "@src/styles/flex"; import { RollingPalette } from "@stubee2/stubee2-rolling-design-token"; import styled from "styled-components"; @@ -6,9 +7,7 @@ export const MainContainer = styled.div` width: calc(100% - 290px); height: 100%; - display: flex; - flex-direction: column; - row-gap: 3rem; + ${Flex({ flexDirection: "column", rowGap: "3rem" })} overflow-y: auto; ::-webkit-scrollbar { @@ -25,18 +24,17 @@ export const MainContainer = styled.div` export const MainWrapper = styled.div<{ rowGap: string }>` width: 100%; height: 100%; - display: flex; - flex-direction: column; - row-gap: ${({ rowGap }) => rowGap}; + + ${({ rowGap }) => Flex({ flexDirection: "column", rowGap })} overflow-y: hidden; `; export const MainTitle = styled.div` - display: flex; - align-items: center; font-weight: bold; font-size: 25px; - column-gap: 10px; + + ${Flex({ alignItems: "center", columnGap: "10px" })} + img { width: 27px; height: 27px; @@ -49,33 +47,6 @@ export const MainTitle = styled.div` } `; -export const MainItemContainer = styled.div` - width: 100%; - height: 100%; - - display: flex; - flex-direction: column; - row-gap: 15px; -`; - -export const MainItemWrapper = styled.div` - widht: 100%; - height: 100%; - - display: flex; - flex-wrap: wrap; - flex-direction: column; -`; - -export const MainItemContent = styled.div` - width: 100%; - height: 100%; - - display: flex; - flex-wrap: wrap; - gap: 1.5rem; -`; - export const MainItemBox = styled.div` width: 330px; height: 300px; @@ -108,8 +79,7 @@ export const CompanyLogoContainer = styled.div<{ rgb: string }>` width: 100%; height: 65%; - display: flex; - justify-content: center; + ${Flex({ justifyContent: "center" })} border-bottom: 1px solid #ddd; overflow: hidden; @@ -123,8 +93,6 @@ export const CompanyLogoContainer = styled.div<{ rgb: string }>` export const LogoImg = styled.img` max-width: 100%; max-height: 100%; - width: auto; - height: auto; transform: scale(1); transition: all 0.27s ease-in-out; @@ -138,23 +106,18 @@ export const CompanyContentContainer = styled.div` height: 35%; background-color: #fff; - display: flex; - flex-direction: column; - justify-content: space-between; + ${Flex({ flexDirection: "column", justifyContent: "space-between" })} padding: 1rem 1rem 0.7rem 1rem; @media screen and (max-width: 710px) { height: 121px; - justify-content: normal; - row-gap: 1.5rem; + ${Flex({ justifyContent: "normal", rowGap: "1.5rem" })} } `; export const CompanyNameAndCreatedAt = styled.div` - display: flex; - align-items: center; - column-gap: 5px; font-weight: bold; + ${Flex({ alignItems: "center", columnGap: "5px" })} `; export const CompanyName = styled.p` @@ -168,12 +131,6 @@ export const CompanyCreatedAt = styled.p` color: ${RollingPalette.unEmphasize.Base}; `; -export const CompanyDescriptionAndAddress = styled.div` - display: flex; - flex-direction: column; - row-gap: 6px; -`; - export const CompanyDescription = styled.p` font-size: 17px; font-weight: bold; diff --git a/src/components/Home/Nav/ExternalSite/style.ts b/src/components/Home/Nav/ExternalSite/style.ts index 6fd4b62..b98d900 100644 --- a/src/components/Home/Nav/ExternalSite/style.ts +++ b/src/components/Home/Nav/ExternalSite/style.ts @@ -1,18 +1,17 @@ +import { Flex } from "@src/styles/flex"; import styled from "styled-components"; export const ExternalSiteContainer = styled.div` - display: flex; - flex-direction: column; - row-gap: 1rem; margin-top: 10px; + width: 100%; + ${Flex({ flexDirection: "column", rowGap: "1rem" })} `; export const ExternalSiteTitle = styled.div` font-size: 17px; font-weight: 600; - display: flex; - align-items: center; - column-gap: 5px; + + ${Flex({ alignItems: "center", columnGap: "5px" })} img { width: 20px; @@ -22,7 +21,6 @@ export const ExternalSiteTitle = styled.div` export const ExternalSiteItemContainer = styled.div` width: 100%; - height: auto; padding: 0 1rem 1rem 1rem; border: 1px solid #dddddd; border-radius: 10px; @@ -30,20 +28,17 @@ export const ExternalSiteItemContainer = styled.div` `; export const ExternalSiteItemWrapper = styled.ul` - display: flex; - flex-direction: column; - row-gap: 1rem; margin-top: 15px; + ${Flex({ flexDirection: "column", rowGap: "1rem" })} `; export const ExternalSiteItem = styled.li` width: 100%; - display: flex; - align-items: center; - column-gap: 0.7rem; cursor: pointer; border-radius: 10px; + ${Flex({ alignItems: "center", columnGap: "0.7rem" })} + img { width: 50px; height: 50px; diff --git a/src/components/Home/Nav/UserInfo/index.tsx b/src/components/Home/Nav/UserInfo/index.tsx index bc73a32..bb97e30 100644 --- a/src/components/Home/Nav/UserInfo/index.tsx +++ b/src/components/Home/Nav/UserInfo/index.tsx @@ -7,16 +7,17 @@ import { useNavigate } from "react-router-dom"; import UserInfoSkeleton from "@src/components/Common/Skeleton/Home/UserInfo"; import { tokenDecode } from "@src/utils/Auth/tokenDecode"; import { useGetMyInfoQuery } from "@src/services/Member/queries"; +import { Column } from "@src/styles/flex"; const UserInfo = () => { return ( - + 내 정보를 갖고오지 못했습니다.}> }> - + ); }; @@ -43,7 +44,7 @@ function UserInfoItem() { -
    + 이미지 없음

    @@ -52,12 +53,13 @@ function UserInfoItem() { : "동문 인증이 되어 있지 않나요?"}

    + navigate(isMember ? "/story" : "/alumni/certify")} > {isMember ? "스토리 등록하러 가기" : "동문인증 하러가기"} -
    + ); } diff --git a/src/components/Home/Nav/UserInfo/style.ts b/src/components/Home/Nav/UserInfo/style.ts index e392d3f..4629052 100644 --- a/src/components/Home/Nav/UserInfo/style.ts +++ b/src/components/Home/Nav/UserInfo/style.ts @@ -1,20 +1,12 @@ +import { Flex } from "@src/styles/flex"; import { RollingPalette } from "@stubee2/stubee2-rolling-design-token"; import styled from "styled-components"; -export const UserInfoWrapper = styled.div` - width: 100%; - height: 200px; - display: flex; - flex-direction: column; - justify-content: space-between; -`; - export const UserInfoBox = styled.div` - display: flex; - align-items: center; - column-gap: 10px; width: 100%; white-space: nowrap; + ${Flex({ alignItems: "center", columnGap: "10px" })}; + img { width: 75px; height: 75px; @@ -22,12 +14,11 @@ export const UserInfoBox = styled.div` object-fit: cover; border-radius: 4rem; } + div { width: calc(100% - 85px); cursor: pointer; - display: flex; - flex-direction: column; - row-gap: 8px; + ${Flex({ flexDirection: "column", rowGap: "8px" })} } `; @@ -39,10 +30,6 @@ export const UserInfoNickName = styled.p` overflow-x: hidden; text-overflow: ellipsis; - span { - color: #ec6a5e; - } - transition: all 0.1s ease-in-out; &:hover { color: ${RollingPalette.main.Base}; @@ -54,12 +41,13 @@ export const UserInfoEmail = styled.p` `; export const RegistTextContainer = styled.div` - display: flex; - align-items: center; - column-gap: 5px; + width: 100%; + margin-bottom: 15px; font-weight: 600; + ${Flex({ alignItems: "center", columnGap: "5px" })} + img { width: 20px; height: 20px; diff --git a/src/components/Home/Nav/index.tsx b/src/components/Home/Nav/index.tsx index b8a423a..f2a68de 100644 --- a/src/components/Home/Nav/index.tsx +++ b/src/components/Home/Nav/index.tsx @@ -3,6 +3,7 @@ import Token from "@src/libs/Token/Token"; import styled from "styled-components"; import ExternalSite from "./ExternalSite"; import UserInfo from "./UserInfo"; +import { Flex } from "@src/styles/flex"; const Nav = () => { return ( @@ -17,15 +18,12 @@ export const NavContainer = styled.div` width: 290px; height: 100%; - display: flex; - flex-direction: column; + ${Flex({ flexDirection: "column" })} row-gap: calc(2rem - 10px); position: sticky; top: calc(90px + 2rem); - /* background-color: red; */ - @media screen and (max-width: 1105px) { display: none; } diff --git a/src/components/Home/Recommand/RecommandItem/index.tsx b/src/components/Home/Recommand/RecommandItem/index.tsx index c3aa74e..69beb5e 100644 --- a/src/components/Home/Recommand/RecommandItem/index.tsx +++ b/src/components/Home/Recommand/RecommandItem/index.tsx @@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom"; import { useEffect } from "react"; import { getRgb } from "@src/utils/Rgb/getRgb"; import { useGetAllCompanyListQuery } from "@src/services/Company/queries"; +import { Row } from "@src/styles/flex"; const RecommandItem = () => { const { data, fetchNextPage } = useGetAllCompanyListQuery({ suspense: true }); @@ -22,7 +23,11 @@ const RecommandItem = () => { <> {companyList!![0].data.length!! > 0 ? ( - + {companyList?.map((data) => data.data.map((item) => ( { )) )}
    - + ) : (

    졸업생들이 추천하는 회사가 없습니다.

    diff --git a/src/components/Home/Recommand/RecommandItem/style.ts b/src/components/Home/Recommand/RecommandItem/style.ts index e800a29..446d9bb 100644 --- a/src/components/Home/Recommand/RecommandItem/style.ts +++ b/src/components/Home/Recommand/RecommandItem/style.ts @@ -1,4 +1,5 @@ import { StopDrag } from "@src/styles/common.style"; +import { Flex } from "@src/styles/flex"; import styled from "styled-components"; export const RecommandItemContainer = styled.div` @@ -10,21 +11,11 @@ export const RecommandItemContainer = styled.div` overflow-x: auto; `; -export const RecommandItemWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - column-gap: 1rem; -`; - export const RecommandItemBox = styled.div` width: 250px; height: 200px; - display: flex; - justify-content: center; - flex-direction: column; - row-gap: 5px; + ${Flex({ flexDirection: "column", justifyContent: "center", rowGap: "5px" })} p { text-align: center; @@ -46,16 +37,14 @@ export const ImageContainer = styled.div<{ rgb: string }>` border: 1px solid #ddd; cursor: pointer; - display: flex; - justify-content: center; + ${Flex({ justifyContent: "center" })} overflow: hidden; background-color: ${({ rgb }) => rgb || "#fff"}; zoom: 0.85; + img { max-width: 100%; max-height: 100%; - width: auto; - height: auto; } ${StopDrag} diff --git a/src/components/Home/Recommand/index.tsx b/src/components/Home/Recommand/index.tsx index 336900b..775f5d2 100644 --- a/src/components/Home/Recommand/index.tsx +++ b/src/components/Home/Recommand/index.tsx @@ -6,20 +6,21 @@ import { Suspense } from "react"; import RecommandSkeleton from "@src/components/Common/Skeleton/Home/Recommand"; import { useNavigate } from "react-router-dom"; import { ViewAll } from "../style"; +import { Row } from "@src/styles/flex"; const Recommand = () => { const navigate = useNavigate(); return ( - + 이미지 없음

    졸업생들이 추천해요!

     navigate("/all")}>전체보기 -     + 회사 정보를 가지고 오지 못했습니다.}> diff --git a/src/components/Home/Recommand/style.ts b/src/components/Home/Recommand/style.ts index fd72c40..915da42 100644 --- a/src/components/Home/Recommand/style.ts +++ b/src/components/Home/Recommand/style.ts @@ -1,30 +1,22 @@ import { FadeInAnimation } from "@src/styles/common.style"; +import { Flex } from "@src/styles/flex"; import styled from "styled-components"; export const RecommandContainer = styled.div` width: 100%; - height: auto; - - display: flex; - flex-direction: column; + ${Flex({ flexDirection: "column" })} @media screen and (max-width: 710px) { width: 99%; } `; -export const SeniorRecommandContainer = styled.div` - display: flex; - align-items: center; - column-gap: 3px; -`; - export const SeniorRecommand = styled.div` font-size: 22px; font-weight: bold; - display: flex; - align-items: center; - column-gap: 5px; + + ${Flex({ alignItems: "center", columnGap: "5px" })} + img { width: 27px; height: 27px; diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index c4c3887..1aa31ec 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -7,6 +7,7 @@ import { useRecoilValue } from "recoil"; import { SearchCompanyAtom } from "@src/stores/company/company.store"; import Search from "./Main/Search"; import { useAuthTopScroll } from "@stubee2/stubee2-rolling-util"; +import { Row } from "@src/styles/flex"; const Home = () => { const searchCompany = useRecoilValue(SearchCompanyAtom); @@ -14,10 +15,10 @@ const Home = () => { return ( - + {searchCompany ? : }