Merge branch 'feat/#315-card_blacklist' of https://github.com/TeamPii…

…ckle/client into feat/#315-card_blacklist

index.html

@@ -64,14 +64,14 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
-    <!-- 
+
     <script>
       if("serviceWorker" in navigator) {
         window.addEventListener("load", () => {
           navigator.serviceWorker.register("./pwaServiceWorker.js")
         })
       }
     </script>
-   -->
+
   </body>
 </html>

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "axios": "^0.26.0",
+    "clipboard-copy": "^4.0.1",
     "compressorjs": "^1.1.1",
     "qs": "^6.11.0",
     "react": "^18.1.0",

src/@components/@common/Modal/index.tsx

@@ -5,7 +5,7 @@ import useOutClickCloser from "../hooks/useOutClickCloser";
 import ModalPortal from "./Portal";
 import * as St from "./style";
 
-type ModalTheme = "DEFAULT" | "WHITE_BOTTOM" | "GRAY_CENTER" | "GRAY_BOTTOM";
+type ModalTheme = "DEFAULT" | "WHITE_BOTTOM" | "GRAY_CENTER" | "GRAY_BOTTOM" | "COACHMARK";
 
 interface ModalContents {
   theme?: ModalTheme;
@@ -19,6 +19,17 @@ export default function Modal(props: PropsWithChildren<ModalContents>) {
   const { theme = "DEFAULT", closeHandler, closeOpacityClassName, closeBtnClassName, isNoCloseBtn, children } = props;
   const outClickCloserRef = useOutClickCloser(closeHandler, true);
 
+  if (theme === "COACHMARK")
+    return (
+      <ModalPortal>
+        <St.CoachMarkRoot>
+          <St.CoachMarkModal ref={outClickCloserRef}>
+            <St.ModalContents>{children}</St.ModalContents>
+          </St.CoachMarkModal>
+        </St.CoachMarkRoot>
+      </ModalPortal>
+    );
+
   if (theme === "GRAY_CENTER")
     return (
       <ModalPortal>

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

@@ -15,7 +15,6 @@ export const Root = styled.div`
 
   z-index: 10;
 
-  background-color: rgb(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
 `;
@@ -29,8 +28,17 @@ export const fadeOut = keyframes`
   }
 `;
 
+export const CoachMarkRoot = styled(Root)`
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill;
+
+  background-color: ${({ theme }) => theme.newColors.blackblur};
+`;
+
 export const GrayRoot = styled(Root)`
   animation: ${fadeOut} 0.8s ease-in-out;
+  background-color: ${({ theme }) => theme.newColors.black50};
 `;
 
 export const WhiteRoot = styled(Root)`
@@ -41,6 +49,8 @@ export const WhiteRoot = styled(Root)`
   min-height: -webkit-fill-available;
 
   animation: ${fadeOut} 0.8s ease-in-out;
+
+  background-color: ${({ theme }) => theme.newColors.black50};
 `;
 
 export const DefaultRoot = styled(Root)`
@@ -50,6 +60,8 @@ export const DefaultRoot = styled(Root)`
   height: calc(var(--vh, 1vh) * 100);
   min-height: -webkit-fill-available;
   padding: 1.6rem;
+
+  background-color: ${({ theme }) => theme.newColors.black50};
 `;
 
 export const bottomUp = keyframes`
@@ -70,6 +82,14 @@ const CenterModal = styled.section`
   transform: translateY(-50%);
 `;
 
+export const CoachMarkModal = styled(CenterModal)`
+  width: 100%;
+  ${({ theme }) => theme.media.desktop`
+    width: 36rem;
+  `};
+  height: 100%;
+`;
+
 export const GrayCenterModal = styled(CenterModal)`
   width: 100%;
   ${({ theme }) => theme.media.desktop`

src/@components/@common/hooks/useNavigateCardCollection.ts

@@ -9,12 +9,18 @@ import { LocationType } from "../../../types/cardCollection";
 export type NavigateCardCollectionAllType = (sliderIdx?: number) => void;
 export type NavigateCardCollectionBestType = (sliderIdx?: number) => void;
 export type NavigateCardCollectionBookMarkType = (sliderIdx?: number) => void;
+export type NavigateCardCollectionRecentType = (sliderIdx?: number) => void;
+export type NavigateCardCollectionUpdateType = (sliderIdx?: number) => void;
 export type NavigateCardCollectionCategoryType = (categoryId: string, sliderIdx?: number) => void;
 export type NavigateCardCollectionFilterType = (filterTypes: string[], sliderIdx?: number) => void;
 export type NavigateCardCollectionMedleyType = (medleyId: string, sliderIdx?: number) => void;
 export type NavigateRecentCollectionType = (sliderIdx?: number) => void;
 export type NavigateFemaleCollectionType = (sliderIdx?: number) => void;
 export type NavigateMaleCollectionType = (sliderIdx?: number) => void;
+export type NavigateCardCollectionShareType = (
+  cardId: string,
+  sliderIdx?: number,
+) => { navigate: () => void; url: string };
 
 export default function useNavigateCardCollection(locationType: LocationType) {
   const navigate = useNavigate();
@@ -66,16 +72,36 @@ export default function useNavigateCardCollection(locationType: LocationType) {
         navigate(`${routePaths.CardCollection}?type=${LocationType.RECENT}`);
         setSliderIdx(sliderIdx);
       };
+
+    case LocationType.UPDATE:
+      return (sliderIdx = 0) => {
+        navigate(`${routePaths.CardCollection}?type=${LocationType.UPDATE}`);
+        setSliderIdx(sliderIdx);
+      };
+
     case LocationType.FEMALE:
       return (sliderIdx = 0) => {
         navigate(`${routePaths.CardCollection}?type=${LocationType.FEMALE}`);
         setSliderIdx(sliderIdx);
       };
+
     case LocationType.MALE:
       return (sliderIdx = 0) => {
         navigate(`${routePaths.CardCollection}?type=${LocationType.MALE}`);
         setSliderIdx(sliderIdx);
       };
+
+    case LocationType.SHARE:
+      return (cardId: string, sliderIdx = 0) => {
+        const shareUrl = `${routePaths.CardCollection}?type=${LocationType.SHARE}&cardId=${cardId}`;
+        return {
+          navigate: () => {
+            navigate(shareUrl);
+            setSliderIdx(sliderIdx);
+          },
+          url: shareUrl,
+        };
+      };
   }
 }
 

src/@components/@common/hooks/useRecentlyBookmarked.ts

@@ -0,0 +1,17 @@
+import useSWR from "swr";
+
+import { realReq } from "../../../core/api/common/axios";
+import { PATH } from "../../../core/api/common/constants";
+import { RecentCardList } from "../../../types/cardCollection";
+import { PiickleSWRResponse } from "../../../types/remote/swr";
+
+export function useRecentlyBookmarked() {
+  const { data } = useSWR<PiickleSWRResponse<RecentCardList>>(`${PATH.CARDS_}${PATH.CARDS_RECENT}`, realReq.GET_SWR, {
+    suspense: true,
+  });
+
+  return {
+    recentlyBookmarkedDate: data?.data.data.recentlyDate,
+    recentlyBookmarkedCards: data?.data.data.cardResponseDtos,
+  };
+}

src/@components/BestPiicklePage/BestPiickleRank/RankItem/style.ts

@@ -34,7 +34,7 @@ export const RankItemText = styled.p`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  
+
   width: 26.4rem;
 
   cursor: pointer;

src/@components/BestPiicklePage/BestPiickleRank/index.tsx

@@ -15,6 +15,8 @@ const rankTitles: HeadingTitle = {
   content: "가장 많이 북마크한 대화주제를 확인해보세요",
 };
 
+const BEST_PIICKLE_TOTAL_COUNT = 8;
+
 export default function BestPiickleRank() {
   const { bestPiickle } = useBestPiickle();
   const { isModalOpen: isLoginModalOpen, toggleModal: toggleLoginModal } = useModal();
@@ -24,7 +26,7 @@ export default function BestPiickleRank() {
       <HeadingTitleContainer headingTitles={rankTitles} paddingVerticalValue={1.6} />
       {bestPiickle &&
         [...bestPiickle.data]
-          .slice(0, 8)
+          .slice(0, BEST_PIICKLE_TOTAL_COUNT)
           .map(({ _id, content, isBookmark }, idx) => (
             <RankItem
               key={_id}

src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx

@@ -7,6 +7,8 @@ interface RecommendProps {
   recommendList: recommendListType;
 }
 
+const BEST_PIICKLE_TOTAL_COUNT = 4;
+
 export default function RecommendItem(props: RecommendProps) {
   const { recommendList } = props;
   const { scrollableContainerProps, isDragging } = useDraggingContainer();
@@ -17,14 +19,17 @@ export default function RecommendItem(props: RecommendProps) {
 
       {recommendList.cards && (
         <St.SliderWrapper {...scrollableContainerProps}>
-          {recommendList.cards.slice(0, 4).map((cards, idx) => {
+          {recommendList.cards.slice(0, BEST_PIICKLE_TOTAL_COUNT).map((cards, idx) => {
             return (
               <BestPiickleCard
                 key={cards._id}
                 bestPiickle={cards}
                 idx={idx}
                 canNavigate={!isDragging}
-                isLast={idx === 3}
+                isLast={
+                  recommendList.cards &&
+                  idx === (recommendList.cards.length > BEST_PIICKLE_TOTAL_COUNT && BEST_PIICKLE_TOTAL_COUNT - 1)
+                }
                 locationType={recommendList.locationType}
               />
             );

src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx

@@ -1,8 +1,8 @@
 import { CardList, LocationType } from "../../../types/cardCollection";
 import { HeadingTitle } from "../../../util/main/headingTitles";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
+import { useRecentlyBookmarked } from "../../@common/hooks/useRecentlyBookmarked";
 import { useCardsByGender } from "./hooks/useCardsByGender";
-import { useRecentlyBookmarked } from "./hooks/useRecentlyBookmarked";
 import RecommendItem from "./RecommendItem";
 import * as St from "./style";
 

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

@@ -3,6 +3,7 @@ import IcMenuBtn from "../../../../asset/icon/IcMenuBtn";
 import IcShareBtn from "../../../../asset/icon/IcShareBtn";
 import { GTM_CLASS_NAME } from "../../../../util/const/gtm";
 import useCardBookmark from "../../hooks/useCardBookmark";
+import useCardShare from "../../hooks/useCardShare";
 import * as St from "./style";
 
 interface CardMenuProps {
@@ -15,13 +16,15 @@ interface CardMenuProps {
 export default function CardMenu(props: CardMenuProps) {
   const { _id, isBookmark, openLoginModalHandler, toggleMenuModal } = props;
 
+  const { handleCopyClipBoard } = useCardShare();
   const { isBookmarked, handleClickBookmark } = useCardBookmark(isBookmark, openLoginModalHandler);
+
   return (
     <St.MenuContainer>
       <St.ButtonWrapper onClick={toggleMenuModal}>
         <IcMenuBtn />
       </St.ButtonWrapper>
-      <St.ButtonWrapper>
+      <St.ButtonWrapper onClick={() => handleCopyClipBoard(_id)}>
         <St.IconWrapper>
           <IcShareBtn />
         </St.IconWrapper>

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

@@ -0,0 +1,37 @@
+import IcMenuBtn from "../../../asset/icon/IcMenuBtn";
+import IcShareBtn from "../../../asset/icon/IcShareBtn";
+import useOutClickCloser from "../../@common/hooks/useOutClickCloser";
+import Modal from "../../@common/Modal";
+import * as St from "./style";
+
+interface CoachMarkProps {
+  closeHandler: () => void;
+}
+
+export default function CoachMark(props: CoachMarkProps) {
+  const { closeHandler } = props;
+  const outClickCloserRef = useOutClickCloser(closeHandler, true);
+
+  return (
+    <Modal theme={"COACHMARK"} closeHandler={closeHandler}>
+      <St.Container ref={outClickCloserRef}>
+        <St.Contents>
+          새로 생긴 기능들을
+          <br />
+          확인해보세요
+        </St.Contents>
+        <St.ImageWrapper>
+          <St.ButtonWrapper>
+            <IcMenuBtn isLighted={true} />
+          </St.ButtonWrapper>
+          <St.ButtonWrapper>
+            <St.IconWrapper>
+              <IcShareBtn isLighted={true} />
+            </St.IconWrapper>
+            <St.ButtonLabel>공유하기</St.ButtonLabel>
+          </St.ButtonWrapper>
+        </St.ImageWrapper>
+      </St.Container>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const Container = styled.section`
+  position: absolute;
+  right: 0;
+
+  margin-top: 5.2rem;
+  height: calc((100% + 3.3rem) * 0.77);
+  padding-bottom: 10.5rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+
+export const Contents = styled.p`
+  text-align: right;
+  padding-right: 1.6rem;
+  margin-bottom: 2.5rem;
+
+  ${({ theme }) => theme.newFonts.caption1}
+  color: ${({ theme }) => theme.newColors.white};
+`;
+
+export const ImageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 2.1rem;
+
+  gap: 2.4rem;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 4.1rem;
+`;
+
+export const IconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 4rem;
+  height: 4rem;
+`;
+
+export const ButtonLabel = styled.p`
+  margin-top: 0.6rem;
+
+  ${({ theme }) => theme.newFonts.caption1};
+  color: ${({ theme }) => theme.newColors.white};
+`;