모각코 생성, 수정페이지 리팩토링 (main)

package.json

@@ -59,6 +59,7 @@
     "react-calendar": "^4.7.0",
     "react-dom": "^18",
     "react-error-boundary": "^4.0.12",
+    "react-highlight-words": "^0.20.0",
     "react-hook-form": "^7.49.0",
     "react-icons": "^4.12.0",
     "react-kakao-maps-sdk": "^1.1.26",
@@ -90,6 +91,7 @@
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-highlight-words": "^0.16.7",
     "@types/react-paginate": "^7.1.4",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/sockjs": "^0.3.36",

src/app/coding-meetings/_components/guard-page/Unauthorized.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import Mentee from "@/components/shared/animation/Mentee"
+import notificationMessage from "@/constants/message/notification"
+import { useClientSession } from "@/hooks/useClientSession"
+import { useEffect } from "react"
+
+function CreateCodingMeetingUnauthorized() {
+  const { clientSessionReset } = useClientSession()
+
+  useEffect(() => {
+    clientSessionReset()
+  }, []) /* eslint-disable-line */
+
+  return (
+    <div className="text-center">
+      <div className="w-[400px] min-h-[266px] m-auto mt-[100px]">
+        <Mentee />
+      </div>
+      <div className="text-xl">{notificationMessage.unauthorized}.</div>
+    </div>
+  )
+}
+
+export default CreateCodingMeetingUnauthorized

src/app/coding-meetings/create/page.tsx

@@ -1,10 +1,8 @@
-import Mentee from "@/components/shared/animation/Mentee"
-import notificationMessage from "@/constants/message/notification"
 import CreateCodingMeetingPage from "@/page/coding-meetings/create/CreateCodingMeetingPage"
-
 import { getServerSession } from "@/util/auth"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
+import CreateCodingMeetingUnauthorized from "../_components/guard-page/Unauthorized"
 
 export const metadata: Metadata = {
   title: `모각코 생성`,
@@ -33,17 +31,9 @@ export const metadata: Metadata = {
 export default async function CreateCodingMeetingsPage() {
   const { user } = getServerSession()
 
-  // [TODO]
   try {
     if (!user) {
-      return (
-        <div className="text-center">
-          <div className="w-[400px] m-auto mt-[100px]">
-            <Mentee />
-          </div>
-          <div className="text-xl">{notificationMessage.unauthorized}.</div>
-        </div>
-      )
+      return <CreateCodingMeetingUnauthorized />
     }
 
     return <CreateCodingMeetingPage editMode="create" />

src/app/coding-meetings/post/[token]/page.tsx

@@ -69,12 +69,13 @@ export default async function UpdateCodingMeetingsPage({
         />
       )
     }
+
     return (
       <div>
         <CreateCodingMeetingPage
           editMode="update"
           coding_meeting_token={params.token}
-          initialValues={codingMeetingPayload.data}
+          initialCodingMeeting={codingMeetingPayload.data}
         />
       </div>
     )

src/app/layout.tsx

@@ -15,6 +15,7 @@ import ScrollTop from "@/components/shared/ScrollTop"
 import ToastDismissEventListener from "@/components/layout/ToastDismissListener"
 import GoogleAnalyticsProvider from "@/google-analytics/GoogleAnalyticsProvider"
 import HistorySession from "@/components/history/HistorySession"
+import CodingMeetingFormProvider from "@/page/coding-meetings/create/CodingMeetingFormProvider"
 
 export const dynamic = "force-dynamic"
 
@@ -68,8 +69,10 @@ export default function RootLayout({
             <HistorySession />
             <PopupEventListener />
             <ScrollTop />
-            <Layout>{children}</Layout>
-            <Modal />
+            <CodingMeetingFormProvider>
+              <Layout>{children}</Layout>
+              <Modal />
+            </CodingMeetingFormProvider>
             <ToastContainer limit={1} />
             <ToastDismissEventListener />
           </ReactQueryProvider>

src/components/LinkToListPage.tsx

@@ -4,7 +4,7 @@ import { getHistorySessionPath } from "@/util/historySession/path"
 import { useRouter } from "next/navigation"
 import { DirectionIcons } from "./icons/Icons"
 
-export type TargetPage = "qna" | "chat"
+export type TargetPage = "qna" | "chat" | "coding-meetings"
 
 interface LinkToListPageProps {
   to: TargetPage
@@ -13,11 +13,13 @@ interface LinkToListPageProps {
 const initialPath: Record<TargetPage, string> = {
   qna: "/qna?page=0",
   chat: "/chat?page=0",
+  "coding-meetings": "/coding-meetings?page=0&size=10&filter=all",
 } as const
 
 const targetPathname: Record<TargetPage, string> = {
   qna: "/qna",
   chat: "/chat",
+  "coding-meetings": "/coding-meetings",
 } as const
 
 function LinkToListPage({ to }: LinkToListPageProps) {

src/components/shared/TextCounter.tsx

@@ -17,7 +17,7 @@ interface TextCounterProps {
 }
 
 function TextCounter({
-  text,
+  text = "",
   min,
   max,
   className,

src/constants/limitation.ts

@@ -30,6 +30,8 @@ const Limitation = {
   mentoring_time: 10,
   title_limit_under: 5,
   title_limit_over: 100,
+  chat_content_min_length: 10,
+  chat_content_max_length: 1000,
   chat_introduction_limit_under: 10,
   chat_introduction_limit_over: 150,
   content_limit_under: 10,
@@ -60,3 +62,18 @@ const Limitation = {
 } as const
 
 export default Limitation
+
+export const CODING_MEETING_LIMITS = {
+  title: {
+    minLength: 5,
+    maxLength: 100,
+  },
+  memberCount: {
+    min: 3,
+    max: 6,
+  },
+  content: {
+    minLength: 10,
+    maxLength: 10000,
+  },
+}

src/constants/message/validation.ts

@@ -10,6 +10,7 @@ export const validationMessage = {
   noTime: "정확한 시간대를 설정해주세요",
   noLocation: "모임 위치를 설정해주세요",
   noHeadCnt: "모임 인원을 설정해주세요",
+  chatContentLength: `소개글은 최소 ${Limitation.chat_content_min_length}자 이상 ${Limitation.chat_content_max_length}자 이하이어야 합니다.`,
   underContentLimit: `본문 내용은 최소 ${Limitation.content_limit_under}자 이상이어야 합니다.`,
   overContentLimit: `본문 내용은 최대 ${Limitation.content_limit_over}자 이하이어야 합니다.`,
   underAnswerLimit: `댓글 내용은 최소 ${Limitation.answer_limit_under}자 이상이어야 합니다.`,

src/constants/timeOptions.ts

@@ -1,9 +1,32 @@
+export type CodingMeetingHourMinuteTime = {
+  hour:
+    | (typeof CODING_MEETING_HOURS)["AM"][number]
+    | (typeof CODING_MEETING_HOURS)["PM"][number]
+  minute: (typeof CODING_MEETING_MINUTES)[number]
+}
+
+export type CodingMeetingTimeOption = {
+  AM: `${(typeof CODING_MEETING_HOURS)["AM"][number]}:${(typeof CODING_MEETING_MINUTES)[number]}`
+  PM: `${(typeof CODING_MEETING_HOURS)["PM"][number]}:${(typeof CODING_MEETING_MINUTES)[number]}`
+}
+export type CodingMeetingTimeOptions = {
+  AM: Array<CodingMeetingTimeOption["AM"]>
+  PM: Array<CodingMeetingTimeOption["PM"]>
+}
+
 export const enum TimeZone {
   AM = "AM",
   PM = "PM",
 }
 
-export const AM = [
+export const CODING_MEETING_HOURS = {
+  AM: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11"],
+  PM: ["12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
+} as const
+
+export const CODING_MEETING_MINUTES = ["00", "30"] as const
+
+export const CODING_MEETING_AM_OPTIONS: CodingMeetingTimeOptions["AM"] = [
   "00:00",
   "00:30",
   "01:00",
@@ -30,7 +53,7 @@ export const AM = [
   "11:30",
 ]
 
-export const PM = [
+export const CODING_MEETING_PM_OPTIONS: CodingMeetingTimeOptions["PM"] = [
   "12:00",
   "12:30",
   "13:00",
@@ -56,32 +79,3 @@ export const PM = [
   "23:00",
   "23:30",
 ]
-
-const hours = [
-  "00",
-  "01",
-  "02",
-  "03",
-  "04",
-  "05",
-  "06",
-  "07",
-  "08",
-  "09",
-  "10",
-  "11",
-  "12",
-  "13",
-  "14",
-  "15",
-  "16",
-  "17",
-  "18",
-  "19",
-  "20",
-  "21",
-  "22",
-  "23",
-]
-const minutes = ["00", "30"]
-export const timeSelect = { hours, minutes }

src/interfaces/form.ts

@@ -1,3 +1,5 @@
+import { CodingMeetingHourMinuteTime } from "@/constants/timeOptions"
+import { CodingMeetingHashTag } from "./coding-meetings"
 export interface LoginFormData {
   email: string
   password: string
@@ -20,7 +22,42 @@ export interface AnswerFormData {
   answer: string
 }
 
-// comment
+// coding-meeting
+
+// [coding-meeting] form data
+export type CodingMeetingPageMode = "create" | "update"
+
+export interface CodingMeetingFormData {
+  title: string
+  content: string
+  member_upper_limit: number
+  date: {
+    day: Date
+    start_time: [
+      CodingMeetingHourMinuteTime["hour"],
+      CodingMeetingHourMinuteTime["minute"],
+    ]
+    end_time: [
+      CodingMeetingHourMinuteTime["hour"],
+      CodingMeetingHourMinuteTime["minute"],
+    ]
+  }
+  location: {
+    id: string
+    longitude: string
+    latitude: string
+    place_name: string
+  }
+  hashtags: { tag: CodingMeetingHashTag }[]
+}
+
+export interface CodingMeetingLocationSearchFormData {
+  keyword: string
+}
+
+export type CodingMeetingFormInitialValues = CodingMeetingFormData
+
+// [coding-meeting] comment
 export interface CommentFormData {
   comment: string
 }