Merge branch 'develop' into feat/#86/savepage

Author: KongMezu

package.json

@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^5.90.5",
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
+    "lottie-react": "^2.4.1",
     "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
@@ -24,23 +25,23 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
+    "date-fns": "^4.1.0",
     "eslint": "^9",
     "eslint-config-next": "15.5.4",
+    "lucide-react": "^0.540.0",
     "postcss": "^8.5.6",
+    "react-day-picker": "^9.11.1",
     "svg-sprite-loader": "^6.0.11",
     "tailwindcss": "4.1.14",
-    "typescript": "^5",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-popover": "^1.1.15",
-    "date-fns": "^4.1.0",
-    "react-day-picker": "^9.11.1",
-    "@radix-ui/react-slot": "^1.2.3",
-    "lucide-react": "^0.540.0"
+    "typescript": "^5"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1 @@
+{"nm":"Main Scene","ddd":0,"h":180,"w":180,"meta":{"g":"@lottiefiles/creator 1.58.0"},"layers":[{"ty":0,"nm":"Nested Scene 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[80,80]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[90,90]},"r":{"a":1,"k":[{"o":{"x":0.7,"y":0.064},"i":{"x":0.3,"y":0.936},"s":[0],"t":0},{"o":{"x":0.7,"y":0.064},"i":{"x":0.3,"y":0.936},"s":[360],"t":50},{"o":{"x":0.7,"y":0.064},"i":{"x":0.3,"y":0.936},"s":[720],"t":100},{"s":[1080],"t":150}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":160,"h":160,"refId":"precomp_Shape Layer - SVG_Pyi9z_WozP_02f09327-b264-4238-b974-1580b3747f32","ind":1}],"v":"5.7.0","fr":30,"op":150,"ip":0,"assets":[{"nm":"Nested Scene 1","id":"precomp_Shape Layer - SVG_Pyi9z_WozP_02f09327-b264-4238-b974-1580b3747f32","layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[83.07499999999999,80]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[83.07499999999999,80]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.83,0],[0,0.83],[-0.83,0],[0,-0.83]],"o":[[0,0.83],[-0.83,0],[0,-0.83],[0.83,0],[0,0]],"v":[[150.15,91.65],[148.65,93.15],[147.15,91.65],[148.65,90.15],[150.15,91.65]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.549,0.9412,0.949]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[148.64999999999998,91.64999999999998]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[148.64999999999998,91.64999999999998]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.55,0],[0,0.55],[-0.55,0],[0,-0.55]],"o":[[0,0.55],[-0.55,0],[0,-0.55],[0.55,0],[0,0]],"v":[[153.15,87.15],[152.15,88.15],[151.15,87.15],[152.15,86.15],[153.15,87.15]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.1098,0.851,0.6902]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[152.14999999999998,87.14999999999998]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[152.14999999999998,87.14999999999998]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.55,0],[0,0.55],[-0.55,0],[0,-0.55]],"o":[[0,0.55],[-0.55,0],[0,-0.55],[0.55,0],[0,0]],"v":[[131.15,77.15],[130.15,78.15],[129.15,77.15],[130.15,76.15],[131.15,77.15]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.6392,0.9412,0.8784]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[130.14999999999998,77.15]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[130.14999999999998,77.15]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.08,-0.75],[0,0],[-0.17,-0.21],[0,0],[0.74,-0.15],[0,0],[0.14,-0.23],[0,0],[0.37,0.65],[0,0],[0.26,0.07],[0,0],[-0.51,0.56],[0,0],[0.02,0.27],[0,0],[-0.69,-0.31],[0,0],[-0.25,0.1],[0,0]],"o":[[0.7,-0.28],[0,0],[-0.03,0.27],[0,0],[0.48,0.58],[0,0],[-0.26,0.06],[0,0],[-0.4,0.64],[0,0],[-0.13,-0.24],[0,0],[-0.73,-0.19],[0,0],[0.18,-0.2],[0,0],[-0.05,-0.75],[0,0],[0.25,0.11],[0,0],[0,0]],"v":[[147.66,70.22],[149.03,71.26],[148.38,77.15],[148.61,77.9],[152.4,82.47],[151.83,84.08],[146.02,85.29],[145.38,85.74],[142.21,90.75],[140.5,90.72],[137.55,85.57],[136.93,85.09],[131.18,83.63],[130.69,81.99],[134.68,77.59],[134.93,76.86],[134.55,70.94],[135.96,69.96],[141.37,72.39],[142.15,72.41],[147.66,70.22]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"paint1_linear_625_3738","e":{"a":0,"k":[140.64,91.73]},"g":{"p":3,"k":{"a":0,"k":[0,0.7019607843137254,0.9607843137254902,0.9607843137254902,0.48,0.12941176470588237,0.8705882352941177,0.9019607843137255,1,0.10980392156862745,0.8509803921568627,0.6901960784313725]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[141.69,71.26]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[141.52878571428568,80.54489285714288]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[141.52878571428568,80.54489285714288]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 5","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-7.93,-3.28],[-6.22,-6.22],[-3.37,-8.13],[-0.08,-8.58],[0,-0.05],[0,-0.03],[0,-0.14],[0,0],[2.32,0],[0.25,2.25],[0,0],[2.91,7.04],[5.39,5.38],[7.04,2.91],[7.61,0],[0,0],[0,2.32],[-2.25,0.25],[0,0],[-0.13,0],[-0.03,0],[-0.05,0]],"o":[[8.58,0.08],[8.13,3.37],[6.22,6.22],[3.28,7.93],[0,0.05],[0,0.03],[0,0.14],[0,0],[-0.25,2.25],[-2.32,0],[0,0],[0,-7.61],[-2.91,-7.04],[-5.39,-5.38],[-7.03,-2.91],[0,0],[-2.25,-0.25],[0,-2.32],[0,0],[0.13,0],[0.03,0],[0.05,0],[0,0]],"v":[[80.65,13],[105.64,18.1],[127.38,32.62],[141.9,54.36],[147,79.35],[147,79.5],[147,79.59],[147,80],[146.97,80],[142.5,84],[138.03,80],[137.99,80],[133.57,57.81],[121,39],[102.19,26.43],[80,22.01],[80,21.97],[76,17.5],[80,13.03],[80,13],[80.4,13],[80.5,13],[80.65,13]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"paint0_linear_625_3738","e":{"a":0,"k":[143.27,84]},"g":{"p":4,"k":{"a":0,"k":[0,0.7019607843137254,0.9607843137254902,0.9607843137254902,0.43,0.4,0.9098039215686274,0.9294117647058824,0.72,0.10980392156862745,0.8509803921568627,0.6901960784313725,1,0.0392156862745098,0.7686274509803922,0.6196078431372549]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[79.73,13]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[111.5,48.5]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[111.5,48.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}]}]}

public/assets/card.png

@@ -0,0 +1,38 @@
+'use client';
+
+import { cn } from '@/shared/lib';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const chatBubbleStyle = cva(
+  `
+  flex items-center
+  px-[1.9rem] py-[1.3rem]
+  rounded-[2rem]
+  text-label-lg foreground
+  break-words
+  w-fit max-w-[80%]
+  `,
+  {
+    variants: {
+      variant: {
+        received: 'bg-gray-100 self-start',
+        sent: 'bg-mint-100  self-end',
+      },
+    },
+    defaultVariants: {
+      variant: 'received',
+    },
+  },
+);
+
+interface ChattingProps extends VariantProps<typeof chatBubbleStyle> {
+  message: string;
+}
+
+export default function Chatting({ message, variant }: ChattingProps) {
+  return (
+    <div className='w-full flex flex-col'>
+      <div className={cn(chatBubbleStyle({ variant }))}>{message}</div>
+    </div>
+  );
+}

public/assets/card2.png

@@ -0,0 +1,59 @@
+'use client';
+import { Icon } from '@/shared/icons';
+import { cn } from '@/shared/lib';
+import { cva } from 'class-variance-authority';
+import { useChattingInput } from '@/shared/hooks/useChattingInput';
+
+const inputWrapperStyle = cva(
+  'flex items-center justify-between w-full bg-gray-100 px-[0.6rem] py-[0.7rem] rounded-[2rem]',
+);
+
+interface ChattingInputProps {
+  onSend?: (text: string) => void;
+}
+
+
+export default function ChattingInput({ onSend }: ChattingInputProps) {
+  const {
+    message,
+    setMessage,
+    inputRef,
+    handleSubmit,
+    handleKeyDown,
+  } = useChattingInput({ onSend });
+
+  return (
+    <div
+      className={cn(
+        'fixed bottom-0 left-1/2 -translate-x-1/2 w-full bg-gray-100 px-[0.6rem] py-[0.7rem] flex items-center gap-[0.8rem]',
+      )}
+    >
+      <div
+        className={cn(
+          inputWrapperStyle(),
+          'flex-1 h-[4rem] bg-white border border-gray-200 rounded-[2rem] flex items-center pl-[1.4rem] pr-[1.2rem] py-[1rem]',
+        )}
+      >
+        <input
+          ref={inputRef}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          type='text'
+          placeholder='무엇이든 물어보세요'
+          className='w-full bg-transparent outline-none text-label-lg placeholder:text-gray-300 text-gray-900'
+        />
+      </div>
+
+      <button
+        type='button'
+        onClick={handleSubmit}
+        className={cn(
+          'w-[4rem] h-[4rem] flex justify-center items-center rounded-[2rem] bg-mint-500 flex-shrink-0',
+        )}
+      >
+        <Icon name='backto' size={20} color='gray-50' rotate={90} />
+      </button>
+    </div>
+  );
+}

public/assets/sample1.jpg

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/shared/lib';
+import { Header } from '@/shared/components';
+import Chatting from '@/pages/chatbot/components/ChattingBubble';
+import ChattingInput from '@/pages/chatbot/components/ChattingInput';
+
+const chatPageStyle = cva(
+  'relative w-full h-dvh overflow-hidden bg-white flex flex-col',
+);
+
+const mainStyle = cva(
+  'relative w-full flex-1 pt-[14.4rem] pb-[10rem] px-[2.4rem] overflow-auto flex flex-col gap-[0.6rem]',
+);
+
+const introStyle = cva('flex flex-col items-start gap-[1rem]');
+
+export default function ChatPage() {
+  const router = useRouter();
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  type Message = {
+    id: number;
+    text: string;
+    variant: 'received' | 'sent';
+  };
+
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  // 새로운 채팅 자동 스크롤
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // 메세지 전송 핸들러
+  const handleSend = (text: string) => {
+    if (!text.trim()) return;
+    const newMsg = { id: Date.now(), text, variant: 'sent' as const };
+    setMessages((prev) => [...prev, newMsg]);
+  };
+
+  return (
+    <div className={cn(chatPageStyle())}>
+      {/* 헤더 고정 */}
+      <div className='fixed top-0 left-0 w-full z-10'>
+        <Header title='ChatBot' onClick={() => router.back()} />
+      </div>
+
+      {/* 메인 콘텐츠 */}
+      <main className={cn(mainStyle())}>
+        {/* 로고 + 기본 멘트 */}
+        <div className={cn(introStyle())}>
+          {/* 로고 자리 (임시) */}
+          <div className='w-[6rem] h-[6rem] rounded-full bg-gray-200 flex-shrink-0' />
+          <Chatting
+            message='안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
+            variant='received'
+          />
+          <Chatting
+            message='원하시는 정보를 물어봐주세요!'
+            variant='received'
+          />
+        </div>
+
+        {/* 사용자 메시지 */}
+        {messages
+          .filter((msg) => msg.id > 2)
+          .map((msg) => (
+            <Chatting key={msg.id} message={msg.text} variant={msg.variant} />
+          ))}
+
+        {/* 스크롤 */}
+        <div ref={bottomRef} />
+      </main>
+
+      {/* 입력창 */}
+      <ChattingInput onSend={handleSend} />
+    </div>
+  );
+}

public/lottie/loading_revised.json

@@ -0,0 +1,108 @@
+import { Header, EventCard } from '@/shared/components';
+import DateTag from '@/pages/events/components/DateTag';
+import { cn } from '@/shared/lib';
+import { eventData } from '@/shared/constants/events/eventsData';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+const EventDetailPage = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const event = eventData.find((e) => e.id === Number(id));
+  if (!event) return null;
+
+  const { name, address, description, startDate, endDate, imageSrc } = event;
+
+    return (
+    <div
+      className={cn(
+        'relative w-full min-h-[100vh] overflow-auto',
+      )}
+    >
+      <Header
+        title='행사명'
+        onClick={() => router.back()}
+        className={cn('fixed top-0 left-0 right-0 z-50')}
+      />
+
+      <main
+        className={cn(
+          'flex flex-col items-center justify-start',
+          'px-[2.4rem] pt-[calc(10rem+1.4rem)]'
+        )}
+      >
+        {/* 행사 기간 */}
+        <div className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
+          <DateTag startDate={startDate} endDate={endDate} />
+        </div>
+
+        {/* 대표 이미지 */}
+        <section
+          className={cn(
+            'relative w-full flex justify-center max-w-[35.4rem]',
+            'mt-[1rem]'
+          )}
+        >
+          {imageSrc ? (
+            <Image
+              src={imageSrc}
+              alt={`${name} 이미지`}
+              width={354}
+              height={430}
+              className={cn('w-full h-auto object-cover rounded-[2rem]')}
+            />
+          ) : (
+            <div
+              className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
+            />
+          )}
+        </section>
+
+        {/* 행사 카드 */}
+        <div
+          className={cn(
+            'flex flex-col items-center w-full gap-[0.8rem]',
+            'mt-[0.8rem]'
+          )}
+        >
+          <EventCard
+            name={name}
+            address={address}
+            description={description}
+            variant='gray'
+            size='large'
+          />
+
+          {/* 관련 행사 */}
+          <div
+            className={cn(
+              'grid grid-cols-2 gap-[1.2rem] justify-items-center w-full max-w-[35.4rem]'
+            )}
+          >
+            <div className={cn('w-[17rem]')}>
+              <EventCard
+                name='관련 행사'
+                address=''
+                description=''
+                variant='gray'
+                size='small'
+              />
+            </div>
+            <div className={cn('w-[17rem]')}>
+              <EventCard
+                name='관련 행사'
+                address=''
+                description=''
+                variant='gray'
+                size='small'
+              />
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default EventDetailPage;