style: lint 적용

HDesign/src/components/BillItem/BillItem.style.ts

@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const textStyle = (theme: Theme) =>
   css({
     color: theme.colors.black,

HDesign/src/components/BillItem/BillItem.tsx

@@ -1,12 +1,16 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-import {useTheme} from '@theme/HDesignProvider';
-import {BillItemProps} from './BillItem.type';
-import {textStyle} from './BillItem.style';
+
 import Text from '@components/Text/Text';
+
+import {useTheme} from '@theme/HDesignProvider';
+
 import DragHandleItem from '../DragHandleItem/DragHandleItem';
 import Flex from '../Flex/Flex';
 
+import {BillItemProps} from './BillItem.type';
+import {textStyle} from './BillItem.style';
+
 export const BillItem: React.FC<BillItemProps> = ({
   name = '',
   price = 0,

HDesign/src/components/BottomSheet/BottomSheet.tsx

@@ -2,11 +2,11 @@
 import {createPortal} from 'react-dom';
 
 import {BottomSheetProps} from '@components/BottomSheet/BottomSheet.type';
-import {useBottomSheet} from './useBottomSheet';
 import FixedButton from '@components/FixedButton/FixedButton';
 
 import {useTheme} from '@theme/HDesignProvider';
 
+import {useBottomSheet} from './useBottomSheet';
 import {bottomSheetContainerStyle, dimmedLayerStyle, indicatorStyle} from './BottomSheet.style';
 
 const BottomSheet: React.FC<BottomSheetProps> = ({

HDesign/src/components/BottomSheet/BottomSheet.type.ts

@@ -3,6 +3,7 @@ import {ComponentPropsWithoutRef} from 'react';
 import {ButtonVariants} from '@components/Button/Button.type';
 
 import {Theme} from '@theme/theme.type';
+
 import {FixedButtonProps} from '../FixedButton/FixedButton.type';
 
 export interface BottomSheetStyleProps {

HDesign/src/components/DragHandleItem/DragHandleItem.style.ts

@@ -1,6 +1,7 @@
+import {css} from '@emotion/react';
+
 import {Theme} from '@/theme/theme.type';
 import {ColorKeys} from '@/token/colors';
-import {css} from '@emotion/react';
 
 export const dragHandleItemStyle = (theme: Theme, hasDragHandle: boolean, backgroundColor: ColorKeys) =>
   css({

HDesign/src/components/DragHandleItem/DragHandleItem.tsx

@@ -1,12 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 
+import {StrictPropsWithChildren} from '@/types/strictPropsWithChildren';
+import {COLORS, ColorKeys} from '@/token/colors';
+
 import {useTheme} from '@theme/HDesignProvider';
 
 import IconButton from '../IconButton/IconButton';
-import {StrictPropsWithChildren} from '@/types/strictPropsWithChildren';
+
 import {dragHandleItemStyle, prefixStyle} from './DragHandleItem.style';
-import {COLORS, ColorKeys} from '@/token/colors';
 
 interface DragHandleItemCustomProps {
   hasDragHandle?: boolean;
@@ -15,12 +17,12 @@ interface DragHandleItemCustomProps {
 
 export type DragHandleItemProps = React.ComponentProps<'div'> & DragHandleItemCustomProps;
 
-export const DragHandleItem = ({
+export function DragHandleItem({
   hasDragHandle = false,
   backgroundColor = 'white',
   children,
   ...htmlProps
-}: StrictPropsWithChildren<DragHandleItemProps>) => {
+}: StrictPropsWithChildren<DragHandleItemProps>) {
   const {theme} = useTheme();
 
   // TODO: (@toari) : 사람 수 많을 때 UX writing 처리
@@ -32,5 +34,5 @@ export const DragHandleItem = ({
       </div>
     </div>
   );
-};
+}
 export default DragHandleItem;

HDesign/src/components/ExpenseList/ExpenseList.style.ts

@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const expenseItemStyle = () =>
   css({
     display: 'flex',

HDesign/src/components/ExpenseList/ExpenseList.tsx

@@ -1,14 +1,16 @@
 /** @jsxImportSource @emotion/react */
 
-import {useTheme} from '@theme/HDesignProvider';
 import Text from '@components/Text/Text';
+
 import {Arrow} from '@assets/index';
 
+import {useTheme} from '@theme/HDesignProvider';
+
 import {ExpenseItemProps, ExpenseListProps} from './ExpenseList.type';
 import {expenseItemStyle, expenseListStyle, expenseItemLeftStyle, TextStyle} from './ExpenseList.style';
 
 // TODO: (@soha) 따로 파일 분리할까 고민중.. 여기서만 사용할 것 같긴 한데.. 흠
-const ExpenseItem = ({name, price, ...buttonProps}: ExpenseItemProps) => {
+function ExpenseItem({name, price, ...buttonProps}: ExpenseItemProps) {
   const {theme} = useTheme();
   return (
     <button css={expenseItemStyle} {...buttonProps}>
@@ -21,9 +23,9 @@ const ExpenseItem = ({name, price, ...buttonProps}: ExpenseItemProps) => {
       </div>
     </button>
   );
-};
+}
 
-const ExpenseList = ({expenseList = []}: ExpenseListProps) => {
+function ExpenseList({expenseList = []}: ExpenseListProps) {
   const {theme} = useTheme();
   return (
     <div css={expenseListStyle(theme)}>
@@ -32,6 +34,6 @@ const ExpenseList = ({expenseList = []}: ExpenseListProps) => {
       ))}
     </div>
   );
-};
+}
 
 export default ExpenseList;

HDesign/src/components/Flex/Flex.style.ts

@@ -1,6 +1,8 @@
+import {css} from '@emotion/react';
+
 import {changeCamelCaseToKebabCase} from '@/utils/ return str.replace(/([a-z])([A-Z])/changeCamelCaseToKebabCase';
+
 import {FlexDirectionStrictType, FlexProps} from './Flex.type';
-import {css} from '@emotion/react';
 
 export const flexStyle = ({
   justifyContent = 'flexStart',

HDesign/src/components/Flex/Flex.tsx

@@ -1,13 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import {StrictPropsWithChildren} from '@/types/strictPropsWithChildren';
-import {FlexProps} from './Flex.type';
 import {useTheme} from '@/theme/HDesignProvider';
+
+import {FlexProps} from './Flex.type';
 import {flexStyle} from './Flex.style';
 
 // TODO: (@weadie) 지정된 프롭 말고 다른 프롭도 가져올 수 있게 하자.
-const Flex = ({children, ...props}: StrictPropsWithChildren<FlexProps>) => {
+function Flex({children, ...props}: StrictPropsWithChildren<FlexProps>) {
   const {theme} = useTheme();
   return <div css={flexStyle({theme, ...props})}>{children}</div>;
-};
+}
 
 export default Flex;

HDesign/src/components/IconButton/IconButton.tsx

@@ -2,7 +2,6 @@
 import {forwardRef} from 'react';
 
 import {IconButtonProps} from '@components/IconButton/IconButton.type';
-
 import {InputDelete, Plus, Buljusa} from '@/assets';
 
 const ICON = {

HDesign/src/components/InOutItem/InOutItem.style.ts

@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const inOutItemStyle = (theme: Theme) =>
   css({
     display: 'flex',

HDesign/src/components/InOutItem/InOutItem.tsx

@@ -1,12 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 
+import Text from '@components/Text/Text';
+
 import {useTheme} from '@theme/HDesignProvider';
 
+import DragHandleItem from '../DragHandleItem/DragHandleItem';
+
 import {InOutItemProps, InOutType} from './InOutItem.type';
 import {textStyle} from './InOutItem.style';
-import Text from '@components/Text/Text';
-import DragHandleItem from '../DragHandleItem/DragHandleItem';
 
 const IN_OUT_TEXT: Record<InOutType, string> = {
   IN: '들어옴',

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

@@ -1,6 +1,7 @@
 import {css} from '@emotion/react';
 
 import {Theme} from '@theme/theme.type';
+
 import {InputType} from './Input.type';
 
 const inputBoxBackgroundColorByInputType = (theme: Theme, inputType: InputType = 'input') => {

HDesign/src/components/Search/Search.stories.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import React from 'react';
+
 import Search from '@components/Search/Search';
 
 const meta = {

HDesign/src/components/Search/Search.style.ts

@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const searchStyle = css({
   position: 'relative',
 

HDesign/src/components/Search/Search.tsx

@@ -1,11 +1,13 @@
 /** @jsxImportSource @emotion/react */
+import Flex from '@components/Flex/Flex';
+
+import {useTheme} from '@theme/HDesignProvider';
+
 import Input from '../Input/Input';
 import {InputProps} from '../Input/Input.type';
-import {searchStyle, searchTermsStyle} from './Search.style';
+
+import {searchStyle, searchTermsStyle, searchTermStyle} from './Search.style';
 import useSearch from './useSearch';
-import {searchTermStyle} from './Search.style';
-import {useTheme} from '@theme/HDesignProvider';
-import Flex from '@components/Flex/Flex';
 
 export interface SearchProps extends InputProps {
   searchTerms: string[];

HDesign/src/components/StepItem/StepItem.style.ts

@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const stepItemStyle = (theme: Theme) =>
   css({
     display: 'flex',

HDesign/src/components/StepItem/StepItem.tsx

@@ -1,12 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import {useTheme} from '@/theme/HDesignProvider';
-import {StepItemCustomProps} from './StepItem.type';
-import {nameStyle, personCountStyle, stepItemStyle, totalAmountStyle, totalTitleStyle} from './StepItem.style';
+
 import Text from '../Text/Text';
 import BillItem from '../BillItem/BillItem';
 import {BillItemCustomProps} from '../BillItem/BillItem.type';
 import Flex from '../Flex/Flex';
 
+import {nameStyle, personCountStyle, stepItemStyle, totalAmountStyle, totalTitleStyle} from './StepItem.style';
+import {StepItemCustomProps} from './StepItem.type';
+
 export const StepItem: React.FC<StepItemCustomProps> = ({
   name = '',
   personCount = 0,

HDesign/src/components/Switch/Switch.tsx

@@ -1,9 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import TextButton from '../TextButton/TextButton';
+
 import {switchContainerStyle} from './Switch.style';
 import {SwitchProps} from './Switch.type';
 
-const Switch = ({value, values, onChange}: SwitchProps) => {
+function Switch({value, values, onChange}: SwitchProps) {
   return (
     <div css={switchContainerStyle}>
       {values.map((item, index) => (
@@ -18,6 +19,6 @@ const Switch = ({value, values, onChange}: SwitchProps) => {
       ))}
     </div>
   );
-};
+}
 
 export default Switch;

HDesign/src/components/Tabs/Tabs.stories.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import React from 'react';
+
 import Tabs from '@/components/Tabs/Tabs';
+
 import Tab from './Tab';
 
 const meta = {

HDesign/src/components/Tabs/Tabs.style.ts

@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const tabListStyle = (theme: Theme) =>
   css({
     position: 'relative',

HDesign/src/components/Tabs/Tabs.tsx

@@ -3,11 +3,13 @@ import React, {useState} from 'react';
 import {css} from '@emotion/react';
 
 import {useTheme} from '@theme/HDesignProvider';
-import {tabListStyle, indicatorStyle, tabItemStyle, tabTextStyle} from './Tabs.style';
-import {TabsProps} from './Tab.type';
+
 import Text from '../Text/Text';
 import Flex from '../Flex/Flex';
 
+import {tabListStyle, indicatorStyle, tabItemStyle, tabTextStyle} from './Tabs.style';
+import {TabsProps} from './Tab.type';
+
 const Tabs: React.FC<TabsProps> = ({children, tabsContainerStyle}) => {
   const {theme} = useTheme();
   const [activeTabIndex, setActiveTabIndex] = useState(0);

HDesign/src/components/TextButton/TextButton.style.ts

@@ -1,6 +1,8 @@
+import {css} from '@emotion/react';
+
 import {Theme} from '@/theme/theme.type';
+
 import {TextColor} from './TextButton.type';
-import {css} from '@emotion/react';
 
 interface TextButtonStyleProps {
   textColor: TextColor;

HDesign/src/components/TextButton/TextButton.tsx

@@ -1,8 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import {forwardRef} from 'react';
-import {TextButtonProps} from './TextButton.type';
-import Text from '../Text/Text';
+
 import {useTheme} from '@/theme/HDesignProvider';
+
+import Text from '../Text/Text';
+
+import {TextButtonProps} from './TextButton.type';
 import {textButtonStyle} from './TextButton.style';
 
 export const TextButton: React.FC<TextButtonProps> = forwardRef<HTMLButtonElement, TextButtonProps>(function Button(

HDesign/src/components/TopNav/Back.tsx

@@ -1,16 +1,17 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 import {useNavigate} from 'react-router-dom';
+
 import TextButton from '@components/TextButton/TextButton';
 
-const Back = () => {
+function Back() {
   const navigate = useNavigate();
 
   return (
     <TextButton onClick={() => navigate(-1)} textSize="bodyBold" textColor="gray">
       뒤로가기
     </TextButton>
   );
-};
+}
 
 export default Back;