[style] 카드 컴포넌트 구현 완료

Author: ahk0413

src/app/recommend/ChatForm.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import Dummy from '@/shared/assets/images/dummy/exampleCocktail.png';
+import Link from 'next/link';
+import Keep from '@/shared/components/keep/Keep';
+
+function ChatCocktailCard() {
+  return (
+    <div className="relative flex flex-col w-full min-w-[200px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
+      <Link href="/" className="block relative">
+        <div className="relative w-full h-[200px]">
+          <Image src={Dummy} fill className="object-cover" alt="칵테일 이름" />
+        </div>
+
+        <div className="p-3 flex flex-col gap-1 text-center">
+          <strong className="text-black text-lg">{'진피즈'}</strong>
+          <span className="text-gray-500 text-sm">+ 상세보기</span>
+        </div>
+      </Link>
+      <Keep className="absolute top-2 right-2 z-50" />
+    </div>
+  );
+}
+export default ChatCocktailCard;

src/app/recommend/components/ChatCocktailCard.tsx

@@ -15,31 +15,30 @@ function ChatForm() {
   };
 
   return (
-    <form
-      onSubmit={(e) => e.preventDefault()}
-      className="absolute w-[calc(100%-24px)] bottom-12 left-3"
-    >
-      <div className="flex items-end w-full gap-2">
-        <label htmlFor="chatInput" className="sr-only">
-          질문 입력창
-        </label>
-        <textarea
-          id="chatInput"
-          name="chatInput"
-          onKeyDown={(e) => keyDown(e)}
-          onInput={(e) => handleInput(e)}
-          placeholder="칵테일 추천 질문을 입력해주세요."
-          className="w-[calc(100%-3.75rem)] px-4 py-3.5 rounded-lg h-[52px] max-h-[280px] bg-white text-primary placeholder:text-gray-dark resize-none outline-none"
-        />
-        <button
-          type="button"
-          aria-label="보내기"
-          className="flex-center w-13 h-13 rounded-xl border-1 border-white bg-secondary/20"
-        >
-          <Send className="text-secondary" />
-        </button>
-      </div>
-    </form>
+    <div className="fixed left-0 bottom-0 w-full px-3 py-4 bg-primary">
+      <form onSubmit={(e) => e.preventDefault()}>
+        <div className="flex items-end w-full gap-2">
+          <label htmlFor="chatInput" className="sr-only">
+            질문 입력창
+          </label>
+          <textarea
+            id="chatInput"
+            name="chatInput"
+            onKeyDown={(e) => keyDown(e)}
+            onInput={(e) => handleInput(e)}
+            placeholder="칵테일 추천 질문을 입력해주세요."
+            className="w-[calc(100%-3rem)] md:w-[calc(100%-3.75rem)] px-4 py-2 md:py-3.5 rounded-lg h-[40px] md:h-[52px] max-h-[160px] md:max-h-[280px] bg-white text-primary placeholder:text-gray-dark resize-none outline-none"
+          />
+          <button
+            type="button"
+            aria-label="보내기"
+            className="flex-center w-10 md:w-13 h-10 md:h-13 rounded-xl border-1 border-white bg-secondary/20"
+          >
+            <Send className="text-secondary" />
+          </button>
+        </div>
+      </form>
+    </div>
   );
 }
 export default ChatForm;

src/app/recommend/components/ChatForm.tsx

@@ -40,10 +40,16 @@ function SsuryChat() {
   ];
 
   return (
-    <article aria-label="취향추천 챗봇 메시지" className="max-w-[80%]">
+    <article aria-label="취향추천 챗봇 메시지" className="">
       <header className="flex items-end">
-        <div className="relative w-20 h-20">
-          <Image src={Ssury} alt="쑤리아바타" width={80} height={80} className="object-cover" />
+        <div className="relative w-15 md:w-20 h-15 md:h-20">
+          <Image
+            src={Ssury}
+            alt="쑤리아바타"
+            width={80}
+            height={80}
+            className="object-cover w-15 h-15"
+          />
         </div>
         <strong>쑤리</strong>
       </header>
@@ -53,9 +59,19 @@ function SsuryChat() {
         {messages.map((msg) => (
           <div key={msg.id}>
             {msg.type === 'recommend' ? (
-              <ChatCocktailCard />
+              <ul className="inline-grid grid-cols-1 sm:grid-cols-3 gap-2 justify-start">
+                <li>
+                  <ChatCocktailCard />
+                </li>
+                <li>
+                  <ChatCocktailCard />
+                </li>
+                <li>
+                  <ChatCocktailCard />
+                </li>
+              </ul>
             ) : (
-              <div className="flex flex-col w-fit min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black">
+              <div className="flex flex-col w-fit max-w-[80%] min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black">
                 {msg.text && <p className="whitespace-pre-line">{msg.text}</p>}
 
                 {/* radio */}

src/app/recommend/components/SsuryChat.tsx

@@ -6,18 +6,17 @@ import MyChat from './components/MyChat';
 function Page() {
   return (
     <div
-      className="bg-repeat-y bg-top bg-auto w-full flex"
+      className="relative bg-repeat-y bg-top bg-auto w-full flex"
       style={{ backgroundImage: `url(${Bg.src})` }}
     >
       <h1 className="sr-only">취향추천하기</h1>
-      <div className="relative page-layout max-w-1024 py-12 ">
+      <div className="page-layout max-w-1024 py-12 ">
         <div className="flex flex-col gap-10 pb-20">
           <SsuryChat />
           <MyChat></MyChat>
         </div>
-
-        <ChatForm />
       </div>
+      <ChatForm />
     </div>
   );
 }