From 96eea950c2581e0018cdd024c57b1667cbececb5 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 4 May 2023 17:07:58 +0900 Subject: [PATCH 01/13] [ style ] qa :: loginmodal button style --- src/@components/@common/LoginModal/style.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/@components/@common/LoginModal/style.ts b/src/@components/@common/LoginModal/style.ts index 0b665817..4ddeb3a9 100644 --- a/src/@components/@common/LoginModal/style.ts +++ b/src/@components/@common/LoginModal/style.ts @@ -25,13 +25,12 @@ export const Buttons = styled.div` width: 100%; display: flex; - gap: 0.1rem; height: 5.8em; `; export const Button = styled.button` - flex: 1; + width: 100%; display: flex; justify-content: center; @@ -42,4 +41,8 @@ export const Button = styled.button` ${({ theme }) => theme.newFonts.btn1}; color: ${({ theme }) => theme.newColors.gray100}; background: ${({ theme }) => theme.newColors.gray900}; + + &:first-child { + margin-right: 0.1rem; + } `; From 188d8c3546d02c57d6036cadbec19b68f1aab6e0 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 4 May 2023 17:11:15 +0900 Subject: [PATCH 02/13] [ style ] qa :: modal height --- src/@components/@common/Modal/style.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/@components/@common/Modal/style.ts b/src/@components/@common/Modal/style.ts index abc6c40c..b5722406 100644 --- a/src/@components/@common/Modal/style.ts +++ b/src/@components/@common/Modal/style.ts @@ -3,10 +3,13 @@ import styled, { keyframes } from "styled-components"; export const Root = styled.div` position: absolute; top: 0; - right: 0; - bottom: 0; left: 0; + width: 100vw; + height: 100vh; + height: calc(var(--vh, 1vh) * 100); + min-height: -webkit-fill-available; + z-index: 10; background-color: rgb(0, 0, 0, 0.5); From eb1f8b7edbc1506dda2b60b903ef03115a55cc1e Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 4 May 2023 17:14:59 +0900 Subject: [PATCH 03/13] [ style ] qa :: card height --- src/@components/CardCollectionPage/CardSlider/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/@components/CardCollectionPage/CardSlider/style.ts b/src/@components/CardCollectionPage/CardSlider/style.ts index f8a2d014..1faa08a7 100644 --- a/src/@components/CardCollectionPage/CardSlider/style.ts +++ b/src/@components/CardCollectionPage/CardSlider/style.ts @@ -11,7 +11,7 @@ const Wrapper = styled.section` } & .swiper-slide { - height: calc((100% + 3.3rem) * 0.75); + height: calc((100% + 3.3rem) * 0.77); } & .swiper-slide:last-child { From fff4e10cc7dd8e782aea2fece6026e81f4c0f292 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 4 May 2023 17:19:24 +0900 Subject: [PATCH 04/13] [ style ] qa :: card margin --- src/@components/CardCollectionPage/Card/style.ts | 2 +- src/@components/CardCollectionPage/CardSlider/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/style.ts b/src/@components/CardCollectionPage/Card/style.ts index 2cc95a81..56269311 100644 --- a/src/@components/CardCollectionPage/Card/style.ts +++ b/src/@components/CardCollectionPage/Card/style.ts @@ -3,7 +3,7 @@ import styled from "styled-components"; const Card = styled.article` position: relative; - margin: 0.8rem; + margin: 0 0.8rem 0.8rem; height: 100%; border: 0.1rem solid ${({ theme }) => theme.colors.gray200}; diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index 386bfacd..3f3ea6db 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/src/@components/CardCollectionPage/CardSlider/index.tsx @@ -19,7 +19,7 @@ const CardSlider = forwardRef(function CardSlider(props: CardSliderProps, ref: R return ( - + {cardLists.map((cardList) => ( From d5645a8e45b79470903e77d4232f5ecb4bfea749 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 4 May 2023 17:26:43 +0900 Subject: [PATCH 05/13] =?UTF-8?q?[=20feat=20]=20qa=20::=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=AA=A8=EB=8B=AC=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=B0=98=EB=B3=B5?= =?UTF-8?q?=20=ED=8C=9D=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MainPage/UpdateModal/index.tsx | 7 ++++--- .../MainPage/hooks/useUpdateModal.ts | 21 ++++++++++--------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/@components/MainPage/UpdateModal/index.tsx b/src/@components/MainPage/UpdateModal/index.tsx index 3dacf188..4bc852fe 100644 --- a/src/@components/MainPage/UpdateModal/index.tsx +++ b/src/@components/MainPage/UpdateModal/index.tsx @@ -14,9 +14,10 @@ export default function UpdateModal() { 23.04.20 업데이트 피클 업데이트 안내 - Piickle 유저분들의 피드백을 바탕으로 더 사용하기 좋게 만들었어요
- 앞으로도 많은 피드백 부탁 드립니다
- 지금 하는 안내는 1주일 정도만 유지되니 이해 부탁드릴게요! + Piickle 유저분들의 피드백을 바탕으로 더 사용하기 좋게 만들었어요😎 +
+ 여러분이 더 편할 수 있도록 돕기 위한 알림이니 처음 보셨다면 꼭 읽어주세요!
+ 업데이트 안내는 약 1주일동안만 보일 예정으로 이해 부탁 드릴게요! {VERSION_UPDATES.map((versionUpdate) => ( diff --git a/src/@components/MainPage/hooks/useUpdateModal.ts b/src/@components/MainPage/hooks/useUpdateModal.ts index 50c50919..7423f4f0 100644 --- a/src/@components/MainPage/hooks/useUpdateModal.ts +++ b/src/@components/MainPage/hooks/useUpdateModal.ts @@ -1,17 +1,18 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; -const POPUP_SESSION_KEY = "popup-shown"; +// const POPUP_SESSION_KEY = "popup-shown"; export default function useUpdateModal() { - const [isOpened, setIsOpened] = useState(false); + const [isOpened, setIsOpened] = useState(true); - useEffect(() => { - const isPopupShown = sessionStorage.getItem(POPUP_SESSION_KEY); - if (!isPopupShown) { - setIsOpened(true); - sessionStorage.setItem(POPUP_SESSION_KEY, "true"); - } - }, []); + // MEMO :: 페이지 방문 시 매번 Open 설정 요구 (기획 측) + // useEffect(() => { + // const isPopupShown = sessionStorage.getItem(POPUP_SESSION_KEY); + // if (!isPopupShown) { + // setIsOpened(true); + // sessionStorage.setItem(POPUP_SESSION_KEY, "true"); + // } + // }, []); const handleCloseModal = () => { setIsOpened(false); From 420b5a80dcda7e4539f956a2dd247ae65ca64371 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 4 May 2023 17:43:14 +0900 Subject: [PATCH 06/13] [ style ] sticky Header --- src/@components/@common/Header/HeaderMinVer/style.ts | 2 +- src/@components/@common/Header/index.tsx | 5 +---- src/@components/@common/Header/style.ts | 6 +++--- src/@components/CardCollectionPage/CardSlider/index.tsx | 1 + src/@components/CardCollectionPage/CardSlider/style.ts | 1 - src/@components/CardCollectionPage/index.tsx | 2 ++ 6 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/@components/@common/Header/HeaderMinVer/style.ts b/src/@components/@common/Header/HeaderMinVer/style.ts index 5289667b..7596d1de 100644 --- a/src/@components/@common/Header/HeaderMinVer/style.ts +++ b/src/@components/@common/Header/HeaderMinVer/style.ts @@ -2,7 +2,7 @@ import { Link as LinkComponent } from "react-router-dom"; import styled from "styled-components"; const Header = styled.header` - position: absolute; + position: sticky; top: 0; left: 0; right: 0; diff --git a/src/@components/@common/Header/index.tsx b/src/@components/@common/Header/index.tsx index 8c3a95b3..2b091769 100644 --- a/src/@components/@common/Header/index.tsx +++ b/src/@components/@common/Header/index.tsx @@ -1,5 +1,3 @@ -import { useLocation } from "react-router-dom"; - import { IcHamburger, IcLogo } from "../../../asset/icon"; import { routePaths } from "../../../core/routes/path"; import { GTM_CLASS_NAME } from "../../../util/const/gtm"; @@ -8,11 +6,10 @@ import MenuBar from "../MenuBar"; import * as St from "./style"; export default function Header() { - const { pathname } = useLocation(); const { isModalOpen, toggleModal } = useModal(); return ( - + diff --git a/src/@components/@common/Header/style.ts b/src/@components/@common/Header/style.ts index f5aadcf0..04ae28ca 100644 --- a/src/@components/@common/Header/style.ts +++ b/src/@components/@common/Header/style.ts @@ -1,9 +1,9 @@ import { Link as LinkRouter } from "react-router-dom"; import styled from "styled-components"; -export const HeaderWrapper = styled.header<{ iscardview: boolean }>` +export const HeaderWrapper = styled.header` display: flex; - position: ${({ iscardview }) => (iscardview ? "absolute" : "sticky")}; + position: sticky; top: 0; align-items: center; justify-content: space-between; @@ -13,7 +13,7 @@ export const HeaderWrapper = styled.header<{ iscardview: boolean }>` width: 100%; height: 5.2rem; - background-color: ${({ theme, iscardview }) => (iscardview ? "transparent" : theme.colors.white)}; + background-color: ${({ theme }) => theme.colors.white}; z-index: 10; `; diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index 3f3ea6db..323e0c46 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/src/@components/CardCollectionPage/CardSlider/index.tsx @@ -8,6 +8,7 @@ import Card from "../Card"; import LastCard from "../Card/LastCard"; import useCardSwiper from "../hooks/useCardSwiper"; import St from "./style"; + interface CardSliderProps { openLoginModalHandler: () => void; cardLists: CardList[]; diff --git a/src/@components/CardCollectionPage/CardSlider/style.ts b/src/@components/CardCollectionPage/CardSlider/style.ts index 1faa08a7..cdd5fa56 100644 --- a/src/@components/CardCollectionPage/CardSlider/style.ts +++ b/src/@components/CardCollectionPage/CardSlider/style.ts @@ -3,7 +3,6 @@ import styled from "styled-components"; const Wrapper = styled.section` position: relative; height: 100%; - padding-top: 3.3rem; & .swiper { width: 100%; diff --git a/src/@components/CardCollectionPage/index.tsx b/src/@components/CardCollectionPage/index.tsx index 9bacf755..56babbfa 100644 --- a/src/@components/CardCollectionPage/index.tsx +++ b/src/@components/CardCollectionPage/index.tsx @@ -2,6 +2,7 @@ import { useLocation } from "react-router-dom"; import { CardsTypeLocation } from "../../types/cardCollection"; import { GTM_CLASS_NAME } from "../../util/const/gtm"; +import Header from "../@common/Header"; import HeaderMinVer from "../@common/Header/HeaderMinVer"; import useGTMPage from "../@common/hooks/useGTMPage"; import useModal from "../@common/hooks/useModal"; @@ -28,6 +29,7 @@ export default function CardCollectionPage() { return ( + {/*
*/} {!isLoading ? ( From 5e5a6ddd5a5dcf2f6606b0755da21fef439bdc5c Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 4 May 2023 18:08:03 +0900 Subject: [PATCH 07/13] =?UTF-8?q?[=20feat=20]=20qa=20::=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=EC=97=90=20=EB=94=B0=EB=9D=BC=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EB=B3=80=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/hooks/useScrollPosition.ts | 31 +++++++++++++++++++ .../CardCollectionPage/Card/index.tsx | 5 +-- .../CardCollectionPage/CardSlider/index.tsx | 19 +++++++----- .../hooks/useHeaderChange.ts | 22 +++++++++++++ src/@components/CardCollectionPage/index.tsx | 15 ++++++--- 5 files changed, 79 insertions(+), 13 deletions(-) create mode 100644 src/@components/@common/hooks/useScrollPosition.ts create mode 100644 src/@components/CardCollectionPage/hooks/useHeaderChange.ts diff --git a/src/@components/@common/hooks/useScrollPosition.ts b/src/@components/@common/hooks/useScrollPosition.ts new file mode 100644 index 00000000..7c45864c --- /dev/null +++ b/src/@components/@common/hooks/useScrollPosition.ts @@ -0,0 +1,31 @@ +import { useEffect, useRef, useState } from "react"; + +const useScrollPosition = () => { + const lastScrollPositionRef = useRef(0); + const [isScrollingDown, setIsScrollingDown] = useState(true); + const [isScrollTop, setIsScrollTop] = useState(true); + + useEffect(() => { + const scrollHandler = () => { + const currentScrollPosition = window.scrollY; + + setIsScrollTop(currentScrollPosition < 20); + setIsScrollingDown(lastScrollPositionRef.current < currentScrollPosition); + + lastScrollPositionRef.current = currentScrollPosition; + }; + + window.addEventListener("scroll", scrollHandler); + + return () => { + window.removeEventListener("scroll", scrollHandler); + }; + }, []); + + return { + isScrollingDown, + isScrollTop, + }; +}; + +export default useScrollPosition; diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index 41030dad..44fb1837 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -12,15 +12,16 @@ interface LoginCheckProps { content: string; isBookmark: boolean; tags: string[]; + firstCardObsvRef?: React.RefObject; } const Card = (props: LoginCheckProps) => { - const { _id, content, isBookmark, tags, openLoginModalHandler } = props; + const { _id, content, isBookmark, tags, openLoginModalHandler, firstCardObsvRef } = props; const { isBookmarked, handleClickBookmark } = useCardBookmark(isBookmark, openLoginModalHandler); return ( - + {content} diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index 323e0c46..99a5935c 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/src/@components/CardCollectionPage/CardSlider/index.tsx @@ -1,6 +1,5 @@ import "swiper/swiper.css"; -import { forwardRef } from "react"; import { Swiper, SwiperSlide } from "swiper/react"; import { CardList } from "../../../types/cardCollection"; @@ -12,26 +11,32 @@ import St from "./style"; interface CardSliderProps { openLoginModalHandler: () => void; cardLists: CardList[]; + firstCardObsvRef: React.RefObject; + lastCardObsvRef: React.RefObject; } -const CardSlider = forwardRef(function CardSlider(props: CardSliderProps, ref: React.ForwardedRef) { - const { openLoginModalHandler, cardLists } = props; +const CardSlider = (props: CardSliderProps) => { + const { openLoginModalHandler, cardLists, firstCardObsvRef, lastCardObsvRef } = props; const { swiperSettings } = useCardSwiper(); return ( - {cardLists.map((cardList) => ( + {cardLists.map((cardList, idx) => ( - + ))} - + ); -}); +}; export default CardSlider; diff --git a/src/@components/CardCollectionPage/hooks/useHeaderChange.ts b/src/@components/CardCollectionPage/hooks/useHeaderChange.ts new file mode 100644 index 00000000..a920433a --- /dev/null +++ b/src/@components/CardCollectionPage/hooks/useHeaderChange.ts @@ -0,0 +1,22 @@ +import { useState } from "react"; + +import useIntersectionObserver from "../../@common/hooks/useIntersectionObserver"; + +const useHeaderChange = () => { + const [isDefaultHeader, setIsDefaultHeader] = useState(true); + + const intersectionObserverRef = useIntersectionObserver( + (entry) => { + if (entry.isIntersecting) { + setIsDefaultHeader(true); + return; + } + setIsDefaultHeader(false); + }, + { threshold: 0.5 }, + ); + + return { isDefaultHeader, intersectionObserverRef }; +}; + +export default useHeaderChange; diff --git a/src/@components/CardCollectionPage/index.tsx b/src/@components/CardCollectionPage/index.tsx index 56babbfa..0b17134d 100644 --- a/src/@components/CardCollectionPage/index.tsx +++ b/src/@components/CardCollectionPage/index.tsx @@ -13,6 +13,7 @@ import CardSlider from "./CardSlider"; import FilterModal from "./FilterModal"; import { useCardLists } from "./hooks/useCardLists"; import useCTAFilter from "./hooks/useCTAFilter"; +import useHeaderChange from "./hooks/useHeaderChange"; import St from "./style"; export default function CardCollectionPage() { @@ -23,17 +24,23 @@ export default function CardCollectionPage() { const cardsTypeLoaction = location.state as CardsTypeLocation; const { cardLists, isLoading, fetchCardListsWithFilter } = useCardLists(cardsTypeLoaction); - const { isVisibleCTAButton, intersectionObserverRef } = useCTAFilter(); + const { isDefaultHeader, intersectionObserverRef: firstCardObsvRef } = useHeaderChange(); + const { isVisibleCTAButton, intersectionObserverRef: lastCardObsvRef } = useCTAFilter(); + const { isModalOpen: isFilterModalOpen, toggleModal: toggleFilterModal } = useModal(); const { isModalOpen: isLoginModalOpen, toggleModal: toggleLoginModal } = useModal(); return ( - {/*
*/} - + {isDefaultHeader ?
: } {!isLoading ? ( - + ) : ( )} From 91d474ee8baceac9b2c2d49bc2caa45bd4cfe1ba Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 4 May 2023 18:14:58 +0900 Subject: [PATCH 08/13] [ fix ] suspend wrapping with lazy promise --- src/@components/MainPage/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/@components/MainPage/index.tsx b/src/@components/MainPage/index.tsx index eae671fd..da98835c 100644 --- a/src/@components/MainPage/index.tsx +++ b/src/@components/MainPage/index.tsx @@ -1,4 +1,4 @@ -import { lazy } from "react"; +import { lazy, Suspense } from "react"; import Footer from "../@common/Footer"; import Header from "../@common/Header"; @@ -28,7 +28,9 @@ export default function MainPage() {