Merge pull request #68 from Funssion-SWM/develop

추천 기능 추가

src/app/memos/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import Header from '@/components/shared/Header';
 import MemoViewer from '@/components/memo/MemoViewer';
-import { getMemoById } from '@/service/memos';
+import { getMemoById, getMemoRecommendationsById } from '@/service/memos';
 import LayoutWrapper from '@/components/shared/LayoutWrapper';
 import MemoSideBar from '@/components/memo/MemoSideBar';
 import { getCommentsByPostTypeAndPostId } from '@/service/comments';
@@ -28,6 +28,7 @@ export default async function MemoPage({ params: { slug } }: Props) {
   const commentData = getCommentsByPostTypeAndPostId('memo', memoId, cookie);
   const myData = checkUser(cookie);
   const questionsData = getQuestionsByMemoId(memoId);
+  const recommendationsData = getMemoRecommendationsById(memoId);
 
   const [
     {
@@ -48,12 +49,14 @@ export default async function MemoPage({ params: { slug } }: Props) {
     { isLike },
     comments,
     { id, isLogin, authority },
+    recommendations,
     questions,
   ] = await Promise.all([
     memoData,
     likeData,
     commentData,
     myData,
+    recommendationsData,
     questionsData,
   ]);
 
@@ -98,6 +101,7 @@ export default async function MemoPage({ params: { slug } }: Props) {
             authorId={authorId}
             comments={comments}
             questions={questions}
+            recommendations={recommendations}
             memoId={memoId}
             userId={id}
             isFollowed={isFollowed}

src/app/series/[slug]/page.tsx

@@ -4,7 +4,7 @@ import LayoutWrapper from '@/components/shared/LayoutWrapper';
 import { checkUser, getUserInfo } from '@/service/auth';
 import { getCommentsByPostTypeAndPostId } from '@/service/comments';
 import { getIsLike } from '@/service/like';
-import { getMemoById } from '@/service/memos';
+import { getMemoById, getMemoRecommendationsById } from '@/service/memos';
 import { getNotificationsTop30 } from '@/service/notification';
 import { getQuestionsByMemoId } from '@/service/questions';
 import { getSeriesById } from '@/service/series';
@@ -34,9 +34,23 @@ export default async function SeriesDetailPage({ params: { slug } }: Props) {
   );
   const myData = checkUser(cookie);
   const questionsData = getQuestionsByMemoId(memoInfoList[0].id);
+  const recommendationsData = getMemoRecommendationsById(memoInfoList[0].id);
 
-  const [memo, { isLike }, comments, { id, isLogin, authority }, questions] =
-    await Promise.all([memoData, likeData, commentData, myData, questionsData]);
+  const [
+    memo,
+    { isLike },
+    comments,
+    { id, isLogin, authority },
+    questions,
+    recommendation,
+  ] = await Promise.all([
+    memoData,
+    likeData,
+    commentData,
+    myData,
+    questionsData,
+    recommendationsData,
+  ]);
 
   const { isFollowed, followCnt, followerCnt } = await getUserInfo(
     memo.authorId,
@@ -63,6 +77,7 @@ export default async function SeriesDetailPage({ params: { slug } }: Props) {
           memo={memo}
           comments={comments}
           questions={questions}
+          recommendation={recommendation}
           isLike={isLike}
           userId={id}
           isLogin={isLogin}

src/components/memo/MemoSideBar.tsx

@@ -12,13 +12,16 @@ import QuestionsList from '../question/QuestionsList';
 import { useRouter } from 'next/navigation';
 import { notifyToast } from '@/service/notify';
 import { Rank } from '@/types/rank';
+import { Memo } from '@/types/memo';
+import MemosGrid from './MemosGrid';
 
 type Props = {
   authorName: string;
   authorProfileImagePath: string;
   authorId: number;
   comments: Comment[];
   questions: Question[];
+  recommendations: Memo[];
   memoId: number;
   userId: number;
   isFollowed: boolean;
@@ -35,6 +38,7 @@ export default function MemoSideBar({
   authorId,
   comments,
   questions,
+  recommendations,
   memoId,
   userId,
   isFollowed,
@@ -128,6 +132,11 @@ export default function MemoSideBar({
               </button>
             </>
           )}
+          {currnetCategory === 'recommendation' && (
+            <div className="p-2">
+              <MemosGrid memos={recommendations} colNum={1} />
+            </div>
+          )}
         </aside>
       )}
     </div>

src/components/memo/MemoSidebarHeader.tsx

@@ -119,13 +119,11 @@ export default function MemoSidebarHeader({
           onClick={() => onCategoryBtnClick('question')}
           isSelected={currentCategory === 'question'}
         />
-        {/* <BarBtn
+        <BarBtn
           text="추천"
-          onClick={() => {
-            alert('지원 예정입니다! 개발자들이 열심히 개발하고 있어요 :)');
-          }}
+          onClick={() => onCategoryBtnClick('recommendation')}
           isSelected={currentCategory === 'recommendation'}
-        /> */}
+        />
       </div>
     </div>
   );

src/components/memo/MemosGrid.tsx

@@ -20,6 +20,7 @@ export default function MemosGrid({
       className={`grid gap-4 grid-cols-1 
     ${
       {
+        1: '',
         2: 'lg:grid-cols-2',
         3: 'md:grid-cols-2 lg:grid-cols-3',
         4: 'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',