Refactor: 전체적인 컴포넌트 및 페이지 반응형 수정 (마이페이지, 스터디관리 제외) (#143)

co-KKIRI · Mar 23, 2024 · 01c0195 · 01c0195
1 parent 65ffb27
commit 01c0195
Show file tree

Hide file tree

Showing 18 changed files with 85 additions and 116 deletions.
diff --git a/co-kkiri/src/components/commons/Button/Button.styled.ts b/co-kkiri/src/components/commons/Button/Button.styled.ts
@@ -33,14 +33,11 @@ const VARIANT_STYLE = {
   floating: css`
     border-radius: 50%;
     box-shadow: ${floatingButton};
-
-    ${mediaQueries.desktop} {
-      width: 7.2rem;
-      height: 7.2rem;
-      position: fixed;
-      bottom: 8rem;
-      right: 4rem;
-    }
+    width: 7.2rem;
+    height: 7.2rem;
+    position: fixed;
+    bottom: 8rem;
+    right: 4rem;
 
     ${mediaQueries.tablet} {
       width: 5.6rem;
@@ -99,7 +96,9 @@ export const Container = styled.button<Container>`
 `;
 
 export const ButtonIcon = styled.img`
-  ${mediaQueries.desktop} {
-    width: 3rem;
+  width: 3rem;
+
+  ${mediaQueries.tablet} {
+    width: 1.85rem;
   }
 `;
diff --git a/co-kkiri/src/components/commons/Card/Card.styled.ts b/co-kkiri/src/components/commons/Card/Card.styled.ts
@@ -14,7 +14,7 @@ interface ContainerProps extends PageProp {
 const {
   color,
   boxShadow: { content },
-  mediaQueries: { desktop, tablet, mobile },
+  mediaQueries: { tablet, mobile },
 } = DESIGN_TOKEN;
 
 const desktopWidthByPage = ($isSidebarOpenNarrow: boolean, $page: PageType) => {
@@ -44,9 +44,8 @@ const widthForDevice = ({ $isSidebarOpenNarrow, $page }: ContainerProps) => {
   const mobileWidth = mobileWidthByPage($page);
 
   return css`
-    ${desktop} {
-      width: ${desktopWidth};
-    }
+    width: ${desktopWidth};
+
     ${tablet} {
       width: 34.6rem;
     }

diff --git a/co-kkiri/src/components/commons/Gnb/Gnb.styled.ts b/co-kkiri/src/components/commons/Gnb/Gnb.styled.ts
@@ -14,7 +14,6 @@ export const Box = styled.div`
   width: 100%;
   display: flex;
   justify-content: space-between;
-
   padding: 2.2rem 4rem;
 
   ${mediaQueries.tablet} {
@@ -45,6 +44,7 @@ export const Logo = styled.img`
     width: 11.9rem;
     height: 2.4rem;
   }
+
   ${mediaQueries.mobile} {
     width: 9.8rem;
     height: 2rem;
@@ -54,6 +54,7 @@ export const Logo = styled.img`
 export const PostButton = styled.div`
   ${typography.font14Bold};
   color: ${color.primary[1]};
+
   ${mediaQueries.mobile} {
     display: none;
   }

diff --git a/co-kkiri/src/components/commons/ProjectDetailCard/index.tsx b/co-kkiri/src/components/commons/ProjectDetailCard/index.tsx
@@ -77,17 +77,14 @@ const Container = styled.div<{ type?: string }>`
 
   border-radius: 1.5rem;
   box-shadow: ${boxShadow.content};
-
-  ${mediaQueries.mobile} {
-    width: 32rem;
-  }
+  width: ${({ type }) => (type === "mystudy" ? "50rem" : "35rem")};
 
   ${mediaQueries.tablet} {
     width: ${({ type }) => (type === "mystudy" ? "32rem" : "50rem")};
   }
 
-  ${mediaQueries.desktop} {
-    width: ${({ type }) => (type === "mystudy" ? "50rem" : "35rem")};
+  ${mediaQueries.mobile} {
+    width: 32rem;
   }
 `;
 

diff --git a/co-kkiri/src/components/commons/SearchInput/index.tsx b/co-kkiri/src/components/commons/SearchInput/index.tsx
@@ -35,15 +35,13 @@ export default function SearchInput({ placeholder }: SearchInputProps) {
 const {
   color,
   typography: { font14Medium },
-  mediaQueries: { desktop, tablet, mobile },
+  mediaQueries: { tablet, mobile },
 } = DESIGN_TOKEN;
 
 const Container = styled.div`
   position: relative;
+  width: 36rem;
 
-  ${desktop} {
-    width: 36rem;
-  }
   ${tablet} {
     width: 32rem;
   }

diff --git a/co-kkiri/src/components/commons/StackPopover/SelectLayout.tsx b/co-kkiri/src/components/commons/StackPopover/SelectLayout.tsx
@@ -87,6 +87,14 @@ const Container = styled.div<ContainerProps>`
     "stackchips stackchips"
     ${({ $isSelectedStacks }) => $isSelectedStacks && `"deletestackchips deletestackchips"`};
 
+  width: 85.6rem;
+  gap: 3rem;
+
+  ${mediaQueries.tablet} {
+    width: 70rem;
+    gap: 3rem;
+  }
+
   ${mediaQueries.mobile} {
     width: 32rem;
     padding: 2rem 3rem;
@@ -95,16 +103,6 @@ const Container = styled.div<ContainerProps>`
     flex-direction: column;
     gap: 2rem;
   }
-
-  ${mediaQueries.tablet} {
-    width: 70rem;
-    gap: 3rem;
-  }
-
-  ${mediaQueries.desktop} {
-    width: 85.6rem;
-    gap: 3rem;
-  }
 `;
 
 const FilterList = styled(DefaultFilterList)`

diff --git a/co-kkiri/src/components/commons/UserPopover.tsx b/co-kkiri/src/components/commons/UserPopover.tsx
@@ -37,10 +37,7 @@ const Container = styled.div<{ $isPopoverOpen: boolean }>`
   opacity: ${({ $isPopoverOpen }) => ($isPopoverOpen ? 1 : 0)};
   transition: opacity 0.2s ease-in-out;
   position: absolute;
-
-  ${mediaQueries.desktop} {
-    right: 4rem;
-  }
+  right: 4rem;
 
   ${mediaQueries.tablet} {
     right: 3rem;

diff --git a/co-kkiri/src/components/domains/detail/Comments/index.tsx b/co-kkiri/src/components/domains/detail/Comments/index.tsx
@@ -27,16 +27,15 @@ export default function Comments({ commentsNum, className }: CommentsProps) {
 
 const {
   color,
-  mediaQueries: { desktop, tablet, mobile },
+  mediaQueries: { tablet, mobile },
 } = DESIGN_TOKEN;
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
-  ${desktop} {
-    width: 50rem;
-  }
+  width: 50rem;
+
   ${tablet} {
     width: 50rem;
   }

diff --git a/co-kkiri/src/components/domains/detail/RecruitmentPost/RecruitmentPost.styled.ts b/co-kkiri/src/components/domains/detail/RecruitmentPost/RecruitmentPost.styled.ts
@@ -11,13 +11,7 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
-  ${mediaQueries.desktop} {
-    width: 50rem;
-  }
-
-  ${mediaQueries.tablet} {
-    width: 50rem;
-  }
+  width: 50rem;
 
   ${mediaQueries.mobile} {
     width: 32rem;

diff --git a/co-kkiri/src/components/domains/home/Banner.tsx b/co-kkiri/src/components/domains/home/Banner.tsx
@@ -30,17 +30,14 @@ export default function Banner({ image, path }: BannerProps) {
 
 const {
   color,
-  mediaQueries: { desktop, tablet, mobile },
+  mediaQueries: { tablet, mobile },
 } = DESIGN_TOKEN;
 
 const Background = styled.figure<{ $isSidebarOpenNarrow: boolean }>`
   background-color: ${color.primary[3]};
   border-radius: 2rem;
-
-  ${desktop} {
-    width: ${({ $isSidebarOpenNarrow }) => ($isSidebarOpenNarrow ? 29 : 36)}rem;
-    height: 24rem;
-  }
+  width: ${({ $isSidebarOpenNarrow }) => ($isSidebarOpenNarrow ? 29 : 36)}rem;
+  height: 24rem;
 
   ${tablet} {
     width: 22.6rem;
@@ -50,7 +47,7 @@ const Background = styled.figure<{ $isSidebarOpenNarrow: boolean }>`
   ${mobile} {
     max-width: 22.6rem;
     width: 100%;
-
+    height: 100%;
     &::after {
       content: "";
       display: block;

diff --git a/co-kkiri/src/components/domains/home/Banners.tsx b/co-kkiri/src/components/domains/home/Banners.tsx
@@ -15,17 +15,14 @@ export default function Banners() {
 }
 
 const {
-  mediaQueries: { desktop, tablet, mobile },
+  mediaQueries: { tablet, mobile },
 } = DESIGN_TOKEN;
 
 const Box = styled.article`
   display: flex;
   justify-content: center;
   width: 100%;
-
-  ${desktop} {
-    gap: 2rem;
-  }
+  gap: 2rem;
 
   ${tablet} {
     gap: 1.5rem;

diff --git a/co-kkiri/src/components/domains/home/Cards.tsx b/co-kkiri/src/components/domains/home/Cards.tsx
@@ -38,23 +38,20 @@ export default function Cards({ cardDataList }: CardsProps) {
 
 const {
   spacing,
-  mediaQueries: { desktop, tablet, mobile },
+  mediaQueries: { tablet, mobile },
 } = DESIGN_TOKEN;
 
 const Wrapper = styled.div<{ $isSidebarOpenNarrow: boolean }>`
   display: flex;
-
-  ${desktop} {
-    gap: 2rem;
-    ${({ $isSidebarOpenNarrow }) =>
-      $isSidebarOpenNarrow
-        ? `  display: grid;
+  gap: 2rem;
+  ${({ $isSidebarOpenNarrow }) =>
+    $isSidebarOpenNarrow
+      ? `  display: grid;
     grid-template:
       1fr 1fr /
       1fr 1fr;
     `
-        : ""}
-  }
+      : ""}
 
   ${tablet} {
     display: grid;
@@ -65,6 +62,7 @@ const Wrapper = styled.div<{ $isSidebarOpenNarrow: boolean }>`
   }
 
   ${mobile} {
+    display: flex;
     gap: 1rem;
     padding: 2rem;
     overflow: scroll;

diff --git a/co-kkiri/src/components/domains/home/HotAndNewSection.tsx b/co-kkiri/src/components/domains/home/HotAndNewSection.tsx
@@ -40,13 +40,11 @@ export default function HotAndNewSection({ category, path, cardDataList }: Cards
 
 const {
   typography: { font20Bold },
-  mediaQueries: { desktop, tablet, mobile },
+  mediaQueries: { tablet, mobile },
 } = DESIGN_TOKEN;
 
 const Box = styled.section`
-  ${desktop} {
-    max-width: 112rem;
-  }
+  max-width: 112rem;
 
   ${tablet} {
     max-width: 70.8rem;

diff --git a/co-kkiri/src/components/domains/studyList/Cards.tsx b/co-kkiri/src/components/domains/studyList/Cards.tsx
@@ -43,10 +43,8 @@ const CardList = styled.div<{ $isSidebarOpenNarrow: boolean }>`
   display: grid;
   flex-wrap: wrap;
   gap: 2rem;
-  ${mediaQueries.desktop} {
-    grid-template-columns: repeat(4, 1fr);
-    ${({ $isSidebarOpenNarrow }) => $isSidebarOpenNarrow && `grid-template-columns: repeat(2, 1fr);`}
-  }
+  grid-template-columns: repeat(4, 1fr);
+  ${({ $isSidebarOpenNarrow }) => $isSidebarOpenNarrow && `grid-template-columns: repeat(2, 1fr);`}
 
   ${mediaQueries.tablet} {
     grid-template-columns: repeat(2, 1fr);
@@ -62,10 +60,8 @@ const NoResultText = styled.p<{ $isSidebarOpenNarrow: boolean }>`
   color: ${color.black};
   text-align: center;
   margin-top: 2rem;
-  ${mediaQueries.desktop} {
-    width: 112rem;
-    ${({ $isSidebarOpenNarrow }) => $isSidebarOpenNarrow && `width: 76.8rem;`}
-  }
+  width: 112rem;
+  ${({ $isSidebarOpenNarrow }) => $isSidebarOpenNarrow && `width: 76.8rem;`}
 
   ${mediaQueries.tablet} {
     width: 76.8rem;

diff --git a/co-kkiri/src/components/modals/AuthModal.tsx b/co-kkiri/src/components/modals/AuthModal.tsx
@@ -45,7 +45,7 @@ const Container = styled.div`
   flex-direction: column;
   width: 100%;
   height: 100%;
-  padding-top: 2.2rem;
+  padding-top: 6rem;
   padding-bottom: 6rem;
 
   & span {

diff --git a/co-kkiri/src/layouts/Navigation.tsx b/co-kkiri/src/layouts/Navigation.tsx
@@ -49,7 +49,9 @@ const SideBarWrapper = styled.div<SideBarWrapperProps>`
 `;
 
 const OutletWrapper = styled.div<SideBarWrapperProps>`
-  ${mediaQueries.desktop} {
-    padding-left: ${(props) => (props.$isOpen ? "21rem" : 0)};
+  padding-left: ${(props) => (props.$isOpen ? "21rem" : 0)};
+
+  ${mediaQueries.tablet} {
+    padding-left: 0;
   }
 `;