Feature/community

next.config.mjs

@@ -1,5 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  images: {
+    domains: [
+      'bzbz-file-bucket.s3.ap-northeast-2.amazonaws.com',
+      'userimage.bucket.s3.ap-northeast-2.amazonaws.com',
+      '*'
+    ]
+  },
   reactStrictMode: true,
   webpack: (config, { isServer }) => {
     if (isServer) {

package.json

@@ -23,6 +23,7 @@
     "react-query": "^3.39.3",
     "react-toastify": "^10.0.5",
     "remark-gfm": "^4.0.0",
+    "swiper": "^11.1.3",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

src/api/types/auth.ts

@@ -33,6 +33,7 @@ export interface IUserInfo {
   memberJob: string;
   memberNickName: string;
   memberSmsAgree: string;
+  imageUrl?: string;
 }
 
 export interface IWithdraw {

src/components/community/Communityindex.tsx

@@ -0,0 +1,35 @@
+'use client';
+import dynamic from 'next/dynamic';
+import React from 'react';
+import { useCurrentTalkStore } from '@/store/currentTalk.store';
+import InterestFilter from './interest/InterestFilter';
+import PostsLayout from './shared/PostsLayout';
+import MainContainer from '../shared/MainContainer';
+import WritePostButton from './shared/WritePostButton';
+import { useModalStore } from '@/store/modal.store';
+import CreateModal from './shared/modal/CreateModal';
+
+const CommunityHeader = dynamic(
+  () => import('@/components/community/shared/CommunityHeader'),
+  { ssr: false }
+);
+const PositionFilter = dynamic(
+  () => import('@/components/community/career/PositionFilter'),
+  { ssr: false }
+);
+
+const Communityindex = () => {
+  const { open } = useModalStore();
+  const { currentTalk } = useCurrentTalkStore();
+  return (
+    <MainContainer>
+      <CommunityHeader />
+      {currentTalk === 'career' ? <PositionFilter /> : <InterestFilter />}
+      <PostsLayout />
+      <WritePostButton />
+      {open ? <CreateModal /> : ''}
+    </MainContainer>
+  );
+};
+
+export default Communityindex;

src/components/community/PostDetailIndex.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import ToBackComunity from './shared/ToBackComunity';
+import PostDetail from './shared/PostDetail';
+import CommentsLayout from './comments/CommentsLayout';
+import WriteCommentLayout from './comments/WriteCommentLayout';
+import { useModalStore } from '@/store/modal.store';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import { useQuery } from 'react-query';
+import { getPostDetail } from './remote/post';
+import ConfirmModal from './shared/modal/ConfirmModal';
+
+const DeleteModal = dynamic(() => import('./shared/modal/DeleteModal'), { ssr: false });
+
+const PostDetailIndex = () => {
+  const { open } = useModalStore();
+  const router = useRouter();
+  const { id } = router.query as { id: string };
+
+  const { data: postData } = useQuery(['post', id], () => getPostDetail(id), {
+    enabled: id != null
+  });
+
+  if (postData?.status == 'FAIL') {
+    return <ConfirmModal />;
+  }
+
+  return (
+    <div className="mx-4">
+      <div className="h-[60px]" />
+      <ToBackComunity />
+      <PostDetail postData={postData && postData} />
+      {/* 구분선 */}
+      <div className="w-full h-1 bg-gray-100" />
+      {/* 댓글자리 */}
+      <CommentsLayout />
+      {/* 댓글입력자리 */}
+      <WriteCommentLayout postId={id} />
+      {open ? <DeleteModal /> : ''}
+    </div>
+  );
+};
+
+export default PostDetailIndex;