Feature/parent home

src/components/common/InputForm.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import ContractInputForm from './InputForm';
 
 export default {
-  title: 'Common/InputForm',
+  title: 'common/InputForm',
   component: ContractInputForm,
 } as ComponentMeta<typeof ContractInputForm>;
 

src/components/common/Receipt.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Receipt from './Receipt';
 
 export default {
-  title: 'Common/Receipt',
+  title: 'common/Receipt',
   component: Receipt,
   argTypes: {
     onSubmit: { action: 'handle click' },

src/components/common/badges/InstructionBadge.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import InstructionBadge from './InstructionBadge';
 
 export default {
-  title: 'Common/뱃지/InstructionBadge',
+  title: 'common/badges/InstructionBadge',
   component: InstructionBadge,
 } as ComponentMeta<typeof InstructionBadge>;
 

src/components/common/badges/InterestBadge.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import InterestBadge from './InterestBadge';
 
 export default {
-  title: 'Common/뱃지/InterestBadge',
+  title: 'common/badges/InterestBadge',
   component: InterestBadge,
 } as ComponentMeta<typeof InterestBadge>;
 

src/components/common/badges/LevelBadge.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import LevelBadge from './LevelBadge';
 
 export default {
-  title: 'Common/뱃지/LevelBadge',
+  title: 'common/badges/LevelBadge',
   component: LevelBadge,
 } as ComponentMeta<typeof LevelBadge>;
 

src/components/common/badges/LevelBadge.tsx

@@ -3,11 +3,11 @@ import styled, { css } from 'styled-components';
 
 interface LevelBadgeProps {
   /** 레벨을 입력합니다. */
-  level: TLevel | null;
+  level: TLevel;
 }
 
 function LevelBadge({ level }: LevelBadgeProps) {
-  function renderText(level: TLevel) {
+  function renderTextByLevel(level: TLevel) {
     if (level === 1) {
       return 'Lv.1 뱅키학';
     } else if (level === 2) {
@@ -22,7 +22,9 @@ function LevelBadge({ level }: LevelBadgeProps) {
   }
   return (
     <Wrapper>
-      <StyledSpan level={level as TLevel}>{renderText(level!)}</StyledSpan>
+      <StyledSpan level={level as TLevel}>
+        {renderTextByLevel(level!)}
+      </StyledSpan>
     </Wrapper>
   );
 }

src/components/common/badges/RiskBadge.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import RiskBadge from './RiskBadge';
 
 export default {
-  title: 'Common/뱃지/RiskBadge',
+  title: 'common/badges/RiskBadge',
   component: RiskBadge,
 } as ComponentMeta<typeof RiskBadge>;
 

src/components/common/badges/SuggestBadge.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import SuggestBadge from './SuggestBadge';
 
 export default {
-  title: 'Common/뱃지/SuggestBadge',
+  title: 'common/badges/SuggestBadge',
   component: SuggestBadge,
 } as ComponentMeta<typeof SuggestBadge>;
 

src/components/common/bottomSheets/CommonSheet.stories.tsx

@@ -8,7 +8,7 @@ import SelectProfile from './sheetContents/SelectProfile';
 import SheetCompleted from './sheetContents/SheetCompleted';
 
 export default {
-  title: 'Common/바텀 시트/CommonSheet',
+  title: 'common/bottomSheets/CommonSheet',
   component: CommonSheet,
   argTypes: {},
 } as ComponentMeta<typeof CommonSheet>;

src/components/common/bottomSheets/ContractSheet.stories.tsx

@@ -10,7 +10,7 @@ import Signature from './sheetContents/Signature';
 import RangeInput from './sheetContents/RangeInput';
 
 export default {
-  title: 'Common/바텀 시트/ContractSheet',
+  title: 'common/bottomSheets/ContractSheet',
   component: ContractSheet,
   argTypes: {},
 } as ComponentMeta<typeof ContractSheet>;

src/components/common/buttons/Button.stories.tsx

@@ -4,7 +4,7 @@ import Button from './Button';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-  title: 'Common/버튼/Button',
+  title: 'common/buttons/Button',
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: { onClick: { action: 'event' } },

src/components/common/buttons/ButtonSet.stories.tsx

@@ -3,7 +3,7 @@ import Button from './Button';
 import ButtonSet from './ButtonSet';
 
 export default {
-  title: 'Common/버튼 셋/ButtonSet',
+  title: 'common/buttons/ButtonSet',
   component: ButtonSet,
   argTypes: {},
 } as ComponentMeta<typeof ButtonSet>;

src/components/common/buttons/CheckButton.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import CheckButton from './CheckButton';
 
 export default {
-  title: 'Common/버튼/CheckButton',
+  title: 'common/buttons/CheckButton',
   component: CheckButton,
   argTypes: {
     onClick: { action: 'handle click' },

src/components/common/buttons/CloseButton.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import CloseButton from './CloseButton';
 
 export default {
-  title: 'Common/버튼/CloseButton',
+  title: 'common/buttons/CloseButton',
   component: CloseButton,
   argTypes: {
     onClick: { action: 'handle click' },

src/components/common/buttons/RoleButton.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import RoleButton from './RoleButton';
 
 export default {
-  title: 'Common/버튼/RoleButton',
+  title: 'common/buttons/RoleButton',
   component: RoleButton,
   argTypes: {
     onClick: { action: 'handle click' },

src/components/common/buttons/SheetButton.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import SheetButton from './SheetButton';
 
 export default {
-  title: 'Common/버튼/SheetButton',
+  title: 'common/buttons/SheetButton',
   component: SheetButton,
   decorators: [(Story) => <Story />],
 } as ComponentMeta<typeof SheetButton>;

src/components/common/modals/PrimaryModal.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import PrimaryModal from './PrimaryModal';
 
 export default {
-  title: 'Common/모달/PrimaryModal',
+  title: 'common/modals/PrimaryModal',
   component: PrimaryModal,
   argTypes: {
     onSubmit: { action: 'handle click' },

src/components/common/modals/PrimaryModal.tsx

@@ -73,9 +73,9 @@ function PrimaryModal({
           <span className="header">{headerText}</span>
           <span className="body">{bodyText}</span>
         </WhiteBox>
-        <CheckButtonPositioner>
+        <CheckButtonWrapper>
           <CheckButton onClick={handleSubmit} />
-        </CheckButtonPositioner>
+        </CheckButtonWrapper>
       </Content>
     </ReactModal>
   );
@@ -136,7 +136,7 @@ const WhiteBox = styled.div`
   }
 `;
 
-const CheckButtonPositioner = styled.div`
+const CheckButtonWrapper = styled.div`
   margin-top: 16px;
 `;
 

src/components/common/modals/QuinaryModal.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import QuinaryModal from './QuinaryModal';
 
 export default {
-  title: 'Common/모달/QuinaryModal',
+  title: 'common/modals/QuinaryModal',
   component: QuinaryModal,
   argTypes: {
     onSubmit: { action: 'handle click' },

src/components/common/modals/QuinaryModal.tsx

@@ -157,9 +157,9 @@ function QuinaryModal({
           <SignatureWrapper>Signature</SignatureWrapper>
         </Bottom>
         <PerforatedLineBottom fill={theme.palette.greyScale.white} />
-        <CheckButtonPositioner>
+        <CheckButtonWrapper>
           <CheckButton onClick={handleSubmit} />
-        </CheckButtonPositioner>
+        </CheckButtonWrapper>
       </Content>
     </ReactModal>
   );
@@ -450,7 +450,7 @@ const SignatureWrapper = styled.div`
   align-items: center;
 `;
 
-const CheckButtonPositioner = styled.div`
+const CheckButtonWrapper = styled.div`
   margin-top: 16px;
 `;
 

src/components/common/modals/SecondaryModal.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import SecondaryModal from './SecondaryModal';
 
 export default {
-  title: 'Common/모달/SecondaryModal',
+  title: 'common/modals/SecondaryModal',
   component: SecondaryModal,
   argTypes: {
     onSubmit: { action: 'handle click' },

src/components/common/modals/SecondaryModal.tsx

@@ -74,9 +74,9 @@ function SecondaryModal({
           <span className="header">{headerText}</span>
           <div className="body">{bodyText}</div>
         </WhiteBox>
-        <CheckButtonPositioner>
+        <CheckButtonWrapper>
           <CheckButton onClick={handleSubmit} />
-        </CheckButtonPositioner>
+        </CheckButtonWrapper>
       </Content>
     </ReactModal>
   );
@@ -156,6 +156,6 @@ const WhiteBox = styled.div`
   }
 `;
 
-const CheckButtonPositioner = styled.div`
+const CheckButtonWrapper = styled.div`
   margin-top: 16px;
 `;

src/components/common/modals/SenaryModal.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import SenaryModal from './SenaryModal';
 
 export default {
-  title: 'Common/모달/SenaryModal',
+  title: 'common/modals/SenaryModal',
   component: SenaryModal,
   argTypes: {
     onSubmit: { action: 'handle click' },

src/components/common/modals/SenaryModal.tsx

@@ -166,14 +166,14 @@ function SenaryModal({
           <div className="body">{comment}</div>
         </Comment>
         <PerforatedLineBottom fill={theme.palette.greyScale.white} />
-        <CheckButtonPositioner>
+        <CheckButtonWrapper>
           <Button
             onClick={handleSubmit}
             property="default"
             label="삭제하기"
             fixed
           />
-        </CheckButtonPositioner>
+        </CheckButtonWrapper>
       </Content>
     </ReactModal>
   );
@@ -513,7 +513,7 @@ const Comment = styled.div`
   }
 `;
 
-const CheckButtonPositioner = styled.div`
+const CheckButtonWrapper = styled.div`
   margin-top: 16px;
 `;
 

src/components/common/modals/quaternaryModal/QuaternaryModal.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import QuaternaryModal from './QuaternaryModal';
 
 export default {
-  title: 'Common/모달/QuaternaryModal',
+  title: 'common/modals/QuaternaryModal',
   component: QuaternaryModal,
   argTypes: {
     onSubmit: { action: 'handle click' },

src/components/common/modals/quaternaryModal/QuaternaryModal.tsx

@@ -171,7 +171,7 @@ function QuaternaryModal({
           <SignatureWrapper>Signature</SignatureWrapper>
         </Bottom>
         <PerforatedLineBottom fill={theme.palette.greyScale.white} />
-        <ButtonPositioner>
+        <ButtonWrapper>
           {isKid === true ? (
             <CheckButton onClick={handleCheckButtonClick} />
           ) : (
@@ -188,7 +188,7 @@ function QuaternaryModal({
               />
             </DoubleButtonWrapper>
           )}
-        </ButtonPositioner>
+        </ButtonWrapper>
         width: 100%; ;
       </Content>
     </ReactModal>
@@ -484,7 +484,7 @@ const SignatureWrapper = styled.div`
   align-items: center;
 `;
 
-const ButtonPositioner = styled.div`
+const ButtonWrapper = styled.div`
   width: 100%;
   margin-top: 16px;
   display: flex;

src/components/common/modals/tertiaryModal/InstructionCard.tsx

@@ -20,7 +20,7 @@ function InstructionCard({
     <>
       <YellowBox currentCardIdx={currentCardIdx}>{children}</YellowBox>
       <WhiteBox>
-        <div className="text-positioner">
+        <div className="text-wrapper">
           <span className="header">{headerText}</span>
           <p className="body">{bodyText}</p>
         </div>
@@ -60,7 +60,7 @@ const WhiteBox = styled.div`
   justify-content: flex-start;
   align-items: center;
 
-  .text-positioner {
+  .text-wrapper {
     margin-top: 24px;
     gap: 24px;
     padding: 0px;

src/components/common/modals/tertiaryModal/TertiaryModal.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import TertiaryModal from './TertiaryModal';
 
 export default {
-  title: 'Common/모달/TertiaryModal',
+  title: 'common/modals/TertiaryModal',
   component: TertiaryModal,
   argTypes: {
     onSubmit: { action: 'handle click' },

src/components/common/modals/tertiaryModal/TertiaryModal.tsx

@@ -106,9 +106,9 @@ function TertiaryModal({ onSubmit }: TertiaryProps) {
             </InstructionCard>
           </SwiperSlide>
         </StyledSwiper>
-        <CloseButtonPositioner>
+        <CloseButtonWrapper>
           <CloseButton onClick={handleSubmit} />
-        </CloseButtonPositioner>
+        </CloseButtonWrapper>
       </Content>
     </ReactModal>
   );
@@ -199,6 +199,6 @@ const StyledSwiper = styled(Swiper)`
   height: 504px;
 `;
 
-const CloseButtonPositioner = styled.div`
+const CloseButtonWrapper = styled.div`
   margin-top: 16px;
 `;