KakaotechHKT · jihostudy · Apr 6, 2025 · Apr 6, 2025 · Apr 6, 2025 · Apr 6, 2025
diff --git a/public/data/ChatResponse.ts b/public/data/ChatResponse.ts
@@ -7,11 +7,16 @@ export enum ResponseType {
   ELSE = 'ELSE',
 }
 
+/**
+ * doneClicking
+ * 카테고리 > 키워드까지 선택하면 재선택 불가,
+ * 카테고리만 선택한 상황에서는 카테고리 재선택가능 (단, 직전의 카테고리만 선택한 것만 재선택 가능)
+ */
 export type ChatType = {
   speaker: 'user' | 'ai'
   content: string
   type?: ResponseType
-  doneClicking: boolean // 메인카테고리 or 키워드 선택하였는지 여부 (재선택 불가 로직을 위한 인자)
+  doneClicking: boolean // 키워드 선택하였는지 여부 (재선택 불가 로직을 위한 인자)
   lastMainCategory?: MainCategoriesType
   lastKeywords?: string[]
 }
@@ -47,7 +52,7 @@ export class Chatting {
       speaker: 'ai',
       // Todo: 메인 카테고리 선택에 따른 이름 변동이 되도록 처리
       // content: `${mainCategory}을 선택하셨네요.\n\n더 좋은 응답을 생성하기 위해 어떤 종류의 ${mainCategory}을 원하는지 추가 키워드를 선택해주세요.`,
-      content: `카테고리 선택을 완료하셨군요!\n\n더 좋은 응답을 생성하기 위해 어떤 종류의 ${mainCategory}을 원하는지 추가 키워드를 선택해주세요.`,
+      content: `카테고리 선택을 완료하셨군요!\n\n더 좋은 응답을 생성하기 위해 어떤 종류의 음식을 원하는지 추가 키워드를 선택해주세요.`,
       type: ResponseType.MAIN_CATEGORY,
       doneClicking: false,
       lastMainCategory: undefined,

diff --git a/src/app/(headerless)/part/page.tsx b/src/app/(headerless)/part/page.tsx
@@ -7,13 +7,14 @@ import KakaoMap from '@components/common/KakaoMap'
 import Chatroom from '@components/part/ChatRoom'
 import PlaceList from '@components/part/PlaceList'
 import RefuseModal from '@components/part/RefuseModal'
+import { Input } from '@components/ui/input'
 import { URL } from '@lib/constants/routes'
 import { ChattingType, CreateChatType } from '@lib/HTTP/API/chat'
 import { useMutationStore } from '@lib/HTTP/tanstack-query'
+import LucideIcon from '@lib/provider/LucideIcon'
 import { GeoType } from '@lib/types/part/part'
-import { cn } from '@lib/utils/utils'
 import { KTB_Position } from '@public/data'
-import { MainCategories, MainCategoriesType } from '@public/data/categories'
+import { MainCategoriesType } from '@public/data/categories'
 import { Chatting, ChatType } from '@public/data/ChatResponse'
 import { placeListDummyData } from '@public/data/restaurant'
 import LogoImage from '@public/images/logo.svg'
@@ -54,6 +55,8 @@ const PartPage = (): ReactNode => {
   }, [])
 
   /** 좌측 검색리스트 관련 상태 */
+  const [searchInput, setSearchInput] = useState<string>('')
+  const [isComposing, setIsComposing] = useState<boolean>(false)
   const [placeList, setPlaceList] = useState<placeDTO[]>(placeListDummyData)
 
   /** 채팅 관련 상태 */
@@ -89,10 +92,7 @@ const PartPage = (): ReactNode => {
 
   // 카테고리 함수
   const mainCategoryClickHandler = (mainCategory: MainCategoriesType, chat_index?: number) => {
-    setCategory({
-      ...category,
-      mainCategory,
-    })
+    updateCategory({ mainCategory: mainCategory })
     // 채팅에서 클릭한 경우
     if (chat_index !== undefined) {
       const newChat = chats.map((chat, index) =>
@@ -114,10 +114,7 @@ const PartPage = (): ReactNode => {
     let newKeywords: string[] | ''
     if (!category.keywords) {
       newKeywords = [keyword]
-      setCategory(prev => ({
-        ...prev,
-        keywords: newKeywords,
-      }))
+      updateCategory({ keywords: newKeywords })
     }
     // 기존에 키워드가 있었던 경우
     else {
@@ -128,26 +125,44 @@ const PartPage = (): ReactNode => {
           ? [...category.keywords, keyword]
           : category.keywords
 
-      setCategory(prev => ({
-        ...prev,
-        keywords: newKeywords,
-      }))
+      updateCategory({ keywords: newKeywords })
     }
   }
 
   const restartClickHandler = (chat_index: number) => {
+    // 카테고리, 키워드 초기화
+    updateCategory({ keywords: '', mainCategory: '' })
+
+    // 재시작
+    if (chat_index !== undefined) {
+      const newChat = chats.map((chat, index) =>
+        chat_index === index
+          ? {
+              ...chat,
+              doneClicking: true,
+            }
+          : chat,
+      )
+      setChats(newChat)
+    }
+  }
+
+  const restartMainCategoryClickHandler = (chat_index: number) => {
     // 재시작
     if (chat_index !== undefined) {
       const newChat = chats.map((chat, index) =>
         chat_index === index
           ? {
               ...chat,
               doneClicking: true,
+              lastMainCategory: category.mainCategory as MainCategoriesType,
             }
           : chat,
       )
       setChats(newChat)
     }
+    // 카테고리, 키워드 초기화
+    updateCategory({ keywords: '', mainCategory: '' })
   }
 
   const { mutate: ChattingMutate, isPending: isChatting } = useMutationStore<ChattingType>(['chatting'])
@@ -251,26 +266,30 @@ const PartPage = (): ReactNode => {
           밥팟
         </Link>
 
-        <div className='flex flex-col items-start justify-start gap-1 pl-8'>
-          <span className='font-dohyeon text-2xl'>선호 음식</span>
-          <span className='text-xss text-rcDarkGray'>* 선호 음식을 눌러 카테부 주변의 맛집을 추천 받아보세요!</span>
-
-          <ul className='mb-2 grid w-full grid-cols-4 grid-rows-2 gap-2'>
-            {MainCategories.map(cat => (
-              <li
-                onClick={() => mainCategoryClickHandler(cat)}
-                className={cn(
-                  cat === category.mainCategory && 'bg-rcKakaoYellow hover:bg-rcKakaoYellowHover',
-                  'flex cursor-pointer items-center justify-center rounded-md border-[0.5px] border-solid border-rcGray px-1 py-2 text-[10px] font-semibold hover:bg-rcKakaoYellow',
-                )}
-                key={cat}
-              >
-                {cat}
-              </li>
-            ))}
-          </ul>
+        <div className='relative my-3 flex w-full flex-col items-start justify-start gap-1 pl-8'>
+          <span className='font-dohyeon text-2xl'>밥팟 음식점</span>
+          <div className='flex w-full items-center justify-start border-b-2 border-solid border-rcKakaoYellow'>
+            <LucideIcon name='Search' />
+            <Input
+              type='text'
+              placeholder='식당 이름을 검색해보세요'
+              className='h-9 w-full rounded-none border-0 py-0 text-sm shadow-none outline-none focus:outline-none focus-visible:ring-0 sm:w-60'
+              value={searchInput}
+              onChange={e => setSearchInput(e.target.value)}
+              // onKeyDown={e => {
+              //   if (e.key === 'Enter' && !isComposing) {
+              //     e.preventDefault()
+              //     refetch()
+              //   }
+              // }}
+              onCompositionStart={() => setIsComposing(true)} // 한글 조합 시작
+              onCompositionEnd={() => setIsComposing(false)} // 한글 조합 끝
+            />
+          </div>
+        </div>
+        <div className='self-end'>
+          총 <span className='text-rcBlue'>12</span>건
         </div>
-
         <div className='my-1 h-[1px] w-full bg-rcLightGray' />
 
         <PlaceList
@@ -288,6 +307,7 @@ const PartPage = (): ReactNode => {
         </span>
 
         {/* 채팅내용 */}
+
         <Chatroom
           category={category}
           updateCategory={updateCategory}
@@ -300,6 +320,7 @@ const PartPage = (): ReactNode => {
           keywordClickHandler={keywordClickHandler}
           sendKeywordSelection={sendKeywordSelection}
           restartClickHandler={restartClickHandler}
+          restartMainCategoryClickHandler={restartMainCategoryClickHandler}
           isChatting={isChatting}
         />
       </div>

diff --git a/src/components/part/AIChatButtonFrame.tsx b/src/components/part/AIChatButtonFrame.tsx
@@ -24,7 +24,7 @@ const AIChatButtonFrame = ({ content, clickHandler, children }: AIChatButtonFram
             }}
           />
           <Button onClick={clickHandler} variant='rcGreen' className='mt-2 w-full font-pretendard text-xs font-medium'>
-            키워드 재선택하기
+            선호 음식 재선택하기
           </Button>
         </div>
       </div>

diff --git a/src/components/part/ChatRoom.tsx b/src/components/part/ChatRoom.tsx
@@ -26,6 +26,7 @@ interface ChatroomProps {
   keywordClickHandler: (keyword: string, mainCategory: MainCategoriesType, chat_index: number) => void
   sendKeywordSelection: (keywords: string[], mainCategory: MainCategoriesType, chat_index: number) => void
   restartClickHandler: (chat_index: number) => void
+  restartMainCategoryClickHandler: (chat_index: number) => void
   isChatting: boolean
 }
 
@@ -41,6 +42,7 @@ const Chatroom = ({
   keywordClickHandler,
   sendKeywordSelection,
   restartClickHandler,
+  restartMainCategoryClickHandler,
   isChatting,
 }: ChatroomProps): ReactNode => {
   const chatContainerRef = useRef<HTMLDivElement>(null)
@@ -74,11 +76,15 @@ const Chatroom = ({
       // 키워드 변경
       keywordClickHandler(keyword, mainCategory, chat_index)
     }
+    static restartMainCategory = (chat_index: number) => {
+      // 채팅 잠금
+      restartMainCategoryClickHandler(chat_index)
 
-    static restart = (chat_index: number) => {
-      // 카테고리, 키워드 초기화
-      updateCategory({ keywords: '', mainCategory: '' })
+      // 초기 채팅 더하기
+      addChatHandler(Chatting.StartResponse())
+    }
 
+    static restart = (chat_index: number) => {
       // 채팅 잠금
       restartClickHandler(chat_index)
 
@@ -171,6 +177,14 @@ const Chatroom = ({
                     </li>
                   ))}
                 </ul>
+                <Button
+                  disabled={chat.doneClicking ? true : false}
+                  onClick={() => ClickHandlers.restartMainCategory(chat_index)}
+                  variant='rcDarkGray'
+                  className='w-full font-pretendard text-xs font-medium'
+                >
+                  선호 음식 재선택하기
+                </Button>
                 <Button
                   disabled={category.keywords === '' || chat.doneClicking ? true : false}
                   onClick={() => searchHandler(chat_index)}

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -21,6 +21,7 @@ const buttonVariants = cva(
         rcKakaoLightYellow: 'bg-rcKakaoLightYellow text-black hover:opacity-75 shadow-rc-shadow',
         rcGreen: 'bg-rcGreen text-black hover:bg-rcGreenHover shadow-rc-shadow',
         rcLightGray: 'bg-rcLightGray text-black hover:bg-rcGray shadow-rc-shadow',
+        rcDarkGray: 'bg-rcDarkGray hover:bg-rcDarkGrayHover shadow-rc-shadow text-rcWhite',
       },
       size: {
         default: 'h-9 px-4 py-2',

diff --git a/src/lib/colors/colors.ts b/src/lib/colors/colors.ts
@@ -19,6 +19,7 @@ export const colorSet = {
   rcKakaoYellowHover: config.theme.extend.colors.rcKakaoYellowHover,
   rcGreenHover: config.theme.extend.colors.rcGreenHover,
   rcBlueHover: config.theme.extend.colors.rcBlueHover,
+  rcDarkGrayHover: config.theme.extend.colors.rcDarkGrayHover,
 }
 
 export type ColorType = keyof typeof colorSet
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -66,6 +66,7 @@ export default {
         rcKakaoYellowHover: '#FFDC44',
         rcGreenHover: '#B9E49C',
         rcBlueHover: '#3470B9',
+        rcDarkGrayHover: '#7D7F82',
       },
       borderRadius: {
         lg: 'var(--radius)',