Merge branch 'dev' into style/businessCardContainer

package.json

@@ -23,8 +23,10 @@
     "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.16.0",
-    "react-spinners": "^0.13.8",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "zustand": "^4.4.4",
+    "zustand-persist": "^0.4.0",
+    "react-spinners": "^0.13.8"
   },
   "devDependencies": {
     "@rushstack/eslint-config": "^3.4.1",

src/components/common/BottomSheet/RandomMatchingSheet.tsx

@@ -3,7 +3,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { MouseEvent, useState } from 'react'
 import { AiOutlineClose } from 'react-icons/ai'
 
-import RandomMatchingJoinButton from '@/components/common/Buttons/IconButton/RandomMatchingJoin'
+import RandomMatchingJoinButton from '@/components/common/Buttons/IconButton/RandomMatchingJoinButton'
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 

src/components/common/Buttons/IconButton/InterestButton.tsx

@@ -5,7 +5,7 @@ import { Divider } from '@/components/common/Divider'
 import { Text, TextWrapper } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-import { IconButtonWrapper, IconWrapper } from '.'
+import { StyleIconButtonWrapper, StyleIconWrapper } from '.'
 
 type InterestButtonProps = {
   nickName: string
@@ -17,15 +17,15 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
   const setButtonType = isDarkMode ? 'interest-dark' : 'interest'
 
   return (
-    <IconButtonWrapper
+    <StyleIconButtonWrapper
       iconButtonType={setButtonType}
       style={{
         display: 'flex',
         justifyContent: 'start',
         alignItems: 'center',
       }}
     >
-      <IconWrapper
+      <StyleIconWrapper
         borderRadius={'12px'}
         backgroundColor={palette.WHITE}
         style={{
@@ -42,7 +42,7 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
             height: 23,
           }}
         />
-      </IconWrapper>
+      </StyleIconWrapper>
       <TextWrapper>
         <Text font={'Body_18'} fontWeight={500} letterSpacing={-2} style={{ marginBottom: 4 }}>
           {`${nickName}의 관심사`}
@@ -61,12 +61,14 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
           {interests.map((interest, index) => (
             <Fragment key={interest}>
               {interest}
-              {index !== interests.length - 1 && <Divider />}
+              {index !== interests.length - 1 && (
+                <Divider width={1} height={12} margin={'0 12px'} isDarkMode={isDarkMode} />
+              )}
             </Fragment>
           ))}
         </Text>
       </TextWrapper>
-    </IconButtonWrapper>
+    </StyleIconButtonWrapper>
   )
 }
 

src/components/common/Buttons/IconButton/KakaoButton.tsx

@@ -4,7 +4,7 @@ import KakaoIcon from '@/assets/icons/KakaoIcon'
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-import { IconWrapper } from '.'
+import { StyleIconWrapper } from '.'
 
 export const ButtonWrapper = styled.button<{
   buttonTheme: 'kakao' | 'naver'
@@ -21,13 +21,13 @@ export const ButtonWrapper = styled.button<{
 
 const KakaoButton = () => (
   <ButtonWrapper buttonTheme={'kakao'}>
-    <IconWrapper
+    <StyleIconWrapper
       style={{
         margin: '4px 38px 4px 20px',
       }}
     >
       <KakaoIcon width={53} height={53} iconWidth={35} iconHeight={35} borderRadius={10} />
-    </IconWrapper>
+    </StyleIconWrapper>
     <Text
       font={'Body_18'}
       fontWeight={600}

src/components/common/Buttons/IconButton/NaverButton.tsx

@@ -2,19 +2,19 @@ import NaverIcon from '@/assets/icons/NaverIcon'
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-import { IconWrapper } from '.'
+import { StyleIconWrapper } from '.'
 import { ButtonWrapper } from './KakaoButton'
 
 const NaverButton = () => {
   return (
     <ButtonWrapper buttonTheme={'naver'}>
-      <IconWrapper
+      <StyleIconWrapper
         style={{
           margin: '4px 53px 4px 20px',
         }}
       >
         <NaverIcon width={53} height={53} iconWidth={20} iconHeight={20} borderRadius={10} />
-      </IconWrapper>
+      </StyleIconWrapper>
       <Text
         font={'Body_18'}
         fontWeight={600}