여정생성 버튼 마크업

src/components/Tours/CreateTripButton.tsx

@@ -0,0 +1,11 @@
+import { PlusIcon } from '@components/common/icons/Icons';
+
+const CreateTripButton = () => {
+  return (
+    <div className="sticky bottom-20 z-[100] ml-auto mr-2 h-[51px] w-[51px] cursor-pointer">
+      <PlusIcon size={51} color="white" />
+    </div>
+  );
+};
+
+export default CreateTripButton;

src/components/Tours/ToursSectionTop.tsx

@@ -6,17 +6,16 @@ const ToursSectionTop = () => {
   const [selectedRegion, setSelectedRegion] = useState<string>('전체');
 
   return (
-    <>
+    <div>
       <div className="sticky top-0 z-50 bg-white py-0.5">
         <h1 className="title2 pt-3">지금 인기여행지</h1>
         <ToursCategory
           selectedRegion={selectedRegion}
           setSelectedRegion={setSelectedRegion}
         />
       </div>
-
       <ToursList selectedRegion={selectedRegion} />
-    </>
+    </div>
   );
 };
 

src/components/common/icons/Icons.tsx

@@ -415,8 +415,8 @@ export const PlusIcon: React.FC<IconProps> = ({
           width="57.6"
           height="57.6"
           filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB">
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"

src/components/common/nav/Nav.tsx

@@ -16,21 +16,25 @@ const Nav = () => {
           <div className="flex justify-center">
             <HomeIcon fill={isActive('/') ? 'currentColor' : 'none'} />
           </div>
-          <p className="caption2 mt-[3px] text-center">홈</p>
+          <p className="caption2 mt-[3px] pr-[1px] text-center">홈</p>
         </div>
         <div
           onClick={() => navigate('/')}
           className="cursor-pointer flex-col items-center justify-center px-2">
           <CalendarIcon />
-          <p className="caption2 mt-[3px] text-center text-xs/[11px]">일정</p>
+          <p className="caption2 mt-[3px] pr-[1px] text-center text-xs/[11px]">
+            일정
+          </p>
         </div>
         <div
           onClick={() => navigate('/')}
           className="cursor-pointer flex-col items-center justify-center px-2">
           <div className="flex justify-center">
             <HeartIcon />
           </div>
-          <p className="caption2 mt-[3px] text-center text-xs/[11px]">찜</p>
+          <p className="caption2 mt-[3px] pl-[1px] text-center text-xs/[11px]">
+            찜
+          </p>
         </div>
         <div
           onClick={() => navigate('/')}

src/pages/main/main.page.tsx

@@ -1,9 +1,11 @@
+import CreateTripButton from '@components/Tours/CreateTripButton';
 import ToursSectionTop from '@components/Tours/ToursSectionTop';
 
 const Main = () => {
   return (
     <>
       <ToursSectionTop />
+      <CreateTripButton />
     </>
   );
 };