diff --git a/bun.lockb b/bun.lockb index b32388c..eb74852 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/index.html b/index.html index e4b78ea..e0d1c84 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + diff --git a/package.json b/package.json index 21b8805..9544eae 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,10 @@ }, "dependencies": { "@dnd-kit/core": "^6.3.1", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.3.1", + "@mui/material": "^6.3.1", "react": "^18.3.1", "react-dom": "^18.3.1", "zustand": "^5.0.3" diff --git a/src/App.tsx b/src/App.tsx index 70ae375..b76c696 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,14 +5,9 @@ import './App.scss'; import { TierImage } from './components/Image'; import { Tier } from './components/Tier'; import { TierModal } from './components/TierModal'; +import { tierImage } from './dto/tier'; import useStore from './store'; -interface tierImage { - name: string; - url: string; - category: string; -} - const App = () => { const [images, addTierImage, tierLevels, editTierImage] = useStore( useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]), @@ -24,11 +19,6 @@ const App = () => { if (uploadBtn.current) uploadBtn.current.click(); }; - const getRandomCategoryName = () => { - const categoryNames = tierLevels.flatMap(category => category.name); - return categoryNames[Math.floor(Math.random() * categoryNames.length)]; - }; - const handleAdd = (images: tierImage[]) => { images.forEach(image => { addTierImage(image); @@ -55,7 +45,7 @@ const App = () => { /> ))} -
+
{images .filter(image => image.category === '') .map((image, index) => ( @@ -80,7 +70,7 @@ const App = () => { upload_images.push({ url: url, name: event.target.files[i].name.replace('.jpeg', ''), - category: getRandomCategoryName(), + category: '', }); } handleAdd(upload_images); diff --git a/src/components/Tier.scss b/src/components/Tier.scss new file mode 100644 index 0000000..47c405a --- /dev/null +++ b/src/components/Tier.scss @@ -0,0 +1,5 @@ +.tier_name:hover { + button { + opacity: 1; + } +} \ No newline at end of file diff --git a/src/components/Tier.tsx b/src/components/Tier.tsx index c500eea..2f1b36c 100644 --- a/src/components/Tier.tsx +++ b/src/components/Tier.tsx @@ -1,5 +1,7 @@ +import EditIcon from '@mui/icons-material/Edit'; import useStore from '../store'; import { TierImage } from './Image'; +import './Tier.scss'; export interface TierProps { color: string; @@ -39,12 +41,15 @@ export const Tier = ({ color, name, textColor }: TierProps) => { <>
+

{name}

diff --git a/src/dto/tier.ts b/src/dto/tier.ts index a2c5428..44b0062 100644 --- a/src/dto/tier.ts +++ b/src/dto/tier.ts @@ -2,4 +2,5 @@ export interface tierImage { name: string; url: string; category: string; + id?: string; } diff --git a/src/main.tsx b/src/main.tsx index 66a65dc..4712d74 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,4 +1,3 @@ -import { DndContext } from '@dnd-kit/core'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.tsx'; @@ -6,8 +5,6 @@ import './index.scss'; createRoot(document.getElementById('root')!).render( - - - + , );