Merge pull request #94 from Qfeed-Dev/feature/#35

[Feat] 홈 QSet 생성 로직 수정
Qfeed-Dev · Sep 30, 2023 · 2f73267 · 2f73267
2 parents 314fe7a + ad35fec
commit 2f73267
Show file tree

Hide file tree

Showing 10 changed files with 146 additions and 56 deletions.
diff --git a/src/app/(padding)/add-question/page.tsx b/src/app/(padding)/add-question/page.tsx
@@ -19,7 +19,7 @@ import Photo from "src/components/common/Photo";
 import usePhotoMutation from "src/hooks/file/usePhotoMutation";
 import ButtonFillXSmall from "src/components/buttons/button-fill-xsmall";
 import { validArray } from "src/hooks/common/useCheckValidation";
-import InputFill from "src/components/inputs/input-fill";
+import InputFill from "src/components/inputs/input-fill-search";
 
 export default function Page() {
     const router = useRouter();

diff --git a/src/app/(padding)/question-friend/page.tsx b/src/app/(padding)/question-friend/page.tsx
@@ -20,7 +20,7 @@ import Loading from "src/components/common/Loading";
 import Flex from "src/components/common/Flex";
 import ButtonFillMid from "src/components/buttons/button-fill-mid";
 import ButtonLineMid from "src/components/buttons/button-line-mid";
-import InputFill from "src/components/inputs/input-fill";
+import InputFill from "src/components/inputs/input-fill-search";
 import { Friend } from "src/models/account";
 import { useAppSelector } from "src/hooks/useReduxHooks";
 import ButtonFillXSmall from "src/components/buttons/button-fill-xsmall";

diff --git a/src/components/inputs/input-fill-default.tsx b/src/components/inputs/input-fill-default.tsx
@@ -0,0 +1,51 @@
+"use client";
+import styled from "styled-components";
+import Flex from "src/components/common/Flex";
+import Text from "../common/Text";
+import { colors } from "styles/theme";
+import Icon from "../Icon/Icon";
+
+export interface InputProps {
+    value: string;
+    placeholder?: string;
+    onChange: any;
+    message?: string;
+    isError?: boolean;
+    readonly?: boolean;
+}
+
+const InputFillDefault = ({ ...props }: InputProps) => {
+    return (
+        <InputWrapper>
+            <Input
+                value={props.value}
+                placeholder={props.placeholder}
+                onChange={props.onChange}
+                readOnly={props.readonly}
+                onFocus={(e) => {
+                    e.preventDefault();
+                }}
+            />
+            <Icon icon="SearchHeart" />
+        </InputWrapper>
+    );
+};
+
+const InputWrapper = styled(Flex)`
+    width: 100%;
+    min-height: 48px;
+    padding: 12px 20px;
+
+    background: ${colors.light_gray3};
+    border-radius: 48px;
+`;
+
+const Input = styled.input`
+    width: 80vw;
+    color: ${colors.light_qwhite};
+
+    transform: scale(0.75);
+    transform-origin: left;
+`;
+
+export default InputFillDefault;
diff --git a/src/components/inputs/input-fill.tsx → src/components/inputs/input-fill-search.tsx b/src/components/inputs/input-fill.tsx → src/components/inputs/input-fill-search.tsx
diff --git a/src/hooks/questions/useQsetCursorQuery.ts b/src/hooks/questions/useQsetCursorQuery.ts
@@ -8,7 +8,11 @@ const useQsetCursorQuery = () => {
         data: questionCursor,
         isLoading,
         refetch
-    } = useQuery<QSetCursor[]>(QSetCursorKeys.all, getQsetCursor);
+    } = useQuery<QSetCursor[]>(QSetCursorKeys.all, getQsetCursor, {
+        onError: (error: any) => {
+            console.log(error);
+        }
+    });
 
     return { questionCursor, isLoading, refetch };
 };

diff --git a/src/hooks/questions/useQsetMutation.ts b/src/hooks/questions/useQsetMutation.ts
@@ -12,7 +12,9 @@ const useQsetMutation = () => {
             queryClient.invalidateQueries(QSetCursorKeys.all);
         },
         onError: (error: any) => {
-            console.log(error);
+            if (error === "AxiosError: Request failed with status code 404") {
+                return 0;
+            }
         }
     });
 };

diff --git a/src/pages-edit/friend/Friend.tsx b/src/pages-edit/friend/Friend.tsx
@@ -8,7 +8,7 @@ import Flex from "src/components/common/Flex";
 import NavigationTop from "src/components/navigations/NavigationTop";
 
 import FriendItem from "./components/FriendItem";
-import InputFill from "src/components/inputs/input-fill";
+import InputFill from "src/components/inputs/input-fill-search";
 import RecommendFriend from "./components/RecommendFriend";
 import Loading from "src/components/common/Loading";
 

diff --git a/src/pages-edit/home/components/MakeOfficial.tsx b/src/pages-edit/home/components/MakeOfficial.tsx
@@ -27,51 +27,84 @@ const MakeOfficial = (props: QuestionProps) => {
     const QSet = useQsetCursorQuery();
     const newQSet = useQsetMutation();
 
+    console.log(QSet);
+
     const [endTime, setEndTime] = useState<number | typeof NaN>(NaN);
-    // const [time, setTime] = useState<Time | undefined>(undefined);
-
-    // const createNewQSet = async () => {
-    //     const qSetCount = QSet.questionCursor?.length;
-    //     if (
-    //         (qSetCount === 1 &&
-    //             QSet.questionCursor &&
-    //             QSet.questionCursor[0].isDone) ||
-    //         !qSetCount
-    //     ) {
-    //         const nQSet = await newQSet.mutateAsync();
-    //         setEndTime(Date.parse(nQSet.questionCursor[0].endAt));
-    //     }
-    // };
-
-    // const getTime = () => {
-    //     const date = new Date();
-    //     const times = new Date(
-    //         endTime + 24 * 60 * 60 * 1000 + 15 * 60 * 60 * 1000 - +date
-    //     );
-
-    //     if (times.getDate() <= 1 || times.getFullYear() < 1970) {
-    //         if (!QSet.isLoading && QSet.questionCursor) {
-    //             const qSetCount = QSet.questionCursor?.length;
-    //             qSetCount < 2 && newQSet.mutate();
-    //             setEndTime(NaN);
-    //             return;
-    //         }
-    //     }
-
-    //     const hours = String(times.getHours()).padStart(2, "0");
-    //     const minutes = String(times.getMinutes()).padStart(2, "0");
-    //     const seconds = String(times.getSeconds()).padStart(2, "0");
-    //     setTime({ hour: hours, min: minutes, sec: seconds });
-    // };
-
-    // useEffect(() => {
-    //     if (!isNaN(endTime)) {
-    //         // const interval = setInterval(getTime, 1000);
-    //         // return () => clearInterval(interval);
-    //     } else {
-    //         if (!QSet.isLoading) createNewQSet();
-    //     }
-    // }, [endTime, QSet]);
+    const [time, setTime] = useState<Time | undefined>(undefined);
+
+    const createNewEndTime = async () => {
+        const qSetCount = QSet.questionCursor?.length;
+        const today = new Date();
+        const nine = new Date(
+            today.getFullYear(),
+            today.getMonth(),
+            today.getDate(),
+            21
+        );
+        const tomorrow = new Date(
+            today.getFullYear(),
+            today.getMonth(),
+            today.getDate(),
+            24
+        );
+
+        // 아예 초기진입
+        if (!qSetCount) {
+            newQSet.mutate();
+            setEndTime(NaN);
+        }
+        // 첫번째 질문 set 끝나고 두번째 질문 set 받기
+        else if (
+            qSetCount === 1 &&
+            QSet.questionCursor &&
+            QSet.questionCursor[0].isDone
+        ) {
+            if (+tomorrow - today.getTime() > 3 * 60 * 60 * 1000) {
+                setEndTime(Date.parse(QSet.questionCursor[0].endAt));
+            } else {
+                setEndTime(+nine);
+            }
+        }
+        // 두번째 질문 set 까지 끝남
+        else if (
+            qSetCount === 2 &&
+            QSet.questionCursor &&
+            QSet.questionCursor[0].isDone
+        ) {
+            setEndTime(+nine);
+        }
+        // 질문 대답하는 중
+    };
+
+    const getTime = () => {
+        const date = new Date();
+        const times = new Date(
+            endTime + 3 * 60 * 60 * 1000 + 15 * 60 * 60 * 1000 - +date
+        );
+
+        if (times.getDate() <= 1 || times.getFullYear() < 1970) {
+            if (!QSet.isLoading && QSet.questionCursor) {
+                const qSetCount = QSet.questionCursor?.length;
+                qSetCount < 2 && newQSet.mutate();
+                setEndTime(NaN);
+                return;
+            }
+        }
+
+        const hours = String(times.getHours()).padStart(2, "0");
+        const minutes = String(times.getMinutes()).padStart(2, "0");
+        const seconds = String(times.getSeconds()).padStart(2, "0");
+        setTime({ hour: hours, min: minutes, sec: seconds });
+    };
+
+    useEffect(() => {
+        if (!isNaN(endTime)) {
+            const interval = setInterval(getTime, 1000);
+            return () => clearInterval(interval);
+        } else {
+            if (!QSet.isLoading) createNewEndTime();
+        }
+    }, [endTime, QSet]);
 
     return QSet.isLoading ? (
         <Loading />
@@ -87,11 +120,11 @@ const MakeOfficial = (props: QuestionProps) => {
                             <Text typo="Caption1r" color="light_qblack">
                                 다음 질문까지
                             </Text>
-                            {/* <Text typo="Headline2b" color="light_qblack">
+                            <Text typo="Headline2b" color="light_qblack">
                                 {time
                                     ? `${time.hour}:${time.min}:${time.sec}`
                                     : "00:00:00"}
-                            </Text> */}
+                            </Text>
                             <ImageWrapper>
                                 <Icon
                                     icon="AngelImage2"

diff --git a/src/pages-edit/home/components/QfeedFrame.tsx b/src/pages-edit/home/components/QfeedFrame.tsx
@@ -24,8 +24,6 @@ const QfeedFrame = ({ idx, colorIdx, feed, detail }: FeedProps) => {
     const writeDay = Date.parse(feed.createdAt);
     const today = new Date();
 
-    console.log(feed);
-
     const getTime = () => {
         const pastTime = Math.round(
             (today.getTime() - writeDay - 9000 * 60 * 60) / (1000 * 60 * 60)
@@ -50,7 +48,7 @@ const QfeedFrame = ({ idx, colorIdx, feed, detail }: FeedProps) => {
     return (
         <QfeedFrameWrapper onClick={handleClickFrame}>
             <QfeedFrameInner
-                imageurl={Boolean(imageurl)}
+                imageurl={imageurl}
                 backgroundcolor={
                     feed.isViewed && !detail
                         ? colors.light_gray2
@@ -103,6 +101,8 @@ const QfeedFrame = ({ idx, colorIdx, feed, detail }: FeedProps) => {
                     imageurl={imageurl}
                     alt="QFeed"
                     fill={true}
+                    placeholder="blur"
+                    blurDataURL="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAQAAADhJE2MAAAAEElEQVR42mMs/c8ABIzYKABcTgXVauTJNQAAAABJRU5ErkJggg=="
                     backgroundcolor={
                         feed.isViewed && !detail
                             ? colors.light_gray2
@@ -127,7 +127,7 @@ const QFeedWrapper = styled.div`
     bottom: 28px;
 `;
 
-const QfeedFrameInner = styled.div<{ imageurl: boolean; backgroundcolor: any }>`
+const QfeedFrameInner = styled.div<{ imageurl: string; backgroundcolor: any }>`
     padding: 28px 20px;
     overflow: hidden;
     text-align: left;

diff --git a/src/pages-edit/mypage/MyFollowingPage.tsx b/src/pages-edit/mypage/MyFollowingPage.tsx
@@ -13,7 +13,7 @@ import { Friend } from "src/models/account";
 import NavigationTopBack from "src/components/navigations/NavigationTopBack";
 import Flex from "src/components/common/Flex";
 import FriendItem from "../friend/components/FriendItem";
-import InputFill from "src/components/inputs/input-fill";
+import InputFill from "src/components/inputs/input-fill-search";
 import Loading from "src/components/common/Loading";
 
 import { enterComponentVariants } from "src/constants/animation";