From f18e4c6331d221562fed291545b16fef445bcaa8 Mon Sep 17 00:00:00 2001 From: seoyoung81 Date: Mon, 10 Jun 2024 20:04:29 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=A4=96=20Refactor(#117):=20type=20?= =?UTF-8?q?=EC=A7=80=EC=A0=95=20=EB=B0=8F=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=A1=9C=EC=A7=81=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/landing/carousel/Carousel.tsx | 23 ++++- .../landing/carousel/RecommendItem.tsx | 92 +++++++++++-------- 2 files changed, 72 insertions(+), 43 deletions(-) diff --git a/src/components/landing/carousel/Carousel.tsx b/src/components/landing/carousel/Carousel.tsx index d7359cd..8ec4495 100644 --- a/src/components/landing/carousel/Carousel.tsx +++ b/src/components/landing/carousel/Carousel.tsx @@ -1,7 +1,6 @@ "use client"; import RecommendItem from "./RecommendItem"; import { useEffect, useState } from "react"; -import { TagProps } from "@component/components/common-components/tag"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; @@ -11,6 +10,17 @@ import { useGetProjectRecommend } from "@component/hooks/useProject"; import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded"; import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded"; +export interface RecommendData { + createdAt: string; + createdBy: string; + field: string; + profileImageUrl: string; + progress: string; + projectId: number; + summary: string; + title: string; +} + const PrevArrow = ({ onClick }: any) => { return ( , prevArrow: , @@ -46,17 +56,21 @@ const settings = { const Carousel = () => { const { data, error, isLoading } = useGetProjectRecommend(); - const [recommendData, setRecommendData] = useState(); + const [recommendData, setRecommendData] = useState(); useEffect(() => { if (data) { - setRecommendData(data.data.data) + setRecommendData(data.data.data); } }, [data]); if (error) { console.log(error); } + if (isLoading) { + console.log('로딩 중~~') + return
로딩중 입니다.
+ } return ( <> @@ -71,7 +85,6 @@ const Carousel = () => { profileImg={item.profileImageUrl} nickname={item.createdBy} createdAt={item.createdAt} - isLoading={isLoading} /> ))} diff --git a/src/components/landing/carousel/RecommendItem.tsx b/src/components/landing/carousel/RecommendItem.tsx index 5b9cab7..a1bd0c6 100644 --- a/src/components/landing/carousel/RecommendItem.tsx +++ b/src/components/landing/carousel/RecommendItem.tsx @@ -1,45 +1,61 @@ import Image from "next/image"; import Tag from "@component/components/common-components/tag/Tag"; import { useRouter } from "next/navigation"; +import { TagProps } from "@component/components/common-components/tag"; -const RecommendItem = ({ - projectId, - fields, - progress, - title, - content, - profileImg, - nickname, - createdAt, - isLoading -}: any) => { - const router = useRouter(); - return ( - <> - {isLoading ? ( -
-
- ) : ( -
{ - router.push(`/project/${projectId}`) - }} - > -
- -
{title}
-
{content}
-
- 임시 프로필 이미지 -
{nickname}
-
{createdAt}
-
-
-
- )} - - ); +interface RecommendItemData { + projectId: number; + fields: TagProps["type"]; + progress: TagProps["status"]; + title: string; + content: string; + profileImg: string; + nickname: string; + createdAt: string; } +const RecommendItem = ({ + projectId, + fields, + progress, + title, + content, + profileImg, + nickname, + createdAt, +}: RecommendItemData) => { + const router = useRouter(); + return ( + <> +
{ + router.push(`/project/${projectId}`); + }} + > +
+ +
{title}
+
{content}
+
+ 임시 프로필 이미지 +
+ {nickname} +
+
+ {createdAt} +
+
+
+
+ + ); +}; + export default RecommendItem; From 0fc360febf74a0d1bc06abbc12f2fc4a856d1cbc Mon Sep 17 00:00:00 2001 From: seoyoung81 Date: Mon, 10 Jun 2024 20:25:30 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20usememo=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/landing/carousel/Carousel.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/landing/carousel/Carousel.tsx b/src/components/landing/carousel/Carousel.tsx index 8ec4495..fdda677 100644 --- a/src/components/landing/carousel/Carousel.tsx +++ b/src/components/landing/carousel/Carousel.tsx @@ -1,6 +1,6 @@ "use client"; import RecommendItem from "./RecommendItem"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useMemo } from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; @@ -65,16 +65,18 @@ const Carousel = () => { }, [data]); if (error) { - console.log(error); + return
오류가 났어요.
} + + const memoizedRecommendData = useMemo(() => recommendData, [recommendData]); + if (isLoading) { - console.log('로딩 중~~') return
로딩중 입니다.
} return ( <> - {recommendData?.map((item: any) => ( + {memoizedRecommendData?.map((item: any) => ( Date: Tue, 11 Jun 2024 03:27:54 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20type=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A1=9C=EB=94=A9=20=EC=A4=91=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=20=EA=B3=A0=EB=A0=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/landing/carousel/Carousel.tsx | 27 +++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/components/landing/carousel/Carousel.tsx b/src/components/landing/carousel/Carousel.tsx index fdda677..efd7c87 100644 --- a/src/components/landing/carousel/Carousel.tsx +++ b/src/components/landing/carousel/Carousel.tsx @@ -1,10 +1,11 @@ "use client"; import RecommendItem from "./RecommendItem"; -import { useEffect, useState, useMemo } from "react"; +import { useEffect, useState } from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import { useGetProjectRecommend } from "@component/hooks/useProject"; +import { TagProps } from "@component/components/common-components/tag"; // 캐러셀 화살표 import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded"; @@ -13,9 +14,9 @@ import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRound export interface RecommendData { createdAt: string; createdBy: string; - field: string; + field: TagProps['type']; profileImageUrl: string; - progress: string; + progress: TagProps['status']; projectId: number; summary: string; title: string; @@ -64,19 +65,21 @@ const Carousel = () => { } }, [data]); - if (error) { - return
오류가 났어요.
- } - - const memoizedRecommendData = useMemo(() => recommendData, [recommendData]); - - if (isLoading) { - return
로딩중 입니다.
+ if (isLoading || error) { + return ( + + {[...Array(3)].map((_, index) => ( +
+
+
+ ))} + + ); } return ( <> - {memoizedRecommendData?.map((item: any) => ( + {recommendData?.map((item: RecommendData) => ( Date: Tue, 11 Jun 2024 05:18:35 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=94=A8=20Fix(#117):=20modified=20main?= =?UTF-8?q?=20image?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 64 ++++++++++++------- .../landing/carousel/LandingTop.tsx | 2 +- 2 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 563c598..49542fa 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,7 +5,6 @@ import LandingMid from "@component/components/landing/carousel/LandingMid"; import ProjectList from "@component/components/landing/project/ProjectList"; import { Suspense, useEffect, useState } from "react"; import SignUpModal from "@component/components/signup/SignUpModal"; -import Image from "next/image"; export default function Home() { const [isOpen, setIsOpen] = useState(false); @@ -17,33 +16,54 @@ export default function Home() { } }, []); + const [windowWidth, setWindowWidth] = useState( + typeof window !== "undefined" ? window.innerWidth : 0 + ); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + if (typeof window !== "undefined") { + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + } + }, []); + return ( // 전체 1440px -
- {/* 랜딩 문구 */} + <>
= 1460 ? "fixed left-[20%] transform-1/2-1/2" : "flex justify-center items-center min-w-[1460px] max-[1920px]"}`} > -
- -
+
+
+ {/* 랜딩 문구 */} +
- {/* 컨테이너 너비 */} -
- {/* 캐러셀 */} - - - {/* 프로젝트 */} - - -
+ {/* 컨테이너 너비 */} +
+ {/* 캐러셀 */} + + + {/* 프로젝트 */} + + +
- {isOpen && } -
+ {isOpen && } +
+ ); } diff --git a/src/components/landing/carousel/LandingTop.tsx b/src/components/landing/carousel/LandingTop.tsx index d9b7644..f4dfd33 100644 --- a/src/components/landing/carousel/LandingTop.tsx +++ b/src/components/landing/carousel/LandingTop.tsx @@ -40,7 +40,7 @@ const LandingTop = () => {
여러 분야의 서비스 유저로부터 유의미한 피드백을 받을 수 있어요.
- From b0edad668fcec60c44e7f73c8aad0c78fdbf6757 Mon Sep 17 00:00:00 2001 From: seoyoung81 Date: Tue, 11 Jun 2024 20:44:00 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=A4=96=20Refactor(#117):=20useMemo=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/landing/carousel/Carousel.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/landing/carousel/Carousel.tsx b/src/components/landing/carousel/Carousel.tsx index efd7c87..0fcefca 100644 --- a/src/components/landing/carousel/Carousel.tsx +++ b/src/components/landing/carousel/Carousel.tsx @@ -1,6 +1,6 @@ "use client"; import RecommendItem from "./RecommendItem"; -import { useEffect, useState } from "react"; +import { useMemo } from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; @@ -14,9 +14,9 @@ import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRound export interface RecommendData { createdAt: string; createdBy: string; - field: TagProps['type']; + field: TagProps["type"]; profileImageUrl: string; - progress: TagProps['status']; + progress: TagProps["status"]; projectId: number; summary: string; title: string; @@ -57,12 +57,9 @@ const settings = { const Carousel = () => { const { data, error, isLoading } = useGetProjectRecommend(); - const [recommendData, setRecommendData] = useState(); - useEffect(() => { - if (data) { - setRecommendData(data.data.data); - } + const recommendData: RecommendData[] = useMemo(() => { + return data?.data.data ?? []; }, [data]); if (isLoading || error) { From 5c74515ac7d347a751e7b395320658979819f1ab Mon Sep 17 00:00:00 2001 From: seoyoung81 Date: Tue, 18 Jun 2024 22:11:07 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=A4=96=20Refactor(#117):=20seperate?= =?UTF-8?q?=20recommendItem=20type?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/landing/carousel/Carousel.tsx | 25 +++++---------- .../landing/carousel/Carousel.types.ts | 13 ++++++++ .../landing/carousel/RecommendItem.tsx | 31 ++++++------------- 3 files changed, 30 insertions(+), 39 deletions(-) create mode 100644 src/components/landing/carousel/Carousel.types.ts diff --git a/src/components/landing/carousel/Carousel.tsx b/src/components/landing/carousel/Carousel.tsx index 0fcefca..08bf901 100644 --- a/src/components/landing/carousel/Carousel.tsx +++ b/src/components/landing/carousel/Carousel.tsx @@ -5,23 +5,12 @@ import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import { useGetProjectRecommend } from "@component/hooks/useProject"; -import { TagProps } from "@component/components/common-components/tag"; +import { RecommendDataType } from "./Carousel.types"; // 캐러셀 화살표 import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded"; import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded"; -export interface RecommendData { - createdAt: string; - createdBy: string; - field: TagProps["type"]; - profileImageUrl: string; - progress: TagProps["status"]; - projectId: number; - summary: string; - title: string; -} - const PrevArrow = ({ onClick }: any) => { return ( { const { data, error, isLoading } = useGetProjectRecommend(); - const recommendData: RecommendData[] = useMemo(() => { + const recommendData: RecommendDataType[] = useMemo(() => { return data?.data.data ?? []; }, [data]); @@ -76,16 +65,16 @@ const Carousel = () => { return ( <> - {recommendData?.map((item: RecommendData) => ( + {recommendData?.map((item: RecommendDataType) => ( ))} diff --git a/src/components/landing/carousel/Carousel.types.ts b/src/components/landing/carousel/Carousel.types.ts new file mode 100644 index 0000000..b4cd207 --- /dev/null +++ b/src/components/landing/carousel/Carousel.types.ts @@ -0,0 +1,13 @@ +import { TagProps } from "@component/components/common-components/tag"; + +export type RecommendDataType = { + createdAt: string; + createdBy: string; + field: TagProps["type"]; + profileImageUrl: string; + progress: TagProps["status"]; + projectId: number; + summary: string; + title: string; +} + diff --git a/src/components/landing/carousel/RecommendItem.tsx b/src/components/landing/carousel/RecommendItem.tsx index a1bd0c6..15ef267 100644 --- a/src/components/landing/carousel/RecommendItem.tsx +++ b/src/components/landing/carousel/RecommendItem.tsx @@ -1,29 +1,18 @@ import Image from "next/image"; import Tag from "@component/components/common-components/tag/Tag"; import { useRouter } from "next/navigation"; -import { TagProps } from "@component/components/common-components/tag"; - -interface RecommendItemData { - projectId: number; - fields: TagProps["type"]; - progress: TagProps["status"]; - title: string; - content: string; - profileImg: string; - nickname: string; - createdAt: string; -} +import { RecommendDataType } from "./Carousel.types"; const RecommendItem = ({ projectId, - fields, + field, progress, title, - content, - profileImg, - nickname, + summary, + profileImageUrl, + createdBy, createdAt, -}: RecommendItemData) => { +}: RecommendDataType) => { const router = useRouter(); return ( <> @@ -34,19 +23,19 @@ const RecommendItem = ({ }} >
- +
{title}
-
{content}
+
{summary}
임시 프로필 이미지
- {nickname} + {createdBy}
{createdAt} From fe579e3a4911070a06882c9fec76fe9770083227 Mon Sep 17 00:00:00 2001 From: seoyoung81 Date: Tue, 18 Jun 2024 22:32:07 +0900 Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=A4=96=20Refactor(#117):=20add=20useW?= =?UTF-8?q?indowSizehook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 21 +++------------------ src/hooks/useWindowSize.ts | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 src/hooks/useWindowSize.ts diff --git a/src/app/page.tsx b/src/app/page.tsx index 49542fa..0854ac9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,6 +5,7 @@ import LandingMid from "@component/components/landing/carousel/LandingMid"; import ProjectList from "@component/components/landing/project/ProjectList"; import { Suspense, useEffect, useState } from "react"; import SignUpModal from "@component/components/signup/SignUpModal"; +import useWindowSize from "@component/hooks/useWindowSize"; export default function Home() { const [isOpen, setIsOpen] = useState(false); @@ -16,29 +17,13 @@ export default function Home() { } }, []); - const [windowWidth, setWindowWidth] = useState( - typeof window !== "undefined" ? window.innerWidth : 0 - ); - - useEffect(() => { - const handleResize = () => { - setWindowWidth(window.innerWidth); - }; - - if (typeof window !== "undefined") { - window.addEventListener("resize", handleResize); - - return () => { - window.removeEventListener("resize", handleResize); - }; - } - }, []); + const { width } = useWindowSize(); return ( // 전체 1440px <>
= 1460 ? "fixed left-[20%] transform-1/2-1/2" : "flex justify-center items-center min-w-[1460px] max-[1920px]"}`} + className={`absolute scale-75 ${width ?? 0 >= 1460 ? "fixed left-[20%] transform-1/2-1/2" : "flex justify-center items-center min-w-[1460px] max-[1920px]"}`} >
diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts new file mode 100644 index 0000000..f4df4d5 --- /dev/null +++ b/src/hooks/useWindowSize.ts @@ -0,0 +1,34 @@ +import { useState, useEffect } from "react"; + +interface Size { + width: number | undefined; + height: number | undefined; +} + +// Hook +function useWindowSize(): Size { + + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, + }); + useEffect(() => { + + function handleResize() { + + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + + window.addEventListener("resize", handleResize); + + handleResize(); + + return () => window.removeEventListener("resize", handleResize); + }, []); + return windowSize; +} + +export default useWindowSize; \ No newline at end of file