Merge pull request #829 from sopt-makers/develop

대댓글 기능 / 광고 구좌 기능 프러덕션 배포
sopt-makers · Aug 31, 2024 · 7b68438 · 7b68438
2 parents 4ef652c + 3378455
commit 7b68438
Show file tree

Hide file tree

Showing 43 changed files with 4,523 additions and 736 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -35,7 +35,9 @@
     "autosize": "^6.0.1",
     "axios": "^1.1.3",
     "dayjs": "^1.11.6",
-    "embla-carousel-react": "^8.0.0-rc13",
+    "embla-carousel": "^8.2.0",
+    "embla-carousel-autoplay": "^8.2.0",
+    "embla-carousel-react": "^8.2.0",
     "immer": "^10.0.2",
     "nanoid": "^4.0.0",
     "nanostores": "^0.9.3",

diff --git a/packages/react-mentions/dist/react-mentions.cjs.dev.js b/packages/react-mentions/dist/react-mentions.cjs.dev.js
@@ -894,11 +894,11 @@ function Suggestion(_ref) {
       return suggestion;
     }
 
-    var id = suggestion.id,
+    var orgId = suggestion.orgId,
         display = suggestion.display;
 
-    if (id === undefined || !display) {
-      return id;
+    if (orgId === undefined || !display) {
+      return orgId;
     }
 
     return display;
@@ -1436,22 +1436,16 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
         // Safari 브라우저인 경우
-        console.log('safari');
-
         if (ev.nativeEvent.composed && selectionStart === selectionEnd) {
           _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
         }
       } else if (/iPhone|iPad|iPod/.test(navigator.userAgent) && !navigator.userAgent.includes('Safari')) {
         // WKWebView 또는 다른 iOS WebView인 경우
-        console.log('webview');
-
         if (ev.nativeEvent.composed && selectionStart === selectionEnd) {
           _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
         }
       } else {
         // 다른 브라우저의 경우
-        console.log('other browser');
-
         if (ev.nativeEvent.isComposing && selectionStart === selectionEnd) {
           _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
         }

diff --git a/packages/react-mentions/dist/react-mentions.cjs.prod.js b/packages/react-mentions/dist/react-mentions.cjs.prod.js
@@ -563,8 +563,8 @@ function Suggestion(_ref) {
     onMouseEnter: onMouseEnter
   }), getDisplay = function() {
     if ("string" == typeof suggestion) return suggestion;
-    var id = suggestion.id, display = suggestion.display;
-    return void 0 !== id && display ? display : id;
+    var orgId = suggestion.orgId, display = suggestion.display;
+    return void 0 !== orgId && display ? display : orgId;
   }, renderHighlightedDisplay = function(display) {
     var i = getSubstringIndex(display, query, ignoreAccents);
     return -1 === i ? React__default.createElement("span", style("display"), display) : React__default.createElement("span", style("display"), display.substring(0, i), React__default.createElement("b", style("highlight"), display.substring(i, i + query.length)), display.substring(i + query.length));
@@ -898,10 +898,7 @@ var makeTriggerRegex = function(trigger) {
         setSelectionAfterMentionChange: setSelectionAfterMentionChange
       });
       var mentions = getMentions(newValue, config);
-      navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome") ? (console.log("safari"), 
-      ev.nativeEvent.composed && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart)) : /iPhone|iPad|iPod/.test(navigator.userAgent) && !navigator.userAgent.includes("Safari") ? (console.log("webview"), 
-      ev.nativeEvent.composed && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart)) : (console.log("other browser"), 
-      ev.nativeEvent.isComposing && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart));
+      navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome") ? ev.nativeEvent.composed && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart) : /iPhone|iPad|iPod/.test(navigator.userAgent) && !navigator.userAgent.includes("Safari") ? ev.nativeEvent.composed && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart) : ev.nativeEvent.isComposing && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
       var eventMock = {
         target: {
           value: newValue

diff --git a/packages/react-mentions/dist/react-mentions.esm.js b/packages/react-mentions/dist/react-mentions.esm.js
@@ -886,11 +886,11 @@ function Suggestion(_ref) {
       return suggestion;
     }
 
-    var id = suggestion.id,
+    var orgId = suggestion.orgId,
         display = suggestion.display;
 
-    if (id === undefined || !display) {
-      return id;
+    if (orgId === undefined || !display) {
+      return orgId;
     }
 
     return display;
@@ -1428,22 +1428,16 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
         // Safari 브라우저인 경우
-        console.log('safari');
-
         if (ev.nativeEvent.composed && selectionStart === selectionEnd) {
           _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
         }
       } else if (/iPhone|iPad|iPod/.test(navigator.userAgent) && !navigator.userAgent.includes('Safari')) {
         // WKWebView 또는 다른 iOS WebView인 경우
-        console.log('webview');
-
         if (ev.nativeEvent.composed && selectionStart === selectionEnd) {
           _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
         }
       } else {
         // 다른 브라우저의 경우
-        console.log('other browser');
-
         if (ev.nativeEvent.isComposing && selectionStart === selectionEnd) {
           _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
         }

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -18,6 +18,7 @@ import { ampli } from '../src/ampli';
 import '../styles/globals.css';
 import '@sopt-makers/ui/dist/index.css';
 import { ToastProvider } from '@sopt-makers/ui';
+import { MentionProvider } from '@components/feed/Mention/MentionContext';
 
 // 리액트 하이드레이션 에러를 피하기 위해 사용. 렌더링에 관여하지 않는 코드여서 if 문으로 분기처리
 if (typeof window !== 'undefined') {
@@ -93,36 +94,38 @@ function MyApp({ Component, pageProps }: AppProps) {
   }, []);
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <SEO />
-      <Script
-        id="gtag-base"
-        strategy="afterInteractive"
-        dangerouslySetInnerHTML={{
-          __html: `
+    <MentionProvider>
+      <QueryClientProvider client={queryClient}>
+        <SEO />
+        <Script
+          id="gtag-base"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
             (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
             new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
             j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
             'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
             })(window,document,'script','dataLayer', '${GTM_ID}');
           `,
-        }}
-      />
-      <Layout>
-        <ToastProvider>
-          <OverlayProvider>
-            {isServiceReady ? (
-              <>
-                <Header />
-                <Component {...pageProps} />
-              </>
-            ) : (
-              <Loader />
-            )}
-          </OverlayProvider>
-        </ToastProvider>
-      </Layout>
-    </QueryClientProvider>
+          }}
+        />
+        <Layout>
+          <ToastProvider>
+            <OverlayProvider>
+              {isServiceReady ? (
+                <>
+                  <Header />
+                  <Component {...pageProps} />
+                </>
+              ) : (
+                <Loader />
+              )}
+            </OverlayProvider>
+          </ToastProvider>
+        </Layout>
+      </QueryClientProvider>
+    </MentionProvider>
   );
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,83 +1,36 @@
 import { ampli } from '@/ampli';
 import { useQueryGetGroupBrowsingCard } from '@api/API_LEGACY/meeting/hooks';
-import { useInfinitePosts, useMutationUpdateLike } from '@api/post/hooks';
-import LikeButton from '@components/button/LikeButton';
+import { useInfinitePosts } from '@api/post/hooks';
 import Carousel from '@components/groupBrowsing/Carousel/Carousel';
 import GroupBrowsingSlider from '@components/groupBrowsingSlider/groupBrowsingSlider';
-import FeedItem from '@components/page/meetingDetail/Feed/FeedItem';
-import MeetingInfo from '@components/page/meetingDetail/Feed/FeedItem/MeetingInfo';
 import DesktopFeedListSkeleton from '@components/page/meetingDetail/Feed/Skeleton/DesktopFeedListSkeleton';
 import MobileFeedListSkeleton from '@components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton';
+import RenderPostsWithAds from '@components/page/meetingList/Advertisement';
 import FloatingButton from '@components/page/postList/FloatingButton';
 import { TabList } from '@components/tabList/TabList';
 import { Flex } from '@components/util/layout/Flex';
 import { TAKE_COUNT } from '@constants/feed';
-import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid';
 import { useDisplay } from '@hooks/useDisplay';
 import type { NextPage } from 'next';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { styled } from 'stitches.config';
 
 const Home: NextPage = () => {
-  const { isMobile, isTablet } = useDisplay();
-  const router = useRouter();
-  const { ref, inView } = useInView();
+  const { isTablet } = useDisplay();
 
-  const { data: postsData, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfinitePosts(TAKE_COUNT);
+  const { ref, inView } = useInView();
 
-  const { mutate: mutateLikeInAllPost } = useMutationUpdateLike(TAKE_COUNT);
+  const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfinitePosts(TAKE_COUNT);
 
   const { data: groupBrowsingCardData } = useQueryGetGroupBrowsingCard();
 
-  const handleClickLike =
-    (postId: number) => (mutateCb: (postId: number) => void) => (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      ampli.clickFeedlistLike({ location: router.pathname });
-      mutateCb(postId);
-    };
-
   useEffect(() => {
     if (inView && hasNextPage) {
       fetchNextPage();
     }
-  }, [inView, hasNextPage]);
-
-  const renderedPosts = postsData?.pages.map(post => {
-    if (!post) return;
-    return (
-      <Link href={`/post?id=${post?.id}`} key={post?.id}>
-        <FeedItem
-          /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-          /* @ts-ignore */
-          post={post}
-          LikeButton={
-            <LikeButton
-              isLiked={post.isLiked}
-              likeCount={post.likeCount}
-              onClickLike={handleClickLike(post.id)(mutateLikeInAllPost)}
-            />
-          }
-          onClick={() =>
-            ampli.clickFeedCard({
-              feed_id: post.id,
-              feed_upload: post.updatedDate,
-              feed_title: post.title,
-              feed_image_total: post.images ? post.images.length : 0,
-              feed_comment_total: post.commentCount,
-              feed_like_total: post.likeCount,
-              group_id: post.meeting.id,
-              platform_type: isMobile ? 'MO' : 'PC',
-              location: router.pathname,
-            })
-          }
-          HeaderSection={<MeetingInfo meetingInfo={post.meeting} />}
-        />
-      </Link>
-    );
-  });
+  }, [inView, hasNextPage, fetchNextPage]);
 
   return (
     <>
@@ -109,7 +62,6 @@ const Home: NextPage = () => {
             </SContentTitle>
             {groupBrowsingCardData && <GroupBrowsingSlider cardList={groupBrowsingCardData}></GroupBrowsingSlider>}
             <SContentTitle style={{ marginBottom: '0px' }}>최신 피드</SContentTitle>
-            <SMobileContainer>{renderedPosts}</SMobileContainer>
           </>
         ) : (
           <>
@@ -131,12 +83,11 @@ const Home: NextPage = () => {
             <Flex align="center" justify="center">
               <SContentTitle style={{ marginBottom: '0px' }}>최신 피드</SContentTitle>
             </Flex>
-            <SDesktopContainer align="center" gap={30}>
-              {renderedPosts}
-            </SDesktopContainer>
           </>
         )}
 
+        <RenderPostsWithAds />
+
         {isFetchingNextPage && isTablet && <MobileFeedListSkeleton count={3} />}
         {!isFetchingNextPage && hasNextPage ? (
           <div ref={ref} style={{ height: '1px' }} />
@@ -152,31 +103,6 @@ const Home: NextPage = () => {
 
 export default Home;
 
-const SDesktopContainer = styled(MasonryInfiniteGrid, {
-  margin: '$20 0',
-  a: {
-    width: '380px',
-  },
-});
-
-const SMobileContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  margin: 0,
-  '& a:not(:first-child)::before': {
-    content: '',
-    display: 'none',
-
-    '@tablet': {
-      display: 'block',
-      width: '100vw',
-      height: '8px',
-      marginLeft: 'calc(50% - 50vw)',
-      background: '$gray800',
-    },
-  },
-});
-
 const SContentTitle = styled('div', {
   fontStyle: 'H2',
   color: '$white',