Merge pull request #252 from dreamyPatisiel/dev

[Dev to Main] 기술블로그 메뉴 원복을 위한 `dev` => `main` 머지

Author: minyoung22222

components/common/buttons/mainButtonsV2.tsx

@@ -32,7 +32,8 @@ export function MainButtonV2({
       {/* 아이콘 왼쪽 정렬 */}
       {iconPosition === 'left' && icon}
       {/* 텍스트 */}
-      <span className='p1 font-bold'>{text}</span>
+      <span className='p1 font-bold'>{text}</span>{' '}
+      {/* FIXME: 버튼 size마다 폰트 사이즈 조정 필요 */}
       {/* 아이콘 오른쪽 정렬 */}
       {iconPosition === 'right' && icon}
       {isPending && <Spinner width={16} height={16} color='var(--gray50)' />}

components/common/buttons/variants/textButton.ts

@@ -40,12 +40,13 @@ export const TextButtonVariants = ({
   size: TextButtonSize;
   fontWeight: TextButtonFontWeight;
 }) => {
+  const defaultClass = 'flex flex-row justify-center items-center gap-[0.8rem]';
   const { textbuttonColor, textbuttonSize, textbuttonLine, textbuttonFontWeight } =
     TextButtonVariantsClass;
   const colorClass = textbuttonColor[color];
   const sizeClass = textbuttonSize[size];
   const lineClass = textbuttonLine[line];
   const fontWeightClass = textbuttonFontWeight[fontWeight];
 
-  return cn(`${sizeClass} ${colorClass} ${lineClass} ${fontWeightClass}`);
+  return cn(`${defaultClass} ${sizeClass} ${colorClass} ${lineClass} ${fontWeightClass}`);
 };

components/features/main/MainTechBlogSection.tsx

@@ -0,0 +1,29 @@
+import dynamic from 'next/dynamic';
+
+import { useInfiniteTechBlogData } from '@pages/techblog/api/useInfiniteTechBlog';
+import {
+  MOBILE_MAIN_TECH_VIEW_SIZE,
+  TECH_VIEW_SIZE,
+} from '@pages/techblog/constants/techBlogConstants';
+
+import { useMediaQueryContext } from '@/contexts/MediaQueryContext';
+import { TechInfiniteDataType } from '@/types/infiniteQueryType';
+
+const DynamicTechBlogComponent = dynamic(
+  () => import('@components/features/main/dynamicTechBlogComponent'),
+);
+
+export default function MainTechBlogSection() {
+  const { isMobile } = useMediaQueryContext();
+
+  const VIEW_SIZE = isMobile ? MOBILE_MAIN_TECH_VIEW_SIZE : TECH_VIEW_SIZE;
+
+  const techblogData = useInfiniteTechBlogData(
+    'LATEST',
+    undefined,
+    undefined,
+    VIEW_SIZE,
+  ) as TechInfiniteDataType;
+
+  return <DynamicTechBlogComponent data={techblogData} skeletonCnt={2} type='main' />;
+}

components/features/main/dynamicTechBlogComponent.tsx

@@ -3,11 +3,6 @@ import React from 'react';
 import dynamic from 'next/dynamic';
 
 import NoMyInfoData from '@pages/myinfo/components/NoMyInfoData';
-import { useInfiniteTechBlogData } from '@pages/techblog/api/useInfiniteTechBlog';
-import {
-  MOBILE_MAIN_TECH_VIEW_SIZE,
-  TECH_VIEW_SIZE,
-} from '@pages/techblog/constants/techBlogConstants';
 import { TechCardProps } from '@pages/techblog/types/techBlogType';
 
 import { useObserver } from '@hooks/useObserver';
@@ -20,34 +15,26 @@ import {
 import { useMediaQueryContext } from '@/contexts/MediaQueryContext';
 import { TechInfiniteDataType } from '@/types/infiniteQueryType';
 
+import BookmarkComponent from '../techblog/BookmarkComponent';
 import DesktopMainTechCard from '../techblog/desktopMainTechCard';
 import GradientDiv from './gradientDiv';
 
 const DynamicTechCard = dynamic(() => import('@/pages/techblog/components/techCard'));
 
 export default function DynamicTechBlogComponent({
+  data,
   skeletonCnt,
   isScroll = true,
-  bottomDiv,
   type = 'main',
-  // data,
 }: {
+  data: TechInfiniteDataType;
   skeletonCnt: number;
   isScroll?: boolean;
-  bottomDiv?: React.MutableRefObject<null>;
-  type: 'main' | 'myinfo';
-  data?: TechInfiniteDataType; //FIXME: 추후에 수정 필요
+  type?: 'main' | 'myinfo';
 }) {
   const { isMobile } = useMediaQueryContext();
 
-  const VIEW_SIZE = isMobile ? MOBILE_MAIN_TECH_VIEW_SIZE : TECH_VIEW_SIZE;
-
-  const data = useInfiniteTechBlogData(
-    'LATEST',
-    undefined,
-    undefined,
-    VIEW_SIZE,
-  ) as TechInfiniteDataType;
+  const bottomDiv = React.useRef(null);
 
   const { techBlogData, isFetchingNextPage, hasNextPage, status, onIntersect } = data;
 
@@ -100,5 +87,19 @@ export default function DynamicTechBlogComponent({
     }
   };
 
-  return <>{getStatusComponent()}</>;
+  return (
+    <>
+      {type === 'main' ? (
+        <>{getStatusComponent()}</>
+      ) : (
+        <div className='flex flex-col gap-[2.4rem] pb-40'>
+          <BookmarkComponent />
+          <div>
+            {getStatusComponent()}
+            <div ref={bottomDiv} />
+          </div>
+        </div>
+      )}
+    </>
+  );
 }

components/features/techblog/BookmarkComponent.tsx

@@ -0,0 +1,35 @@
+import { useInfiniteMyInfoBookmark } from '@pages/myinfo/bookmark/api/useInfiniteMyInfoBookmark';
+import { MyinfoBookmarkDropdownProps } from '@pages/myinfo/bookmark/bookmarkType';
+
+import { useDropdownStore } from '@stores/dropdownStore';
+
+import { Dropdown } from '@components/common/dropdowns/dropdown';
+import MobileDropdown from '@components/common/dropdowns/mobileDropdown';
+
+import { useMediaQueryContext } from '@/contexts/MediaQueryContext';
+import { TechInfiniteDataType } from '@/types/infiniteQueryType';
+
+export default function BookmarkComponent() {
+  const { isMobile } = useMediaQueryContext();
+  const { sortOption } = useDropdownStore();
+
+  const myInfoBookmarkData = useInfiniteMyInfoBookmark(
+    sortOption as MyinfoBookmarkDropdownProps,
+  ) as TechInfiniteDataType;
+
+  const hasData =
+    myInfoBookmarkData?.techBlogData?.pages[0]?.data.content.length === 0 ? false : true;
+
+  return (
+    <div className='flex justify-between items-center'>
+      {isMobile ? <></> : <h1 className='h3 font-bold'>북마크</h1>}
+      {isMobile ? (
+        <div className='ml-auto'>
+          <MobileDropdown type='bookmark' />
+        </div>
+      ) : (
+        <Dropdown type='bookmark' disable={!hasData} />
+      )}
+    </div>
+  );
+}

components/features/techblog/desktopMainTechCard.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { usePostBookmarkStatus } from '@pages/techblog/api/usePostBookmarkStatus';
-import { ArticleViewBtn } from '@pages/techblog/components/techDetailCardSubComponent';
+import { ArticleViewTextButton } from '@pages/techblog/components/techDetailCardSubComponent';
 import { TechContent, TechInfo } from '@pages/techblog/components/techSubComponents';
 import { TechCardProps } from '@pages/techblog/types/techBlogType';
 
@@ -70,13 +70,7 @@ export default function DesktopMainTechCard({
       <div>
         <TechBlogImg id={id} thumbnailUrl={thumbnailUrl} rounded='rounded-[0.8rem]' size='small' />
 
-        <ArticleViewBtn
-          techArticleUrl={techArticleUrl}
-          fontSize='c1'
-          textIconGap={'mr-[0.8rem]'}
-          paddingY='pt-[1.6rem]'
-          iconSize='w-[6px] h-[20px]'
-        />
+        <ArticleViewTextButton techArticleUrl={techArticleUrl} paddingY='pt-[1.6rem]' />
       </div>
       <div>
         <div className='flex items-center justify-between border-white'>
@@ -105,6 +99,7 @@ export default function DesktopMainTechCard({
           date={regDate}
           company={company?.name}
           companyId={id}
+          className='pb-[0.7rem]'
         />
         <Link href={`${ROUTES.TECH_BLOG}/${id}`}>
           <TechContent content={contents} maxLines={4} className='mr-4' />

components/features/techblog/techBlogImg.tsx

@@ -31,7 +31,7 @@ const TechBlogImg: FC<TechBlogImgProps> = ({
   id,
   isLogoImage = false,
   thumbnailUrl,
-  rounded = 'rounded-[1.6rem]',
+  rounded = 'rounded-Radius16',
 }) => {
   const [techMainImgUrl, setTechMainImgUrl] = useState<string>(DefaultTechMainImg.src);
   useEffect(() => {

constants/NavListConstants.ts

@@ -3,5 +3,5 @@ import { ROUTES } from '@/constants/routes';
 /** nav 목록 */
 export const MENU_LISTS = [
   { key: 'pick', label: '픽픽픽 💘', route: ROUTES.PICKPICKPICK.MAIN },
-  // { key: 'techblog', label: '기술블로그 🧪', route: ROUTES.TECH_BLOG },
+  { key: 'techblog', label: '기술블로그 🧪', route: ROUTES.TECH_BLOG },
 ];

constants/routes.ts

@@ -22,6 +22,9 @@ const MY_INFO_ROUTES = {
   MY_COMMENT: '/myinfo/mywriting/mycomment' as const,
   BOOK_MARK: '/myinfo/bookmark' as const,
   ACCOUNT_DELETE: '/myinfo/account-delete' as const,
+  NOTIFICATIONS: '/myinfo/notifications' as const,
+  NOTIFICATION: '/myinfo/notifications/notification' as const,
+  SUBSCRIBE: '/myinfo/notifications/subscribe' as const,
 };
 
 export const ROUTES = {

pages/main/index.page.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 
 import QueryErrorBoundary from '@components/common/QueryErrorBoundary';
 import ArrowWithTitle from '@components/common/title/ArrowWithTitle';
+import MainTechBlogSection from '@components/features/main/MainTechBlogSection';
 import MainCardComponent from '@components/features/main/mainCard/MainCardComponent';
 import MetaHead from '@components/meta/MetaHead';
 
@@ -16,10 +17,6 @@ const DynamicPickComponent = dynamic(
   () => import('@components/features/main/dynamicPickComponent'),
 );
 
-const DynamicTechBlogComponent = dynamic(
-  () => import('@components/features/main/dynamicTechBlogComponent'),
-);
-
 export const MainPageLogo = () => {
   return (
     <div className='flex flex-col justify-center items-center mb-[8rem]'>
@@ -79,7 +76,7 @@ export default function Index() {
                 routeURL={TECH_PATH}
               />
               <QueryErrorBoundary type='section'>
-                <DynamicTechBlogComponent skeletonCnt={2} type='main' />
+                <MainTechBlogSection />
               </QueryErrorBoundary>
             </div>
           </section>