Accordion 리팩토링

packages/chakra-ui-styled/src/components/disclosure/accordion/Accordion.stories.tsx

@@ -2,64 +2,62 @@ import Accordion from './Accordion';
 import styled from 'styled-components';
 import { ReactNode } from 'react';
 
-export type accordionType = {
-  state: boolean;
-  title?: string;
-  text?: string;
+export type AccordionType = {
+  state?: boolean;
+  title: string;
+  text: string;
+  size: '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
   children?: ReactNode;
 };
 
 export default {
   title: 'chakra-ui-styled/components/disclosure/accordion',
   component: Accordion,
   parameter: { controls: { expanded: true } },
+
   argTypes: {
-    state: {
-      control: {
-        type: 'boolean',
-        title: 'Accordion Button',
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-      }
+    size: { control: { type: 'select', options: ['6xl', '5xl', '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs'] } },
+    state: { control: { type: 'boolean' } },
+    title: { control: { type: 'text' }, description: '제목입니다.' },
+    text: { control: { type: 'text' } },
+    arg: {
+      size: 'md', // 기본 size 값
+      state: true, // 기본 state 값
+      title: '기본 제목', // 기본 title 문구
+      text: '기본 텍스트' // 기본 text 문구
     }
   }
 };
 
-const Container = styled.div``;
-export const AccordionComponent = (args: accordionType) => {
+export const AccordionComponent = (args: AccordionType) => {
   return (
     <>
       <Container>
         <h2>Accordion Demo</h2>
+        <p> 스토리북 설정 </p>
         <Accordion {...args}>
-          <Accordion.Toggle title={args.title ?? 'Accordion Button'}>
-            <Accordion.Panel
-              text={
-                args.text ??
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-              }
-            />
+          <Accordion.Toggle>
+            <Accordion.Panel />
           </Accordion.Toggle>
         </Accordion>
         <br />
         <hr />
         <br />
-        <Accordion state={false}>
-          <Accordion.Toggle title={'Accordion Button'} />
+        <Accordion state={false} title="just Sample state false" size="md" text="text">
+          <Accordion.Toggle />
         </Accordion>
-        <Accordion state={true}>
-          <Accordion.Toggle title={'Accordion Button'} />
+        <Accordion state={true} title="just Sample state true" size="md" text="text">
+          <Accordion.Toggle />
         </Accordion>
-        <Accordion state={true}>
-          <Accordion.Toggle title={'Accordion Button'}>
-            <Accordion.Panel
-              text={
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-              }
-            />
+        <Accordion state={false} title="u can click to expand" size="md" text="text">
+          <Accordion.Toggle>
+            <Accordion.Panel />
           </Accordion.Toggle>
         </Accordion>
       </Container>
     </>
   );
 };
+const Container = styled.div``;
+
 AccordionComponent.storyName = 'Accordion';

packages/chakra-ui-styled/src/components/disclosure/accordion/Accordion.tsx

@@ -1,47 +1,69 @@
-import { accordionType } from './Accordion.stories';
-import { createContext, ReactNode, useContext, useState } from 'react';
+import { AccordionType } from './Accordion.stories';
+import { createContext, ReactNode, useContext, useEffect, useReducer } from 'react';
 import styled, { css } from 'styled-components';
+import { BaseText } from '../../../foundation/typography/Text';
 
-const AccordionContext = createContext({
-  isOpen: false,
-  setIsOpen: (value: boolean) => {}
+type AccordionContextType = AccordionType & {
+  isOpen: boolean;
+  setIsOpen: () => void;
+};
+const AccordionContext = createContext<AccordionContextType>({
+  isOpen: true,
+  setIsOpen: () => {},
+  title: '',
+  text: '',
+  size: 'md'
 });
 
-const Accordion = ({ state, children }: accordionType) => {
-  const [isOpen, setIsOpen] = useState(state);
+const Accordion = ({ state = true, children, size, title, text }: AccordionType) => {
+  // const [isOpen, setIsOpen] = useState(state);
+  // boolean useReducer 이용하여 관리,
+  const [isOpen, setIsOpen] = useReducer((state) => !state, state);
   const providerValue = {
     isOpen,
-    setIsOpen
+    setIsOpen,
+    title,
+    size,
+    text
   };
+
+  // 스토리북 arg 작동을 위한 useEffect
+  useEffect(() => {
+    setIsOpen();
+  }, [state]);
+
   return (
     <AccordionContext.Provider value={providerValue}>
       <Container>{children}</Container>
     </AccordionContext.Provider>
   );
 };
 
-const Toggle = ({ title, children }: { title: string; children?: ReactNode }) => {
-  const { isOpen, setIsOpen } = useContext(AccordionContext);
+const Toggle = ({ children }: { children?: ReactNode }) => {
+  const { isOpen, setIsOpen, title, size = 'md' } = useContext(AccordionContext);
 
   return (
-    <div onClick={() => setIsOpen(!isOpen)}>
+    <div onClick={setIsOpen}>
+      {/*isOpen 통해 svg 방향 바꿈*/}
       <TitleBox isOpen={isOpen}>
         <h5>{title}</h5>
         <div>
+          {/* 아이콘 */}
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z" fill="black" />
           </svg>
         </div>
       </TitleBox>
-      <p>{children}</p>
+
+      <BaseText size={size}>{children}</BaseText>
     </div>
   );
 };
 
-const Panel = ({ text }: { text: string }) => {
-  const { isOpen } = useContext(AccordionContext);
+const Panel = () => {
+  const { isOpen, text, size } = useContext(AccordionContext);
 
-  return isOpen && <TextBox>{text}</TextBox>;
+  return !isOpen && <BaseText size={size}>{text}</BaseText>;
 };
 
 Accordion.Toggle = Toggle;
@@ -54,35 +76,39 @@ const TitleBox = styled.div<{ isOpen: boolean }>`
   justify-content: space-between;
   flex: 1;
   width: inherit;
-  max-width: 345px;
+  //max-width: 345px;
   user-select: none;
   ${({ isOpen }) =>
-    isOpen &&
+    !isOpen &&
     css`
       div {
         transform: rotate(180deg);
       }
     `}
 `;
-const TextBox = styled.div`
-  font-size: 16px;
-  font-weight: 400;
-`;
+// const TextBox = styled.div`
+//   font-size: 16px;
+//   font-weight: 400;
+// `;
 
 const Container = styled.article`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 403px;
-  border-block: 1px solid #d0d0d0;
+  //width: 403px;
+  border-block: ${({ theme }) => theme.spacing.px} solid ${({ theme }) => theme.color.gray[300]};
   padding: 10px 12px;
   h5 {
-    font-size: 16px;
-    font-weight: 400;
+    ${({ theme }) => theme.typo.text.md}
   }
   > div {
     display: flex;
     width: 100%;
     flex-direction: column;
   }
 `;
+
+//
+//
+//
+//TODO : 디자인시스템 css 바꾸기

packages/chakra-ui-styled/src/components/form/button/Button.tsx

@@ -9,6 +9,7 @@ export interface ButtonProps {
   children?: string;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
+  onClick?: () => void;
 }
 const setIcon = (icon: React.ReactNode) => {
   return <figure className="icon">{icon}</figure>;
@@ -21,10 +22,11 @@ const Button = ({
   colorScheme,
   leftIcon,
   rightIcon,
-  children
+  children,
+  onClick
 }: ButtonProps) => {
   return (
-    <StyleButton as={as} size={size} colorScheme={colorScheme} variant={variant}>
+    <StyleButton as={as} size={size} colorScheme={colorScheme} variant={variant} onClick={onClick}>
       {leftIcon && setIcon(leftIcon)}
       {children && (
         <StyleText size={size} weight="semibold">

packages/chakra-ui-styled/src/components/form/closebutton/CloseButton.styled.tsx

@@ -1,10 +1,7 @@
 export const CloseIconStyle = () => {
   return (
     <svg width="currentSize" height="currentSize" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M6 4.66688L10.6669 0L12 1.33312L7.33312 6L12 10.6669L10.6669 12L6 7.33312L1.33312 12L0 10.6669L4.66688 6L0 1.33312L1.33312 0L6 4.66688Z"
-        fill="currentColor"
-      />
+      <path d="M12 10.8891L15.8891 7L17 8.11094L13.1109 12L17 15.8891L15.8891 17L12 13.1109L8.11094 17L7 15.8891L10.8891 12L7 8.11094L8.11094 7L12 10.8891Z" fill="currentColor"/>
     </svg>
   );
 };

packages/chakra-ui-styled/src/components/form/closebutton/CloseButton.tsx

@@ -3,23 +3,22 @@ import styled from 'styled-components';
 export interface CloseButtonProps {
   size: 'sm' | 'md' | 'lg';
   icon?: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
 }
 const ViewBoxSize = { sm: 24, md: 32, lg: 40 };
 const setIcon = (icon: React.ReactNode) => {
   return <figure className="icon">{icon}</figure>;
 };
 const CloseButtonStyle = styled.div<CloseButtonProps>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: ${({ size }) => ViewBoxSize[size]}px;
   height: ${({ size }) => ViewBoxSize[size]}px;
   aspect-ratio: 1;
   cursor: pointer;
 `;
-const CloseButton = ({ size = 'sm', icon }: CloseButtonProps) => {
+const CloseButton = ({ size = 'sm', icon, className, onClick }: CloseButtonProps) => {
   return (
-  <CloseButtonStyle size={size}>
+  <CloseButtonStyle size={size} onClick={onClick} className={className}>
     {icon && setIcon(icon)}
   </CloseButtonStyle>
   )

packages/chakra-ui-styled/src/components/form/pininput/PinInput.style.tsx

@@ -21,30 +21,33 @@ const PinInputSize = {
     width: ${({ theme }) => theme.spacing[12]};
     border-radius: 6px;
     ${({ theme }) => theme.typo.text.lg}
-  `,
+  `
 };
 export const StylePinInput = styled.div.attrs({ autoFocus: true })<PinInputProps>`
   display: flex;
   gap: 6px;
-  & input{
+
+  & input {
     ${({ size }) => PinInputSize[size]}
     ${({ colorScheme, theme }) => css`
       border: 1px solid ${theme.color.gray[200]};
+
       &:focus {
         outline: 2px solid ${theme.color[colorScheme][500]};
       }
+
       &:placeholder-shown {
         color: ${theme.color.gray[400]};
       }
     `}
   }
 `;
 
-export const PinInputField = styled.input.attrs({ type: "text",  maxlength: 1, placeholder: "○" })`
-  text-align: center;
+export const PinInputField = styled.input.attrs({ type: 'text', maxlength: 1, placeholder: '○' })`
   aspect-ratio: 1;
+  text-align: center;
+
   &:focus {
-      outline: 0;
+    outline: 0;
   }
-
- `;
+`;