Merge pull request #236 from Team-TIFY/dev

[Deploy]: 3차 QA 반영 배포
Team-TIFY · Dec 29, 2023 · 4a5fa28 · 4a5fa28
2 parents 26f191e + e01b617
commit 4a5fa28
Show file tree

Hide file tree

Showing 144 changed files with 2,318 additions and 1,636 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <base href="https://tify-client.vercel.app/">
+    <!-- <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>

diff --git a/public/images/giftBox.png b/public/images/giftBox.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
 import Layout from '@components/layouts/Layout'
 import Login from '@pages/home/Login'
 import { KaKaoRedirect } from '@pages/home/Redirect/KaKaoRedirect'
@@ -10,13 +10,38 @@ import WeeklyRouter from '@pages/weekly'
 import FriendsRouter from '@pages/friends'
 import OnboardingRouter from '@pages/onboarding'
 import SettingRouter from '@pages/settingPage'
+import NotFound from '@pages/home/NotFound'
+import CheckTodayDate from '@components/WeeklyQuestion/CheckTodayDate'
+import AppBarTemplate from '@components/layouts/AppBarTemplate'
+import WeeklyMainQuestion from '@pages/weekly/WeeklyMainQuestion'
 
 function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route element={<RequireAuth />}>
-          <Route path="*" element={<WeeklyRouter />} />
+          <Route
+            path="/"
+            element={
+              <Routes>
+                <Route element={<CheckTodayDate />}>
+                  <Route
+                    path="/"
+                    element={
+                      <AppBarTemplate
+                        variant="logo"
+                        rightChildren="alarm"
+                        hasNav={true}
+                      >
+                        <WeeklyMainQuestion />
+                      </AppBarTemplate>
+                    }
+                  />
+                </Route>
+              </Routes>
+            }
+          />
+          <Route path="/weekly/*" element={<WeeklyRouter />} />
           <Route path="/profile/*" element={<ProfileRouter />} />
           <Route path="/friends/*" element={<FriendsRouter />} />
           <Route path="/setting/*" element={<SettingRouter />} />
@@ -27,6 +52,8 @@ function App() {
         </Route>
         <Route path="/kakao/callback" element={<KaKaoRedirect />} />
         <Route path="/apple/callback" element={<AppleRedirect />} />
+        <Route path="/404" element={<NotFound />} />
+        <Route path="*" element={<Navigate to="/404" />} />
       </Route>
     </Routes>
   )

diff --git a/src/components/WeeklyQuestion/Answer/DailyAnswerListContainer.tsx b/src/components/WeeklyQuestion/Answer/DailyAnswerListContainer.tsx
@@ -33,7 +33,7 @@ const DailyAnswerListContainer = ({
     onSuccess: (data: DailyQuestionReport) => {
       if (data.reportSuccess) {
         setSnackBar({
-          comment: '신고가 완료되었어요. 빠르게 확인 후 처리할게요.',
+          comment: '신고가 완료되었어요.\n빠르게 확인 후 처리할게요.',
           type: 'success',
         })
       } else {

diff --git a/src/components/WeeklyQuestion/CheckTodayDate.tsx b/src/components/WeeklyQuestion/CheckTodayDate.tsx
@@ -23,12 +23,7 @@ const CheckTodayDate = () => {
     },
   })
   useEffect(() => {
-    if (localStorage.getItem('date') && localStorage.getItem('date') !== '0') {
-      const dateIdx = parseInt(localStorage.getItem('date')!, 10)
-      setNewDate(dateIdx)
-    } else {
-      getTodayDate()
-    }
+    getTodayDate()
   }, [])
 
   useEffect(() => {

diff --git a/src/components/WeeklyQuestion/DailyQuestionBox.tsx b/src/components/WeeklyQuestion/DailyQuestionBox.tsx
@@ -62,7 +62,6 @@ const DailyQuestionBox = () => {
           {question.content}
         </Text>
         <div className="ImgSpacingBox"></div>
-        {/* <Spacing variant="default" height={64} /> */}
       </FlexBox>
     </QuestionBoxContainer>
   )
@@ -111,9 +110,9 @@ const QuestionBoxContainer = styled.div`
     height: 64px;
     width: 100%;
   }
-  ${media.mobile} {
+  ${media.smallMobile} {
     .ImgSpacingBox {
-      height: 15px;
+      height: 20px;
     }
   }
 `
diff --git a/src/components/WeeklyQuestion/VideoBox.tsx b/src/components/WeeklyQuestion/VideoBox.tsx
@@ -3,6 +3,8 @@ import {
   DailyQuestionCategoryType,
 } from '@utils/apis/weekly/questionType'
 import styled from '@emotion/styled'
+import { media } from '@styles/theme'
+
 const VideoBox = ({
   category,
   isToggled = true,
@@ -11,7 +13,7 @@ const VideoBox = ({
   isToggled?: boolean
 }) => {
   return (
-    <ImgContainer isToggled={isToggled}>
+    <ImgContainer className="ImgContainer" isToggled={isToggled}>
       <video muted autoPlay>
         <source src={DailyQuestionVideoCategory[category]} type="video/mp4" />
       </video>
@@ -29,4 +31,9 @@ const ImgContainer = styled.div<{ isToggled: boolean }>`
     height: 100%;
   }
   cursor: pointer;
+  ${media.smallMobile} {
+    .ImgContainer {
+      height: 150px;
+    }
+  }
 `
diff --git a/src/components/atoms/AppBar/AppBar.stories.tsx b/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: {

diff --git a/src/components/atoms/AppBar/index.tsx b/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>