Merge pull request #240 from Team-TIFY/dev

[Deploy]: 카카오 로그인 에러 수정
Team-TIFY · Dec 30, 2023 · f3b7d1e · f3b7d1e
2 parents 4a5fa28 + 1cf819d
commit f3b7d1e
Show file tree

Hide file tree

Showing 14 changed files with 192 additions and 64 deletions.
diff --git a/index.html b/index.html
@@ -3,8 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <!-- <base href="https://tify-client.vercel.app/"> -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+    <base href="https://tify-client.vercel.app/">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
     <title>TIFY</title>
   </head>
   <body>

diff --git a/src/components/WeeklyQuestion/DailyQuestionBox.tsx b/src/components/WeeklyQuestion/DailyQuestionBox.tsx
@@ -70,6 +70,8 @@ const DailyQuestionBox = () => {
 export default DailyQuestionBox
 
 const QuestionBoxContainer = styled.div`
+  flex-shrink: 0;
+  height: 140px;
   @keyframes fadeIn1 {
     from {
       opacity: 0;

diff --git a/src/components/WeeklyQuestion/QuestionImg.tsx b/src/components/WeeklyQuestion/QuestionImg.tsx
@@ -1,30 +1,119 @@
-import {
-  DailyQuestionCategory,
-  DailyQuestionCategoryType,
-} from '@utils/apis/weekly/questionType'
 import styled from '@emotion/styled'
+import { useRecoilState } from 'recoil'
+import { dateState } from '@libs/store/date'
+import { DailyQuestionCategoryType } from '@utils/apis/weekly/questionType'
+
 const QuestionImg = ({
+  className,
   category,
   isToggled = true,
 }: {
-  category: DailyQuestionCategoryType
+  className: string
   isToggled?: boolean
+  category?: DailyQuestionCategoryType
 }) => {
+  const [date, setDate] = useRecoilState(dateState)
+
+  const images = [
+    '/images/questionBox/mon.png',
+    '/images/questionBox/tue.png',
+    '/images/questionBox/wed.png',
+    '/images/questionBox/thur.png',
+    '/images/questionBox/fri.png',
+    '/images/questionBox/sat.png',
+    '/images/questionBox/sun.png',
+  ]
+
+  const getTransform = (index: number) => {
+    const diff = index - date.selectedDate
+    const translateX = diff * 97 // 가로 이동 거리
+    const translateY = diff * (diff > 0 ? -68 : 68) // 세로 이동 거리
+    console.log(translateX)
+    return `translate(${translateX}px, ${translateY}px)`
+  }
+
   return (
     <ImgContainer isToggled={isToggled}>
-      <img src={DailyQuestionCategory[category]} />
+      <div className="image-slider">
+        {images.map((image, index) => (
+          <img
+            alt="ImgBox"
+            key={index}
+            className={`image-box ${
+              index === date.selectedDate
+                ? 'todayImg'
+                : index === date.selectedDate - 1
+                ? 'prevImg'
+                : index === date.selectedDate + 1
+                ? 'nextImg'
+                : index === date.selectedDate + 2
+                ? 'nextReadyImg'
+                : index === date.selectedDate - 2
+                ? 'prevReadyImg'
+                : 'hidden'
+            }`}
+            src={image}
+            style={{
+              transform: getTransform(index),
+              transition:
+                'transform 0.5s ease-in-out, opacity 0.5s ease-in-out',
+              opacity:
+                Math.abs(index - date.selectedDate) === 1
+                  ? 0.05
+                  : Math.abs(index - date.selectedDate) === 0
+                  ? 1
+                  : 0.05,
+            }}
+          />
+        ))}
+      </div>
     </ImgContainer>
   )
 }
 export default QuestionImg
 
 const ImgContainer = styled.div<{ isToggled: boolean }>`
-  display: ${({ isToggled }) => (isToggled ? 'flex' : 'none')};
+  display: flex;
+  flex-shrink: 0;
   justify-content: center;
   width: 100%;
-  height: 242px;
+  height: 230px;
+
+  .image-slider {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
   img {
     height: 100%;
+    position: absolute;
   }
+  .todayImg {
+    top: 40%;
+  }
+  .hidden {
+    display: none;
+  }
+  .prevImg {
+    top: 40%;
+    left: 15%;
+    opacity: 5%;
+  }
+  .nextImg {
+    top: 40%;
+    right: 15%;
+    opacity: 5%;
+  }
+  .prevReadyImg {
+    left: -10%;
+    opacity: 0;
+  }
+  .nextReadyImg {
+    right: -10%;
+    opacity: 0;
+  }
+
   cursor: pointer;
 `
diff --git a/src/components/atoms/GiftFilter/index.tsx b/src/components/atoms/GiftFilter/index.tsx
@@ -1,13 +1,12 @@
 import { useEffect, useState } from 'react'
-import { useRecoilState } from 'recoil'
 import styled from '@emotion/styled'
-
 import { theme } from '@styles/theme'
 import { SelectedPropsType, SelectedTagType } from '@models/favor'
 import { PropsType } from '@models/components/atoms/GiftFilter'
 import { friendState } from '@libs/store/friend'
 import { FilterIcon } from '@assets/icons/FilterIcon'
 import Svg from '../Svg'
+import { useRecoilState, useRecoilValue } from 'recoil'
 
 export const GiftFilter = ({
   selectedProps,

diff --git a/src/components/atoms/RoundButton/index.tsx b/src/components/atoms/RoundButton/index.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import styled from '@emotion/styled'
 
 import { theme } from '@styles/theme'
@@ -38,19 +37,6 @@ export const RoundButton = ({
   onClick,
   ...props
 }: PropsType) => {
-  const [isClicked, setIsClicked] = useState(false)
-
-  const handleClickButton = () => {
-    onClick?.()
-    setIsClicked(true)
-
-    const id = setTimeout(() => {
-      setIsClicked(false)
-    }, 1000) // 1초 후 isClicked를 false로 설정하여 원래 크기로 돌아가도록 합니다.
-
-    return () => clearTimeout(id)
-  }
-
   const renderRoundButton = () => {
     if (variant === 'xlargeRound') {
       return (
@@ -99,8 +85,7 @@ export const RoundButton = ({
         width={width}
         variant={variant}
         fullWidth={fullWidth}
-        isClicked={isClicked}
-        onClick={handleClickButton}
+        onClick={onClick}
         {...props}
       >
         {isLoading ? <Loading /> : renderRoundButton()}
@@ -135,8 +120,6 @@ const StyledButton = styled.button<{
   border-radius: ${({ variant }) =>
     `${ROUND_BUTTON_SHAPE_TYPE[variant].radius}px`};
   color: ${({ variant }) => `${ROUND_TEXT_COLOR_TYPE.default[variant]}`};
-  transform: ${({ variant, isClicked }) =>
-    variant === 'mediumRound' ? (isClicked ? 'scale(1.2)' : 'scale(1)') : ''};
 
   &:hover {
     background-color: ${({ variant }) =>

diff --git a/src/components/funnel/MultiAnswerStep.tsx b/src/components/funnel/MultiAnswerStep.tsx
@@ -14,6 +14,7 @@ import { answerState } from '@libs/store/question'
 import useStepNumberIcon from '@libs/hooks/useStepNumberIcon'
 import useSnackBar from '@libs/hooks/useSnackBar'
 import TextWithLineBreak from '@components/atoms/TextWithLineBreak'
+import { motion } from 'framer-motion'
 
 interface MultiAnswerStepProps {
   isLastAnswer?: boolean
@@ -40,6 +41,7 @@ const MultiAnswerStep = ({
   } = useQuery(['question', category, number], () =>
     FavorApi.GET_FAVOR_QUESTION({ category, number }),
   )
+  const spring = { type: 'spring', stiffness: 300, damping: 15 }
   const { setSnackBar } = useSnackBar()
   const [setStepNumberIcon] = useStepNumberIcon()
   const [step, setStepAnswer] = useRecoilState(answerState)
@@ -157,14 +159,21 @@ const MultiAnswerStep = ({
           })}
         </FlexBox>
       )}
-      <RoundButton
+      <motion.button
         style={{ position: 'absolute', bottom: '32px' }}
-        variant="mediumRound"
-        onClick={submitAnswer}
-        disabled={disabled}
+        initial={{ opacity: 0, y: -5 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 5, transition: { duration: 0.3 } }}
+        whileTap={{ scale: 0.95, transition: { duration: 0.1 } }}
       >
-        {isLastAnswer ? '완료' : '다음'}
-      </RoundButton>
+        <RoundButton
+          variant="mediumRound"
+          onClick={submitAnswer}
+          disabled={disabled}
+        >
+          {isLastAnswer ? '완료' : '다음'}
+        </RoundButton>
+      </motion.button>
     </MultiAnswerStepWrapper>
   )
 }

diff --git a/src/components/funnel/OneAnswerStep.tsx b/src/components/funnel/OneAnswerStep.tsx
@@ -13,6 +13,7 @@ import { Spacing } from '@components/atoms/Spacing'
 import { favorQuestionData } from '@libs/store/dummy'
 import SquareButton from '@components/atoms/SquareButton'
 import TextWithLineBreak from '@components/atoms/TextWithLineBreak'
+import { motion } from 'framer-motion'
 
 interface OneAnswerStepProps {
   isLastAnswer?: boolean
@@ -37,6 +38,7 @@ const OneAnswerStep = ({
   } = useQuery(['question', category, number], () =>
     FavorApi.GET_FAVOR_QUESTION({ category, number }),
   )
+  const spring = { type: 'spring', stiffness: 300, damping: 15 }
   const [answer, setAnswer] = useState<string>('')
   const [step, setStepAnswer] = useRecoilState(answerState)
   const [disabled, setDisabled] = useState<boolean>(true)
@@ -113,14 +115,21 @@ const OneAnswerStep = ({
           })}
         </FlexBox>
       )}
-      <RoundButton
+      <motion.button
+        initial={{ opacity: 0, y: -5 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 5, transition: { duration: 0.3 } }}
+        whileTap={{ scale: 0.95, transition: { duration: 0.1 } }}
         style={{ position: 'absolute', bottom: '32px' }}
-        variant="mediumRound"
-        onClick={submitAnswer}
-        disabled={disabled}
       >
-        {isLastAnswer ? '완료' : '다음'}
-      </RoundButton>
+        <RoundButton
+          variant="mediumRound"
+          onClick={submitAnswer}
+          disabled={disabled}
+        >
+          {isLastAnswer ? '완료' : '다음'}
+        </RoundButton>
+      </motion.button>
     </OneAnswerStepWrapper>
   )
 }

diff --git a/src/components/funnel/SearchAnswerStep.tsx b/src/components/funnel/SearchAnswerStep.tsx
@@ -15,6 +15,7 @@ import { useRecoilState } from 'recoil'
 import { answerState } from '@libs/store/question'
 import { theme } from '@styles/theme'
 import TextWithLineBreak from '@components/atoms/TextWithLineBreak'
+import { motion } from 'framer-motion'
 
 interface SearchAnswerStepProps {
   category: TasteType
@@ -225,14 +226,21 @@ const SearchAnswerStep = ({
       )}
 
       <Spacing height={100} />
-      <RoundButton
+      <motion.button
+        initial={{ opacity: 0, y: -5 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 5, transition: { duration: 0.3 } }}
+        whileTap={{ scale: 0.95, transition: { duration: 0.1 } }}
         style={{ position: 'absolute', bottom: '32px' }}
-        variant="mediumRound"
-        disabled={disabled}
-        onClick={submitAnswer}
       >
-        {isLastAnswer ? '완료' : '다음'}
-      </RoundButton>
+        <RoundButton
+          variant="mediumRound"
+          disabled={disabled}
+          onClick={submitAnswer}
+        >
+          {isLastAnswer ? '완료' : '다음'}
+        </RoundButton>
+      </motion.button>
     </SearchContainer>
   )
 }

diff --git a/src/constants/todayList.ts b/src/constants/todayList.ts
@@ -1,3 +1,16 @@
 import { TodayKeyType } from '@models/components/atoms/DayWeek'
 
 export const todayList: TodayKeyType[] = [0, 1, 2, 3, 4, 5, 6]
+
+type WeeklyBoxType = { [key in TodayKeyType]: string }
+
+export const weeklyList: WeeklyBoxType = {
+  '-1': '',
+  0: '/images/questionBox/mon.png',
+  1: '/images/questionBox/tue.png',
+  2: '/images/questionBox/wed.png',
+  3: '/images/questionBox/thur.png',
+  4: '/images/questionBox/fri.png',
+  5: '/images/questionBox/sat.png',
+  6: '/images/questionBox/sun.png',
+}
diff --git a/src/pages/onboarding/details/HalfSuccess.tsx b/src/pages/onboarding/details/HalfSuccess.tsx
@@ -5,6 +5,8 @@ import styled from '@emotion/styled'
 import { RoundButton } from '@components/atoms/RoundButton'
 import { onboardingPageState, onboardingState } from '@libs/store/onboard'
 import onBoardingImg from '@assets/image/onBoardingImg.png'
+import VideoBox from '@components/WeeklyQuestion/VideoBox'
+import { question } from '@utils/question'
 export function HalfSuccess() {
   const [info, setInfo] = useRecoilState(onboardingState)
   const [goNext, setGoNext] = useRecoilState(onboardingPageState)
@@ -20,9 +22,7 @@ export function HalfSuccess() {
         <Text typo="SCD_Headline_20">나의 취향 프로필을 꾸며볼까요?</Text>
       </TextDiv>
       <Spacing height={100} />
-      <div style={{ textAlign: 'center' }}>
-        <img src={onBoardingImg} alt="온보딩 이미지" width={360} height={242} />
-      </div>
+      <VideoBox category="ME" />
       <BottomSticker>
         <RoundButton
           variant="mediumRound"