Merge pull request #473 from 1chooo/refactor/#472

Refactor/#472

apps/web/src/app/portfolio/page.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link";
 import Image from "next/image";
 import PageHeader from "@/components/page-header";
-import FilterSelectBox from "@/components/portfolio/v2/filter-select-box";
-import FilterList from "@/components/portfolio/v2/filter-list";
+import FilterSelectBox from "@/components/portfolio/filter-select-box";
+import FilterList from "@/components/portfolio/filter-list";
 import MarkdownRenderer from "@/components/markdown/markdown-renderer";
 import { getPortfolioPosts } from "@/lib/db/portfolio";
 import config from "@/config";

apps/web/src/components/portfolio/filter-list.tsx

@@ -1,25 +1,30 @@
 import React from 'react';
-import { projectTags } from '@/config/portfolio';
-import { handleItemClick } from '@/lib/utils/filter-utils';
+import Link from 'next/link';
 
 interface FilterListProps {
-  selectedValue: string;
-  setSelectedValue: React.Dispatch<React.SetStateAction<string>>;
+  selectedTag: string;
+  blogTags: string[];
 }
 
-const FilterList: React.FC<FilterListProps> = ({ selectedValue, setSelectedValue }) => (
-  <ul className="filter-list">
-    {projectTags.map((tag) => (
-      <li className="filter-item" key={tag}>
-        <button
-          className={`filter-btn ${selectedValue === tag ? 'active' : ''}`}
-          onClick={() => handleItemClick(tag, setSelectedValue)}
-        >
-          {tag}
-        </button>
-      </li>
-    ))}
-  </ul>
-);
+const FilterList: React.FC<FilterListProps> = ({ 
+  selectedTag,
+  blogTags
+}) => {
+
+  return (
+    <ul className="filter-list">
+      {blogTags.map((tag, index) => (
+        <li className="filter-item" key={index}>
+          <Link
+            href={`/portfolio?tag=${encodeURIComponent(tag || '')}`}
+            className={`filter-btn ${selectedTag === tag ? 'active' : ''}`}
+          >
+            {tag}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+};
 
 export default FilterList;

apps/web/src/components/portfolio/filter-select-box.tsx

@@ -1,50 +1,52 @@
-import React from 'react';
-import { MdExpandMore } from "react-icons/md";
-import { projectTags } from '@/config/portfolio';
-import { handleItemClick } from '@/lib/utils/filter-utils';
+"use client";
+
+import React, { useState } from 'react';
+import { MdExpandMore } from 'react-icons/md';
+import Link from 'next/link';
 
 interface FilterSelectBoxProps {
-  selectedValue: string;
-  isSelectActive: boolean;
-  setIsSelectActive: React.Dispatch<React.SetStateAction<boolean>>;
-  setSelectedValue: React.Dispatch<React.SetStateAction<string>>;
+  selectedTag: string;
+  blogTags: string[];
 }
 
 const FilterSelectBox: React.FC<FilterSelectBoxProps> = ({
-  selectedValue,
-  isSelectActive,
-  setIsSelectActive,
-  setSelectedValue,
-}) => (
-  <div className="filter-select-box">
-    <button
-      className={`filter-select ${isSelectActive ? 'active' : ''}`}
-      onClick={() => setIsSelectActive(!isSelectActive)}
-    >
-      <div className="select-value">
-        {selectedValue || 'Select category'}
-      </div>
-      <div className="select-icon">
-        <MdExpandMore />
-      </div>
-    </button>
-    {isSelectActive && (
-      <ul className="select-list">
-        {projectTags.map((tag: string) => (
-          <li className="select-item" key={tag}>
-            <button
-              onClick={() => {
-                handleItemClick(tag, setSelectedValue);
-                setIsSelectActive(false);
-              }}
-            >
-              {tag}
-            </button>
-          </li>
-        ))}
-      </ul>
-    )}
-  </div>
-);
+  selectedTag,
+  blogTags
+}) => {
+  const [isSelectActive, setIsSelectActive] = useState(false);
+
+  return (
+    <div className="filter-select-box">
+      <button
+        className={`filter-select ${isSelectActive ? 'active' : ''}`}
+        onClick={() => setIsSelectActive(!isSelectActive)}
+      >
+        <div className="select-value">
+          {selectedTag || 'Select category'}
+        </div>
+        <div className="select-icon">
+          <MdExpandMore />
+        </div>
+      </button>
+      {isSelectActive && (
+        <ul className="select-list">
+          {blogTags.map((tag: string) => (
+            <li className="select-item" key={tag}>
+              <button
+                onClick={() => {
+                  setIsSelectActive(false);
+                }}
+              >
+                <Link href={`/portfolio?tag=${encodeURIComponent(tag || '')}`}>
+                  {tag}
+                </Link>
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
 
 export default FilterSelectBox;