design: 전체 레이아웃 수정 & 사이드바 동적 랜더링 기능 추가

gitlio/app/editor/_components/(rightSideBar)/BaseSideBar.tsx

@@ -9,7 +9,7 @@ export default function BaseSideBar() {
   const layoutSelected = false;
 
   return (
-    <div className="flex flex-col items-center w-[450px] h-dvh bg-white border-base-300 border-2 overflow-x-auto overscroll-contain">
+    <div className="flex flex-col items-center w-[450px] h-dvh bg-white border-base-300 border-2 overflow-y-auto overscroll-contain pb-16">
       <div
         role="tablist"
         className="tabs bg-neutral-300 tabs-boxed my-6 grid grid-flow-col auto-cols-fr"

gitlio/app/editor/_components/(rightSideBar)/SkillSideBar.tsx

@@ -0,0 +1,18 @@
+import SkillButton from '@/app/editor/_components/(skill)/SkillButton';
+import React from 'react';
+import Select from 'react-select';
+import IconSelect from '@/app/editor/_components/(skill)/IconSelect';
+import SelectedIcons from '@/app/editor/_components/(skill)/SelectedIcons';
+
+export default function SkillSideBar() {
+  return (
+    // flex 컨테이너를 사용하고, justify-content 속성으로 중앙 정렬을 적용합니다.
+    <div className="flex flex-col items-center w-full justify-center px-3">
+      <SkillButton skill="React" />
+      <IconSelect />
+      <div className="divider my-4 w-full"></div>{' '}
+      {/* 너비 조정이 필요한 경우 w-full 클래스를 추가 */}
+      <SelectedIcons />
+    </div>
+  );
+}

gitlio/app/editor/_components/(skill)/IconSelect.tsx

@@ -0,0 +1,33 @@
+import { icons, IconOption } from '@/app/editor/_components/(skill)/icons';
+import Select, { SingleValue, GroupBase } from 'react-select';
+import React, { useState } from 'react';
+import { useSelectedIconsStore } from '@/store/selectedIconsStore'; // 스토어 임포트 경로는 실제 경로에 맞게 조정하세요.
+
+// `IconOption[]` 타입으로 `iconOptions` 정의
+const iconOptions: IconOption[] = Object.keys(icons).map((iconName) => ({
+  value: iconName,
+  label: iconName,
+}));
+
+const IconSelect = () => {
+  const addIcon = useSelectedIconsStore((state) => state.addIcon);
+
+  const handleChange = (newValue: SingleValue<IconOption>) => {
+    if (newValue) {
+      addIcon(newValue); // 선택된 아이콘을 스토어에 추가합니다.
+    }
+  };
+
+  return (
+    <Select<IconOption, false, GroupBase<IconOption>>
+      options={iconOptions}
+      onChange={handleChange}
+      getOptionLabel={(option) => option.label}
+      getOptionValue={(option) => option.value}
+      className="text-base w-64" // Tailwind CSS 클래스를 적용합니다.
+      classNamePrefix="react-select"
+    />
+  );
+};
+
+export default IconSelect;

gitlio/app/editor/_components/(skill)/SelectedIcons.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { icons } from './icons';
+import { useSelectedIconsStore } from '@/store/selectedIconsStore';
+
+const SelectedIcons = () => {
+  const { selectedIcons } = useSelectedIconsStore();
+
+  return (
+    <div className="flex flex-wrap justify-start items-center gap-4">
+      {selectedIcons.map((icon, index) => {
+        const IconComponent = icons[icon.value as keyof typeof icons];
+        return (
+          <div
+            key={index}
+            className="p-2 text-xl flex justify-center items-center bg-gray-200 rounded"
+          >
+            <IconComponent />
+            <span className="ml-2">{icon.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SelectedIcons;

gitlio/app/editor/_components/(skill)/SkillButton.tsx

@@ -0,0 +1,14 @@
+import Image from 'next/image';
+import { icons } from '@/app/editor/_components/(skill)/icons';
+interface SkillButtonProps {
+  skill: string;
+}
+
+export default function SkillButton({ skill }: SkillButtonProps) {
+  return (
+    <div>
+      <div>{skill}</div>
+      <icons.Flask className="fill-neutral-700 size-10" />
+    </div>
+  );
+}