♻️ refactor: change tabs structure to pass component by props (#71)

waktaplay · Jan 1, 2025 · 40e353b · 40e353b
2 parents 307ffed + 8cd89c9
commit 40e353b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 37 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -49,16 +49,16 @@ const TABS = [
 
 const CHIPS = [
   {
-    index: 0,
-    name: "고정멤버",
+    label: "고정멤버",
+    value: "고정멤버",
   },
   {
-    index: 1,
-    name: "아카데미",
+    label: "아카데미",
+    value: "아카데미",
   },
   {
-    index: 2,
-    name: "이세돌",
+    label: "이세돌",
+    value: "이세돌",
   },
 ]
 
@@ -255,7 +255,30 @@ const App = () => {
                 TABS={TABS}
                 selectedTabIndex={selectedTabIndex}
                 setSelectedTabIndex={setSelectedTabIndex}
-                CHIPS={CHIPS}
+                topButtonComponent={
+                  <Filter.Arrow
+                    options={[
+                      { label: "최신순", value: "newest" },
+                      { label: "오래된순", value: "oldest" },
+                      { label: "조회순", value: "views" },
+                    ]}
+                    onChange={value => alert(`filter 의 options 이 선택되었습니다 "${value}"`)}
+                  />
+                }
+                bottomButtonComponent={
+                  <Button.Fill size="small" onClick={() => alert("Button Click!")}>
+                    Button Fill small gray
+                  </Button.Fill>
+                }
+                chipComponents={CHIPS.map((CHIP, index) => (
+                  <Chip.Normal
+                    key={index}
+                    item={CHIP}
+                    onClick={(value: string) => {
+                      alert(`${value} selected`)
+                    }}
+                  />
+                ))}
               />
             </div>
             {selectedTabIndex === 0 && (

diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
@@ -7,16 +7,20 @@ interface IItem {
   title: string
 }
 
-interface IChip {
-  index: number
-  name: string
-}
-
-const Tabs = ({ TABS, CHIPS, selectedTabIndex, setSelectedTabIndex }: {
+const Tabs = ({
+  TABS,
+  selectedTabIndex,
+  setSelectedTabIndex,
+  topButtonComponent,
+  bottomButtonComponent,
+  chipComponents,
+}: {
   TABS: IItem[]
-  CHIPS: IChip[]
   selectedTabIndex: Number
   setSelectedTabIndex: React.Dispatch<SetStateAction<number>>
+  topButtonComponent?: React.ReactElement // top Button (e.g. filter)
+  bottomButtonComponent?: React.ReactElement // bottom Button(e.g. memberfilter)
+  chipComponents?: React.ReactElement[] // render chips
 }) => {
   return (
     <Container>
@@ -36,21 +40,11 @@ const Tabs = ({ TABS, CHIPS, selectedTabIndex, setSelectedTabIndex }: {
             )
           })}
         </Wrapper>
-        <Wrapper>
-          {/* TODO : IMPORT FILTER COMPONENT */}
-          <TabBtn text="FILTER" />
-        </Wrapper>
+        <Wrapper>{topButtonComponent}</Wrapper>
       </TopWrapper>
       <BottomWrapper>
-        <ChipWrapper>
-          {CHIPS.map(CHIP => {
-            return <FakeChip key={CHIP.index}># {CHIP.name}</FakeChip>
-          })}
-        </ChipWrapper>
-        <Wrapper>
-          {/* TODO : IMPORT MEMBER FILTER COMPONENT */}
-          <TabBtn text="MEMBER FILTER" />
-        </Wrapper>
+        <ChipWrapper>{chipComponents}</ChipWrapper>
+        <Wrapper>{bottomButtonComponent}</Wrapper>
       </BottomWrapper>
     </Container>
   )
@@ -92,15 +86,5 @@ const ChipWrapper = styled.div`
   align-items: center;
   gap: 10px;
 `
-//  TODO : ERASE CHIP CSS
-const FakeChip = styled.span`
-  width: fit-content;
-  height: fit-content;
-  border-radius: 5px;
-  background-color: gray;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: white;
-`
 
 export default Tabs