Feat/component/tech stack2/DEVING-49 기술스택 선택 컴포넌트

src/app/preview/tech-stack3/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import TechSelector from '@/components/ui/tech-stack/TechSelector';
+import React, { useState } from 'react';
+
+export default function Page(): JSX.Element {
+  // 상위 컴포넌트에서 선택된 기술 목록 관리
+  const [selectedTechs, setSelectedTechs] = useState<string[]>([]);
+
+  // 기술 선택 변경 핸들러
+  const handleSelectionChange = (selection: string[]) => {
+    setSelectedTechs(selection);
+    console.log('Selected technologies:', selection);
+
+    // 여기서 필요한 상태 업데이트 또는 API 호출 등을 수행할 수 있습니다.
+    // 예: 선택된 기술 정보를 서버에 전송
+  };
+
+  return (
+    <div>
+      <TechSelector
+        maxSelections={5}
+        onSelectionChange={handleSelectionChange}
+      />
+    </div>
+  );
+}

src/components/ui/Icon/IconData.ts

@@ -42,7 +42,7 @@ export const ICON_LIST: IconConfig[] = [
   },
   {
     name: 'Next',
-    color: '#000000',
+    color: '#FFFFFF',
     path: getPath(
       '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Next.js</title><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z"/></svg>',
     ),
@@ -127,7 +127,7 @@ export const ICON_LIST: IconConfig[] = [
   },
   {
     name: 'Express',
-    color: '#000000',
+    color: '#FFFFFF',
     path: getPath(
       '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Express</title><path d="M24 18.588a1.529 1.529 0 01-1.895-.72l-3.45-4.771-.5-.667-4.003 5.444a1.466 1.466 0 01-1.802.708l5.158-6.92-4.798-6.251a1.595 1.595 0 011.9.666l3.576 4.83 3.596-4.81a1.435 1.435 0 011.788-.668L21.708 7.9l-2.522 3.283a.666.666 0 000 .994l4.804 6.412zM.002 11.576l.42-2.075c1.154-4.103 5.858-5.81 9.094-3.27 1.895 1.489 2.368 3.597 2.275 5.973H1.116C.943 16.447 4.005 19.009 7.92 17.7a4.078 4.078 0 002.582-2.876c.207-.666.548-.78 1.174-.588a5.417 5.417 0 01-2.589 3.957 6.272 6.272 0 01-7.306-.933 6.575 6.575 0 01-1.64-3.858c0-.235-.08-.455-.134-.666A88.33 88.33 0 010 11.577zm1.127-.286h9.654c-.06-3.076-2.001-5.258-4.59-5.278-2.882-.04-4.944 2.094-5.071 5.264z"/></svg>',
     ),
@@ -159,7 +159,7 @@ export const ICON_LIST: IconConfig[] = [
   },
   {
     name: 'Django',
-    color: '#092E20',
+    color: '#098620',
     path: getPath(
       '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Django</title><path d="M11.146 0h3.924v18.166c-2.013.382-3.491.535-5.096.535-4.791 0-7.288-2.166-7.288-6.32 0-4.002 2.65-6.6 6.753-6.6.637 0 1.121.05 1.707.203zm0 9.143a3.894 3.894 0 00-1.325-.204c-1.988 0-3.134 1.223-3.134 3.365 0 2.09 1.096 3.236 3.109 3.236.433 0 .79-.025 1.35-.102V9.142zM21.314 6.06v9.098c0 3.134-.229 4.638-.917 5.937-.637 1.249-1.478 2.039-3.211 2.905l-3.644-1.733c1.733-.815 2.574-1.53 3.109-2.625.561-1.121.739-2.421.739-5.835V6.059h3.924zM17.39.021h3.924v4.026H17.39z"/></svg>',
     ),

src/components/ui/tech-stack/TechSelector.tsx

@@ -0,0 +1,68 @@
+import useTechSelection from '@/hooks/useTechSelection';
+import { getIconColor, getIconsByCategory } from '@/util/getIconDetail';
+import React, { useState } from 'react';
+import { CategoryType } from 'types/techStack';
+
+import CategoryTabs from './tech-stack-components/CategoryTabs';
+import SelectedTechList from './tech-stack-components/SelectedTechList';
+import TechButtonList from './tech-stack-components/TechButtonList';
+
+interface TechSelectorProps {
+  maxSelections?: number;
+  onSelectionChange?: (selection: string[]) => void;
+}
+
+const TechSelector = ({
+  maxSelections = 5,
+  onSelectionChange,
+}: TechSelectorProps): JSX.Element => {
+  // 현재 선택된 카테고리 상태
+  const [activeCategory, setActiveCategory] = useState<CategoryType>('all');
+
+  // 기술 선택 로직 훅 사용
+  const {
+    clickedButtons,
+    selectedCount,
+    selectedNames,
+    handleButtonClick,
+    handleReset,
+    handleRemoveSelection,
+  } = useTechSelection({
+    maxSelections,
+    onSelectionChange,
+  });
+
+  // 현재 카테고리의 아이콘 가져오기
+  const activeIcons = getIconsByCategory(activeCategory);
+
+  return (
+    <div className="bg-gray-50 min-h-screen p-10">
+      <div className="mx-auto max-w-6xl">
+        {/* 선택된 기술 목록 */}
+        <SelectedTechList
+          selectedNames={selectedNames}
+          getIconColor={getIconColor}
+          onRemove={handleRemoveSelection}
+        />
+
+        {/* 카테고리 탭 */}
+        <CategoryTabs
+          activeCategory={activeCategory}
+          onCategoryChange={setActiveCategory}
+          onReset={handleReset}
+        />
+
+        {/* 기술 버튼 목록 */}
+        <TechButtonList
+          icons={activeIcons}
+          clickedButtons={clickedButtons}
+          selectedCount={selectedCount}
+          maxSelections={maxSelections}
+          onButtonClick={handleButtonClick}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TechSelector;

src/components/ui/tech-stack/tech-stack-components/CategoryTabs.tsx

@@ -0,0 +1,58 @@
+import { RotateCcw } from 'lucide-react';
+import React from 'react';
+import { CategoryType } from 'types/techStack';
+
+import TabButton from './TabButton';
+
+interface CategoryTabsProps {
+  activeCategory: CategoryType;
+  onCategoryChange: (category: CategoryType) => void;
+  onReset: () => void;
+}
+
+const CategoryTabs = ({
+  activeCategory,
+  onCategoryChange,
+  onReset,
+}: CategoryTabsProps): JSX.Element => {
+  const categories: Array<{
+    id: CategoryType;
+    label: string;
+    smallText: string;
+  }> = [
+    { id: 'all', label: '전체', smallText: 'All' },
+    { id: 'frontend', label: '프론트엔드', smallText: 'Front' },
+    { id: 'backend', label: '백엔드', smallText: 'Back' },
+    { id: 'design', label: '디자인', smallText: 'UI/UX' },
+  ];
+
+  return (
+    <div className="flex items-center justify-between border-b">
+      <div className="flex text-white">
+        {categories.map((category) => (
+          <TabButton
+            key={category.id}
+            active={activeCategory === category.id}
+            onClick={() => onCategoryChange(category.id)}
+            smallText={category.smallText}
+          >
+            {category.label}
+          </TabButton>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onReset}
+          className="hover:bg-gray-700/30 flex items-center gap-1 rounded-full px-2 py-1 text-white sm:px-3"
+          title="초기화"
+        >
+          <RotateCcw size={16} />
+          <span className="hidden sm:inline">초기화</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryTabs;

src/components/ui/tech-stack/tech-stack-components/SelectedTechButton.tsx

@@ -0,0 +1,43 @@
+import { getIconComponent } from '@/util/getIconDetail';
+import { X } from 'lucide-react';
+import React from 'react';
+
+interface SelectedTechButtonProps {
+  name: string;
+  color: string;
+  onRemove: (name: string) => void;
+}
+
+const SelectedTechButton = ({
+  name,
+  color,
+  onRemove,
+}: SelectedTechButtonProps): JSX.Element => {
+  // 현재 기술의 아이콘 컴포넌트
+  const TechIcon = getIconComponent(name);
+
+  return (
+    <div className="flex items-center gap-1 rounded-full border border-main bg-Cgray100 px-2 py-1 shadow-sm">
+      <span className="flex-shrink-0">
+        <TechIcon size={14} color={color} />
+      </span>
+      <span
+        style={{ color }}
+        className="hidden cursor-default text-xs font-medium sm:inline-block"
+      >
+        {name}
+      </span>
+
+      {/* 삭제 버튼 */}
+      <button
+        onClick={() => onRemove(name)}
+        className="hover:bg-gray-200 ml-1 cursor-pointer rounded-full p-1"
+        aria-label={`${name} 선택 해제`}
+      >
+        <X size={12} className="text-white" />
+      </button>
+    </div>
+  );
+};
+
+export default SelectedTechButton;

src/components/ui/tech-stack/tech-stack-components/SelectedTechList.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import SelectedTechButton from './SelectedTechButton';
+
+interface SelectedTechListProps {
+  selectedNames: string[];
+  getIconColor: (name: string) => string;
+  onRemove: (name: string) => void;
+}
+
+const SelectedTechList = ({
+  selectedNames,
+  getIconColor,
+  onRemove,
+}: SelectedTechListProps): JSX.Element => {
+  if (selectedNames.length === 0) {
+    return <div className="min-h-8"></div>;
+  }
+
+  return (
+    <div className="min-h-8">
+      <div className="bg-gray-102 mb-2 flex flex-col gap-2 rounded-md">
+        <div className="flex flex-wrap gap-2">
+          {selectedNames.map((name) => (
+            <SelectedTechButton
+              key={name}
+              name={name}
+              color={getIconColor(name)}
+              onRemove={onRemove}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SelectedTechList;

src/components/ui/tech-stack/tech-stack-components/TabButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface TabButtonProps {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+  smallText: string;
+}
+
+const TabButton = ({
+  active,
+  onClick,
+  children,
+  smallText,
+}: TabButtonProps): JSX.Element => {
+  return (
+    <button
+      className={`px-2 py-2 font-medium sm:px-4 ${
+        active
+          ? 'border-b-2 border-[#C586C0] text-[#C586C0]'
+          : 'hover:text-Cgray500'
+      }`}
+      onClick={onClick}
+    >
+      <span className="hidden sm:inline">{children}</span>
+      <span className="sm:hidden">{smallText}</span>
+    </button>
+  );
+};
+
+export default TabButton;

src/components/ui/tech-stack/tech-stack-components/TechButton.tsx

@@ -0,0 +1,43 @@
+import { isLightColor } from '@/util/getIconDetail';
+import React from 'react';
+import { IconComponent } from 'types/techStack';
+
+interface TechButtonProps {
+  icon: IconComponent;
+  name: string;
+  color: string;
+  isClicked: boolean;
+  isMaxReached: boolean;
+  onClick: (name: string) => void;
+}
+
+const TechButton = ({
+  icon: Icon,
+  name,
+  color,
+  isClicked,
+  isMaxReached,
+  onClick,
+}: TechButtonProps): JSX.Element => {
+  // 색상이 흰색이면 클릭 시 검정색으로 변경
+  const iconColor = isClicked && isLightColor(color) ? '#000000' : color;
+
+  return (
+    <button
+      className={`flex items-center gap-1 rounded-full border px-2 py-1
+  text-xs transition-all hover:shadow-md lg:gap-2 lg:px-3 lg:py-1.5 lg:text-sm
+  ${isClicked ? 'bg-white' : ''}
+  ${isMaxReached ? 'cursor-not-allowed opacity-50' : ''}`}
+      onClick={() => onClick(name)}
+      disabled={isMaxReached}
+      title={isMaxReached ? '최대 5개까지만 선택할 수 있습니다' : ''}
+    >
+      <Icon size={16} color={iconColor} />
+      <p style={{ color: iconColor }} className="font-medium">
+        {name}
+      </p>
+    </button>
+  );
+};
+
+export default TechButton;