[#202] Fix: 카테고리 관련 수정사항을 적용합니다 (#203)

src/app/(post)/createPost/_components/PostForm/index.tsx

@@ -1,11 +1,15 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Controller, useForm } from 'react-hook-form';
 
 import { PostRequestBody } from '@/src/apis/createPost';
 import VoteForm from '@/src/app/(post)/createPost/_components/VoteForm';
-import { ChannelTypeOfKorean } from '@/src/app/_components/ChipContainer';
+import {
+  ChannelType,
+  ChannelTypeOfKorean,
+  channelToKoreanMap,
+} from '@/src/app/_components/ChipContainer';
 import Button from '@/src/components/Button/Button';
 import FormField from '@/src/components/FormField';
 import Selector from '@/src/components/Selector';
@@ -27,6 +31,11 @@ const channels: Array<ChannelTypeOfKorean> = [
 ];
 
 const PostForm = () => {
+  const searchParams = useSearchParams();
+  const channel = searchParams.get('channel') as ChannelType;
+
+  const koreanChannel = channelToKoreanMap[channel];
+
   const {
     register,
     handleSubmit,
@@ -108,6 +117,7 @@ const PostForm = () => {
               <Selector
                 items={channels}
                 placeholder='채널 선택'
+                defaultValue={koreanChannel}
                 onChange={field.onChange}
                 variant={errors.channel ? 'error' : 'default'}
               />

src/app/(post)/search/page.tsx

@@ -65,7 +65,10 @@ const SearchPostPage = () => {
                   </Link>
                 ))
               ) : (
-                <EmptyPage href='/createPost' text='작성 글이 없습니다.' />
+                <EmptyPage
+                  href={`/createPost?channel=${channel}`}
+                  text='작성 글이 없습니다.'
+                />
               )}
               <div ref={scrollRef} />
             </main>

src/app/_components/ChipContainer.tsx

@@ -20,6 +20,15 @@ export type ChannelTypeOfKorean =
   | '공부'
   | '여행';
 
+export const channelToKoreanMap: Record<ChannelType, ChannelTypeOfKorean> = {
+  all: '전체',
+  daily: '일상',
+  sports: '스포츠',
+  entertaining: '연예',
+  study: '공부',
+  travel: '여행',
+};
+
 const channelData: { name: ChannelTypeOfKorean; path: ChannelType }[] = [
   { name: '전체', path: 'all' },
   { name: '일상', path: 'daily' },

src/app/page.tsx

@@ -55,7 +55,10 @@ const Main = () => {
               </Link>
             ))
           ) : (
-            <EmptyPage href='/createPost' text='작성 글이 없습니다.' />
+            <EmptyPage
+              href={`/createPost?channel=${channel}`}
+              text='작성 글이 없습니다.'
+            />
           )}
 
           <div ref={scrollRef} />

src/components/Selector/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { RefObject } from 'react';
+import { RefObject, useEffect } from 'react';
 
 import { cva } from 'class-variance-authority';
 
@@ -34,9 +34,16 @@ interface SelectorProps {
   className?: string;
   variant?: 'default' | 'filled' | 'error';
   onChange?: (channel: string) => void;
+  defaultValue?: string;
 }
 
-const Selector = ({ items, placeholder, variant, onChange }: SelectorProps) => {
+const Selector = ({
+  items,
+  placeholder,
+  variant,
+  onChange,
+  defaultValue,
+}: SelectorProps) => {
   const {
     isOpen,
     toggleDropdown,
@@ -53,6 +60,13 @@ const Selector = ({ items, placeholder, variant, onChange }: SelectorProps) => {
     toggleDropdown();
   };
 
+  useEffect(() => {
+    if (defaultValue) {
+      updateSelectedItem(defaultValue);
+      onChange?.(defaultValue);
+    }
+  }, [defaultValue, updateSelectedItem, onChange]);
+
   return (
     <div
       className='relative'

src/components/Selector/useDropdown.tsx

@@ -1,19 +1,19 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 const useDropdown = <T extends string | string[]>() => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState<T | null>(null);
 
   const dropdownRef = useRef<HTMLElement>(null);
 
-  const toggleDropdown = () => {
+  const toggleDropdown = useCallback(() => {
     setIsOpen(isOpen => !isOpen);
-  };
+  }, []);
 
-  const updateSelectedItem = (item: T) => {
+  const updateSelectedItem = useCallback((item: T) => {
     setSelectedItem(item);
     setIsOpen(false);
-  };
+  }, []);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {