feat: PostDetailContent 및 모집 상세 페이지 구현

src/components/postDetail/PostDetailContent/PostDetailContent.module.scss

@@ -0,0 +1,66 @@
+.main-banner {
+  width: 100%;
+}
+
+.main-section {
+  @include responsive(T) {
+    padding: 0 4rem;
+  }
+
+  @include responsive(M) {
+    padding: 0 1.5rem;
+  }
+
+  width: 100%;
+
+  .container {
+    @include responsive(T) {
+      max-width: 100%;
+      padding-top: 3.2rem;
+    }
+
+    max-width: 112rem;
+    margin: 0 auto;
+    padding: 2.4rem 0 12rem;
+
+    .section-top {
+      @include column-flexbox(center, start, 1.6rem);
+
+      @include responsive(T) {
+        padding-bottom: 1.6rem;
+      }
+
+      width: 100%;
+      padding-bottom: 3.2rem;
+    }
+
+    .section-bottom {
+      @include flexbox(between, start);
+
+      @include responsive(T) {
+        @include column-flexbox($gap: 0);
+      }
+
+      width: 100%;
+
+      &.no-flex {
+        display: block;
+      }
+
+      .section-left {
+        @include column-flexbox(start, start, 1.6rem);
+
+        @include responsive(T) {
+          max-width: 100%;
+        }
+
+        width: 100%;
+        max-width: 74.3rem;
+
+        &.no-flex {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}

src/components/postDetail/PostDetailContent/index.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames/bind';
+
+import { formatCategoryToGameNameEN, splitDescByDelimiter, splitTitleByDelimiter } from '@/utils';
+
+import Banner from '@/components/layout/Banner';
+import DefaultBanner from '@/components/postDetail/DefaultBanner';
+import ImageSlide from '@/components/postDetail/ImageSlide';
+import MapPreview from '@/components/postDetail/MapPreview';
+import PostDescription from '@/components/postDetail/PostDesciption';
+import PostTitle from '@/components/postDetail/PostTitle';
+import ReviewList from '@/components/postDetail/ReviewList';
+import { POST_DETAIL_DATA } from '@/constants/mockData/postDetail';
+import { REVIEW_LIST_DATA } from '@/constants/mockData/reviewList';
+
+import styles from './PostDetailContent.module.scss';
+
+const cx = classNames.bind(styles);
+
+const {
+  title: unrefinedTitle,
+  description: unrefinedDesc,
+  category,
+  price,
+  address,
+  bannerImageUrl,
+  subImageUrls,
+} = POST_DETAIL_DATA;
+
+const nickname = '주인장';
+const email = '[email protected]';
+
+const PostContent = () => {
+  const isImageSlide = subImageUrls.length > 0;
+  const imageUrls = isImageSlide
+    ? [bannerImageUrl, ...subImageUrls.map((item: { id: number; imageUrl: string }) => item.imageUrl)]
+    : [bannerImageUrl];
+
+  const isOffline = price === 0;
+  const isOnline = price === 1;
+  const isStrategy = price === 3;
+  const isReservationAvailable = isOffline || isOnline;
+
+  const { title } = splitTitleByDelimiter(unrefinedTitle);
+  const { desc, discordLink } = splitDescByDelimiter(unrefinedDesc);
+
+  return (
+    <>
+      <section className={cx('main-banner')}>
+        <Banner gameName={formatCategoryToGameNameEN(category)} />
+      </section>
+      <section className={cx('main-section')}>
+        <div className={cx('container')}>
+          <section className={cx('section-top')}>
+            <PostTitle price={price} title={title} />
+            {isImageSlide ? (
+              <ImageSlide imageList={imageUrls} />
+            ) : (
+              <DefaultBanner url={bannerImageUrl} gameName={formatCategoryToGameNameEN(category)} />
+            )}
+          </section>
+          <section className={cx('section-bottom', { 'no-flex': !isReservationAvailable })}>
+            <section className={cx('section-left', { 'no-flex': !isReservationAvailable })}>
+              {isStrategy ? <PostDescription desc={desc} /> : <PostDescription desc={desc} discordLink={discordLink} />}
+              {isOffline && <MapPreview address={address} />}
+              {isReservationAvailable && <ReviewList list={REVIEW_LIST_DATA} nickname={nickname} email={email} />}
+            </section>
+            {isReservationAvailable && <section></section>}
+          </section>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default PostContent;

src/constants/mockData/postDetail.ts

@@ -0,0 +1,45 @@
+import { IMAGE_LIST } from './imageList';
+
+export const POST_DETAIL_DATA = {
+  id: 7,
+  userId: 21,
+  title: '투어&iquest[성인만 가능]카배 CK 클랜원 모집합니다.&iquest0&iquest강남 SBXG 포탈 PC방&iquest3',
+  description:
+    '둠칫 둠칫 두둠칫 우리 클랜에 들어오세요\n둠칫 둠칫 두둠칫 우리 클랜에 들어오세요\n둠칫 둠칫 두둠칫 우리 클랜에 들어오세요&iquesthttps://github.com/sprint-team3/GGF',
+  category: '투어',
+  price: 1,
+  address: '서울특별시 강남구 테헤란로 427',
+  bannerImageUrl: IMAGE_LIST[0],
+  subImageUrls: [
+    {
+      id: 1,
+      imageUrl: IMAGE_LIST[1],
+    },
+    {
+      id: 2,
+      imageUrl: IMAGE_LIST[2],
+    },
+    {
+      id: 3,
+      imageUrl: IMAGE_LIST[3],
+    },
+  ],
+  schedules: [
+    {
+      id: 1,
+      date: '2023-12-01',
+      startTime: '12:00',
+      endTime: '13:00',
+    },
+    {
+      id: 2,
+      date: '2023-12-05',
+      startTime: '12:00',
+      endTime: '13:00',
+    },
+  ],
+  reviewCount: 5,
+  rating: 4,
+  createdAt: '2023-12-31T21:28:50.589Z',
+  updatedAt: '2023-12-31T21:28:50.589Z',
+};

src/pages/[game]/[postId]/index.tsx

@@ -0,0 +1,10 @@
+import Layout from '@/components/layout/Layout';
+import PostConent from '@/components/postDetail/PostDetailContent';
+
+const PostPage = () => {
+  return <PostConent />;
+};
+
+export default PostPage;
+
+PostPage.FullLayout = Layout;

src/utils/dataMap.ts

@@ -17,3 +17,12 @@ export const splitTitleByDelimiter = (inputString: string) => {
     MaxCount,
   };
 };
+
+export const splitDescByDelimiter = (inputString: string) => {
+  const [desc, discordLink] = inputString.split(DELIMITER);
+
+  return {
+    desc,
+    discordLink,
+  };
+};