[FEAT] 인플루언서 추천 피드 - 지현

package.json

@@ -18,6 +18,8 @@
     "@emotion/styled": "^11.14.0",
     "@types/react-datepicker": "^7.0.0",
     "axios": "^1.11.0",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "react": "^19.1.0",
     "react-cookie": "^8.0.1",
     "react-datepicker": "^8.4.0",

src/components/feed/FeedPost.tsx

@@ -17,7 +17,7 @@ const Container = styled.div`
 `;
 
 const BorderBottom = styled.div`
-  width: 94.8%;
+  width: 100%;
   /* min-width: 280px;
   max-width: 500px; */
   margin: 0 auto;

src/components/feed/RecommendedFeedCard.tsx

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+import PostBody from '../common/Post/PostBody';
+import PostFooter from '../common/Post/PostFooter';
+import PostHeader from '../common/Post/PostHeader';
+import type { PostData } from '../../types/post';
+import { colors } from '@/styles/global/global';
+import lookmoreInfluencer from '@/assets/feed/lookmore-influencer.svg';
+
+interface RecommendedFeedCardProps extends PostData {
+  aliasColor?: string;
+}
+
+const RecommendedFeedCard = (postData: RecommendedFeedCardProps) => {
+  const handleCardClick = () => {
+    window.open(`/feed/${postData.feedId}`, '_blank');
+  };
+
+  return (
+    <CardContainer onClick={handleCardClick}>
+      <PostHeader {...postData} aliasName={postData.alias} aliasColor={postData.aliasColor} />
+      <PostBodyWrapper>
+        <PostBody {...postData} />
+        <PostFooter isMyFeed={false} {...postData} />
+      </PostBodyWrapper>
+    </CardContainer>
+  );
+};
+
+const CardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 12px;
+  background-color: ${colors.darkgrey.dark};
+  border-radius: 12px;
+  width: 100%;
+  height: 100%;
+
+  > *:last-child {
+    margin-top: auto;
+  }
+
+  .right {
+    display: none;
+  }
+`;
+
+const PostBodyWrapper = styled.div`
+  .content {
+    -webkit-line-clamp: 3 !important;
+    min-height: 60px;
+  }
+
+  /* prettier-ignore */
+  && img.lookmore-icon,
+  && .lookmore-icon {
+    content: url("${lookmoreInfluencer}") !important;
+  }
+
+  > div > div:first-of-type {
+    pointer-events: none;
+  }
+`;
+
+export default RecommendedFeedCard;

src/components/feed/RecommendedFeedSection.tsx

@@ -0,0 +1,106 @@
+import styled from '@emotion/styled';
+import RecommendedFeedCard from './RecommendedFeedCard';
+import { colors, typography } from '@/styles/global/global';
+import useEmblaCarousel from 'embla-carousel-react';
+import type { EmblaOptionsType } from 'embla-carousel';
+import { allMockRecommendedFeeds } from '@/mocks/recommendedFeeds.mock';
+
+
+const SectionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${colors.black.main};
+`;
+
+const SectionHeader = styled.div`
+  padding: 40px 20px 20px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const HeaderText = styled.h2`
+  color: ${colors.white};
+  font-size: ${typography.fontSize.xl};
+  font-weight: ${typography.fontWeight.bold};
+  line-height: normal;
+  margin-bottom: 8px;
+`;
+
+const SubText = styled.p`
+  color: ${colors.grey[100]};
+  font-size: ${typography.fontSize.sm};
+  font-weight: ${typography.fontWeight.medium};
+  line-height: 20px;
+  margin: 0;
+`;
+
+const EmblaViewport = styled.div`
+  overflow: hidden;
+  padding: 0 20px;
+`;
+
+const EmblaContainer = styled.div`
+  display: flex;
+  touch-action: pan-y pinch-zoom;
+  gap: 12px;
+`;
+
+const EmblaSlide = styled.div`
+  transform: translate3d(0, 0, 0);
+  flex: 0 0 calc(100% - 10px);
+  min-width: 0;
+  padding-bottom: 40px;
+`;
+
+const BorderBottom = styled.div`
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 6px;
+  background: #1c1c1c;
+`;
+
+// Component
+interface RecommendedFeedSectionProps {
+  sectionIndex?: number;
+}
+
+const RecommendedFeedSection = ({ sectionIndex = 0 }: RecommendedFeedSectionProps) => {
+  const options: EmblaOptionsType = {
+    align: 'center',
+    slidesToScroll: 1,
+    containScroll: 'trimSnaps',
+  };
+
+  const [emblaRef] = useEmblaCarousel(options);
+
+  // 섹션 인덱스에 따라 다른 5개 게시글 선택
+  const startIndex = (sectionIndex * 5) % allMockRecommendedFeeds.length;
+  const selectedFeeds = [
+    ...allMockRecommendedFeeds.slice(startIndex, startIndex + 5),
+    ...allMockRecommendedFeeds.slice(0, Math.max(0, startIndex + 5 - allMockRecommendedFeeds.length)),
+  ].slice(0, 5);
+
+  return (
+    <SectionContainer>
+      <SectionHeader>
+        <HeaderText>지금 뜨는 추천 글</HeaderText>
+        <SubText>비슷한 취향의 인플루언서, 작가가</SubText>
+        <SubText>추천하는 도서를 만나보세요.</SubText>
+      </SectionHeader>
+      <EmblaViewport ref={emblaRef}>
+        <EmblaContainer>
+          {selectedFeeds.map(feed => (
+            <EmblaSlide key={feed.feedId}>
+              <RecommendedFeedCard {...feed} />
+            </EmblaSlide>
+          ))}
+        </EmblaContainer>
+      </EmblaViewport>
+      <BorderBottom />
+    </SectionContainer>
+  );
+};
+
+export default RecommendedFeedSection;

src/components/feed/TotalFeed.tsx

@@ -1,25 +1,34 @@
 import styled from '@emotion/styled';
 import FollowList from './FollowList';
 import FeedPost from './FeedPost';
+import RecommendedFeedSection from './RecommendedFeedSection';
 import type { FeedListProps } from '../../types/post';
 import { colors, typography } from '@/styles/global/global';
 
-const TotalFeed = ({ showHeader, posts = [], isTotalFeed, isLast = false }: FeedListProps) => {
+const TotalFeed = ({ showHeader, posts = [], isTotalFeed }: FeedListProps) => {
   const hasPosts = posts.length > 0;
 
   return (
     <Container>
       <FollowList />
       {hasPosts ? (
-        posts.map((post, index) => (
-          <FeedPost
-            key={`${post.feedId}-${index}`}
-            showHeader={showHeader}
-            isMyFeed={isTotalFeed}
-            isLast={isLast && index === posts.length - 1}
-            {...post}
-          />
-        ))
+        <>
+          {posts.map((post, index) => (
+            <>
+              <FeedPost
+                key={`${post.feedId}-${index}`}
+                showHeader={showHeader}
+                isMyFeed={isTotalFeed}
+                isLast={false}
+                {...post}
+              />
+              {/* 10개마다 추천 섹션 반복 표시 */}
+              {(index + 1) % 10 === 0 && (
+                <RecommendedFeedSection sectionIndex={Math.floor((index + 1) / 10) - 1} />
+              )}
+            </>
+          ))}
+        </>
       ) : (
         <EmptyState>
           <div>피드에 작성된 글이 없어요</div>