Feat/#269 qa

src/@components/@common/CTABtn/HeadlessCTAButton.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+
+import * as St from "./style";
+
+type HeadlessCTAButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const HeadlessCTAButton = (props: PropsWithChildren<HeadlessCTAButtonProps>) => {
+  const { children, ...buttonProps } = props;
+
+  return (
+    <St.CTAButtonWrapper>
+      <St.CTAButton {...buttonProps}>{children}</St.CTAButton>
+    </St.CTAButtonWrapper>
+  );
+};
+
+export default HeadlessCTAButton;

src/@components/MainPage/CTABtn/index.tsx → src/@components/@common/CTABtn/index.tsx

@@ -1,16 +1,14 @@
 import { LocationType } from "../../../types/cardCollection";
 import { GTM_CLASS_NAME } from "../../../util/const/gtm";
-import useNavigateCardCollection, {
-  NavigateCardCollectionAllType,
-} from "../../@common/hooks/useNavigateCardCollection";
-import { St } from "./style";
+import useNavigateCardCollection, { NavigateCardCollectionAllType } from "../hooks/useNavigateCardCollection";
+import HeadlessCTAButton from "./HeadlessCTAButton";
 
 export default function CTABtn() {
   const navigateCardCollection = useNavigateCardCollection(LocationType.ALL) as NavigateCardCollectionAllType;
 
   return (
-    <St.Button type="button" onClick={() => navigateCardCollection()} className={GTM_CLASS_NAME.mainCTABtn}>
+    <HeadlessCTAButton type="button" onClick={() => navigateCardCollection()} className={GTM_CLASS_NAME.mainCTABtn}>
       대화주제 추천 바로가기
-    </St.Button>
+    </HeadlessCTAButton>
   );
 }

src/@components/@common/CTABtn/style.ts

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export const CTAButtonWrapper = styled.div`
+  position: fixed;
+  bottom: 0rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  width: 100%;
+  ${({ theme }) => theme.media.desktop`
+    width: 36rem;
+  `};
+  height: 9.6rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  padding: 0 0.8rem 0.8rem;
+
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 40.63%);
+
+  z-index: 10;
+`;
+
+export const CTAButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 5.6rem;
+
+  background-color: ${({ theme }) => theme.newColors.gray900};
+  border-radius: 0.8rem;
+
+  backdrop-filter: blur(0.6rem);
+  color: ${({ theme }) => theme.newColors.white};
+  ${({ theme }) => theme.newFonts.btn1};
+`;

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;

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 (
-    <St.HeaderWrapper iscardview={pathname === routePaths.CardCollection}>
+    <St.HeaderWrapper>
       <St.Link to={routePaths.Main} className={GTM_CLASS_NAME.mainPiickleLogo}>
         <IcLogo aria-label="피클" />
       </St.Link>

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;
 `;

src/@components/@common/LoginModal/style.ts

@@ -7,7 +7,7 @@ export const Container = styled.section`
   align-items: center;
   gap: 6rem;
 
-  margin-top: 6.9rem;
+  margin-top: 6.4rem;
   height: 13.6rem;
 `;
 
@@ -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;
+  }
 `;

src/@components/@common/Modal/style.ts

@@ -3,10 +3,16 @@ import styled, { keyframes } from "styled-components";
 export const Root = styled.div`
   position: absolute;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
 
+  width: 100vw;
+  ${({ theme }) => theme.media.desktop`
+    width: 36rem;
+  `};
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
+
   z-index: 10;
 
   background-color: rgb(0, 0, 0, 0.5);

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;

src/@components/CardCollectionPage/Card/index.tsx

@@ -12,15 +12,16 @@ interface LoginCheckProps {
   content: string;
   isBookmark: boolean;
   tags: string[];
+  firstCardObsvRef?: React.RefObject<HTMLDivElement>;
 }
 
 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 (
-    <St.Card className={GTM_CLASS_NAME.cardSwipe}>
+    <St.Card ref={firstCardObsvRef} className={GTM_CLASS_NAME.cardSwipe}>
       <St.Container>
         <St.ContentWrapper className={GTM_CLASS_NAME.cardSwipe}>{content}</St.ContentWrapper>
         <St.TagsWrapper>

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};
@@ -26,7 +26,7 @@ const Container = styled.div`
 const ContentWrapper = styled.p`
   text-align: center;
 
-  word-break: keep-all;
+  white-space: pre-wrap;
 
   ${({ theme }) => theme.newFonts.body1};
   color: ${({ theme }) => theme.newColors.gray900};

src/@components/CardCollectionPage/CardSlider/index.tsx

@@ -1,36 +1,42 @@
 import "swiper/swiper.css";
 
-import { forwardRef } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 import { CardList } from "../../../types/cardCollection";
 import Card from "../Card";
 import LastCard from "../Card/LastCard";
 import useCardSwiper from "../hooks/useCardSwiper";
 import St from "./style";
+
 interface CardSliderProps {
   openLoginModalHandler: () => void;
   cardLists: CardList[];
+  firstCardObsvRef: React.RefObject<HTMLDivElement>;
+  lastCardObsvRef: React.RefObject<HTMLDivElement>;
 }
 
-const CardSlider = forwardRef(function CardSlider(props: CardSliderProps, ref: React.ForwardedRef<HTMLDivElement>) {
-  const { openLoginModalHandler, cardLists } = props;
+const CardSlider = (props: CardSliderProps) => {
+  const { openLoginModalHandler, cardLists, firstCardObsvRef, lastCardObsvRef } = props;
   const { swiperSettings } = useCardSwiper();
 
   return (
     <St.Wrapper>
-      <Swiper {...swiperSettings} className="swiper">
-        {cardLists.map((cardList) => (
+      <Swiper {...swiperSettings}>
+        {cardLists.map((cardList, idx) => (
           <SwiperSlide key={cardList._id}>
-            <Card openLoginModalHandler={openLoginModalHandler} {...cardList} />
+            <Card
+              openLoginModalHandler={openLoginModalHandler}
+              {...cardList}
+              firstCardObsvRef={idx === 0 ? firstCardObsvRef : undefined}
+            />
           </SwiperSlide>
         ))}
         <SwiperSlide>
-          <LastCard ref={ref} />
+          <LastCard ref={lastCardObsvRef} />
         </SwiperSlide>
       </Swiper>
     </St.Wrapper>
   );
-});
+};
 
 export default CardSlider;

src/@components/CardCollectionPage/CardSlider/style.ts

@@ -3,15 +3,14 @@ import styled from "styled-components";
 const Wrapper = styled.section`
   position: relative;
   height: 100%;
-  padding-top: 3.3rem;
 
   & .swiper {
     width: 100%;
     height: 100%;
   }
 
   & .swiper-slide {
-    height: calc((100% + 3.3rem) * 0.75);
+    height: calc((100% + 3.3rem) * 0.77);
   }
 
   & .swiper-slide:last-child {

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;