feat: v0.1.18 배포

HDesign/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haengdong-design",
-  "version": "0.1.6",
+  "version": "0.1.18",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

HDesign/src/components/Input/Input.style.ts

@@ -20,7 +20,6 @@ export const inputBoxStyle = (theme: Theme, inputType: InputType = 'input') =>
   css({
     display: 'flex',
     justifyContent: 'space-between',
-    marginInline: '1rem',
     padding: '0.75rem 1rem',
     borderRadius: '1rem',
     backgroundColor: inputBoxBackgroundColorByInputType(theme, inputType),

HDesign/src/components/Switch/Switch.tsx

@@ -9,14 +9,14 @@ const Switch = ({value, values, onChange}: SwitchProps) => {
 
   return (
     <div css={switchContainerStyle}>
-      {values.map((value, index) => (
+      {values.map((item, index) => (
         <TextButton
-          key={`${index}_${value}`}
-          textColor={selectedValue === value ? 'black' : 'gray'}
+          key={`${index}_${item}`}
+          textColor={selectedValue === item ? 'black' : 'gray'}
           textSize="bodyBold"
           onClick={() => handleClick(index)}
         >
-          {value}
+          {item}
         </TextButton>
       ))}
     </div>

HDesign/src/components/TopNav/TopNav.tsx

@@ -4,16 +4,22 @@ import TextButton from '../TextButton/TextButton';
 import {topNavNonStyle, topNavStyle} from './TopNav.style';
 import {TopNavProps} from './TopNav.type';
 import Switch from '../Switch/Switch';
+import {useEffect, useState} from 'react';
 
 // TODO: (@todari) navigation으로 인해 storybook 동작하지 않는 오류 해결해야함
 // + 페이지 정하는 것에 따라, navigate 경로 수정해 줘야 함
 const TopNav = ({navType}: TopNavProps) => {
+  const [nav, setNav] = useState('홈');
   const navigate = useNavigate();
-  const currentPath = useLocation().pathname;
+  const location = useLocation();
+
+  useEffect(() => {
+    navigate(PATH_TABLE[nav]);
+  }, [nav]);
 
   const PATH_TABLE: Record<string, string> = {
-    홈: `${currentPath}/`,
-    관리: `${currentPath}/admin`,
+    홈: '/',
+    관리: '/admin',
   };
 
   const TopNavByType = () => {
@@ -30,7 +36,7 @@ const TopNav = ({navType}: TopNavProps) => {
       case 'home':
         return (
           <div css={topNavStyle}>
-            <Switch value="홈" values={['홈', '관리']} onChange={value => navigate(PATH_TABLE[value])}></Switch>{' '}
+            <Switch value={nav} values={['홈', '관리']} onChange={value => setNav(value)}></Switch>{' '}
           </div>
         );
 

HDesign/src/index.tsx

@@ -18,6 +18,7 @@ import Title from '@components/Title/Title';
 import TopNav from '@components/TopNav/TopNav';
 
 import {MainLayout} from '@layouts/MainLayout';
+import {ContentLayout} from '@layouts/ContentLayout';
 
 import {HDesignProvider} from '@theme/HDesignProvider';
 
@@ -41,5 +42,6 @@ export {
   Title,
   TopNav,
   MainLayout,
+  ContentLayout,
   HDesignProvider,
 };

HDesign/src/layouts/ContentLayout.tsx

@@ -0,0 +1,23 @@
+import {PropsWithChildren} from 'react';
+import {Flex} from '..';
+type ContentLayoutBackground = 'white' | 'gray';
+
+interface ContentLayoutProps extends PropsWithChildren {
+  backgroundColor?: ContentLayoutBackground;
+}
+
+export const ContentLayout = ({backgroundColor, children}: ContentLayoutProps) => {
+  return (
+    <Flex
+      backgroundColor={backgroundColor}
+      justifyContent="flexStart"
+      flexDirection="column"
+      padding="0 1rem"
+      gap="1rem"
+      width="100%"
+      height="100%"
+    >
+      {children}
+    </Flex>
+  );
+};