Merge pull request #8 from Snowgent/feature/#3-onboarding

#3 [CHORE] 온보딩 페이지 마무리

Author: sunhwaaRj

src/api/api.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 export const apiClient = axios.create({
-  baseURL: import.meta.env.VITE_API_BASE_URL || 'https://backendbase.site',
+  baseURL: 'https://backendbase.site',
   headers: {
     'Content-Type': 'multipart/form-data',
   },

src/components/chat/FileSendButton.tsx

@@ -1,5 +1,4 @@
 import { useRef, useState } from 'react';
-import { apiClient } from '../../api/api';
 import axios from 'axios';
 
 interface UploadResponse {
@@ -32,9 +31,11 @@ const FileSendButton = ({ onUploadSuccess }: FileSendButtonProps) => {
       const formData = new FormData();
       formData.append('file', file);
 
+      const uploadUrl = import.meta.env.VITE_UPLOAD_URL;
+      console.log('Uploading to:', uploadUrl);
       console.log('Uploading file:', file.name);
 
-      const response = await apiClient.post<UploadResponse>('/chat/upload', formData, {
+      const response = await axios.post<UploadResponse>(uploadUrl, formData, {
         headers: {
           'Content-Type': 'multipart/form-data',
         },

src/components/onboarding/FormButton.tsx

@@ -1,6 +1,6 @@
 const FormButton = ({ type, onClick }: { type: string; onClick: () => void }) => {
   const buttonStyle =
-    'bg-[#1d4ed8] w-full text-white py-3 rounded-lg text-center font-medium cursor-pointer';
+    'bg-[#0D2D84] w-full text-white py-3 rounded-lg text-center font-medium cursor-pointer';
 
   const grayButtonStyle =
     'bg-gray-300 w-full text-gray-700 py-3 rounded-lg text-center font-medium cursor-pointer';

src/components/onboarding/MultiSelect.tsx

@@ -1,10 +1,42 @@
-const MultiSelect = ({ title }: { title: string }) => {
+import { useState } from 'react';
+
+interface MultiSelectProps {
+  title: string;
+  options?: string[];
+}
+
+const MultiSelect = ({
+  title,
+  options = ['10대 이하', '20대', '30대', '40대', '50대', '60대 이상'],
+}: MultiSelectProps) => {
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+
+  const toggleOption = (option: string) => {
+    setSelectedOptions((prev) =>
+      prev.includes(option) ? prev.filter((item) => item !== option) : [...prev, option],
+    );
+  };
+
   return (
     <div className="flex flex-col gap-6">
       {/* 제목 */}
       <p className="text-[24px] font-semibold">{title}을 선택하세요</p>
-      {/* 입력칸 */}
-      <input type="text" className="rounded-xl border border-gray-200 px-2 py-4 text-[20px]" />
+      {/* 6개 그리드 버튼 */}
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+        {options.map((option, index) => (
+          <button
+            key={index}
+            onClick={() => toggleOption(option)}
+            className={`rounded-xl border-2 px-4 py-8 text-[18px] font-medium duration-200 ${
+              selectedOptions.includes(option)
+                ? 'border-[#0D2D84] bg-[#0D2D84] text-white'
+                : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
+            }`}
+          >
+            {option}
+          </button>
+        ))}
+      </div>
     </div>
   );
 };

src/components/onboarding/SingleSelect.tsx

@@ -1,11 +1,11 @@
 const defaultOptions = [
-  { id: 1, name: 'option1' },
-  { id: 2, name: 'option2' },
-  { id: 3, name: 'option3' },
-  { id: 4, name: 'option4' },
-  { id: 5, name: 'option5' },
-  { id: 6, name: 'option6' },
-  { id: 7, name: 'option7' },
+  { id: 1, name: '식품 소분업' },
+  { id: 2, name: '기타식품판매업' },
+  { id: 3, name: '일반음식점' },
+  { id: 4, name: '휴게음식점' },
+  { id: 5, name: '제과점' },
+  { id: 6, name: '단란주점/유흥주점' },
+  { id: 7, name: '즉석판매제조·가공업' },
 ];
 
 const SingleSelect = ({ title }: { title: string }) => {

src/pages/chat/ChatPageTest.tsx

@@ -123,7 +123,7 @@ export default function ChatPageTest() {
       {
         id: Date.now().toString(),
         role: 'assistant',
-        content: '업로드 완료되었습니다. 재고 관리 채팅을 시작하세요',
+        content: '재고 파일이 업로드 완료되었습니다. \n 채팅을 시작해보세요 !',
       },
     ]);
   };

src/pages/onboarding/Onboarding.tsx

@@ -10,7 +10,7 @@ import MultiSelect from '../../components/onboarding/MultiSelect';
 const Onboarding = () => {
   const navigate = useNavigate();
   const [currentStep, setCurrentStep] = useState(1);
-  const totalSteps = 5;
+  const totalSteps = 6;
 
   const handlePrev = () => {
     if (currentStep > 1) {
@@ -58,7 +58,7 @@ const Onboarding = () => {
           </div>
           <div className="h-2 w-full rounded-full bg-gray-200">
             <div
-              className="h-2 rounded-full bg-blue-500 transition-all duration-300"
+              className="h-2 rounded-full bg-[#0D2D84] transition-all duration-300"
               style={{ width: `${(currentStep / totalSteps) * 100}%` }}
             />
           </div>