Merge branch 'dev' of github.com:boostcampwm-2024/web31-BooLock into …

…feat/37

apps/client/src/pages/NotFound.tsx

@@ -7,7 +7,7 @@ export const NotFound = () => {
       <HomeHeader isBlack={false} />
 
       <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform flex-col gap-6">
-        <img src="/images/not_found.png" width={160} height={160} />
+        <img src="/images/not_found.png" width={160} height={160} alt='not_found' />
         <p className="text-medium-md text-center text-gray-200">
           유효한 페이지가 아닙니다! <br />
           다른 페이지에서 만나요!

apps/client/src/shared/store/index.ts

@@ -3,3 +3,4 @@ export { useModalStore } from './useModalStore';
 export { useWorkspaceStore } from './useWorkspaceStore';
 export { useCssPropsStore } from './useCssPropsStore';
 export { useCssTooltipStore } from './useCssTooptipStore';
+export { useClassBlockStore } from './useClassBlockStore';

apps/client/src/shared/store/useClassBlockStore.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+type TclassBlock = {
+  classBlockList: string[];
+  addClassBlock: (newClassBlockName: string) => void
+};
+
+export const useClassBlockStore = create<TclassBlock>((set) => ({
+  classBlockList: [],
+  addClassBlock: (newClassBlockName: string) => {
+    set((state) => ({
+      classBlockList: [...state.classBlockList, newClassBlockName],
+    }));
+  },
+}));

apps/client/src/widgets/index.ts

@@ -7,9 +7,19 @@ export { WorkspaceGrid } from './home/WorkspaceGrid';
 export { WorkspaceContainer } from './home/WorkspaceContainer';
 export { WorkspaceModal } from './home/WorkspaceModal';
 
+export { PreviewBox } from './workspace/PreviewBox';
 export { WorkspaceContent } from './workspace/WorkspaceContent';
 export { WorkspacePageHeader } from './workspace/WorkspacePageHeader';
 export { CssCategoryBar } from './workspace/css/CssCategoryBar';
 export { CssPropsSelectBox } from './workspace/css/CssPropsSelectBox';
 export { CssOptionItemList } from './workspace/css/CssOptionItemList';
 export { CssPropsSelectBoxHeader } from './workspace/css/CssPropsSelectBoxHeader';
+
+export { categoryColours } from './workspace/blockly/categoryColours';
+export { classMakerPrompt } from './workspace/blockly/classMakerPrompt';
+export { customToolbox } from './workspace/blockly/customToolbox';
+export { defineBlocks } from './workspace/blockly/defineBlocks';
+export { htmBlockContents } from './workspace/blockly/htmBlockContents';
+export { initTheme } from './workspace/blockly/initTheme';
+export { toolboxConfig } from './workspace/blockly/toolboxConfig';
+export { toolboxConfig2 } from './workspace/blockly/toolboxConfig2';

apps/client/src/widgets/workspace/CssPropsSelectBox.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import Question from '@/shared/assets/question.svg?react';
+
+export const CssPropsSelectBox = () => {
+  const cssCategoriesObj: { [key: string]: { label: string; items: string[] } } = {
+    layout: {
+      label: '레이아웃',
+      items: ['display', 'position', 'top', 'right', 'bottom', 'left', 'float', 'z-index'],
+    },
+    boxmodel: {
+      label: '박스모델',
+      items: ['width', 'height', 'box-sizing', 'overflow'],
+    },
+    typography: {
+      label: '타이포그래피',
+      items: ['line-height', 'font-size', 'text-align', 'color'],
+    },
+    background: {
+      label: '배경',
+      items: ['background-color'],
+    },
+    border: {
+      label: '테두리',
+      items: ['border', 'border-radius', 'border-width'],
+    },
+    spacing: {
+      label: '간격',
+      items: ['margin', 'padding'],
+    },
+    flexProperties: {
+      label: 'flex 속성',
+      items: ['flex', 'flex-direction', 'justify-content', 'align-items'],
+    },
+    gridProperties: {
+      label: 'grid 속성',
+      items: ['grid', 'grid-template-rows', 'grid-template-columns', 'gap'],
+    },
+  };
+
+  const [selectedCssCategory, setSelectedCssCategory] = useState('layout');
+  const [checkedProperties, setCheckedProperties] = useState<{ [key: string]: boolean }>({});
+
+  // 체크박스 상태 변경 함수
+  const handleCheckboxChange = (property: string) => {
+    setCheckedProperties((prev) => ({
+      ...prev,
+      [property]: !prev[property],
+    }));
+  };
+
+  return (
+    <section className="flex h-[26rem] w-full">
+      <nav className="flex flex-shrink-0 flex-col gap-1.5 overflow-y-scroll border-r border-r-gray-100 px-4 py-3">
+        {Object.keys(cssCategoriesObj).map((cssCategory) => (
+          <button
+            key={cssCategory}
+            onClick={() => setSelectedCssCategory(cssCategory)}
+            className={`text-bold-sm flex cursor-pointer rounded p-3 text-gray-200 ${selectedCssCategory === cssCategory && 'text-gray-black bg-yellow-500'}`}
+          >
+            {cssCategory}
+          </button>
+        ))}
+      </nav>
+      <article className="flex h-full w-full flex-col gap-4 overflow-y-scroll p-3">
+        {cssCategoriesObj[selectedCssCategory].items.map((cssName, index) => (
+          <div
+            key={index}
+            className={`flex h-[66px] w-full flex-shrink-0 items-center justify-between rounded-lg px-4 ${
+              checkedProperties[cssName] ? 'bg-yellow-500' : 'bg-gray-50'
+            }`}
+          >
+            <div className="flex items-center gap-5">
+              <input
+                type="checkbox"
+                checked={!!checkedProperties[cssName]}
+                onChange={() => handleCheckboxChange(cssName)}
+                title={cssName}
+                className="h-5 w-5 appearance-none rounded border border-gray-100 bg-center bg-no-repeat checked:bg-white checked:bg-[url('@/shared/assets/check.svg')]"
+              />
+              <div className="flex items-center gap-2">
+                <span className="text-semibold-md text-gray-black max-w-32 truncate border-gray-100">
+                  {cssName}
+                </span>
+                <Question />
+              </div>
+            </div>
+            <div className="truncate">영재</div>
+          </div>
+        ))}
+      </article>
+    </section>
+  );
+};

apps/client/src/widgets/workspace/PreviewBox.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+type PreviewBoxProps = {
+  htmlCode: string;
+};
+
+export const PreviewBox = ({ htmlCode }: PreviewBoxProps) => {
+  const [activeTab, setActiveTab] = useState<'preview' | 'html' | 'css'>('preview');
+
+  return (
+    <section className="flex-1 border-b border-gray-100">
+      <nav className="flex h-10 border-b border-gray-100">
+        <button
+          onClick={() => setActiveTab('preview')}
+          className={`${activeTab === 'preview' ? 'bg-green-500 text-white' : 'bg-white text-gray-200'} h-full flex-1 border-r border-gray-100 bg-green-500`}
+        >
+          미리보기
+        </button>
+        <button
+          onClick={() => setActiveTab('html')}
+          className={`${activeTab === 'html' ? 'bg-green-500 text-white' : 'bg-white text-gray-200'} h-full flex-1 border-r border-gray-100 bg-green-500`}
+        >
+          HTML
+        </button>
+        <button
+          onClick={() => setActiveTab('css')}
+          className={`${activeTab === 'css' ? 'bg-green-500 text-white' : 'bg-white text-gray-200'} h-full flex-1 bg-green-500`}
+        >
+          CSS
+        </button>
+      </nav>
+      <div className="min-h-[20rem]">
+        {activeTab === 'preview' && <iframe srcDoc={htmlCode} title="Preview"></iframe>}
+        {activeTab === 'html' && <pre className="whitespace-pre-wrap">{htmlCode}</pre>}
+        {activeTab === 'css' && <p>css 파싱 기능은 구현 중 입니다.</p>}
+      </div>
+    </section>
+  );
+};