Merge pull request #310 from /issues/309

Issues/309

.changeset/popular-cameras-draw.md

@@ -0,0 +1,5 @@
+---
+"@musma/react-component": patch
+---
+
+fix: musma theme color픽스

packages/react-component/src/Component.tsx

@@ -1,312 +1,105 @@
-import { ReactNode, useState } from 'react'
+import { useState } from 'react'
 
 import { useTheme } from '@emotion/react'
 import {
   FillAlarmIcon,
   FillBookmarkIcon,
   FillWifiOffIcon,
   FillWritingIcon,
-  OutlineAddBoxIcon,
 } from '@musma/react-icons'
-import { useFormSearch } from '@musma/react-utils'
-import { DateTime } from 'luxon'
-
-import { Box } from 'src/elements'
+import { useTab } from '@musma/react-utils'
 
 import {
   AppShell,
-  Button,
   DatePicker,
   Header,
   HeaderLeftSection,
   HeaderRightSection,
   NavBar,
-  NavBarLink,
-  RadioGroup,
-  Table,
-  TextInput,
+  Tab,
+  TabContainer,
+  TabPanel,
+  Tabs,
   Typography,
 } from './components'
 
 const options = [
   {
-    label: '전체',
-    value: undefined,
-  },
-  {
-    label: '1',
-    value: '1',
-  },
-  {
-    label: '2',
-    value: '2',
-  },
-  {
-    label: '3',
-    value: '3',
-  },
-  {
-    label: '4',
-    value: '4',
-  },
-  {
-    label: '5',
-    value: '5',
-  },
-  {
-    label: '6',
-    value: '6',
-  },
-  {
-    label: '7',
-    value: '7',
-  },
-  {
-    label: '8',
-    value: '8',
+    label: '셀렉트지롱 길지롱 맞지롱 매콤한 셀렉트맛 아이조아 무지개 총 공격이다!',
+    value: '셀렉트지롱 길지롱 맞지롱 매콤한 셀렉트맛 아이조아 무지개 총 공격이다!',
   },
 ]
 
-const columns = [
-  {
-    columnName: 'a',
-    columnLabel: 'A',
-  },
+const menus = [
   {
-    columnName: 'b',
-    columnLabel: 'B',
-    columnChild: [
-      { columnName: 'b-1', columnLabel: 'B-1' },
-      { columnName: 'b-2', columnLabel: 'B-2' },
-      { columnName: 'b-3', columnLabel: 'B-3' },
-    ],
+    label: 'Sample1',
+    icon: () => <FillBookmarkIcon />,
+    to: '/',
   },
   {
-    columnName: 'c',
-    columnLabel: 'C',
-    columnChild: [
-      { columnName: 'c-1', columnLabel: 'C-1' },
-      { columnName: 'c-2', columnLabel: 'C-2' },
+    label: 'Sample2',
+    icon: () => <FillAlarmIcon />,
+    children: [
+      {
+        label: 'Sample2-1',
+        to: '/1',
+      },
+      {
+        label: 'Sample2-2',
+        to: '/2',
+      },
     ],
   },
   {
-    columnName: 'd',
-    columnLabel: 'D',
-  },
-]
-
-const columns2 = [
-  {
-    columnName: 'id',
-    columnLabel: 'ID',
+    label: 'Sample3',
+    icon: () => <FillWifiOffIcon />,
+    to: '/3',
   },
   {
-    columnName: 'a',
-    columnLabel: 'A',
-  },
-  {
-    columnName: 'b',
-    columnLabel: 'B',
-  },
-]
-
-const sampleData = [
-  {
-    id: 'id',
-    a: 'A',
-    'b-1': 'B-1',
-    'b-2': 'B-2',
-    'b-3': 'B-3',
-    'c-1': 'C-1',
-    'c-2': 'C-2',
-    d: 'd',
-  },
-]
-
-const sampleData2: SampleDataType[] = [
-  {
-    id: 'id',
-    a: 123,
-    b: <Button>메롱</Button>,
+    label: 'Sample4',
+    icon: () => <FillWritingIcon />,
+    children: [
+      {
+        label: 'Sample4-1',
+        to: '/4',
+      },
+      {
+        label: 'Sample4-2',
+        to: '/5',
+      },
+    ],
   },
 ]
 
-const data = Array.from({ length: 20 }).map((_, index) => ({
-  id: index + 1,
-  customerType: index < 10 ? '법인사업자' : '일반 고객',
-  customerName: '김대동',
-  store: '영등포 대리점',
-  salesDate: '2021-10-01',
-  registNo: 'XA00-000' + (index + 1),
-  fleetSerialNo: 'XA00-0001' + index,
-}))
-
-interface SampleDataType {
-  id: string
-  a: number
-  b: ReactNode
-}
-
 const Component = () => {
   const theme = useTheme()
-  const [value, setValue] = useState(['1', '2'])
-  const [testValue, setTestValue] = useState<string>('')
-
-  const [radio, setRadio] = useState<boolean>(false)
-
-  const [time, setTime] = useState(DateTime.now().toISO())
-
-  const AAA = useFormSearch({
-    useFormProps: {},
-    fetchAPI() {
-      //
-    },
-  })
-
-  const [currentData, setCurrentData] = useState<SampleDataType>()
-  const [checkedItems, setCheckedItems] = useState<string[]>([])
 
-  const menus = [
-    {
-      label: 'Sample1',
-      icon: () => <FillBookmarkIcon color="white" />,
-      to: '/',
-    },
-    {
-      label: 'Sample2',
-      icon: () => <FillAlarmIcon color="white" />,
-      children: [
-        {
-          label: 'Sample2-1',
-          to: '/',
-        },
-        {
-          label: 'Sample2-2',
-          to: '/2',
-        },
-      ],
-    },
-    {
-      label: 'Sample3',
-      icon: () => <FillWifiOffIcon color="white" />,
-      to: '/3',
-    },
-    {
-      label: 'Sample4',
-      icon: () => <FillWritingIcon color="white" />,
-      children: [
-        {
-          label: 'Sample4-1',
-          to: '/4',
-        },
-        {
-          label: 'Sample4-2',
-          to: '/5',
-        },
-      ],
-    },
-  ]
+  const [tab, setTab] = useTab<'셀렉트맛' | '무지개' | '공격'>({ initTabValue: '셀렉트맛' })
+  const [date, setDate] = useState<string | null>(null)
 
   return (
     <AppShell
       header={
         <Header>
-          <HeaderLeftSection
-            css={{
-              backgroundColor: theme.colors.blue.main,
-            }}
-            logo={<Typography color="white">Musma</Typography>}
-          ></HeaderLeftSection>
+          <HeaderLeftSection logo={<Typography>Musma</Typography>} />
           <HeaderRightSection isFoldingMode>메뉴지롱 메롱메롱</HeaderRightSection>
         </Header>
       }
-      navBar={
-        <NavBar
-          items={menus}
-          css={{
-            backgroundColor: theme.colors.blue.main,
-            '& p, svg': {
-              color: 'white',
-            },
-            '& p': {
-              paddingLeft: 8,
-            },
-            '& .active > div': {
-              backgroundColor: 'hsla(0, 100%, 100%, 0.1)',
-            },
-            '& a div:hover': {
-              backgroundColor: 'hsla(0, 100%, 100%, 0.1)',
-            },
-          }}
-        >
-          {/* NavBar에 items를 넘겼기때문에 아래 children 들은 무시됩니다 */}
-          <NavBarLink to="/" label="meme" />
-          <NavBarLink to="/" label="meme" />
-        </NavBar>
-      }
+      navBar={<NavBar items={menus} />}
     >
-      <Box>
-        <DatePicker
-          value={time}
-          onChange={setTime}
-          minDate={DateTime.utc()}
-          maxDate={DateTime.utc().plus({ day: 5 })}
-        />
-
-        <TextInput
-          type="password"
-          value={testValue}
-          onChange={(e) => {
-            console.log(e)
-            setTestValue(e.target.value)
-          }}
-        />
-
-        <Box
-          css={{
-            padding: theme.spacingUtil(100),
-            display: 'flex',
-            flexDirection: 'column',
-            gap: theme.spacing.md,
-          }}
-        >
-          {/* <MultiSelect options={options} value={value} disabled={false} onChange={setValue} /> */}
-
-          <Table
-            columns={columns2}
-            data={sampleData2}
-            withCheckbox={true}
-            checkedItems={checkedItems}
-            onCheckItemChange={setCheckedItems}
-            onRowClick={(rowData) => rowData && setCurrentData(rowData)}
-            toolbar={{
-              title: '123',
-              totalItems: 0,
-              children: <Button startIcon={OutlineAddBoxIcon}>asd</Button>,
-            }}
-            pagination={{
-              currentPage: 1,
-              onItemsPerPageChange: () => console.log('페이지네이션 최대 갯수 변경'),
-              onPageChange: () => console.log('페이지네이션 변경'),
-              totalPages: 10,
-            }}
-            // css={{ '& div:last-child': { overflow: 'auto' }, '& table': { width: '110%' } }}
-          />
-        </Box>
-
-        <RadioGroup
-          value={radio}
-          onChange={(b) => {
-            setRadio(b)
-          }}
-          options={[
-            {
-              label: 'true',
-              value: true,
-            },
-          ]}
-        />
-      </Box>
+      <TabContainer value={tab} onTabValueChange={setTab} variant={'hat'}>
+        <Tabs css={{ marginBottom: 17 }}>
+          <Tab value={'셀렉트맛'} label={'셀렉트'} />
+          <Tab value={'무지개'} label={'무지개'} />
+          <Tab value={'총공격'} label={'총공격'} />
+        </Tabs>
+
+        <TabPanel value={'셀렉트맛'}>
+          <DatePicker value={date} onChange={(value) => setDate(value)} />
+        </TabPanel>
+        <TabPanel value={'무지개'}>1</TabPanel>
+        <TabPanel value={'총공격'}>1</TabPanel>
+      </TabContainer>
     </AppShell>
   )
 }

packages/react-component/src/components/Chip/Chip.tsx

@@ -121,7 +121,9 @@ export const Chip = ({
       onClick={onClick}
       {...rest}
     >
-      <Typography type={size === 'sm' ? 'caption2' : 'caption1'}>{children}</Typography>
+      <Typography color="currentColor" type={size === 'sm' ? 'caption2' : 'caption1'}>
+        {children}
+      </Typography>
 
       {onDelete && (
         <IconAdornment