Merge pull request #178 from Team-TIFY/dev

[Deploy]: QA 2차 빌드

src/components/atoms/Navigationbar/index.tsx

@@ -1,71 +1,93 @@
 import styled from '@emotion/styled'
 import { theme } from '@styles/theme'
 import { useNavigate } from 'react-router-dom'
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 import { Text } from '../Text'
 import Svg from '../Svg'
 import NavigationMy from '@assets/icons/NavigationMy'
 import NavigationToday from '@assets/icons/NavigationToday'
 import NavigationFriends from '@assets/icons/NavigationFriends'
+import { motion } from 'framer-motion'
+import { useLocation } from 'react-router-dom'
 
 export const Navigationbar = () => {
   const navigate = useNavigate()
-  const [select, setSelect] = useState<number>(1)
-  const navRef = useRef<any>([])
+  const { pathname } = useLocation()
+  const [selected, setSelect] = useState<number>(
+    pathname === '/' ? 1 : pathname === '/profile' ? 2 : 0,
+  )
+  const navigationData = [
+    {
+      title: '프렌즈',
+      url: '/friends',
+      icon: <NavigationFriends />,
+    },
+    {
+      title: '위클리',
+      url: '/',
+      icon: <NavigationToday />,
+    },
+    {
+      title: '마이',
+      url: '/profile',
+      icon: <NavigationMy />,
+    },
+  ]
   const handleClick = (index: number) => {
-    if (select === index) return
-    navRef.current[select].classList.remove('active')
-    navRef.current[select].classList.add('active')
     setSelect(index)
   }
-
   return (
     <NavContainer>
       <Wrapper>
-        <NavBorder select={select} />
-        <NavBtn
-          className={select === 0 ? 'active' : ''}
-          onClick={() => {
-            handleClick(0)
-            navigate('/friends')
-          }}
-          ref={(elem) => (navRef.current[0] = elem)}
-        >
-          <Svg children={<NavigationFriends />} />
-          <Text className="text" typo="Caption_10" color="purple_200">
-            프렌즈
-          </Text>
-        </NavBtn>
-        <NavBtn
-          className={select === 1 ? 'active' : ''}
-          onClick={() => {
-            handleClick(1)
-            navigate('/')
-          }}
-          ref={(elem) => (navRef.current[1] = elem)}
-        >
-          <Svg children={<NavigationToday />} />
-          <Text className="text" typo="Caption_10" color="purple_200">
-            위클리
-          </Text>
-        </NavBtn>
-        <NavBtn
-          className={select === 2 ? 'active' : ''}
-          onClick={() => {
-            handleClick(2)
-            navigate('/profile')
-          }}
-          ref={(elem) => (navRef.current[2] = elem)}
-        >
-          <Svg children={<NavigationMy />} />
-          <Text className="text" typo="Caption_10" color="purple_200">
-            마이
-          </Text>
-        </NavBtn>
+        {navigationData.map((data, index) => {
+          return (
+            <NavBtn
+              key={index}
+              onClick={() => {
+                handleClick(index)
+                navigate(data.url)
+              }}
+            >
+              <NavBorder
+                initial={{ opacity: 0, x: 0 }}
+                animate={{
+                  opacity: index === selected ? 1 : 0,
+                }}
+                transition={{ duration: 0.5 }}
+              />
+              <Svg
+                children={data.icon}
+                style={{
+                  paddingBottom: `${index === selected ? '30px' : '0px'}`,
+                  zIndex: '30',
+                }}
+              />
+              <motion.div
+                initial={{ opacity: 1, x: 0 }}
+                style={{
+                  bottom: '7px',
+                  position: 'absolute',
+                  display: `${selected === index ? 'block' : 'none'}`,
+                }}
+                whileTap={{ scale: 1.2 }}
+                animate={{
+                  opacity: index === selected ? 1 : 0,
+                  x: index === selected ? 0 : selected < index ? -54 : +54,
+                }}
+                transition={{ duration: 0.5 }}
+              >
+                <Text className="text" typo="Caption_10" color="purple_200">
+                  {navigationData[selected].title}
+                </Text>
+              </motion.div>
+            </NavBtn>
+          )
+        })}
       </Wrapper>
     </NavContainer>
   )
 }
+
 const NavContainer = styled.nav`
   position: absolute;
   bottom: 40px;
@@ -89,12 +111,6 @@ const Wrapper = styled.div`
   border: 1px solid ${theme.palette.gray_800};
   filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.12))
     drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.24));
-  .active {
-    padding-bottom: 10px;
-    & > h1 {
-      display: block;
-    }
-  }
 `
 const NavBtn = styled.button`
   cursor: pointer;
@@ -104,22 +120,16 @@ const NavBtn = styled.button`
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  position: relative;
   background-color: transparent;
-  & .text {
-    display: none;
-  }
 `
 
-const NavBorder = styled.div<{ select: number }>`
+const NavBorder = styled(motion.div)`
   position: absolute;
-  width: 45px;
-  height: 35px;
-  border-radius: 50% 50% 0px 0px;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
   background-color: ${theme.palette.background};
   border-top: 1px solid ${theme.palette.gray_800};
+  margin-bottom: 30px;
   filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.24));
-  left: 27px;
-  left: ${({ select }) => 25 + select * 52.5}px;
-  top: -12px;
 `

src/components/atoms/RoundButton/index.tsx

@@ -5,6 +5,7 @@ import { Text } from '../Text'
 import Loading from '@components/atoms/Loading'
 import { FlexBox } from '@components/layouts/FlexBox'
 import Svg from '../Svg'
+import { useState } from 'react'
 import RightChevron from '@assets/icons/RightChevron'
 
 type ButtonVariant =
@@ -141,8 +142,10 @@ export const RoundButton = ({
   fullWidth = false,
   width,
   isLoading,
+  onClick,
   ...props
 }: Props) => {
+  const [isClicked, setIsClicked] = useState(false)
   const renderRoundButton = () => {
     if (variant === 'xlargeRound') {
       return (
@@ -178,31 +181,40 @@ export const RoundButton = ({
       )
     } else {
       return (
-        <>
-          <Text typo={`${BUTTON_SHAPE_TYPE[variant].typo}`} as="span">
-            <FlexBox>{children}</FlexBox>
-          </Text>
-        </>
+        <Text typo={`${BUTTON_SHAPE_TYPE[variant].typo}`} as="span">
+          <FlexBox>{children}</FlexBox>
+        </Text>
       )
     }
   }
 
   return (
-    <StyledButton
-      width={width}
-      variant={variant}
-      fullWidth={fullWidth}
-      {...props}
-    >
-      {isLoading ? <Loading /> : renderRoundButton()}
-    </StyledButton>
+    <>
+      <StyledButton
+        width={width}
+        variant={variant}
+        fullWidth={fullWidth}
+        isClicked={isClicked}
+        onClick={(e) => {
+          if (onClick) onClick()
+          setIsClicked(true)
+          setTimeout(() => {
+            setIsClicked(false)
+          }, 1000) // 1초 후 isClicked를 false로 설정하여 원래 크기로 돌아가도록 합니다.
+        }}
+        {...props}
+      >
+        {isLoading ? <Loading /> : renderRoundButton()}
+      </StyledButton>
+    </>
   )
 }
 
 const StyledButton = styled.button<{
   variant: ButtonVariant
   width?: number
   fullWidth?: boolean
+  isClicked?: boolean
 }>`
   display: flex;
   justify-content: center;
@@ -222,6 +234,8 @@ const StyledButton = styled.button<{
   background-color: ${({ variant }) => `${BUTTON_COLOR_TYPE.default[variant]}`};
   border-radius: ${({ variant }) => `${BUTTON_SHAPE_TYPE[variant].radius}px`};
   color: ${({ variant }) => `${TEXT_COLOR_TYPE.default[variant]}`};
+  transform: ${({ variant, isClicked }) =>
+    variant === 'mediumRound' ? (isClicked ? 'scale(1.2)' : 'scale(1)') : ''};
 
   &:hover {
     background-color: ${({ variant }) => `${BUTTON_COLOR_TYPE.hover[variant]}`};

src/components/atoms/Tag/index.tsx

@@ -81,7 +81,6 @@ interface TagProps {
 }
 
 export const Tag = ({ index, children }: TagProps) => {
-  console.log(index)
   return (
     <Wrapper
       variant={TAG_COLOR_TYPE[index].variant}

src/components/funnel/OneAnswerStep.tsx

@@ -28,8 +28,9 @@ const OneAnswerStep = ({
   )
   const [answer, setAnswer] = useState<string>('')
   const [step, setStepAnswer] = useRecoilState(answerState)
-
+  const [disabled, setDisabled] = useState<boolean>(true)
   const handleAnswerValue = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setDisabled(false)
     setAnswer(e.currentTarget.value)
   }
   const submitAnswer = () => {
@@ -99,6 +100,7 @@ const OneAnswerStep = ({
         style={{ position: 'absolute', bottom: '32px' }}
         variant="mediumRound"
         onClick={submitAnswer}
+        disabled={disabled}
       >
         다음
       </RoundButton>

src/libs/hooks/useAuthMutate.ts

@@ -66,6 +66,7 @@ const useAuthMutate = ({ idToken }: KakaoCodeResponse) => {
       accessToken: loginData.accessToken,
       userProfile: {
         id: loginData.userId,
+        email: data.email,
         userId: data.userId,
         userName: data.userName,
         imageUrl: data.thumbnail,

src/pages/home/Redirect.tsx

@@ -17,8 +17,6 @@ export const Redirect = () => {
 
   const kakaoTokenMutation = useMutation(AuthApi.KAKAO_TOKEN, {
     onSuccess: (data: KakaoCodeResponse) => {
-      console.log(data.idToken)
-      console.log(data.accessToken)
       setToken(data)
     },
   })

src/pages/onboarding/details/selectInfo/SelectFavor.tsx

@@ -51,7 +51,6 @@ export function SelectFavor() {
   const gotoReg = () => {
     if (btnColor) {
       const { favor, ...rest } = info
-      console.log(auth.userProfile)
       OnboardingApi.PUT_ONBOARD_STATUS({
         userId: auth.userProfile.id,
         data: rest,

src/pages/profile/EditUserInfo.tsx

@@ -29,10 +29,6 @@ const EditUserInfo = () => {
 
   const { parseDate, getFormattedDate } = useGetDate()
 
-  useEffect(() => {
-    console.log(info.birth)
-  }, [info.birth])
-
   useEffect(() => {
     if (!profileStateData.isEdit) {
       setUserName(auth.userProfile.userName)

src/pages/searchTaste/BFMOI.tsx

@@ -41,10 +41,6 @@ const BFMOI = () => {
     setStepAnswer({ ...step, categoryName: 'BFMOI' })
   }, [])
 
-  useEffect(() => {
-    console.log(step)
-  }, [step])
-
   return (
     <Funnel>
       <Funnel.Step name="MultiAnswer1">

src/pages/settingPage/WriteForCustomer.tsx

@@ -178,7 +178,6 @@ const WriteForCustomer = () => {
       // 문의접수 api 호출해서 의견 넘기기
     }
   }
-  console.log(showOptions)
 
   useEffect(() => {
     if (isWritten.content && isWritten.title && isWritten.email) {

src/utils/apis/user/UserApi.ts

@@ -27,7 +27,6 @@ export const UserApi = {
     const response = await axiosApi.get(
       `/users/${userId}/tags?smallCategory=${smallCategory}`,
     )
-    console.log(response.data)
     return response.data.data
   },
 

src/utils/apis/user/UserType.ts

@@ -51,7 +51,7 @@ export type SelectedProps = {
   active: boolean
   name: SubCategoryName
   value: SubCategoryType
-  count: number
+  count?: number
 }[]
 
 export interface UserNewTasteCategory {