[style] 스켈레톤 ui 작업 (#75)

* [style] 추천 배경 이미지 변경 , repeat 넣기

* [style] 하트 z-index 제거

* [style] 배경 변경

* [style] input 최대 width 제한

* [style] 스켈레톤 ui 추가(spinner 오류로 임시)

Author: ahk0413

src/app/recommend/loading.tsx

@@ -0,0 +1,14 @@
+function Loading() {
+  return (
+    <div className="page-layout w-full flex-center">
+      <div className="flex flex-col gap-3">
+        <div className="w-[6.25rem] h-[5rem] rounded-2xl rounded-tl-none bg-gray animation-pulse"></div>
+        <p>
+          쑤리가 출근 중이에요… 🍸
+          <br />곧 맞춤 칵테일을 추천해드릴게요.
+        </p>
+      </div>
+    </div>
+  );
+}
+export default Loading;

src/app/recommend/page.tsx

@@ -6,7 +6,7 @@ import Bg from '@/shared/assets/images/recommend_bg.webp';
 function Page() {
   return (
     <div
-      className="relative bg-repeat-y bg-top bg-auto w-full flex"
+      className="relative bg-repeat bg-auto w-full flex"
       style={{ backgroundImage: `url(${Bg.src})` }}
     >
       <h1 className="sr-only">취향추천하기</h1>

src/domains/recommend/components/ChatCocktailCard.tsx

@@ -8,15 +8,15 @@ function ChatCocktailCard() {
     <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="칵테일 이름" />
+          <Image src={Dummy} fill className="object-cover" alt="칵테일 이름" sizes="200px" />
         </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" />
+      <Keep className="absolute top-2 right-2" />
     </div>
   );
 }

src/domains/recommend/components/ChatForm.tsx

@@ -2,7 +2,6 @@
 
 import Send from '@/shared/assets/icons/send_36.svg';
 import { keyDown } from '@/shared/utills/keyDown';
-import { useState } from 'react';
 
 function ChatForm() {
   const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
@@ -15,7 +14,7 @@ function ChatForm() {
   };
 
   return (
-    <div className="fixed left-0 bottom-0 w-full px-3 py-4 bg-primary">
+    <div className="fixed left-1/2 bottom-0 -translate-x-1/2 w-full max-w-[62.5rem] 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">

src/domains/recommend/components/SsuryChat.tsx

@@ -48,7 +48,7 @@ function SsuryChat() {
             alt="쑤리아바타"
             width={80}
             height={80}
-            className="object-cover w-15 h-15"
+            className="object-cover w-15 h-15 md:w-20 md:h-20"
           />
         </div>
         <strong>쑤리</strong>