Merge pull request #94 from KGU-C-Lab/refactor/#93

홈 및 블로그 코드 개선 완료

apps/member/src/api/blog.ts

@@ -1,14 +1,25 @@
-import { PaginationType } from '@type/api';
+import { BaseResponse, PaginationType } from '@type/api';
 import { server } from './server';
 import { createCommonPagination } from '@utils/api';
 import { END_POINT } from '@constants/api';
-import type { BlogPostItem } from '@type/blog';
-
-// 블로그 게시글 조회
-export const getMyBlog = async (page: number, size: number) => {
+import type { BlogPost } from '@type/blog';
+/**
+ * 블로그 포스트 조회
+ */
+export const getBlog = async (page: number, size: number) => {
   const params = { page, size };
-  const { data } = await server.get<PaginationType<BlogPostItem>>({
-    url: createCommonPagination(END_POINT.MY_BLOG, params),
+  const { data } = await server.get<PaginationType<BlogPost>>({
+    url: createCommonPagination(END_POINT.BLOG, params),
+  });
+
+  return data;
+};
+/**
+ * 블로그 포스트 상세 조회
+ */
+export const getBlogDetail = async (id: number) => {
+  const { data } = await server.get<BaseResponse<BlogPost>>({
+    url: END_POINT.BLOG_DETAIL(id),
   });
 
   return data;

apps/member/src/components/common/Content/Content.tsx

@@ -5,7 +5,7 @@ interface ContentProps {
 }
 
 const Content = ({ children }: ContentProps) => {
-  return <div className="xl:w-3/4 w-full space-y-4 rounded-lg">{children}</div>;
+  return <div className="w-full space-y-4">{children}</div>;
 };
 
 export default Content;

apps/member/src/components/common/EmptyBox/EmptyBox.tsx

@@ -0,0 +1,9 @@
+import { StrictPropsWithChildren } from '@type/component';
+
+interface EmptyBoxProps extends StrictPropsWithChildren {}
+
+const EmptyBox = ({ children }: EmptyBoxProps) => {
+  return <p className="w-full text-center text-gray-500">{children}</p>;
+};
+
+export default EmptyBox;

apps/member/src/components/common/Nav/Nav.tsx

@@ -1,10 +1,8 @@
+import useModal from '@hooks/common/useModal';
 import { Link, useLocation } from 'react-router-dom';
 import { PATH } from '@constants/path';
-import { FiSearch } from 'react-icons/fi';
-import { FiUser } from 'react-icons/fi';
-import { FiGrid } from 'react-icons/fi';
-import useModal from '@hooks/common/useModal';
 import { MODE } from '@constants/environment';
+import { FiSearch, FiUser, FiGrid } from 'react-icons/fi';
 
 const Nav = () => {
   const location = useLocation();
@@ -22,19 +20,19 @@ const Nav = () => {
     }
   };
 
-  const onClickNotReady = () => {
-    openModal({
+  const handleNotReadyClick = () => {
+    return openModal({
       content: '해당 기능은 준비중입니다.',
     });
   };
 
   return (
     <nav className="fixed top-0 left-0 z-30 w-full bg-white border-b">
-      <div className="section flex h-[61px] items-center justify-between py-1.5">
+      <div className="container flex items-center justify-between h-14">
         <div className="flex items-center gap-10 lg:gap-20">
           <Link className="flex items-center gap-2 text-xl" to={PATH.MAIN}>
-            <img src="/favicon.ico" alt="c-lab" className="size-8" />
-            <h1 className="font-bold">PLAY</h1>
+            <img src="/favicon.ico" alt="c-lab" className="size-7" />
+            <h1 className="font-bold">멤버스</h1>
           </Link>
           <div className="hidden gap-10 text-sm font-semibold sm:flex">
             <Link to={PATH.MAIN} className={selected(PATH.MAIN)}>
@@ -58,7 +56,7 @@ const Nav = () => {
               회비
             </Link>
             {MODE !== 'production' && (
-              <button className="text-red-500" onClick={onClickNotReady}>
+              <button className="text-red-500" onClick={handleNotReadyClick}>
                 관리
               </button>
             )}
@@ -67,10 +65,10 @@ const Nav = () => {
         <div className="flex gap-5">
           {MODE !== 'production' && (
             <>
-              <button onClick={onClickNotReady}>
+              <button onClick={handleNotReadyClick}>
                 <FiSearch size={20} />
               </button>
-              <button onClick={onClickNotReady}>
+              <button onClick={handleNotReadyClick}>
                 <FiGrid size={20} />
               </button>
             </>

apps/member/src/components/common/Notice/Notice.tsx

@@ -0,0 +1,71 @@
+import useModal from '@hooks/common/useModal';
+import { calculateDDay, formattedDate } from '@utils/date';
+import { cn } from '@utils/string';
+import { useCallback } from 'react';
+
+interface NoticeProps {
+  title: string;
+  content: string;
+  date: string;
+  showDDay?: boolean;
+  className?: string;
+}
+
+const Notice = ({
+  title,
+  content,
+  date,
+  showDDay = false,
+  className,
+}: NoticeProps) => {
+  const { openModal } = useModal();
+
+  const handleNoticeClick = useCallback(() => {
+    openModal({
+      title: '📆 공지',
+      content,
+    });
+  }, [content, openModal]);
+
+  let renderDDay: React.ReactNode | null = null;
+  if (showDDay) {
+    const dDay = calculateDDay(date);
+    renderDDay = (
+      <div
+        className={cn(
+          'min-w-[4rem] rounded-full text-center text-sm text-white font-semibold bg-red-400',
+          {
+            'bg-yellow-400': dDay >= 14,
+            'bg-sky-400': dDay >= 30,
+          },
+        )}
+      >
+        D-{dDay}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'w-full hover:bg-gray-100 rounded-lg transition-colors',
+        className,
+      )}
+    >
+      <button
+        className="flex items-center justify-between w-full gap-2 outline-none cursor-pointer"
+        onClick={handleNoticeClick}
+      >
+        <div className="flex items-center gap-2">
+          {showDDay && renderDDay}
+          <p className="w-full truncate">{title}</p>
+        </div>
+        <p className="text-sm text-gray-500 whitespace-nowrap">
+          {formattedDate(date)}
+        </p>
+      </button>
+    </div>
+  );
+};
+
+export default Notice;

apps/member/src/components/common/PostCard/PostCard.tsx

@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { createImageUrl } from '@utils/api';
+import { cn } from '@utils/string';
+import Image from '../Image/Image';
+
+interface PostCardProps {
+  to: string;
+  title: string;
+  subTitle?: string;
+  imageUrl?: string;
+}
+
+const PostCard = ({ to, title, subTitle, imageUrl }: PostCardProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => navigate(to), [navigate, to]);
+
+  return (
+    <div
+      role="button"
+      onClick={handleClick}
+      className="flex flex-col items-center p-2 space-y-2 transition rounded-lg cursor-pointer hover:bg-gray-100"
+    >
+      <Image
+        src={createImageUrl(imageUrl)}
+        alt={title}
+        width="w-48"
+        height="h-48"
+        className="object-cover border rounded-lg"
+      />
+      <div className="w-48">
+        <p
+          className={cn('break-keep', {
+            'text-center': !subTitle,
+          })}
+        >
+          {title}
+        </p>
+        {subTitle && (
+          <p className="text-sm truncate text-clab-main-light">{subTitle}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PostCard;

apps/member/src/components/common/Section/Section.tsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames';
+import { cn } from '@utils/string';
 import { type PropsWithChildren } from 'react';
+import type { StrictPropsWithChildren } from '@type/component';
 
-interface SectionProps extends PropsWithChildren {
+interface SectionProps extends StrictPropsWithChildren {
   className?: string;
 }
 
@@ -10,17 +11,14 @@ interface SectionHeaderProps extends PropsWithChildren {
   description?: string;
 }
 
-interface SectionBodyProps extends PropsWithChildren {
+interface SectionBodyProps extends StrictPropsWithChildren {
   className?: string;
 }
 
 const Section = ({ className, children }: SectionProps) => {
   return (
     <div
-      className={classNames(
-        'flex flex-col rounded-lg border bg-white p-4',
-        className,
-      )}
+      className={cn('flex flex-col rounded-lg border bg-white p-4', className)}
     >
       {children}
     </div>
@@ -40,7 +38,7 @@ Section.Header = ({ children, title, description }: SectionHeaderProps) => {
 };
 
 Section.Body = ({ className, children }: SectionBodyProps) => {
-  return <div className={classNames('mt-4', className)}>{children}</div>;
+  return <div className={cn('mt-4', className)}>{children}</div>;
 };
 
 export default Section;

apps/member/src/components/common/Section/SectionSkeleton.tsx

@@ -0,0 +1,11 @@
+import Section from './Section';
+
+const SectionSkeleton = () => {
+  return (
+    <Section className="w-full h-96 animate-pulse">
+      <Section.Header title=""></Section.Header>
+    </Section>
+  );
+};
+
+export default SectionSkeleton;

apps/member/src/components/common/Section/index.ts

@@ -0,0 +1,2 @@
+export { default as Section } from './Section';
+export { default as SectionSkeleton } from './SectionSkeleton';

apps/member/src/components/common/TextBanner/TextBanner.tsx

@@ -0,0 +1,21 @@
+interface TextBannerProps {
+  label: string;
+  description?: string;
+}
+
+const TextBanner = ({ label, description }: TextBannerProps) => {
+  return (
+    <div className="py-4 text-xl font-semibold text-center">
+      <h3 className="inline-block font-bold text-transparent bg-gradient-to-r from-sky-600 via-indigo-500 to-purple-500 bg-clip-text">
+        {label}
+      </h3>
+      {description && (
+        <p className="flex justify-center gap-2 text-xs text-gray-500">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default TextBanner;