첫 커밋

src/components/Features.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+
+interface Feature {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+const Features: React.FC = () => {
+  const features: Feature[] = [
+    {
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+        </svg>
+      ),
+      title: '보안 결제',
+      description: '최고 수준의 암호화 기술로 고객의 결제 정보를 안전하게 보호합니다.'
+    },
+    {
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        </svg>
+      ),
+      title: '빠른 처리',
+      description: '실시간 결제 처리로 빠르고 효율적인 거래 경험을 제공합니다.'
+    },
+    {
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        </svg>
+      ),
+      title: '모바일 최적화',
+      description: '하이브리드 앱으로 iOS, Android 모든 기기에서 완벽하게 동작합니다.'
+    },
+    {
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>
+      ),
+      title: '24/7 지원',
+      description: '언제든지 도움이 필요할 때 전문가 팀이 즉시 지원해드립니다.'
+    },
+    {
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      ),
+      title: '신뢰성',
+      description: '15년간 축적된 노하우로 안정적이고 신뢰할 수 있는 서비스를 제공합니다.'
+    },
+    {
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      ),
+      title: '맞춤 설정',
+      description: '비즈니스 요구사항에 맞게 유연하게 설정할 수 있는 결제 솔루션입니다.'
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-gray-50">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            왜 나이스페이먼츠인가요?
+          </h2>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            고객의 성공이 우리의 성공입니다. 최고의 기술력과 서비스로 비즈니스 성장을 지원합니다.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feature, index) => (
+            <div 
+              key={index} 
+              className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"
+            >
+              <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white mb-6">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-4">
+                {feature.title}
+              </h3>
+              <p className="text-gray-600 leading-relaxed">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="text-center mt-16">
+          <button className="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-blue-700 transition-all transform hover:scale-105 shadow-lg">
+            더 많은 기능 보기
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Features;

src/components/Footer.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Link } from '@tanstack/react-router';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="bg-gray-900 text-white">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid md:grid-cols-4 gap-8">
+          {/* Company Info */}
+          <div className="space-y-4">
+            <div className="flex items-center space-x-2">
+              <div className="w-8 h-8 bg-blue-600 rounded-md flex items-center justify-center">
+                <span className="text-white font-bold text-sm">NP</span>
+              </div>
+              <span className="text-xl font-bold">NicePayments</span>
+            </div>
+            <p className="text-gray-400 leading-relaxed">
+              15년 경험의 결제 전문 기업으로, 안전하고 편리한 결제 서비스를 제공합니다.
+            </p>
+            <div className="flex space-x-4">
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                </svg>
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
+                </svg>
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                </svg>
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24c6.624 0 11.99-5.367 11.99-11.987C24.007 5.367 18.641.001 12.017.001z"/>
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          {/* Services */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">서비스</h3>
+            <ul className="space-y-2 text-gray-400">
+              <li><a href="#" className="hover:text-white transition-colors">카드 결제</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">계좌이체</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">모바일 결제</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">가상계좌</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">API 문서</a></li>
+            </ul>
+          </div>
+
+          {/* Company */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">회사</h3>
+            <ul className="space-y-2 text-gray-400">
+              <li><Link to="/about" className="hover:text-white transition-colors">회사소개</Link></li>
+              <li><a href="#" className="hover:text-white transition-colors">채용정보</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">보도자료</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">파트너십</a></li>
+              <li><Link to="/contact" className="hover:text-white transition-colors">문의하기</Link></li>
+            </ul>
+          </div>
+
+          {/* Support */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">고객지원</h3>
+            <ul className="space-y-2 text-gray-400">
+              <li><a href="#" className="hover:text-white transition-colors">FAQ</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">개발자 가이드</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">상태 페이지</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">보안센터</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">1:1 문의</a></li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Contact Info */}
+        <div className="border-t border-gray-800 mt-8 pt-8">
+          <div className="grid md:grid-cols-2 gap-4">
+            <div>
+              <h4 className="font-semibold mb-2">고객센터</h4>
+              <p className="text-gray-400">전화: 02-1234-5678</p>
+              <p className="text-gray-400">이메일: contact@nicepayments.com</p>
+              <p className="text-gray-400">운영시간: 평일 09:00 - 18:00</p>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-2">회사정보</h4>
+              <p className="text-gray-400">주소: 서울시 강남구 테헤란로 123</p>
+              <p className="text-gray-400">사업자등록번호: 123-45-67890</p>
+              <p className="text-gray-400">대표: 홍길동</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Copyright */}
+        <div className="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
+          <p className="text-gray-400">
+            © 2023 NicePayments. All rights reserved.
+          </p>
+          <div className="flex space-x-6 mt-4 md:mt-0">
+            <a href="#" className="text-gray-400 hover:text-white transition-colors text-sm">
+              개인정보처리방침
+            </a>
+            <a href="#" className="text-gray-400 hover:text-white transition-colors text-sm">
+              이용약관
+            </a>
+            <a href="#" className="text-gray-400 hover:text-white transition-colors text-sm">
+              쿠키정책
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Header.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import { Link, useRouterState } from '@tanstack/react-router';
+import { Toasts } from '@/shared/ui/toasts/toasts';
+import { notiBar, snackBar } from '@/shared/lib/toast';
+import { ToastContainer,toast } from 'react-toastify';
+
+
+const Header: React.FC = () => {
+  const [isOpenBottomSheet, setIsOpenBottomSheet] = useState(true);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const router = useRouterState();
+
+  const isActive = (path: string) => {
+    return router.location.pathname === path;
+  };
+  const toastTest = (str: string) => {
+    //alert(str)
+    toast(str);
+    //notiBar(str)
+    
+  };
+
+  const openBottomSheet = () => {
+
+  };
+
+  return (
+    <>
+    <header 
+      className="fixed left-0 right-0 bg-white shadow-lg z-50"
+      style={{
+        top: `env(safe-area-inset-top, 0px)`
+      }}
+    >
+      <Toasts />
+      <div className="container mx-auto px-4">
+        <div className="flex justify-between items-center py-4">
+          {/* Logo */}
+          <Link to="/" className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-blue-600 rounded-md flex items-center justify-center">
+              <span className="text-white font-bold text-sm">NP</span>
+            </div>
+            <span className="text-xl font-bold text-gray-900">
+              NicePayments
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center space-x-8">
+            <Link
+              to="/"
+              className={`font-medium transition-colors ${
+                isActive('/') 
+                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
+                  : 'text-gray-700 hover:text-blue-600'
+              }`}
+            >
+              홈
+            </Link>
+            <Link
+              to="/about"
+              className={`font-medium transition-colors ${
+                isActive('/about') 
+                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
+                  : 'text-gray-700 hover:text-blue-600'
+              }`}
+            >
+              회사소개
+            </Link>
+            <Link
+              to="/contact"
+              className={`font-medium transition-colors ${
+                isActive('/contact') 
+                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
+                  : 'text-gray-700 hover:text-blue-600'
+              }`}
+            >
+              문의하기
+            </Link>
+            <Link
+              to="/test"
+              className={`font-medium transition-colors ${
+                isActive('/test') 
+                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
+                  : 'text-gray-700 hover:text-blue-600'
+              }`}
+            >
+              테스트
+            </Link>
+          </nav>
+
+          {/* User Menu */}
+          <div className="hidden md:flex items-center space-x-4">
+            <div className="space-x-2">
+              <button 
+                onClick={() => toastTest('로그인')}
+                className="text-gray-700 px-4 py-2 rounded-md hover:bg-gray-100 transition-colors">
+                로그인
+              </button>
+              <button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
+                회원가입
+              </button>
+            </div>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden flex items-center justify-center w-8 h-8"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            <svg 
+              className="w-6 h-6" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              {isMenuOpen ? (
+                <path 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                  strokeWidth={2} 
+                  d="M6 18L18 6M6 6l12 12" 
+                />
+              ) : (
+                <path 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                  strokeWidth={2} 
+                  d="M4 6h16M4 12h16M4 18h16" 
+                />
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        {isMenuOpen && (
+          <div className="md:hidden py-4 border-t border-gray-200">
+            <nav className="flex flex-col space-y-4">
+              <Link
+                to="/"
+                className={`font-medium transition-colors ${
+                  isActive('/') ? 'text-blue-600' : 'text-gray-700'
+                }`}
+                onClick={() => setIsMenuOpen(false)}
+              >
+                홈
+              </Link>
+              <Link
+                to="/about"
+                className={`font-medium transition-colors ${
+                  isActive('/about') ? 'text-blue-600' : 'text-gray-700'
+                }`}
+                onClick={() => setIsMenuOpen(false)}
+              >
+                회사소개
+              </Link>
+              <Link
+                to="/contact"
+                className={`font-medium transition-colors ${
+                  isActive('/contact') ? 'text-blue-600' : 'text-gray-700'
+                }`}
+                onClick={() => setIsMenuOpen(false)}
+              >
+                문의하기
+              </Link>
+              <Link
+                to="/test"
+                className={`font-medium transition-colors ${
+                  isActive('/test') ? 'text-blue-600' : 'text-gray-700'
+                }`}
+                onClick={() => setIsMenuOpen(false)}
+              >
+                테스트
+              </Link>
+              
+              <div className="pt-4 border-t border-gray-200">
+                <div className="space-y-2">
+                  <button 
+                    className="w-full text-left text-gray-700 hover:text-blue-600 transition-colors"
+                    onClick={() => toastTest('로그인')}
+                  >
+                    로그인
+                  </button>
+                  <button 
+                    className="w-full text-left bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+                    onClick={() => setIsMenuOpen(false)}
+                  >
+                    회원가입
+                  </button>
+                </div>
+              </div>
+            </nav>
+          </div>
+        )}
+      </div>
+    </header>
+    
+    </>
+  );
+};
+
+export default Header;

src/components/Hero.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+const Hero: React.FC = () => {
+  return (
+    <section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+      <div className="container mx-auto px-4 py-20">
+        <div className="max-w-4xl mx-auto text-center">
+          <h1 className="text-4xl md:text-6xl font-bold mb-6">
+            안전하고 편리한
+            <br />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-pink-400">
+              결제 서비스
+            </span>
+          </h1>
+          <p className="text-xl md:text-2xl mb-8 opacity-90">
+            나이스페이먼츠와 함께 더 나은 결제 경험을 시작하세요.
+            <br />
+            하이브리드 앱으로 언제 어디서나 간편하게!
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <button className="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-all transform hover:scale-105 shadow-lg">
+              서비스 시작하기
+            </button>
+            <button className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-blue-600 transition-all transform hover:scale-105">
+              더 알아보기
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      {/* Floating Elements */}
+      <div className="absolute top-20 left-10 w-20 h-20 bg-white opacity-10 rounded-full animate-bounce"></div>
+      <div className="absolute top-40 right-20 w-16 h-16 bg-yellow-400 opacity-20 rounded-full animate-pulse"></div>
+      <div className="absolute bottom-20 left-1/4 w-12 h-12 bg-pink-400 opacity-20 rounded-full animate-bounce delay-1000"></div>
+      
+      {/* Wave Bottom */}
+      <div className="relative">
+        <svg 
+          className="w-full h-20 fill-current text-white" 
+          viewBox="0 0 1200 120" 
+          preserveAspectRatio="none"
+        >
+          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" 
+          opacity=".25"
+        ></path>
+        <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" 
+          opacity=".5"
+        ></path>
+        <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"></path>
+        </svg>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

src/components/LanguageSwitcher.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { appBridge } from '@/utils/appBridge';
+
+const LanguageSwitcher: React.FC = () => {
+  const { i18n, t } = useTranslation();
+
+  const changeLanguage = async (language: string) => {
+    // 웹 언어 변경
+    i18n.changeLanguage(language);
+    localStorage.setItem('i18nextLng', language);
+    
+    // 네이티브 환경에서 네이티브 언어도 변경
+    if (appBridge.isNativeEnvironment()) {
+      try {
+        await appBridge.setLanguage(language);
+      } catch (error) {
+        console.error('Failed to set native language:', error);
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      <span className="text-sm text-gray-600">{t('common.language')}</span>
+      <select
+        value={i18n.language}
+        onChange={(e) => changeLanguage(e.target.value)}
+        className="text-sm border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        <option value="ko">한국어</option>
+        <option value="en">English</option>
+      </select>
+    </div>
+  );
+};
+
+export default LanguageSwitcher;

src/components/SearchFilterButton.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface SearchFilterButtonProps {
+  displayText: string;
+  isActive: boolean;
+  onClick: () => void;
+  className?: string;
+  showIcon?: boolean;
+  disabled?: boolean;
+}
+
+const SearchFilterButton: React.FC<SearchFilterButtonProps> = ({
+  displayText,
+  isActive,
+  onClick,
+  className = '',
+  showIcon = true,
+  disabled = false
+}) => {
+  const baseClasses = "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500";
+  
+  const activeClasses = isActive
+    ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-100"
+    : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400";
+    
+  const disabledClasses = disabled
+    ? "opacity-50 cursor-not-allowed"
+    : "cursor-pointer";
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseClasses} ${activeClasses} ${disabledClasses} ${className}`}
+    >
+      {showIcon && (
+        <svg 
+          className="w-4 h-4 mr-2" 
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path 
+            strokeLinecap="round" 
+            strokeLinejoin="round" 
+            strokeWidth={2} 
+            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" 
+          />
+        </svg>
+      )}
+      <span className="truncate">{displayText}</span>
+      {isActive && (
+        <div className="ml-2 w-2 h-2 bg-blue-500 rounded-full flex-shrink-0" />
+      )}
+    </button>
+  );
+};
+
+export default SearchFilterButton;

src/components/SearchFilterExample.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchFilter } from '@/hooks/useSearchFilter';
+import SearchFilterButton from './SearchFilterButton';
+import { SearchFilter, formatDateRange } from '@/types/filter';
+
+interface SearchFilterExampleProps {
+  onFilterChange?: (filter: SearchFilter) => void;
+  className?: string;
+}
+
+const SearchFilterExample: React.FC<SearchFilterExampleProps> = ({
+  onFilterChange,
+  className = ''
+}) => {
+  const { t } = useTranslation();
+  const searchFilterOptions = onFilterChange ? {
+    storageKey: 'transaction_search_filter',
+    onFilterChange
+  } : {
+    storageKey: 'transaction_search_filter'
+  };
+
+  const {
+    filter,
+    isModalOpen,
+    openModal,
+    closeModal,
+    handleFilterConfirm,
+    getDisplayText,
+    isFilterActive,
+    resetFilter
+  } = useSearchFilter(searchFilterOptions);
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      {/* 조회조건 버튼과 필터 정보 */}
+      <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
+        <div className="flex gap-2 items-center">
+          <SearchFilterButton
+            displayText={getDisplayText()}
+            isActive={isFilterActive}
+            onClick={openModal}
+          />
+          
+          {/* 초기화 버튼 (필터가 활성화된 경우만 표시) */}
+          {isFilterActive && (
+            <button
+              onClick={resetFilter}
+              className="text-sm text-gray-500 hover:text-gray-700 underline"
+            >
+              {t('common.reset')}
+            </button>
+          )}
+        </div>
+        
+        {/* 현재 필터 요약 정보 */}
+        <div className="text-sm text-gray-600">
+          {filter.dateRange && (
+            <span>
+              {formatDateRange(filter.dateRange)}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* 현재 적용된 필터 상세 정보 (디버깅용) */}
+      <div className="bg-gray-50 p-4 rounded-lg">
+        <h3 className="text-sm font-medium text-gray-900 mb-2">{t('filter.currentConditions')}</h3>
+        <div className="space-y-1 text-sm text-gray-600">
+          <div>
+            <span className="font-medium">{t('filter.period')}:</span> {filter.period === 'custom' ? t('filter.periods.custom') : t(`filter.periods.${filter.period}`)}
+          </div>
+          {filter.dateRange && (
+            <div>
+              <span className="font-medium">{t('filter.dateRange')}:</span> {formatDateRange(filter.dateRange)}
+            </div>
+          )}
+          <div>
+            <span className="font-medium">{t('filter.transactionType')}:</span> {t(`filter.transactionTypes.${filter.transactionType}`)}
+          </div>
+          <div>
+            <span className="font-medium">{t('filter.sortOrder')}:</span> {t(`filter.sortOrders.${filter.sortOrder}`)}
+          </div>
+        </div>
+      </div>
+
+      {/* 조회조건 설정 모달 
+      <SearchFilterModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        onConfirm={handleFilterConfirm}
+        initialFilter={filter}
+      />
+      */}
+    </div>
+  );
+};
+
+export default SearchFilterExample;

src/components/Services.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+interface Service {
+  title: string;
+  description: string;
+  features: string[];
+  icon: React.ReactNode;
+  color: string;
+}
+
+const Services: React.FC = () => {
+  const services: Service[] = [
+    {
+      title: '카드 결제',
+      description: '국내외 모든 카드사와 연동된 안전한 카드 결제 서비스',
+      features: [
+        '국내외 주요 카드사 지원',
+        '무이자 할부 서비스',
+        '실시간 승인 처리',
+        '3D Secure 보안 인증'
+      ],
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+        </svg>
+      ),
+      color: 'from-blue-500 to-blue-600'
+    },
+    {
+      title: '계좌이체',
+      description: '은행 계좌를 통한 직접 이체 결제 서비스',
+      features: [
+        '전 은행 실시간 이체',
+        '낮은 수수료율',
+        '자동 입금 확인',
+        '환불 처리 자동화'
+      ],
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      ),
+      color: 'from-green-500 to-green-600'
+    },
+    {
+      title: '모바일 결제',
+      description: '카카오페이, 네이버페이 등 간편결제 서비스',
+      features: [
+        '주요 간편결제 연동',
+        '원터치 결제',
+        '포인트 사용 가능',
+        '멤버십 혜택 적용'
+      ],
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        </svg>
+      ),
+      color: 'from-purple-500 to-purple-600'
+    },
+    {
+      title: '가상계좌',
+      description: '개인별 전용 가상계좌를 통한 무통장 입금 서비스',
+      features: [
+        '실시간 계좌 발급',
+        '자동 입금 확인',
+        '다중 은행 지원',
+        '입금 알림 서비스'
+      ],
+      icon: (
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+        </svg>
+      ),
+      color: 'from-orange-500 to-orange-600'
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            다양한 결제 서비스
+          </h2>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            고객의 다양한 결제 니즈에 맞춰 최적화된 결제 솔루션을 제공합니다.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {services.map((service, index) => (
+            <div 
+              key={index}
+              className="group bg-white border-2 border-gray-100 rounded-2xl p-8 hover:border-transparent hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
+            >
+              <div className={`w-16 h-16 bg-gradient-to-r ${service.color} rounded-xl flex items-center justify-center text-white mb-6 group-hover:scale-110 transition-transform duration-300`}>
+                {service.icon}
+              </div>
+              
+              <h3 className="text-2xl font-bold text-gray-900 mb-4">
+                {service.title}
+              </h3>
+              
+              <p className="text-gray-600 mb-6 leading-relaxed">
+                {service.description}
+              </p>
+              
+              <div className="space-y-3">
+                <h4 className="font-semibold text-gray-900 mb-3">주요 기능</h4>
+                {service.features.map((feature, featureIndex) => (
+                  <div key={featureIndex} className="flex items-center space-x-3">
+                    <div className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></div>
+                    <span className="text-gray-700">{feature}</span>
+                  </div>
+                ))}
+              </div>
+              
+              <button className="mt-8 w-full bg-gray-50 text-gray-700 py-3 px-6 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition-all duration-300">
+                자세히 보기
+              </button>
+            </div>
+          ))}
+        </div>
+
+        <div className="text-center mt-16">
+          <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-8">
+            <h3 className="text-2xl font-bold text-gray-900 mb-4">
+              맞춤형 결제 솔루션이 필요하신가요?
+            </h3>
+            <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
+              비즈니스 규모와 업종에 맞는 최적의 결제 솔루션을 제안해드립니다.
+              전문 컨설턴트와 상담을 통해 최고의 결제 환경을 구축하세요.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <button className="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
+                무료 상담 신청
+              </button>
+              <button className="border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition-colors">
+                서비스 가이드 다운로드
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Services;

src/components/SlideMenu.tsx

@@ -0,0 +1,193 @@
+import React, { useEffect } from 'react';
+
+interface SlideMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
+  // ESC 키로 메뉴 닫기
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      // 배경 스크롤 방지
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+  return (
+    <>
+      {/* 오버레이 */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 bg-black bg-opacity-50 z-[60] transition-opacity duration-300"
+          onClick={onClose}
+        />
+      )}
+      
+      {/* 슬라이드 메뉴 */}
+      <div 
+        className={`fixed top-0 right-0 h-full w-full bg-white z-[60] transform transition-transform duration-300 ease-in-out flex flex-col ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
+        {/* 헤더 */}
+        <div 
+          className="flex items-center justify-between px-4 py-4 border-b border-gray-200 bg-white sticky top-0 z-10"
+          style={{
+            paddingTop: `calc(1rem + env(safe-area-inset-top, 0px))`
+          }}
+        >
+          <h2 className="text-xl font-bold text-gray-900">메뉴</h2>
+          <button 
+            onClick={onClose}
+            className="p-2 rounded-md hover:bg-gray-100 transition-colors"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* 메뉴 콘텐츠 */}
+        <div className="p-4 flex-1 overflow-y-scroll pb-16 scrollbar-hide">
+          <div className="space-y-6">
+            <div className="border border-gray-200 rounded-lg p-6">
+              <h3 className="text-lg font-semibold text-gray-800 mb-4">계정 관리</h3>
+              <ul className="space-y-3">
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                    </svg>
+                    프로필 설정
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                    </svg>
+                    비밀번호 변경
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-5 5v-5zM8 17H3l5 5v-5zM12 3v3m6.364-.636l-2.121 2.121M21 12h-3M18.364 18.364l-2.121-2.121M12 21v-3m-6.364.636l2.121-2.121M3 12h3M5.636 5.636l2.121 2.121" />
+                    </svg>
+                    알림 설정
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            <div className="border border-gray-200 rounded-lg p-6">
+              <h3 className="text-lg font-semibold text-gray-800 mb-4">결제 서비스</h3>
+              <ul className="space-y-3">
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    결제 내역
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+                    </svg>
+                    환불 요청
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                    </svg>
+                    결제 방법 관리
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            <div className="border border-gray-200 rounded-lg p-6">
+              <h3 className="text-lg font-semibold text-gray-800 mb-4">고객 지원</h3>
+              <ul className="space-y-3">
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    FAQ
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                    </svg>
+                    1:1 문의
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    이용약관
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            <div className="border border-gray-200 rounded-lg p-6">
+              <h3 className="text-lg font-semibold text-gray-800 mb-4">기타</h3>
+              <ul className="space-y-3">
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    앱 정보
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                    </svg>
+                    개발자 정보
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                    </svg>
+                    로그아웃
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SlideMenu; 

src/components/TabBar.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { Link, useRouterState } from '@tanstack/react-router';
+import { useScrollDirection } from '../hooks/useScrollDirection';
+import SlideMenu from './SlideMenu';
+import { useTranslation } from 'react-i18next';
+
+const TabBar: React.FC = () => {
+  const router = useRouterState();
+  const { translateY, isScrollingState } = useScrollDirection();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { t } = useTranslation();
+
+  const isActive = (path: string) => {
+    return router.location.pathname === path;
+  };
+
+  const tabs = [
+    {
+      path: '/',
+      label: t('menu.home'),
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+        </svg>
+      )
+    },
+    {
+      path: '/about',
+      label: t('menu.about'),
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+        </svg>
+      )
+    },
+    {
+      path: '/contact',
+      label: t('menu.contact'),
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+      )
+    },
+    {
+      path: '/test',
+      label: t('menu.test'),
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+      )
+    }
+  ];
+
+  return (
+    <>
+      <div 
+        className="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 z-50 tabbar-scroll-effect"
+        style={{
+          transform: `translateY(${translateY}px)`,
+          paddingBottom: `env(safe-area-inset-bottom, 0px)`,
+          transition: isScrollingState 
+            ? 'transform 0.05s linear' 
+            : 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+        }}
+      >
+        <div className="container mx-auto px-4">
+          <div className="flex justify-around items-center py-1">
+            {tabs.map((tab) => (
+              <Link
+                key={tab.path}
+                to={tab.path}
+                className={`flex flex-col items-center justify-center py-2 px-3 rounded-lg transition-colors min-w-[60px] ${
+                  isActive(tab.path)
+                    ? 'text-blue-600 bg-blue-50'
+                    : 'text-gray-600 hover:text-blue-600 hover:bg-gray-50'
+                }`}
+                preload="intent"
+              >
+                <div className="mb-1">
+                  {tab.icon}
+                </div>
+                <span className="text-xs font-medium">{tab.label}</span>
+              </Link>
+            ))}
+            
+            {/* 메뉴 탭 */}
+            <button
+              onClick={() => setIsMenuOpen(true)}
+              className={`flex flex-col items-center justify-center py-2 px-3 rounded-lg transition-colors min-w-[60px] ${
+                isMenuOpen
+                  ? 'text-blue-600 bg-blue-50'
+                  : 'text-gray-600 hover:text-blue-600 hover:bg-gray-50'
+              }`}
+            >
+              <div className="mb-1">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </div>
+              <span className="text-xs font-medium">{t('menu.menu')}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      {/* 슬라이드 메뉴 */}
+      <SlideMenu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
+    </>
+  );
+};
+
+export default TabBar; 

src/components/index.ts

@@ -0,0 +1,10 @@
+export { default as Header } from './Header';
+export { default as Footer } from './Footer';
+export { default as Hero } from './Hero';
+export { default as Features } from './Features';
+export { default as Services } from './Services';
+export { default as TabBar } from './TabBar';
+export { default as SlideMenu } from './SlideMenu';
+export { default as SearchFilterButton } from './SearchFilterButton';
+export { default as SearchFilterExample } from './SearchFilterExample';
+export { default as LanguageSwitcher } from './LanguageSwitcher';