Merge branch 'main' into feature-main-merge/DEV-104

next.config.mjs

@@ -19,7 +19,7 @@ const nextConfig = {
     ],
     formats: ["image/webp"],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    deviceSizes: [240, 280, 300, 320, 350, 400, 480],
+    deviceSizes: [ 280, 300, 320, 350, 400, 480],
   },
   webpack: (config, context) => {
     config.module.rules.push({

src/app/layout.tsx

@@ -23,7 +23,7 @@ export const metadata: Metadata = {
     siteName: "FEW",
     locale: "ko_KR",
     type: "website",
-    url: "https://develop.24th-web-team-1-fe.pages.dev",
+    url: "https://www.fewletter.com",
     images: {
       url: "https://d3ex4vlh373syu.cloudfront.net/images/2024-08-07/ra5vy7rzZghJyvbg.png",
       width: 709,

src/app/problem/[problemId]/layout.tsx

@@ -10,7 +10,7 @@ interface ProblemLayoutProps {
 }
 export default function ProblemLayout({ children }: ProblemLayoutProps) {
   return (
-    <div className="flex h-full w-full">
+    <div className="flex h-full w-screen">
       <ProblemProvider>
         <section className="relative mx-[20px] mb-[10px] flex h-auto w-full max-w-[480px] flex-col justify-between">
           <div className="mb-[20px] flex flex-col">

src/article/remotes/prefetchArticleQuery.tsx

@@ -26,6 +26,7 @@ export const prefetchArticleQuery = async ({
   } else {
     const { data } = await queryClient.fetchQuery({
       ...getArticleQueryOptions({ articleId }),
+      gcTime: 300,
     });
     articleInfo = data;
   }

src/common/components/TopButton/index.tsx

@@ -30,7 +30,7 @@ export default function TopButton() {
 
   return (
     showButton && (
-      <div className="z-1 sticky bottom-[10px] left-[90%] w-fit">
+      <div className="z-1 sticky bottom-[20px] left-[85%] w-fit">
         <Button
           id="top"
           onClick={scrollToTop}

src/main/components/ArticleCard/index.tsx

@@ -2,6 +2,8 @@
 import { ArticleClientInfo } from "@main/types/article";
 import { useRouter } from "next/navigation";
 import ArticleCardDetail from "../ArticleCardDetail";
+import { Mixpanel } from "@shared/utils/mixpanel";
+import { EVENT_NAME } from "@shared/constants/mixpanel";
 
 export default function ArticleCard({
   id,
@@ -17,6 +19,10 @@ export default function ArticleCard({
   const { push } = useRouter();
   const onClickArticlePage = () => {
     push(`/article/${id}`);
+    Mixpanel.track({
+      name: EVENT_NAME.MAIN_ARTICLE_TAPPED,
+      property: { id },
+    });
   };
   return (
     <section className="border-b-[0.5px] border-text-gray2 px-[20px] py-[26px]">

src/main/components/ArticleCardDetail/index.tsx

@@ -1,15 +1,11 @@
 import { ArticleClientInfo } from "@main/types/article";
 import Tag from "@shared/components/Tag";
 import { cn } from "@shared/utils/cn";
-import Image, { ImageLoaderProps } from "next/image";
+import Image from "next/image";
 import Link from "next/link";
 import EyeIcon from "public/assets/icon/eye.svg";
 import { ReactNode } from "react";
 
-const ImageLoadr = ({ src, width, quality }: ImageLoaderProps) => {
-  return `${src}?w=${width}&q=${quality || 75}`;
-};
-
 const RootComponentWrapper = ({ children }: { children: ReactNode }) => (
   <section className="border-b-[0.5px] border-text-gray2 px-[20px] py-[26px]">
     {children}
@@ -26,8 +22,8 @@ const WriterProfile = ({
     <Image
       width={30}
       height={30}
-      loader={ImageLoadr}
       src={writerInfo.imageUrl}
+      sizes="5vw"
       alt="profile-image"
       className="h-[30px] w-[30px] rounded-full"
     />
@@ -68,7 +64,8 @@ const Thumbnail = ({
     width={100}
     height={170}
     src={thumbnail}
-    loader={ImageLoadr}
+    priority={isPriorityImage}
+    sizes="80vw"
     alt="article-thumbnail"
     className="h-[170px] w-full rounded object-cover"
   />

src/main/components/CategoryTabs/index.tsx

@@ -7,6 +7,8 @@ import { cn } from "@shared/utils/cn";
 import { useQuery } from "@tanstack/react-query";
 import { HTMLAttributes, useEffect } from "react";
 import CategoryTabSkeleton from "../CategoryTabSkeleton";
+import { Mixpanel } from "@shared/utils/mixpanel";
+import { EVENT_NAME } from "@shared/constants/mixpanel";
 interface CategoryTabsProps extends HTMLAttributes<HTMLDivElement> {
   type: "WORKBOOK" | "ARTICLE";
   category: CategoryClientInfo | undefined;
@@ -42,6 +44,16 @@ export default function CategoryTabs({
   const isLoading =
     type === "WORKBOOK" ? isWorkbookCategoryLoading : isArticleCategoryLoading;
 
+  const onClickCategory = ({ code, name }: CategoryClientInfo) => {
+    handleCategory({ code, name });
+    Mixpanel.track({
+      name:
+        type === "ARTICLE"
+          ? EVENT_NAME.MAIN_ARTICLECATEGORY_TAPPED
+          : EVENT_NAME.MAIN_WORKBOOKCATEGORY_TAPPED,
+      property: { category: name },
+    });
+  };
   if (isLoading || !categoryList)
     return <CategoryTabSkeleton className={className} />;
 
@@ -62,7 +74,7 @@ export default function CategoryTabs({
                 "min-w-[48px]",
               )}
               name={name}
-              onClick={() => handleCategory({ code, name })}
+              onClick={() => onClickCategory({ code, name })}
             >
               <span className="flex w-full items-center justify-center">
                 {name}

src/main/components/MainHeader/index.tsx

@@ -4,21 +4,31 @@ import { useState } from "react";
 import { cn } from "@shared/utils/cn";
 
 import DropDownMenuWrapper from "../DropdownMenuWrapper";
+
 import FewLogo from "public/assets/icon/fewlogo.svg";
 import { EVENT_NAME } from "@shared/constants/mixpanel";
 import useTrackMixpanel from "@shared/hooks/useTrackMixpanel";
+
+import { Mixpanel } from "@shared/utils/mixpanel";
+
 export default function MainHeader() {
   useTrackMixpanel({ eventKey: EVENT_NAME.MAIN_APPEAR });
   const [toggleMenu, setToggleMenu] = useState(false);
 
   const handleToggleMenu = () => {
     setToggleMenu((prev) => !prev);
 
+
     if (!toggleMenu) {
       document.body.style.overflow = "hidden";
     } else {
       document.body.style.overflow = "auto";
     }
+
+    Mixpanel.track({
+      name: EVENT_NAME.MAIN_MYPAGE_TAPPED,
+    });
+
   };
 
   return (

src/main/components/WorkbookCard/index.tsx

@@ -3,6 +3,8 @@ import useWorkbookCardBottomButtonEvent from "@main/hooks/useWorkbookCardBottomB
 import { WorkbookCardClientInfo } from "@main/types/workbook";
 import { useRouter } from "next/navigation";
 import WorkbookCardDetail from "../WorkbookCardDetail";
+import { Mixpanel } from "@shared/utils/mixpanel";
+import { EVENT_NAME } from "@shared/constants/mixpanel";
 
 export default function WorkbookCard({
   id,
@@ -24,10 +26,17 @@ export default function WorkbookCard({
     articleId,
   });
 
+  const onClickWorkbookCard = () => {
+    push(`/workbook/${id}`);
+    Mixpanel.track({
+      name: EVENT_NAME.MAIN_WORKBOOK_TAPPED,
+      property: { id },
+    });
+  };
   return (
     <div
       className="flex h-[390px] min-w-[269px] flex-col"
-      onClick={() => push(`/workbook/${id}`)}
+      onClick={onClickWorkbookCard}
     >
       <WorkbookCardDetail.ImageWrapper>
         <WorkbookCardDetail.MainImage

src/main/components/WorkbookCardDetail/index.tsx

@@ -19,8 +19,9 @@ const MainImage = ({
     height={172}
     src={mainImageUrl}
     alt="main-image"
-    sizes="(max-width: 480px) 269px"
     priority={isPriorityImage}
+    quality={90}
+    sizes="28vw"
     className="h-[172px] w-[269px] rounded-t-lg object-cover"
   />
 );

src/main/hooks/useWorkbookCardBottomButtonEvent.tsx

@@ -3,7 +3,9 @@ import queryClient from "@api/queryClient";
 import useSusbscribeWorkbook from "@common/hooks/useSusbscribeWorkbook";
 import { QUERY_KEY } from "@main/remotes";
 import { WorkbookCardClientInfo } from "@main/types/workbook";
+import { EVENT_NAME } from "@shared/constants/mixpanel";
 import useIsLogin from "@shared/hooks/useIsLogin";
+import { Mixpanel } from "@shared/utils/mixpanel";
 import { onClickLinkCopy } from "@shared/utils/onClickLinkCopy";
 import { useRouter } from "next/navigation";
 
@@ -21,6 +23,10 @@ export default function useWorkbookCardBottomButtonEvent({
     onClickLinkCopy({
       href: `${process.env.NEXT_PUBLIC_FEW_WEB}/workbook/${workbookId}`,
     });
+    Mixpanel.track({
+      name: EVENT_NAME.MAIN_WORKBOOK_SHORTCUT_TAPPED,
+      property: { id: workbookId },
+    });
   };
 
   const clickSubscribeButton = () => {
@@ -39,10 +45,18 @@ export default function useWorkbookCardBottomButtonEvent({
     else {
       push("/auth");
     }
+    Mixpanel.track({
+      name: EVENT_NAME.MAIN_WORKBOOK_SHORTCUT_TAPPED,
+      property: { id: workbookId },
+    });
   };
 
   const clickLearnButton = () => {
     push(`/article/${articleId}`);
+    Mixpanel.track({
+      name: EVENT_NAME.MAIN_WORKBOOK_SHORTCUT_TAPPED,
+      property: { id: workbookId },
+    });
   };
 
   switch (cardType) {

src/main/models/ArticleCardModel/index.ts

@@ -1,5 +1,4 @@
 import { ArticleClientInfo, ArticleServerInfo } from "@main/types/article";
-import { ImageModel } from "@shared/models/ImageModel";
 import { WebpBrowser } from "@shared/types/image";
 
 export default class ArticleCardModel {
@@ -36,9 +35,7 @@ export default class ArticleCardModel {
             url: writer.url,
             imageUrl: writer.imageUrl,
           },
-          thumbnail: this.webpBrowser.isWebpBrowser
-            ? mainImageUrl
-            : ImageModel.changePngImage({ imageSrc: mainImageUrl }),
+          thumbnail: mainImageUrl,
           isPriorityImage: idx < 2,
           title,
           content: this.getRemoveTagContent({ content }),

src/main/models/WorkbookCardModel/index.tsx

@@ -3,7 +3,6 @@ import {
   WorkbookCardServerInfo,
   WorkbookSubscriptionInfo,
 } from "@main/types/workbook";
-import { ImageModel } from "@shared/models/ImageModel";
 import { WebpBrowser } from "@shared/types/image";
 import { WorkbookServerInfo } from "@workbook/types";
 
@@ -96,9 +95,7 @@ export class WorkbookCardModel {
         const changeToClientData: WorkbookCardClientInfo = {
           id,
           badgeInfo: this.getBadeInfo({ cardType }),
-          mainImageUrl: this.webpBrowser.isWebpBrowser
-            ? mainImageUrl
-            : ImageModel.changePngImage({ imageSrc: mainImageUrl }),
+          mainImageUrl: mainImageUrl,
           isPriorityImage: idx < 2,
           title,
           writers: this.getWriterNameList({ writers }),

src/problem/components/AnswerChoiceButton/index.tsx

@@ -19,6 +19,9 @@ import {
   ProblemAnswerMuationState,
 } from "@problem/types/problemInfo";
 import ChoiceFillCircleSvg from "../ChoiceFillCircleSvg";
+import { useProblemIdsViewModel } from "@shared/models/useProblemIdsViewModel";
+import { Mixpanel } from "@shared/utils/mixpanel";
+import { EVENT_NAME } from "@shared/constants/mixpanel";
 
 interface AnswerChoiceButtonProps extends AnswerChoiceClientInfo {}
 
@@ -46,16 +49,19 @@ export default function AnswerChoiceButton({
       };
     },
   });
-
+  const { articleId } = useProblemIdsViewModel();
 
   const answerChoiceModel = new AnswerChoiceModel({
     problemAnswerInfo: problemAnswersInfo[0],
     choiceNumber: choiceAnswer,
     renderNumber: number,
   });
 
-
   const onClickAnswerChoice = () => {
+    Mixpanel.track({
+      name: EVENT_NAME.PROBLEM_CHOICE_TAPPED,
+      property: { id: articleId, index: number },
+    });
     if (!answerChoiceModel.isProblemAnswerInfo) updateChoiceAnswer(number);
   };
 
@@ -82,7 +88,6 @@ export default function AnswerChoiceButton({
       <ChoiceFillCircleSvg
         isChoice={answerChoiceModel.isChoiceFillCircle}
         fill={answerChoiceModel.getChoiceFillColor}
-
       />
     </Button>
   );

src/problem/components/BackToArticle/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useParams } from "next/navigation";
 
-import { HTMLAttributes, useState } from "react";
+import { HTMLAttributes, useContext, useState } from "react";
 
 import { useMutationState } from "@tanstack/react-query";
 
@@ -16,18 +16,19 @@ import {
   ProblemAnswerBody,
   ProblemAnswerMuationState,
 } from "@problem/types/problemInfo";
-import { Button } from "@shared/components/ui/button";
 import ArticleDropDownWrapper from "../ArticleDropDownWrapper";
 import { AnswerStatusModel } from "@problem/models/AnswerStatusModel";
+import QuizContext from "@problem/context/problemContext";
+import { Mixpanel } from "@shared/utils/mixpanel";
+import { EVENT_NAME } from "@shared/constants/mixpanel";
 
 interface BackToArticleProps extends HTMLAttributes<HTMLDivElement> {}
 
 export default function BackToArticle({ className }: BackToArticleProps) {
   const [toggleArticle, setToggleArticle] = useState(false);
-
-  const handleToggleArticle = () => {
-    setToggleArticle((prev) => !prev);
-  };
+  const {
+    states: { choiceAnswer },
+  } = useContext(QuizContext);
 
   const { problemId } = useParams<{ problemId: string }>();
   const problemAnswersInfo = useMutationState<ProblemAnswerMuationState>({
@@ -46,12 +47,29 @@ export default function BackToArticle({ className }: BackToArticleProps) {
     problemAnswerInfo: problemAnswersInfo[0],
   });
 
-  const backToArticleWords = answerStatus.problemSolvedStatus
+  const backToArticleWords = answerStatus.problemSolvedStatus;
 
+  const handleToggleArticle = () => {
+    setToggleArticle((prev) => !prev);
+    if (!toggleArticle) {
+      const isChoiceAnswer = Boolean(choiceAnswer);
+      const type =
+        (!answerStatus.isProblemAnswerInfo &&
+          !isChoiceAnswer &&
+          "notStarted") ||
+        (!answerStatus.isProblemAnswerInfo && isChoiceAnswer && "solving") ||
+        "solved";
+      Mixpanel.track({
+        name: EVENT_NAME.PROBLEM_GOARTICLE_TAPPED,
+        property: { type },
+      });
+    }
+  };
+  console.log(answerStatus.isProblemAnswerInfo, choiceAnswer);
   return (
     <div
       className={cn(
-        "flex flex-row space-x-[3px] relative",
+        "relative flex flex-row space-x-[3px]",
         className,
         !answerStatus.isProblemAnswerInfo && "mt-[91px]",
       )}