[DEV] LLMInputBox 페이지별 연결

Mine/src/api/magazine.ts

@@ -4,7 +4,11 @@ import type {
     FeedDto,
     PatchMagazineTitleDto,
     PostMagazineDto,
+    RequestAddSection,
+    RequestAddSectionInSectionPage,
     RequestDeleteMagazine,
+    ResponseAddSection,
+    ResponseAddSectionInSectionPage,
     ResponseFeed,
     ResponseRecentSection,
     SectionDetailDto,
@@ -93,7 +97,21 @@ export const createMoodboard = async (magazineId: number) => {
     return res.data
 }
 
+export const postAddSection = async ({ magazineId, message }: RequestAddSection): Promise<ResponseAddSection> => {
+    const res = await axiosInstance.post(`api/magazines/${magazineId}/interact`, { message })
+    return res.data
+}
+
+export const postAddSectionInSectionPage = async ({
+    magazineId,
+    sectionId,
+    message,
+}: RequestAddSectionInSectionPage): Promise<ResponseAddSectionInSectionPage> => {
+    const res = await axiosInstance.post(`api/magazines/${magazineId}/sections/${sectionId}/interact`, { message })
+    return res.data
+}
+
 export const patchMagazineCover = async (id: number, coverImageUrl: string) => {
     const res = await axiosInstance.patch(`api/magazines/${id}/cover`, { coverImageUrl })
     return res.data
-}
+}

Mine/src/components/LLMInputBox.tsx

@@ -40,7 +40,7 @@ export default function LLMInputBox({ onSend }: LLMInputBoxProps) {
 
     return (
         <div
-            className={`relative mx-auto flex items-end transition-all duration-300 ease-in-out w-192.5 min-h-13.5 bg-main-light border py-3 px-7 gap-10 ${isFocused ? 'border-main-default opacity-100' : 'border-main-opacity50 opacity-40'} ${isExpanded ? 'rounded-4xl ' : 'rounded-full'}`}
+            className={`relative mx-auto flex items-end transition-all duration-300 ease-in-out w-192.5 min-h-13.5 bg-gray-100-op90 border-gray-500 border py-3 px-3 gap-10 ${isFocused ? ' ' : 'opacity-40'} ${isExpanded ? 'rounded-4xl ' : 'rounded-full'}`}
         >
             <textarea
                 ref={textareaRef}
@@ -51,7 +51,7 @@ export default function LLMInputBox({ onSend }: LLMInputBoxProps) {
                 onBlur={() => setIsFocused(false)}
                 onKeyDown={handleKeyDown}
                 placeholder="관심있는 주제를 입력해 주세요."
-                className="mb-1 w-full min-h-6 resize-none bg-transparent font-regular16 leading-normal text-black-textBigTitle outline-none placeholder-black-textInTheBox overflow-y-auto"
+                className="mb-1 ml-4 w-full min-h-6 resize-none font-regular16 leading-normal text-gray-600 outline-none placeholder-gray-500-op40 overflow-y-auto"
                 style={{
                     scrollbarWidth: 'none',
                     msOverflowStyle: 'none',
@@ -61,7 +61,7 @@ export default function LLMInputBox({ onSend }: LLMInputBoxProps) {
             <button
                 onClick={handleSend}
                 disabled={!text.trim()}
-                className={`flex shrink-0 w-7.5 h-7.5 rounded-full p-1.25 focus-within:bg-main-default bg-main-opacity50 items-center justify-center transition-colors duration-200 ${!isExpanded && 'mb-0.5'}
+                className={`flex shrink-0 w-7.5 h-7.5 rounded-full p-1.25 bg-gray-500 items-center justify-center transition-colors duration-200 ${!isExpanded && 'mb-0.5'}
             `}
             >
                 <Arrow />

Mine/src/components/LLMInputLayout.tsx

@@ -1,16 +1,59 @@
-import { useLocation } from 'react-router-dom'
+import { matchPath, useLocation } from 'react-router-dom'
 import LLMInputBox from './LLMInputBox'
+import usePostAddSection from '../hooks/usePostAddSection'
+import usePostAddSectionInSectionPage from '../hooks/usePostAddSectionInSectionPage'
+import usePostMagazine from '../hooks/usePostMagazine'
+import { useAuthStore } from '../stores/auth'
 
 export default function LLMInputLayout() {
+    const { isLoggedIn } = useAuthStore()
     const location = useLocation()
     const hiddenPath = ['/login', '/signup', '/landing', '/']
     const isHiddenPath = hiddenPath.includes(location.pathname)
 
-    if (!isHiddenPath)
-        return (
-            <div className="absolute bottom-8 translate-x-1/2">
-                <LLMInputBox />
+    const postAddSectionMutation = usePostAddSection()
+    const postAddInSectionPageMutation = usePostAddSectionInSectionPage()
+    const postMagazineMutation = usePostMagazine()
+
+    const sectionMatch = matchPath('/magazine/:magazineId/section/:sectionId', location.pathname)
+    const magazineMatch = matchPath('/magazine/:magazineId', location.pathname)
+
+    const currentMagazineId = magazineMatch?.params.magazineId
+
+    const isNumericMagazineId = currentMagazineId && !isNaN(Number(currentMagazineId))
+
+    if (!isLoggedIn || isHiddenPath) return null
+
+    const handleSend = (value: string) => {
+        if (sectionMatch) {
+            // 섹션 페이지
+            const { magazineId, sectionId } = sectionMatch.params
+            postAddInSectionPageMutation.mutate({
+                magazineId: Number(magazineId),
+                sectionId: Number(sectionId),
+                message: value,
+            })
+        } else if (magazineMatch && isNumericMagazineId) {
+            // 매거진 페이지
+            const { magazineId } = magazineMatch.params
+            postAddSectionMutation.mutate({
+                magazineId: Number(magazineId),
+                message: value,
+            })
+        } else {
+            // 그외 페이지
+            postMagazineMutation.mutate({
+                topic: value,
+                user_mood: '',
+            })
+        }
+    }
+
+    return (
+        <div className="fixed bottom-8 left-0 w-full flex justify-center z-50 pointer-events-none">
+            <div className="pointer-events-auto">
+                <LLMInputBox onSend={handleSend} />
             </div>
-        )
-    return null
+        </div>
+    )
 }

Mine/src/hooks/usePostAddSection.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { postAddSection } from '../api/magazine'
+
+export default function usePostAddSection() {
+    const queryClient = useQueryClient()
+    return useMutation({
+        mutationFn: postAddSection,
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['mymagazines'] })
+        },
+        onError: (error) => {
+            console.log('섹션 생성:', error)
+            alert('섹션 생성에 실패했습니다.')
+        },
+    })
+}

Mine/src/hooks/usePostAddSectionInSectionPage.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { postAddSectionInSectionPage } from '../api/magazine'
+
+export default function usePostAddSectionInSectionPage() {
+    const queryClient = useQueryClient()
+    return useMutation({
+        mutationFn: postAddSectionInSectionPage,
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['mymagazines', 'sections'] })
+        },
+        onError: (error) => {
+            console.log('섹션 생성:', error)
+            alert('섹션 생성에 실패했습니다.')
+        },
+    })
+}

Mine/src/style/global.css

@@ -64,6 +64,7 @@
     --color-gray-100-op30: #ffffff4d;
     --color-gray-100-op40: #ffffff66;
     --color-gray-100-op70: #ffffffb3;
+    --color-gray-100-op90: #ffffffe6;
 
     --color-gray-300-op70: #a9a9a9b3;
 

Mine/src/types/magazine.ts

@@ -136,4 +136,30 @@ export type ResponseFeed = {
     content: Magazine[]
     nextCursor: number
     hasNext: boolean
-}
+}
+
+export type RequestAddSection = {
+    magazineId: number
+    message: string
+}
+
+export type RequestAddSectionInSectionPage = {
+    magazineId: number
+    sectionId: number
+    message: string
+}
+export type ResponseAddSection = {
+    message: string
+    actionType: string
+    section: {
+        heading: string
+        paragraphs: Paragraph[]
+        sectionId: number
+        thumbnailUrl: string
+        layoutType: string
+        layoutHint: string
+        displayOrder: number
+    }
+}
+
+export type ResponseAddSectionInSectionPage = ResponseAddSection

Mine/vite.config.ts

@@ -9,10 +9,9 @@ export default defineConfig({
     server: {
         proxy: {
             '/api': {
-                target: 'http://52.63.142.228:8080',
+                target: 'https://api.minelover.com',
                 changeOrigin: true,
             },
         },
     },
 })
-