Merge branch 'dev' into style/modal

coffee-meet · Oct 30, 2023 · 95445d1 · 95445d1
2 parents 01cb321 + cc07575
commit 95445d1
Show file tree

Hide file tree

Showing 17 changed files with 336 additions and 271 deletions.
diff --git a/src/components/common/BottomSheet/RandomMatchingSheet.tsx b/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'
 

diff --git a/src/components/common/BottomSheet/index.tsx b/src/components/common/BottomSheet/index.tsx
diff --git a/src/components/common/Buttons/IconButton/InterestButton.tsx b/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>
   )
 }
 

diff --git a/src/components/common/Buttons/IconButton/KakaoButton.tsx b/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}

diff --git a/src/components/common/Buttons/IconButton/NaverButton.tsx b/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}

diff --git a/src/components/common/Buttons/IconButton/ParticularTopicButton.tsx b/src/components/common/Buttons/IconButton/ParticularTopicButton.tsx
@@ -3,7 +3,7 @@ import { BiChevronRight, BiSolidConversation } from 'react-icons/bi'
 import { Text, TextWrapper } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-import { IconButtonWrapper, IconWrapper } from '.'
+import { StyleIconButtonWrapper, StyleIconWrapper } from '.'
 
 type ParticularTopicButtonProps = {
   isDarkMode: boolean
@@ -16,15 +16,15 @@ const ParticularTopicButton = ({ isDarkMode }: ParticularTopicButtonProps) => {
   const getSecondTextColor = isDarkMode ? palette.GRAY300 : palette.GRAY500
 
   return (
-    <IconButtonWrapper
+    <StyleIconButtonWrapper
       iconButtonType={getButtonType}
       style={{
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
       }}
     >
-      <IconWrapper
+      <StyleIconWrapper
         backgroundColor={getIconBackgroundColor}
         borderRadius={'50%'}
         style={{
@@ -41,7 +41,7 @@ const ParticularTopicButton = ({ isDarkMode }: ParticularTopicButtonProps) => {
             height: 20,
           }}
         />
-      </IconWrapper>
+      </StyleIconWrapper>
       <TextWrapper
         style={{
           flex: 1,
@@ -64,7 +64,7 @@ const ParticularTopicButton = ({ isDarkMode }: ParticularTopicButtonProps) => {
           {'네트워크를 넓혀보세요!'}
         </Text>
       </TextWrapper>
-      <IconWrapper
+      <StyleIconWrapper
         style={{
           margin: '18px 27px 18px 0',
         }}
@@ -76,8 +76,8 @@ const ParticularTopicButton = ({ isDarkMode }: ParticularTopicButtonProps) => {
             height: 30,
           }}
         />
-      </IconWrapper>
-    </IconButtonWrapper>
+      </StyleIconWrapper>
+    </StyleIconButtonWrapper>
   )
 }
 

diff --git a/src/components/common/Buttons/IconButton/RandomMatchingButton.tsx b/src/components/common/Buttons/IconButton/RandomMatchingButton.tsx
@@ -5,7 +5,7 @@ import { Text, TextWrapper } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 import { getTimeDelta } from '@/utils/getTimeStamp'
 
-import { IconButtonWrapper, IconWrapper } from '.'
+import { StyleIconButtonWrapper, StyleIconWrapper } from '.'
 
 type RandomMatchingButtonProps = {
   date: string
@@ -16,15 +16,15 @@ const RandomMatchingButton = ({ date, isDarkMode }: RandomMatchingButtonProps) =
   const setButtonType = isDarkMode ? 'random-matching-dark' : 'random-matching'
 
   return (
-    <IconButtonWrapper
+    <StyleIconButtonWrapper
       iconButtonType={setButtonType}
       style={{
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
       }}
     >
-      <IconWrapper
+      <StyleIconWrapper
         backgroundColor={palette.GRAY100}
         borderRadius={'50%'}
         style={{
@@ -41,7 +41,7 @@ const RandomMatchingButton = ({ date, isDarkMode }: RandomMatchingButtonProps) =
             height: 20,
           }}
         />
-      </IconWrapper>
+      </StyleIconWrapper>
       <TextWrapper
         style={{
           flex: 1,
@@ -64,7 +64,7 @@ const RandomMatchingButton = ({ date, isDarkMode }: RandomMatchingButtonProps) =
           {'마지막 채팅: '} {`${getTimeDelta(date)}`}
         </Text>
       </TextWrapper>
-      <IconWrapper
+      <StyleIconWrapper
         style={{
           margin: '18px 5px 18px 0',
         }}
@@ -75,8 +75,8 @@ const RandomMatchingButton = ({ date, isDarkMode }: RandomMatchingButtonProps) =
             height: 30,
           }}
         />
-      </IconWrapper>
-    </IconButtonWrapper>
+      </StyleIconWrapper>
+    </StyleIconButtonWrapper>
   )
 }