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

[Feat] Home 개편
Qfeed-Dev · Sep 3, 2023 · df7131d · df7131d
2 parents 508d383 + a5c4465
commit df7131d
Show file tree

Hide file tree

Showing 17 changed files with 131 additions and 154 deletions.
diff --git a/src/app/(padding)/page.tsx b/src/app/(padding)/page.tsx
@@ -0,0 +1 @@
+export { default } from "../../pages-edit/home/Home";
diff --git a/src/app/add-question/page.tsx b/src/app/add-question/page.tsx
@@ -18,7 +18,6 @@ export default function Page() {
     const router = useRouter();
     const time2 = 0;
     const [image, setImage] = useState("");
-    // "https://i.ibb.co/0Z6FNN7/60pt.png"
     const [question, setQuestion] = useState("");
     const [values, setValues] = useState<any>([""]);
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
diff --git a/src/app/question/[id]/page.tsx b/src/app/question/[id]/page.tsx
@@ -76,8 +76,6 @@ export default function Page({ params }: { params: { id: number } }) {
         checkBest();
     }, [questionData]);
 
-    console.log(questionData);
-
     return isLoading ? undefined : (
         <>
             {questionData?.backgroundImage && (

diff --git a/src/components/BottomSheet/children/Friend.tsx b/src/components/BottomSheet/children/Friend.tsx
@@ -35,11 +35,7 @@ const Friend = ({}: Props) => {
                 <Loading />
             ) : (
                 <Menu>
-                    <Image
-                        type="default"
-                        src="https://i.ibb.co/0Z6FNN7/60pt.png"
-                        size={60}
-                    />
+                    <Image type="default" src="" size={60} />
                     <Spacing size={10} />
                     <Text typo="Subtitle2b">{friend.friend?.name}</Text>
                     <Text typo="Caption1r">{friend.friend?.nickname}</Text>

diff --git a/src/components/BottomSheet/children/FriendModal.tsx b/src/components/BottomSheet/children/FriendModal.tsx
@@ -26,11 +26,7 @@ const FriendModal = ({}: Props) => {
                     <Loading />
                 ) : (
                     <>
-                        <Image
-                            type="default"
-                            src="https://i.ibb.co/0Z6FNN7/60pt.png"
-                            size={60}
-                        />
+                        <Image type="default" src="" size={60} />
                         <Spacing size={10} />
                         <Name>{friend?.name}</Name>
                         <QfeedId>{friend?.nickname}</QfeedId>

diff --git a/src/components/GridWrapper/index.tsx b/src/components/GridWrapper/index.tsx
@@ -5,7 +5,7 @@ import Flex from "src/components/common/Flex";
 
 import QfeedFrame from "src/pages-edit/home/components/QfeedFrame";
 import { enterComponentVariants } from "src/constants/animation";
-import { Questions } from "src/models/questions";
+import { QuestionItem, Questions } from "src/models/questions";
 import { useEffect, useState } from "react";
 
 const QuestionGrid = ({
@@ -15,10 +15,12 @@ const QuestionGrid = ({
     questions: Questions;
     detail?: boolean;
 }) => {
-    const [sortedData, setSortedData] = useState(questions.data.reverse());
+    const [sortedData, setSortedData] = useState<QuestionItem[] | undefined>(
+        undefined
+    );
     useEffect(() => {
         setSortedData(questions.data.reverse());
-    }, [questions]);
+    }, []);
 
     return (
         <GridWrapper

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -1,5 +1,6 @@
 "use client";
 import styled from "styled-components";
+import { colors } from "styles/theme";
 import { match } from "ts-pattern";
 
 interface Props {
@@ -11,7 +12,7 @@ interface Props {
 }
 
 const Image = ({ src, type = "default", size, height, grayscale }: Props) => {
-    return (
+    return src ? (
         <ImageWrapper
             src={src}
             width={match(type)
@@ -32,6 +33,8 @@ const Image = ({ src, type = "default", size, height, grayscale }: Props) => {
                 .otherwise(() => "0")}
             style={{ filter: `grayscale(${grayscale}%)` }}
         />
+    ) : (
+        <NonImage />
     );
 };
 
@@ -40,12 +43,19 @@ const ImageWrapper = styled.img<{
     radius: any;
 }>`
     margin: auto;
-
     border-radius: 50%;
 
     aspect-ratio: ${({ ratio }) => ratio};
     border-radius: ${({ radius }) => radius};
     object-fit: cover;
 `;
 
+const NonImage = styled.div`
+    width: 35px;
+    height: 35px;
+    margin: auto;
+    border-radius: 50%;
+    background: ${colors.light_gray2};
+`;
+
 export default Image;
diff --git a/src/hooks/questions/useGetQuestions.ts b/src/hooks/questions/useGetQuestions.ts
@@ -6,10 +6,7 @@ import { Questions } from "src/models/questions";
 export const useGetQuestions = () => {
     const { data, isLoading, error, refetch } = useQuery<Questions>(
         questionKeys.all,
-        async () => {
-            const result = await getQuestions(1, 100);
-            return result;
-        }
+        () => getQuestions(1, 100)
     );
 
     return { data, isLoading, error, refetch };

diff --git a/src/pages-edit/alarm/NewAlarm.tsx b/src/pages-edit/alarm/NewAlarm.tsx
@@ -1,19 +1,15 @@
 import { Text } from "src/components/common/Text";
 import Image from "src/components/Image";
 import Spacing from "src/components/Spacing";
-import styled,{css} from "styled-components";
+import styled, { css } from "styled-components";
 import { colors } from "styles/theme";
 
 export default function NewAlarm() {
     return (
         <>
             <NewAlarmWrapper action={false}>
                 <div style={{ marginRight: 12 }}>
-                    <Image
-                        type="default"
-                        size={40}
-                        src="https://i.ibb.co/0Z6FNN7/60pt.png"
-                    />
+                    <Image type="default" size={40} src="" />
                 </div>
                 <Menu>
                     <Text typo="Subtitle1b" color="light_qwhite">

diff --git a/src/pages-edit/chatting/OpenFriendChat.tsx b/src/pages-edit/chatting/OpenFriendChat.tsx
@@ -39,11 +39,7 @@ export default function Friend({ idx, data }: any) {
                     <Image
                         type="default"
                         size={35}
-                        src={
-                            data?.profileImage
-                                ? data?.profileImage
-                                : "https://i.ibb.co/0Z6FNN7/60pt.png"
-                        }
+                        src={data?.profileImage ? data?.profileImage : ""}
                         grayscale={
                             selectedIdx && idx !== selectedIdx && visible === 1
                                 ? 100

diff --git a/src/pages-edit/home/Home.tsx b/src/pages-edit/home/Home.tsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useInView } from "react-intersection-observer";
 import styled from "styled-components";
+import Flex from "src/components/common/Flex";
 
 import BottomNavigation from "src/components/BottomNavigation";
 import Filter from "./components/Filter";
@@ -57,29 +58,30 @@ export default function Home() {
     return isLoading || user.isLoading ? (
         <></>
     ) : (
-        <>
-            <Spacing size={50} />
+        <Flex direction="column">
             <HomeTitle />
-            <HomeWrapper>
-                {user.user && (
-                    <CheckOfficial
-                        onClick={handleClickPickMe}
-                        id={user.user.id}
-                    />
-                )}
-                <MakeOfficial onClick={handleClickBasicQuestion} />
+            <>
+                <Flex direction="column" gap={16}>
+                    {user.user && (
+                        <CheckOfficial
+                            onClick={handleClickPickMe}
+                            id={user.user.id}
+                        />
+                    )}
+                    <MakeOfficial onClick={handleClickBasicQuestion} />
+                </Flex>
                 <Spacing size={20} />
 
                 {/* <Filter isSort={isSort} setIsSort={setIsSort} /> */}
-                <Spacing size={14} />
+
                 {isLoading ? <></> : data && <QuestionGrid questions={data} />}
                 {isLoading ? (
                     <></>
                 ) : (
                     <div ref={ref} style={{ height: "5px" }}></div>
                 )}
                 <Spacing size={globalValue.bottomSheetHeight + 12} />
-            </HomeWrapper>
+            </>
 
             <PlusButtonWrapper onClick={handleClickPlus}>
                 <PlusButton>
@@ -91,17 +93,10 @@ export default function Home() {
                 </PlusButton>
             </PlusButtonWrapper>
             <BottomNavigation />
-        </>
+        </Flex>
     );
 }
 
-const HomeWrapper = styled.div`
-    height: calc(100% - ${globalValue.bottomSheetHeight});
-    margin: 0 auto;
-    padding: 0 16px;
-    position: relative;
-`;
-
 const PlusButtonWrapper = styled.div`
     width: 100%;
     max-width: 600px;

diff --git a/src/pages-edit/home/components/CheckOfficial.tsx b/src/pages-edit/home/components/CheckOfficial.tsx
@@ -23,29 +23,26 @@ const CheckOfficial = (props: OfficialProp) => {
     return userQ.isLoading || cursor.isLoading ? (
         <></>
     ) : userQ.questions.count ? (
-        <>
-            <Spacing size={16} />
-            <BasicQuestionWrapper
-                onClick={props.onClick}
-                color={colors.light_qwhite}
-            >
-                <BasicQuestionInner>
-                    <Text typo="Headline2b" color="light_qblack">
-                        나를 선택한 큐피드
-                    </Text>
-                    <Text typo="Caption1r" color="light_qblack">
-                        총 {userQ.questions.count}번 선택받았어요!
-                    </Text>
-                    <ImageWrapper>
-                        <Icon
-                            icon="AngelImage"
-                            fill="primary_qgreen"
-                            color="primary_qgreen"
-                        />
-                    </ImageWrapper>
-                </BasicQuestionInner>
-            </BasicQuestionWrapper>
-        </>
+        <BasicQuestionWrapper
+            onClick={props.onClick}
+            color={colors.light_qwhite}
+        >
+            <BasicQuestionInner>
+                <Text typo="Headline2b" color="light_qblack">
+                    나를 선택한 큐피드
+                </Text>
+                <Text typo="Caption1r" color="light_qblack">
+                    총 {userQ.questions.count}번 선택받았어요!
+                </Text>
+                <ImageWrapper>
+                    <Icon
+                        icon="AngelImage"
+                        fill="primary_qgreen"
+                        color="primary_qgreen"
+                    />
+                </ImageWrapper>
+            </BasicQuestionInner>
+        </BasicQuestionWrapper>
     ) : (
         <></>
     );

diff --git a/src/pages-edit/home/components/HomeTitle.tsx b/src/pages-edit/home/components/HomeTitle.tsx
@@ -30,11 +30,7 @@ const HomeTitle = ({}: {}) => {
         <HomeTitleWrapper>
             <Menu>
                 <ImageWrapper>
-                    <Image
-                        type="default"
-                        size={40}
-                        src="https://i.ibb.co/0Z6FNN7/60pt.png"
-                    />
+                    <Image type="default" size={40} src="" />
                 </ImageWrapper>
             </Menu>
             {/* <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
@@ -83,7 +79,9 @@ const ImageWrapper = styled.div`
     display: flex;
 
     border-radius: 50%;
-    background-color: ${colors.light_qwhite};
+    border: 3px solid ${colors.light_qwhite};
+
+    background: ${colors.light_gray2};
 `;
 
 export default HomeTitle;