[Refac] atoms 컴포넌트 리팩토링

src/components/atoms/AppBar/AppBar.stories.tsx

@@ -1,16 +1,18 @@
-import OnAlert from '@assets/icons/OnAlert'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Routes, Route } from 'react-router-dom'
-import { AppBar, AppBarProps, RightChildrenVariant } from '.'
-import Svg from '../Svg'
+
+import {
+  AppBarPropsType,
+  RightChildrenVariantType,
+} from '@models/components/atoms/AppBar'
+import { AppBar } from '.'
 
 const meta = {
   title: 'Atom/AppBar',
   component: AppBar,
   tags: ['autodocs'],
   argTypes: {
-    onClickOption1: { action: 'clicked' },
-    onClickOption2: { action: 'clicked' },
+    onClickOption: { action: 'clicked' },
   },
   decorators: [
     (Story) => (
@@ -22,7 +24,7 @@ const meta = {
 } satisfies Meta<typeof AppBar>
 
 export default meta
-type Story = StoryObj<AppBarProps<RightChildrenVariant>>
+type Story = StoryObj<AppBarPropsType<RightChildrenVariantType>>
 
 export const BackPushWithTitleWithAlarm: Story = {
   args: {

src/components/atoms/AppBar/index.tsx

@@ -1,50 +1,30 @@
-import { FlexBox } from '@components/layouts/FlexBox'
-import { Text } from '../Text'
+import { useNavigate } from 'react-router-dom'
 import styled from '@emotion/styled'
+
 import { theme } from '@styles/theme'
-import { useNavigate } from 'react-router-dom'
+import {
+  RightChildrenVariantType,
+  AppBarPropsType,
+} from '@models/components/atoms/AppBar'
+import { FlexBox } from '@components/layouts/FlexBox'
+import { Text } from '../Text'
 import Svg from '../Svg'
 import TifyLogo from '@assets/icons/TifyLogo'
 import LeftArrow from '@assets/icons/LeftArrow'
 import Alert from '@assets/icons/Alert'
 import ThreeDots from '@assets/icons/ThreeDots'
 
-export type AppBarType = 'backPushWithTitle' | 'title' | 'backPush' | 'logo'
-
-export type RightChildrenVariant =
-  | 'alarm'
-  | 'dots'
-  | 'none'
-  | 'actionButton'
-  | 'stepNum'
-
-export type AppBarProps<T extends RightChildrenVariant> = {
-  variant: AppBarType
-  label?: string
-  beforeUrl?: string
-  onClickOption1?: () => void
-  onClickOption2?: () => void
-  customHandler?: () => void
-  stepNum?: [number, number]
-  rightChildren: T
-  rightChildrenIcon?: T extends 'alarm' | 'dots' | 'none'
-    ? undefined
-    : React.ReactNode[]
-  isLabelAlignCenter?: boolean
-}
-
 export const AppBar = ({
   variant = 'logo',
   label,
   beforeUrl,
   stepNum = [0, 0],
   rightChildren = 'alarm',
   rightChildrenIcon,
-  onClickOption1,
-  onClickOption2,
+  onClickOption,
   customHandler,
   isLabelAlignCenter = false,
-}: AppBarProps<RightChildrenVariant>) => {
+}: AppBarPropsType<RightChildrenVariantType>) => {
   const navigate = useNavigate()
 
   const onClickBackBar = () => {
@@ -59,27 +39,26 @@ export const AppBar = ({
     navigate('/')
   }
 
-  const handleRightChildren = (rightElement: RightChildrenVariant) => {
+  const handleRightChildren = (rightElement: RightChildrenVariantType) => {
     if (rightElement === 'alarm')
       return (
         <FlexBox>
           <Svg
             children={<Alert />}
-            onClick={onClickOption1}
+            onClick={onClickOption}
             style={{ margin: '0 16px 0 0' }}
           />
         </FlexBox>
       )
     else if (rightElement === 'dots')
-      return <Svg children={<ThreeDots />} onClick={onClickOption1} />
+      return <Svg children={<ThreeDots />} onClick={onClickOption} />
     else if (rightElement === 'actionButton') {
       return (
         <FlexBox gap={16} style={{ cursor: 'pointer' }}>
-          {Array.isArray(rightChildrenIcon)
-            ? rightChildrenIcon?.map((icon, index) => (
-                <div key={index}>{icon}</div>
-              ))
-            : null}
+          {Array.isArray(rightChildrenIcon) &&
+            rightChildrenIcon.map((icon, index) => (
+              <div key={index}>{icon}</div>
+            ))}
         </FlexBox>
       )
     } else if (rightElement === 'stepNum') {
@@ -89,7 +68,7 @@ export const AppBar = ({
             {stepNum[0]}
           </Text>
           <Text typo="Body_14" color="gray_100">
-            /{stepNum[1]}
+            {stepNum[1]}
           </Text>
         </FlexBox>
       )
@@ -98,6 +77,14 @@ export const AppBar = ({
     }
   }
 
+  const labelTextStyle: React.CSSProperties = {
+    position: isLabelAlignCenter ? 'absolute' : undefined,
+    margin: isLabelAlignCenter ? 'auto' : undefined,
+    left: isLabelAlignCenter ? '0' : undefined,
+    right: isLabelAlignCenter ? '0' : undefined,
+    width: 'fit-content',
+  }
+
   return (
     <Wrapper>
       {variant === 'logo' ? (
@@ -107,17 +94,7 @@ export const AppBar = ({
           {(variant === 'backPush' || variant === 'backPushWithTitle') && (
             <Svg children={<LeftArrow />} onClick={onClickBackBar} />
           )}
-          <Text
-            typo="Subhead_16"
-            color="gray_200"
-            style={{
-              position: isLabelAlignCenter ? 'absolute' : undefined,
-              margin: isLabelAlignCenter ? 'auto' : undefined,
-              left: isLabelAlignCenter ? '0' : undefined,
-              right: isLabelAlignCenter ? '0' : undefined,
-              width: 'fit-content',
-            }}
-          >
+          <Text typo="Subhead_16" color="gray_200" style={labelTextStyle}>
             {label}
           </Text>
         </FirstElement>

src/components/atoms/Avatar/index.tsx

@@ -1,90 +1,30 @@
 import styled from '@emotion/styled'
-import { theme } from '@styles/theme'
 import { useCallback, useEffect, useState } from 'react'
-import Pink1 from '/images/pink1.png'
-import Pink2 from '/images/pink2.png'
-import Pink3 from '/images/pink3.png'
-import Pink4 from '/images/pink4.png'
-import Purple1 from '/images/purple1.png'
-import Purple2 from '/images/purple2.png'
-import Purple3 from '/images/purple3.png'
-import Purple4 from '/images/purple4.png'
-import White1 from '/images/white1.png'
-import White2 from '/images/white2.png'
-import White3 from '/images/white3.png'
-import White4 from '/images/white4.png'
 
-const profileVariants = [
-  Pink1,
-  Pink2,
-  Pink3,
-  Pink4,
-  Purple1,
-  Purple2,
-  Purple3,
-  Purple4,
-  White1,
-  White2,
-  White3,
-  White4,
-]
-
-type AvatarVariant = 'xsmall' | 'small' | 'medium'
-
-type VisibleVariant = 'visible' | 'invisible'
-
-type AvatarShapeType = {
-  [key in AvatarVariant]: {
-    size: number
-  }
-}
-
-type VisibleType = {
-  [key in VisibleVariant]: {
-    display: 'none' | 'block'
-    bgColor: string
-  }
-}
+import { profileVariants } from '@constants/profileVariants'
+import {
+  AvatarVariantType,
+  VisibleVariantType,
+} from '@models/components/atoms/Avatar'
+import { AVATAR_SIZE_TYPE, VISIBLE_TYPE } from '@constants/atoms/avatar'
 
 /**
  * @param variant 크기 종류를 나타냄 "xsmall" | "small" | "medium" 중 선택 가능함
  * @param isVisible visible 종류를 나타냄 "visible" | "invisible" 중 하나 선택 가능함
  * @param imageUrl 이미지 URL을 나타냄
  */
-export interface AvatarProps {
-  variant: AvatarVariant
-  isVisible?: VisibleVariant
-  imageUrl?: string
-}
 
-const AVATAR_SIZE_TYPE: AvatarShapeType = {
-  xsmall: {
-    size: 36,
-  },
-  small: {
-    size: 48,
-  },
-  medium: {
-    size: 60,
-  },
-}
-
-const VISIBLE_TYPE: VisibleType = {
-  visible: {
-    bgColor: 'transparent',
-    display: 'none',
-  },
-  invisible: {
-    bgColor: `${theme.palette.dim_500}`,
-    display: 'block',
-  },
+export type AvatarPropsType = {
+  variant: AvatarVariantType
+  isVisible?: VisibleVariantType
+  imageUrl?: string
 }
 
 export const Avatar = ({
   variant,
   isVisible = 'visible',
   imageUrl = '',
-}: AvatarProps) => {
+}: AvatarPropsType) => {
   const [randomImageUrl, setRandomImageUrl] = useState('')
 
   const getRandomProfileImage = useCallback(() => {
@@ -118,15 +58,15 @@ export const Avatar = ({
 const Wrapper = styled.div``
 
 const BaseStyle = styled.div<{
-  variant: AvatarVariant
+  variant: AvatarVariantType
 }>`
   width: ${({ variant }) => `${AVATAR_SIZE_TYPE[variant].size}px`};
   height: ${({ variant }) => `${AVATAR_SIZE_TYPE[variant].size}px`};
 `
 
 const Dimmed = styled(BaseStyle)<{
-  variant: AvatarVariant
-  isVisible: VisibleVariant
+  variant: AvatarVariantType
+  isVisible: VisibleVariantType
 }>`
   display: ${({ isVisible }) => `${VISIBLE_TYPE[isVisible].display}`};
   border-radius: 50%;
@@ -136,7 +76,7 @@ const Dimmed = styled(BaseStyle)<{
 `
 
 const AvatarCircle = styled(BaseStyle)<{
-  variant: AvatarVariant
+  variant: AvatarVariantType
 }>`
   border-radius: 50%;
   display: flex;

src/components/atoms/BottomSheet/BottomSheetBar.tsx

@@ -1,27 +1,28 @@
-import { theme } from '@styles/theme'
 import styled from '@emotion/styled'
 
+import { theme } from '@styles/theme'
+
 const BottomSheetBar = () => {
   return (
-    <BottomSheetBarContainer>
-      <div
-        style={{
-          borderRadius: '40px',
-          width: '32px',
-          height: '4px',
-          backgroundColor: `${theme.palette.gray_500}`,
-          opacity: '40%',
-        }}
-      />
-    </BottomSheetBarContainer>
+    <StyledBottomSheetBarContainer>
+      <StyledBottomSheetBar />
+    </StyledBottomSheetBarContainer>
   )
 }
 
 export default BottomSheetBar
 
-const BottomSheetBarContainer = styled.div`
+const StyledBottomSheetBarContainer = styled.div`
   width: 100%;
   display: flex;
   justify-content: center;
   padding: 0px 0px 16px 0px;
 `
+
+const StyledBottomSheetBar = styled.div`
+  border-radius: 40px;
+  width: 32px;
+  height: 4px;
+  background-color: ${theme.palette.gray_500};
+  opacity: 40%;
+`

src/components/atoms/BottomSheet/index.tsx

@@ -1,22 +1,18 @@
+import { motion } from 'framer-motion'
 import styled from '@emotion/styled'
-import { ReactNode, RefObject } from 'react'
+
 import { theme } from '@styles/theme'
-import { motion } from 'framer-motion'
+import { BottomSheetPropsType } from '@models/components/atoms/BottomSheet'
 
 const BottomSheet = ({
   children,
   isexpanded,
   bottomSheetRef,
   filterType,
-}: {
-  children?: ReactNode
-  isexpanded: boolean
-  bottomSheetRef: RefObject<HTMLDivElement>
-  filterType?: string
-}) => {
+}: BottomSheetPropsType) => {
   return (
     <>
-      <div
+      <BottomSheetBackground
         className="background"
         style={{
           position: 'fixed',
@@ -43,13 +39,15 @@ const BottomSheet = ({
         >
           {children}
         </BottomSheetContainer>
-      </div>
+      </BottomSheetBackground>
     </>
   )
 }
 
 export default BottomSheet
 
+const BottomSheetBackground = styled.div``
+
 const BottomSheetContainer = styled(motion.div)<{
   filterType: string | undefined
 }>`

src/components/atoms/Category/Category.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react'
+
 import { Category } from '.'
 import { Tag } from '../Tag'