From fbc0a9657c904a3b41fa45fa2958609fc8fc5375 Mon Sep 17 00:00:00 2001
From: solar3070 <>
Date: Mon, 13 Nov 2023 15:29:35 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Select=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B8=8C=EB=A0=88=EC=9D=B4=ED=81=AC=20=ED=8F=AC?=
 =?UTF-8?q?=EC=9D=B8=ED=8A=B8=20=ED=94=84=EB=A1=9C=ED=8D=BC=ED=8B=B0=20?=
 =?UTF-8?q?=EC=A7=81=EC=A0=91=20=EB=82=B4=EB=A0=A4=EC=A3=BC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Select/index.tsx          | 9 +++------
 src/components/common/Select/style.ts           | 8 ++++----
 src/lib/constants/project.ts                    | 4 ++--
 src/views/BlogPage/components/BlogTab/index.tsx | 5 +++--
 src/views/ProjectPage/ProjectPage.tsx           | 5 +++--
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx
index c7498003..e76680f9 100644
--- 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
index 59e4d544..037b3d99 100644
--- 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,7 +63,7 @@ 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;
   }
 `;
@@ -71,7 +71,7 @@ export const SelectTriggerContent = styled.p<{ isSelectionExist: boolean; breakP
 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
index 2e458149..6406a4cd 100644
--- 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
index e616903d..0ccf6137 100644
--- 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
index 09bedbbd..54360352 100644
--- 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 />}>