[Frontend] 견적 짜기 화면 css (#112)

## 📝작업 내용

견적 짜기 화면 구현
장바구니 쪽은 css만

## 💬리뷰 요구사항(선택)

모달 로직 좀 확인해주세요 !

Author: sysy04

frontend/src/assets/image/estimateCheck.svg

@@ -0,0 +1,12 @@
+import styles from './categoryItem.module.css'
+
+interface categoryItemProps{
+    category: string;
+    active: boolean;
+    onClick: () => void;
+}
+export default function CategoryItem({category, active, onClick}: categoryItemProps){
+    return(
+        <div className={`${styles.item} ${active ? styles.active : ''}`} onClick={onClick}>{category}</div>
+    )
+}

frontend/src/assets/image/leftArrow.svg

@@ -0,0 +1,30 @@
+import CategoryItem from "./CategoryItem";
+import styles from './categorySelector.module.css'
+import productData from '@/dummy/dummy_compabilityCheck.json'
+import { usePartListStore } from "@/stores/usePartListStore";
+
+export default function CategorySelector(){
+    const {currentCategory, setCurrentCategory, setCurrentPage, setSearchResult, setInputValue} = usePartListStore();
+    return(
+        <div className={styles.container}>
+            <div className={styles.content}>
+                {productData.map((item: any) => {
+                    return(
+                        <CategoryItem
+                        key={item.id}
+                        category={item.name}
+                        active={currentCategory===item.name}
+                        onClick={()=>{
+                            setCurrentCategory(item.name);
+                            setCurrentPage(1);
+                            setSearchResult([]);
+                            setInputValue("");
+                        }}
+                        />
+                    )
+                })}
+            </div>
+            <div className={styles.line}></div>
+        </div>
+    )
+}

frontend/src/assets/image/remove.svg

@@ -0,0 +1,16 @@
+.item{
+    width: fit-content;
+    height: fit-content;
+    padding: var(--spacing-1) var(--spacing-4);
+    line-height: 150%;
+    color: var(--color-gray-600);
+    font-weight: var(--font-weight-medium);
+    border-radius: var(--border-radius-2xl);
+    cursor: pointer;
+}
+
+.active{
+    border: solid 1px #ff5525;
+    color: #ff5525;
+    font-weight: var(--font-weight-bold);
+}

frontend/src/assets/image/rightArrow.svg

@@ -0,0 +1,18 @@
+.container{
+    margin-top: var(--spacing-12);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.content{
+    display: flex;
+    gap: var(--spacing-6);
+    margin-bottom: var(--spacing-2);
+}
+
+.line{
+    width: 1050px;
+    height: var(--border-width-1);
+    background-color: var(--color-gray-300);
+}

frontend/src/assets/image/searchIcon.svg

@@ -0,0 +1,33 @@
+import style from "./estimateButton.module.css";
+
+interface estimateBtnProp {
+  content: string;
+  onClick?: () => void;
+  variant?: "primary" | "outline";
+  size?: "sm" | "md" | "lg" ;
+}
+
+export default function EstimateButton({
+  content,
+  onClick,
+  variant = "primary",
+  size = "md", 
+}: estimateBtnProp) {
+
+  const buttonClass = [
+    style.btn,
+    style[variant],
+    style[size],
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button
+      className={buttonClass}
+      onClick={onClick}
+    >
+      {content}
+    </button>
+  );
+}