[style] 라디오, input, 쑤리 챗, 나의 챗 컴포넌트 작업

Author: ahk0413

src/app/recommend/components/ChatForm.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+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>) => {
+    const target = e.currentTarget;
+
+    if (target.value == '') {
+      target.style.height = '';
+    }
+    target.style.height = `${target.scrollHeight}px`;
+  };
+
+  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>
+  );
+}
+export default ChatForm;

src/app/recommend/components/ChatRadio.tsx

@@ -0,0 +1,42 @@
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface RadioGroupProps {
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+}
+
+function ChatRadio({ options, value, onChange }: RadioGroupProps) {
+  return (
+    <div role="radiogroup" className="flex flex-col gap-3 mt-5">
+      {options.map((opt) => (
+        <label
+          htmlFor={`radio-${opt.value}`}
+          key={opt.value}
+          className="flex items-center gap-2 cursor-pointer"
+        >
+          <input
+            id={`radio-${opt.value}`}
+            type="radio"
+            name="radio-group"
+            value={opt.value}
+            checked={value === opt.value}
+            onChange={() => onChange(opt.value)}
+            className="sr-only"
+          />
+          <span
+            className={`w-full rounded-3xl px-2 py-1 text-center transition-colors duration-150
+      ${value === opt.value ? 'bg-secondary shadow-[inset_0_0_6px_rgba(255,196,1,1)]' : 'bg-gray-dark/30'} 
+      hover:bg-secondary/100 `}
+          >
+            <span>{opt.label}</span>
+          </span>
+        </label>
+      ))}
+    </div>
+  );
+}
+export default ChatRadio;

src/app/recommend/components/MyChat.tsx

@@ -0,0 +1,39 @@
+interface Message {
+  id: string;
+  sender: 'ssury' | 'user';
+  text: string;
+  type?: 'radio' | 'text';
+}
+
+// 메시지 (연속 메시지)
+const messages: Message[] = [
+  {
+    id: '1',
+    sender: 'user',
+    text: '냥냥냥글자가길어지면 어케될까요 너무너무너무 궁금해요 하하하하하하하하하하하하하하하하하하ㅏ',
+  },
+  { id: '2', sender: 'user', text: '배고파요' },
+];
+
+function MyChat() {
+  return (
+    <article aria-label="내 메시지" className="flex flex-col items-end">
+      <header className="w-fit">
+        <strong>나</strong>
+      </header>
+
+      {/* 메시지 그룹 */}
+      <div className="flex flex-col items-end gap-3 mt-3 pr-3 max-w-[80%]">
+        {messages.map((msg) => (
+          <div
+            key={msg.id}
+            className="w-fit min-w-[120px] p-3 rounded-2xl rounded-tr-none bg-tertiary text-white"
+          >
+            <p className="whitespace-pre-line">{msg.text}</p>
+          </div>
+        ))}
+      </div>
+    </article>
+  );
+}
+export default MyChat;

src/app/recommend/components/SsuryChat.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import Ssury from '@/shared/assets/ssury/ssury_shaker.webp';
+import Image from 'next/image';
+import { useState } from 'react';
+import ChatRadio from './ChatRadio';
+import ChatCocktailCard from './ChatCocktailCard';
+
+interface Message {
+  id: string;
+  text?: string;
+  type?: 'radio' | 'text' | 'recommend';
+}
+
+function SsuryChat() {
+  const [selected, setSelected] = useState('option1');
+
+  // radio 옵션
+  const options = [
+    { label: '옵션 1', value: 'option1' },
+    { label: '옵션 2', value: 'option2' },
+    { label: '옵션 3', value: 'option3' },
+  ];
+
+  // 메시지 (연속 메시지)
+  const messages: Message[] = [
+    {
+      id: '1',
+      text: '안녕하세요, 바텐더 쑤리에요. \n 취향에 맞는 칵테일을 추천해드릴게요!',
+    },
+    {
+      id: '2',
+      text: '어떤 유형으로 찾아드릴까요?',
+      type: 'radio',
+    },
+    {
+      id: '3',
+      type: 'recommend',
+    },
+  ];
+
+  return (
+    <article aria-label="취향추천 챗봇 메시지" className="max-w-[80%]">
+      <header className="flex items-end">
+        <div className="relative w-20 h-20">
+          <Image src={Ssury} alt="쑤리아바타" width={80} height={80} className="object-cover" />
+        </div>
+        <strong>쑤리</strong>
+      </header>
+
+      {/* 메시지 그룹 */}
+      <div className="flex flex-col gap-3 mt-3 pl-3">
+        {messages.map((msg) => (
+          <div key={msg.id}>
+            {msg.type === 'recommend' ? (
+              <ChatCocktailCard />
+            ) : (
+              <div className="flex flex-col w-fit 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 */}
+                {msg.type === 'radio' && (
+                  <ChatRadio options={options} value={selected} onChange={setSelected} />
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </article>
+  );
+}
+export default SsuryChat;