Feat: main 필터 추가

alreadynyeong · Mar 22, 2024 · e778574 · e778574
1 parent 33b8b89
commit e778574
Showing 1 changed file with 27 additions and 8 deletions.
diff --git a/pages/projects/index.tsx b/pages/projects/index.tsx
@@ -14,10 +14,18 @@ const Projects = () => {
   const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
 
   const toggleSkill = (skill: string) => {
-    if (selectedSkills.includes(skill)) {
-      setSelectedSkills(selectedSkills.filter((s) => s !== skill));
+    if (skill === "Main") {
+      setSelectedSkills((prevSkills) =>
+        prevSkills.includes(skill) ? [] : [skill]
+      );
     } else {
-      setSelectedSkills([...selectedSkills, skill]);
+      setSelectedSkills((prevSkills) =>
+        prevSkills.includes("Main")
+          ? [skill]
+          : prevSkills.includes(skill)
+          ? prevSkills.filter((prevSkill) => prevSkill !== skill)
+          : [...prevSkills, skill]
+      );
     }
   };
 
@@ -52,6 +60,12 @@ const Projects = () => {
         <div>
           <Skills>
             FILTER
+            <Skill
+              onClick={() => toggleSkill("Main")}
+              active={selectedSkills.includes("Main")}
+            >
+              MAIN
+            </Skill>
             <Skill
               onClick={() => toggleSkill("React")}
               active={selectedSkills.includes("React")}
@@ -81,11 +95,16 @@ const Projects = () => {
         <ScrollContainer style={{ height: dynamicHeight }}>
           {ProjectList.slice()
             .reverse()
-            .filter(
-              (project) =>
-                selectedSkills.length === 0 ||
-                selectedSkills.some((skill) => project.skills.includes(skill))
-            )
+            .filter((project) => {
+              if (selectedSkills.includes("Main")) {
+                return project.main;
+              } else {
+                return (
+                  selectedSkills.length === 0 ||
+                  selectedSkills.some((skill) => project.skills.includes(skill))
+                );
+              }
+            })
             .map((project) => (
               <ProjectContainer key={project.id}>
                 <a href={`/Portfolio/project?id=${project.id}`}>