From 7e0295d559a6ada3fb8550969df607e4cfe5f365 Mon Sep 17 00:00:00 2001
From: hamo-o <yheel369@gmail.com>
Date: Fri, 29 Sep 2023 22:23:41 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20QSet=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/questions/useQsetCursorQuery.ts     |   6 +-
 src/hooks/questions/useQsetMutation.ts        |   4 +-
 .../home/components/MakeOfficial.tsx          | 112 +++++++++++-------
 src/pages-edit/home/components/QfeedFrame.tsx |   6 +-
 4 files changed, 76 insertions(+), 52 deletions(-)

diff --git a/src/hooks/questions/useQsetCursorQuery.ts b/src/hooks/questions/useQsetCursorQuery.ts
index 9ef4ce1..38ba652 100644
--- 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
index 9731c2e..d55b3af 100644
--- 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/home/components/MakeOfficial.tsx b/src/pages-edit/home/components/MakeOfficial.tsx
index 5e9a766..c2899cb 100644
--- a/src/pages-edit/home/components/MakeOfficial.tsx
+++ b/src/pages-edit/home/components/MakeOfficial.tsx
@@ -28,50 +28,70 @@ const MakeOfficial = (props: QuestionProps) => {
     const newQSet = useQsetMutation();
 
     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
+        );
+
+        // 아예 초기진입
+        if (!qSetCount) {
+            newQSet.mutate();
+            setEndTime(NaN);
+        }
+        // 첫번째 질문 셋이 끝나고 두번째 질문 셋 받기
+        else if (
+            qSetCount === 1 &&
+            QSet.questionCursor &&
+            QSet.questionCursor[0].isDone
+        ) {
+            if (24 * 60 * 60 * 1000 - today.getTime() > 3 * 60 * 60 * 1000) {
+                setEndTime(Date.parse(QSet.questionCursor[0].endAt));
+            } else {
+                setEndTime(+nine);
+            }
+        }
+        // 두번째 질문 셋 까지 끝남
+        else {
+            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 +107,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
index a09194f..4af4cfb 100644
--- 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
@@ -127,7 +125,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;

From 698926027c2e361d107464708c29db0d5db38a58 Mon Sep 17 00:00:00 2001
From: hamo-o <yheel369@gmail.com>
Date: Fri, 29 Sep 2023 22:40:31 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20next/image=20placeholder=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(padding)/add-question/page.tsx       |  2 +-
 src/app/(padding)/question-friend/page.tsx    |  2 +-
 src/components/inputs/input-fill-default.tsx  | 51 +++++++++++++++++++
 .../{input-fill.tsx => input-fill-search.tsx} |  0
 src/pages-edit/friend/Friend.tsx              |  2 +-
 src/pages-edit/home/components/QfeedFrame.tsx |  2 +
 src/pages-edit/mypage/MyFollowingPage.tsx     |  2 +-
 7 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 src/components/inputs/input-fill-default.tsx
 rename src/components/inputs/{input-fill.tsx => input-fill-search.tsx} (100%)

diff --git a/src/app/(padding)/add-question/page.tsx b/src/app/(padding)/add-question/page.tsx
index d2990b5..61fd7a1 100644
--- 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
index e98062b..81a77d0 100644
--- 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
new file mode 100644
index 0000000..3deca60
--- /dev/null
+++ 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 b/src/components/inputs/input-fill-search.tsx
similarity index 100%
rename from src/components/inputs/input-fill.tsx
rename to src/components/inputs/input-fill-search.tsx
diff --git a/src/pages-edit/friend/Friend.tsx b/src/pages-edit/friend/Friend.tsx
index 9634222..2467b89 100644
--- 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/QfeedFrame.tsx b/src/pages-edit/home/components/QfeedFrame.tsx
index 4af4cfb..ea41441 100644
--- a/src/pages-edit/home/components/QfeedFrame.tsx
+++ b/src/pages-edit/home/components/QfeedFrame.tsx
@@ -101,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
diff --git a/src/pages-edit/mypage/MyFollowingPage.tsx b/src/pages-edit/mypage/MyFollowingPage.tsx
index 67bd79f..78a4c02 100644
--- 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";

From ad35fec583c18e65fda82e8dc3152a6e2a2ee48d Mon Sep 17 00:00:00 2001
From: hamo-o <yheel369@gmail.com>
Date: Sat, 30 Sep 2023 21:22:35 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20QSet=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=91=90=EB=B2=88=EC=A7=B8=20=EC=A7=88?=
 =?UTF-8?q?=EB=AC=B8=EC=84=B8=ED=8A=B8=20=EB=81=9D=EB=82=9C=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0=20=EB=B6=84=EA=B8=B0=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/MakeOfficial.tsx          | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/pages-edit/home/components/MakeOfficial.tsx b/src/pages-edit/home/components/MakeOfficial.tsx
index c2899cb..6e4ee3f 100644
--- a/src/pages-edit/home/components/MakeOfficial.tsx
+++ b/src/pages-edit/home/components/MakeOfficial.tsx
@@ -27,6 +27,8 @@ 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);
 
@@ -39,28 +41,39 @@ const MakeOfficial = (props: QuestionProps) => {
             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 (24 * 60 * 60 * 1000 - today.getTime() > 3 * 60 * 60 * 1000) {
+            if (+tomorrow - today.getTime() > 3 * 60 * 60 * 1000) {
                 setEndTime(Date.parse(QSet.questionCursor[0].endAt));
             } else {
                 setEndTime(+nine);
             }
         }
-        // 두번째 질문 셋 까지 끝남
-        else {
+        // 두번째 질문 set 까지 끝남
+        else if (
+            qSetCount === 2 &&
+            QSet.questionCursor &&
+            QSet.questionCursor[0].isDone
+        ) {
             setEndTime(+nine);
         }
+        // 질문 대답하는 중
     };
 
     const getTime = () => {