fix: Select 컴포넌트 브레이크 포인트 프로퍼티 직접 내려주기

sopt-makers · Nov 13, 2023 · fbc0a96 · fbc0a96
1 parent 97650c0
commit fbc0a96
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 16 deletions.
diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 import useOutsideClickListener from '@src/hooks/useOutsideClickListener';
-import { pageBreakPoint } from '@src/lib/constants/project';
-import { LabelKeyType, PageType } from '@src/lib/types/universal';
+import { LabelKeyType } from '@src/lib/types/universal';
 import * as S from './style';
 
 interface SelectProps<T extends LabelKeyType> {
@@ -11,7 +10,7 @@ interface SelectProps<T extends LabelKeyType> {
   selectedValue: T;
   setSelectedValue: (newValue: T) => void;
   labels: Record<T, string>;
-  page: PageType;
+  breakPoint: string;
 }
 
 export default function Select<T extends LabelKeyType>({
@@ -21,7 +20,7 @@ export default function Select<T extends LabelKeyType>({
   baseValue,
   baseLabel,
   labels,
-  page,
+  breakPoint,
 }: SelectProps<T>) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -38,8 +37,6 @@ export default function Select<T extends LabelKeyType>({
   const currentSelectedValue = labels[selectedValue];
   useOutsideClickListener([selectItemWrapperRef, selectTriggerRef], closeSelectItem);
 
-  const breakPoint = pageBreakPoint[page];
-
   return (
     <div>
       <S.SelectTrigger

diff --git a/src/components/common/Select/style.ts b/src/components/common/Select/style.ts
@@ -25,7 +25,7 @@ export const SelectTrigger = styled.button<{
   border: 1px solid;
   border-color: ${({ isSelectionExist }) => (isSelectionExist ? colors.gray400 : colors.gray700)};
 
-  @media (max-width: ${({ breakPoint }) => `${breakPoint}px`}) {
+  @media (max-width: ${({ breakPoint }) => breakPoint}) {
     min-width: 76px;
     padding: 8px 12px;
     border-radius: 99px;
@@ -63,15 +63,15 @@ export const SelectTriggerContent = styled.p<{ isSelectionExist: boolean; breakP
   font-weight: 500;
   white-space: nowrap;
 
-  @media (max-width: ${({ breakPoint }) => `${breakPoint}px`}) {
+  @media (max-width: ${({ breakPoint }) => breakPoint}) {
     font-size: 13px;
   }
 `;
 
 export const SelectItemContent = styled.p<{ isWide: boolean; breakPoint: string }>`
   margin-right: ${({ isWide }) => isWide && '42px'};
 
-  @media (max-width: ${({ breakPoint }) => `${breakPoint}px`}) {
+  @media (max-width: ${({ breakPoint }) => breakPoint}) {
     margin-right: ${({ isWide }) => isWide && '22px'};
     font-size: 13px;
   }
@@ -103,7 +103,7 @@ export const SelectItemWrapper = styled.div<{ isWide: boolean; breakPoint: strin
     }
   }
 
-  @media (max-width: ${({ breakPoint }) => `${breakPoint}px`}) {
+  @media (max-width: ${({ breakPoint }) => breakPoint}) {
     min-width: 76px;
   }
 `;
diff --git a/src/lib/constants/project.ts b/src/lib/constants/project.ts
@@ -38,6 +38,6 @@ export const projectPlatformLabel: Record<ProjectPlatformType, string> = {
 };
 
 export const pageBreakPoint: Record<PageType, string> = {
-  [PageType.BLOG]: '767',
-  [PageType.PROJECT]: '899',
+  [PageType.BLOG]: '767px',
+  [PageType.PROJECT]: '899px',
 };
diff --git a/src/views/BlogPage/components/BlogTab/index.tsx b/src/views/BlogPage/components/BlogTab/index.tsx
@@ -1,5 +1,6 @@
 import { track } from '@amplitude/analytics-browser';
 import Select from '@src/components/common/Select';
+import { pageBreakPoint } from '@src/lib/constants/project';
 import {
   activeGenerationCategoryList,
   activePartCategoryList,
@@ -65,7 +66,7 @@ export default function BlogTab({
             selectedValue={selectedMajorCategory}
             setSelectedValue={setMajorCategory}
             baseValue={activeGenerationCategoryList[0]}
-            page={PageType.BLOG}
+            breakPoint={pageBreakPoint[PageType.BLOG]}
           />
           <Select
             options={activePartCategoryList}
@@ -74,7 +75,7 @@ export default function BlogTab({
             selectedValue={selectedSubCategory}
             setSelectedValue={setSubCategory}
             baseValue={PartCategoryType.ALL}
-            page={PageType.BLOG}
+            breakPoint={pageBreakPoint[PageType.BLOG]}
           />
         </S.SelectContainer>
       </S.Container>

diff --git a/src/views/ProjectPage/ProjectPage.tsx b/src/views/ProjectPage/ProjectPage.tsx
@@ -6,6 +6,7 @@ import useStorage from '@src/hooks/useStorage';
 import {
   activeProjectCategoryList,
   activeProjectPlatformList,
+  pageBreakPoint,
   projectCategoryLabel,
   projectPlatformLabel,
 } from '@src/lib/constants/project';
@@ -50,7 +51,7 @@ function Projects() {
               selectedValue={selectedCategory}
               setSelectedValue={setCategory}
               baseValue={ProjectCategoryType.ALL}
-              page={PageType.PROJECT}
+              breakPoint={pageBreakPoint[PageType.PROJECT]}
             />
             <Select
               options={activeProjectPlatformList}
@@ -59,7 +60,7 @@ function Projects() {
               selectedValue={selectedPlatform}
               setSelectedValue={setPlatform}
               baseValue={ProjectPlatformType.ALL}
-              page={PageType.PROJECT}
+              breakPoint={pageBreakPoint[PageType.PROJECT]}
             />
           </S.FilterWrapper>
           <Suspense fallback={<ProjectListFallback />}>