[DEV] 새매거진 인풋 박스 UI 제작

Mine/src/components/NewMagazineInput.tsx

@@ -0,0 +1,65 @@
+import { type KeyboardEvent } from 'react'
+
+interface MagazineInputProps {
+    topic: string
+    userMood: string
+    onTopicChange: (value: string) => void
+    onUserMoodChange: (value: string) => void
+    onSubmit: () => void
+}
+
+export default function NewMagazineInput({
+    topic,
+    userMood,
+    onTopicChange,
+    onUserMoodChange,
+    onSubmit,
+}: MagazineInputProps) {
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            onSubmit()
+        }
+    }
+
+    return (
+        <div className="relative mx-auto flex flex-col w-192.5">
+            <div className="flex items-center w-full border border-b-0 border-gray-500 bg-gray-100-op30 h-13.5 py-5 px-7 rounded-t-[20px]">
+                <div className="flex flex-col flex-1">
+                    <span className="text-gray-200 font-medium12">주제</span>
+                    <input
+                        value={topic}
+                        onChange={(e) => onTopicChange(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder="관심있는 주제를 입력해 주세요."
+                        className="w-full bg-transparent font-regular16 text-gray-100 outline-none placeholder-gray-100/40"
+                    />
+                </div>
+            </div>
+
+            <div className="flex items-center w-full border border-gray-500 bg-gray-100-op30 h-13.5 py-5 pl-7 pr-3 rounded-b-[20px]">
+                <div className="flex flex-col flex-1">
+                    <span className="text-gray-200 font-medium12">분위기</span>
+                    <input
+                        value={userMood}
+                        onChange={(e) => onUserMoodChange(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder="원하는 분위기를 입력해 주세요."
+                        className="w-full bg-transparent font-regular16 text-gray-100 outline-none placeholder-gray-100/40"
+                    />
+                </div>
+                <button
+                    onClick={onSubmit}
+                    disabled={!topic.trim()}
+                    className={`flex shrink-0 w-13.25 h-7.5 px-4 py-2 rounded-[40px] items-center justify-center transition-all duration-200 cursor-pointer ${
+                        topic.trim()
+                            ? 'bg-gray-500 shadow-[0_4px_8px_0_rgba(0,0,0,0.12),0_16px_32px_0_rgba(0,0,0,0.20)]'
+                            : 'bg-gray-500-op40 shadow-none'
+                    }`}
+                >
+                    <span className="text-gray-100 whitespace-nowrap font-medium14">입력</span>
+                </button>
+            </div>
+        </div>
+    )
+}

Mine/src/pages/main/MainPage.tsx

@@ -1,37 +1,49 @@
-import LLMInputBox from '../../components/LLMInputBox'
+import { useState } from 'react'
 import usePostMagazine from '../../hooks/usePostMagazine'
+import landingBg from '../../assets/bg1.jpg'
+import NewMagazineInput from '../../components/NewMagazineInput'
+import MakingLoadingPage from './MakingLoadingPage'
 
 export default function MainPage() {
     const postMagazineMutation = usePostMagazine()
     const isLoading = postMagazineMutation.isPending
+    const [topic, setTopic] = useState('')
+    const [userMood, setUserMood] = useState('')
 
-    const handleSend = (value: string) => {
-        console.log('전송 내용:', value)
-
-        postMagazineMutation.mutate({ topic: value, user_mood: '' })
+    const handleSend = () => {
+        if (!topic.trim()) return
+        postMagazineMutation.mutate({ topic: topic, user_mood: userMood })
     }
 
     return (
-        <div className="flex flex-col items-center w-full h-full relative z-0 overflow-hidden pt-72.5">
+        <div
+            className="flex flex-col items-center justify-center w-full h-full relative z-0 overflow-hidden"
+            style={{
+                backgroundImage: `url(${landingBg})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }}
+        >
+            <div className="absolute inset-0 bg-linear-to-r from-gray-500-op70 via-black/45 to-gray-500-op70" />
             <div
-                className={`flex flex-col items-center transition-all duration-700 ease-in-out${
+                className={`relative z-10 flex flex-col items-center transition-all duration-700 ease-in-out ${
                     isLoading ? 'opacity-0 pointer-events-none scale-95' : 'opacity-100'
                 }`}
             >
-                <span className="text-gray-500 font-notoserif font-medium36">나만의 매거진을 만들어볼까요?</span>
+                <span className="text-gray-100 font-notoserif font-medium36">나만의 매거진을 만들어볼까요?</span>
 
                 <div className="w-full mt-10 flex justify-center">
-                    <LLMInputBox onSend={handleSend} />
+                    <NewMagazineInput
+                        topic={topic}
+                        userMood={userMood}
+                        onTopicChange={setTopic}
+                        onUserMoodChange={setUserMood}
+                        onSubmit={handleSend}
+                    />
                 </div>
             </div>
-            {isLoading && (
-                <div className="absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-500 animate-fadeIn bg-white/80 backdrop-blur-sm">
-                    <div className="w-10 h-10 border-4 border-gray-100 border-t-gray-500 rounded-full animate-spin mb-6"></div>
-                    <p className="text-xl text-gray-600 animate-pulse font-notoserif">
-                        당신만을 위한 매거진을 만들고 있어요...
-                    </p>
-                </div>
-            )}
+
+            {isLoading && <MakingLoadingPage />}
         </div>
     )
 }

Mine/src/pages/main/MakingLoadingPage.tsx

@@ -0,0 +1,10 @@
+export default function MakingLoadingPage() {
+    return (
+        <div className="absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-500 animate-fadeIn bg-gray-100/80 backdrop-blur-sm z-10">
+            <div className="w-10 h-10 border-4 border-gray-200 border-t-gray-500 rounded-full animate-spin mb-6" />
+            <p className="text-gray-600 animate-pulse font-notoserif font-semibold20">
+                당신만을 위한 매거진을 만들고 있어요...
+            </p>
+        </div>
+    )
+}