[#227] ✨ 프로젝트 상세 페이지 (#235)

* [#227] ✨ add community id page

* [#227] 💄 change people plus icon

* [#227] ✨ add calculate date diff util funcs

* [#227] 🔧 update types

* [#227] ✨ add constants

* [#227] ✨ portfolio detail page

* [#227] ✨ project detail page

* [#227] 🐛 solve param relates issues

* [#227] ♻️ refactor content viewer

* [#227] 🐛 solve build warnings

* [#227] 🐛 solve content viewer any type

Author: KingNono1030

src/app/(pages)/community/[id]/page.tsx

@@ -1,80 +1,24 @@
-import { useState } from 'react'
+'use client'
+
+import { useParams } from 'next/navigation'
 
 import {
-  IcAnswerBlue,
   IcBin,
   IcComment,
   IcEdit,
   IcEyeOpen,
   IcHeart,
-  IcPencil,
-  IcPeopleMinus,
-  IcPeoplePlus,
-  IcSearch,
   IcShare,
 } from '@/assets/IconList'
-import { recruitmentStatusMap } from '@/constants/stateToLabelMaps'
-import { cn } from '@/lib/utils'
 import { CommunityDetail } from '@/types/api/Community.types'
-import { TeamRecruitmentListItem, TeamType } from '@/types/api/Team.types'
-import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
-import { Highlight as TiptapHighlight } from '@tiptap/extension-highlight'
-import SubScript from '@tiptap/extension-subscript'
-import { Superscript } from '@tiptap/extension-superscript'
-import { TextAlign } from '@tiptap/extension-text-align'
-import { TextStyle } from '@tiptap/extension-text-style'
-import { Underline } from '@tiptap/extension-underline'
-import { StarterKit } from '@tiptap/starter-kit'
-import hljs from 'highlight.js'
-import bash from 'highlight.js/lib/languages/bash'
-import css from 'highlight.js/lib/languages/css'
-import js from 'highlight.js/lib/languages/javascript'
-import json from 'highlight.js/lib/languages/json'
-import ts from 'highlight.js/lib/languages/typescript'
-import html from 'highlight.js/lib/languages/xml'
-import 'highlight.js/styles/github.css'
-import parse, { Element } from 'html-react-parser'
-import { all, createLowlight } from 'lowlight'
 
 import { Avatar } from '@/components/common/avatar'
 import { Button, Clickable } from '@/components/common/button'
 import { Chip } from '@/components/common/chip'
-import { Box, Container, Grid } from '@/components/common/containers'
+import { Container } from '@/components/common/containers'
 import { Divider } from '@/components/common/divider'
-import { TextInput } from '@/components/common/input'
-import { Switch } from '@/components/common/switch/Switch'
-import { Highlight, Text } from '@/components/common/text'
-import { Pagination } from '@/components/shared/pagination'
-import { Select } from '@/components/shared/select'
-import { CareerSelect } from '@/components/shared/select/CareerSelect'
-import { TeamRecruitmentCard } from '@/components/team/TeamRecruitmentCard'
-
-import { usePagination } from '@/hooks/usePagination'
-import { useToggle } from '@/hooks/useToggle'
-
-const stackOptions = [
-  { label: '자바스크립트', value: 'Javascript' },
-  { label: 'Css', value: 'Css' },
-  { label: 'HTML', value: 'HTML' },
-  { label: '타입스크립트', value: 'Typescript' },
-]
-const positionOptions = [
-  { label: '프론트엔드', value: 'frontend' },
-  { label: '백엔드', value: 'backend' },
-  { label: '풀스택', value: 'fullstack' },
-]
-
-const teamTypeMap: Record<TeamType, string> = {
-  STUDY: '스터디',
-  MENTORING: '멘토링',
-  PROJECT: '프로젝트',
-}
-
-interface CommunityDetailPageProps {
-  params: {
-    id: string
-  }
-}
+import { Text } from '@/components/common/text'
+import { ContentViewer } from '@/components/shared/contentViewer'
 
 const dummyCommunityDetail: CommunityDetail = {
   id: 1,
@@ -133,21 +77,12 @@ const useToggle = ({ initialValue = false }: UseToggleProps) => {
   isComment: true,
 }
 
-// create a lowlight instance with all languages loaded
-const lowlight = createLowlight(all)
+export default function CommunityDetailPage(): JSX.Element {
+  const params = useParams<{ id: string }>()
 
-// Register specific languages
-lowlight.register('html', html)
-lowlight.register('css', css)
-lowlight.register('js', js)
-lowlight.register('ts', ts)
-lowlight.register('json', json)
-lowlight.register('bash', bash)
+  const { id } = params
+  console.log(id)
 
-export default async function CommunityDetailPage({
-  params,
-}: CommunityDetailPageProps): Promise<JSX.Element> {
-  const { id } = await params
   const data = dummyCommunityDetail
   const {
     communityTitle,
@@ -168,35 +103,6 @@ export default async function CommunityDetailPage({
   }
 
   // HTML 파싱 옵션 설정
-  const options = {
-    replace: domNode => {
-      if (
-        domNode instanceof Element &&
-        domNode.name === 'code' &&
-        domNode.attribs.class
-      ) {
-        // language-xxx 형식에서 언어 추출
-        const language = domNode.attribs.class.replace('language-', '')
-        try {
-          // 코드 내용 하이라이팅
-          const highlightedCode = hljs.highlight(
-            domNode.children[0].data || '',
-            { language }
-          ).value
-
-          return (
-            <code
-              className={domNode.attribs.class}
-              dangerouslySetInnerHTML={{ __html: highlightedCode }}
-            />
-          )
-        } catch (e) {
-          // 하이라이팅 실패 시 원본 반환
-          return domNode
-        }
-      }
-    },
-  }
 
   return (
     <Container className='mx-auto my-80 flex flex-col gap-20'>
@@ -234,7 +140,7 @@ export default async function CommunityDetailPage({
             {communityTitle}
           </Text.Heading>
         </div>
-        <div className='tiptap mb-20'>{parse(communityContent, options)}</div>
+        <ContentViewer content={communityContent} />
         <div className='flex items-center gap-8'>
           {isComment && (
             <Clickable
@@ -291,5 +197,3 @@ export default async function CommunityDetailPage({
     </Container>
   )
 }
-
-// ...

src/app/(pages)/community/new/page.tsx

@@ -3,10 +3,7 @@
 import { Controller, useForm } from 'react-hook-form'
 
 import { commuintyCategoryOptions } from '@/constants/selectOptions'
-import {
-  COMMUNITY_EDITOR_CONTENT,
-  TEAM_RECRUITMENT_EDITOR_CONTENT,
-} from '@/constants/tiptap'
+import { COMMUNITY_EDITOR_CONTENT } from '@/constants/tiptap'
 import { TipTapEditor } from '@/lib/tiptap/TipTapEditor'
 import { CreateCommunityRequest } from '@/types/api/Community.types'
 

src/app/(pages)/portfolio/[id]/page.tsx

@@ -1,5 +1,8 @@
+'use client'
+
 import Image from 'next/image'
 import Link from 'next/link'
+import { useParams } from 'next/navigation'
 
 import {
   IcBin,
@@ -16,27 +19,20 @@ import {
 } from '@/constants/stateToLabelMaps'
 import { LINK_ICON_MAP } from '@/constants/valueIconMap'
 import { CreatePortfolioResponse } from '@/types/api/Portfolio.types'
-import hljs from 'highlight.js'
-import parse, { Element } from 'html-react-parser'
 
 import { Avatar } from '@/components/common/avatar'
 import { Button, Clickable } from '@/components/common/button'
 import { Chip } from '@/components/common/chip'
 import { Container } from '@/components/common/containers'
 import { Divider } from '@/components/common/divider'
 import { Text } from '@/components/common/text'
+import { ContentViewer } from '@/components/shared/contentViewer'
 
 import {
   calculatePeriod,
   calculateTotalCareerPeriod,
 } from '@/utils/calculatePeriod'
 
-interface PortfolioDetailPageProps {
-  params: {
-    id: string
-  }
-}
-
 const dummyPortfolioDetail: CreatePortfolioResponse = {
   id: 1,
   writer: {
@@ -140,10 +136,9 @@ const dummyPortfolioDetail: CreatePortfolioResponse = {
   ],
 }
 
-export default async function PortfolioDetailPage({
-  params,
-}: PortfolioDetailPageProps): Promise<JSX.Element> {
-  const { id } = await params
+export default function PortfolioDetailPage(): JSX.Element {
+  const params = useParams<{ id: string }>()
+  const { id } = params
   console.log(id)
   const data = dummyPortfolioDetail
   const {
@@ -163,31 +158,6 @@ export default async function PortfolioDetailPage({
     awards,
     answers,
   } = data
-  const options = {
-    replace: domNode => {
-      if (
-        domNode instanceof Element &&
-        domNode.name === 'code' &&
-        domNode.attribs.class
-      ) {
-        const language = domNode.attribs.class.replace('language-', '')
-        try {
-          const highlightedCode = hljs.highlight(
-            domNode.children[0].data || '',
-            { language }
-          ).value
-          return (
-            <code
-              className={domNode.attribs.class}
-              dangerouslySetInnerHTML={{ __html: highlightedCode }}
-            />
-          )
-        } catch (e) {
-          return domNode
-        }
-      }
-    },
-  }
 
   return (
     <Container className='mx-auto my-80 flex flex-col gap-20'>
@@ -230,14 +200,6 @@ export default async function PortfolioDetailPage({
             {portTitle}
           </Text.Heading>
         </div>
-        <div className='relative mb-20 h-400 w-full overflow-hidden rounded-16'>
-          <Image
-            src={portImageUrl}
-            alt={portTitle}
-            fill
-            className='object-cover'
-          />
-        </div>
         {links && links.length > 0 && (
           <section>
             <header className='h-50 border-y-1 border-solid border-gray-200 bg-gray-100 px-20 py-12'>
@@ -417,21 +379,25 @@ export default async function PortfolioDetailPage({
                       </Text.Body>
                     </div>
                     {career.description && (
-                      <div className='tiptap'>
-                        {parse(career.description, options)}
-                      </div>
+                      <ContentViewer content={career.description} />
                     )}
                   </div>
                 </li>
               ))}
             </ul>
           </section>
         )}
-        <div className='tiptap mb-20'>{parse(portContent, options)}</div>
+        <div className='relative mb-20 h-400 w-full overflow-hidden rounded-16'>
+          <Image
+            src={portImageUrl}
+            alt={portTitle}
+            fill
+            className='object-cover'
+          />
+        </div>
+        <ContentViewer content={portContent} />
         <div className='mb-12 flex gap-10'>
-          {tags.map(tag => (
-            <Chip key={tag} label={`#${tag}`} />
-          ))}
+          {tags?.map(tag => <Chip key={tag} label={`#${tag}`} />)}
         </div>
         <div className='flex items-center gap-8'>
           <Clickable

src/app/(pages)/portfolio/new/page.tsx

@@ -2,21 +2,11 @@
 
 import { Controller, useForm } from 'react-hook-form'
 
-import { positionOptions, techStackOptions } from '@/constants/selectOptions'
-import {
-  PORTFOLIO_EDITOR_CONTENT,
-  TEAM_RECRUITMENT_EDITOR_CONTENT,
-} from '@/constants/tiptap'
-import { LINK_ICON_MAP } from '@/constants/valueIconMap'
+import { PORTFOLIO_EDITOR_CONTENT } from '@/constants/tiptap'
 import { TipTapEditor } from '@/lib/tiptap/TipTapEditor'
-import {
-  CreatePortfolioRequest,
-  PortfolioDetail,
-} from '@/types/api/Portfolio.types'
-import { CreateTeamRecruitmentRequest } from '@/types/api/Team.types'
+import { CreatePortfolioRequest } from '@/types/api/Portfolio.types'
 
 import { Button, Link } from '@/components/common/button'
-import { DeletableChip } from '@/components/common/chip'
 import { Container } from '@/components/common/containers'
 import { Label } from '@/components/common/label'
 import { Text } from '@/components/common/text'