From 246495443d23e13e95957915eafc995efbdeacb2 Mon Sep 17 00:00:00 2001 From: Yechan Jung Date: Tue, 9 Apr 2024 00:00:23 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20zustand=20=EC=84=A4=EC=B9=98=20?= =?UTF-8?q?=EB=B0=8F=20=EC=9D=BC=EB=B6=80=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 +- client/package-lock.json | 38 ++++++++++++++- client/package.json | 3 +- client/src/contexts/RoomProvider.tsx | 46 +++++-------------- client/src/pages/Room/Chat/Chat.tsx | 8 ++-- client/src/pages/Room/Chat/Message.tsx | 4 +- client/src/pages/Room/Problems/Problems.tsx | 9 +--- .../Problems/RoomSettingModal/Dropdown.tsx | 4 +- .../RoomSettingModal/RoomSettingModal.tsx | 12 ++--- client/src/pages/Room/Room.tsx | 2 +- client/src/pages/Room/RoomInfo/RoomInfo.tsx | 4 +- .../src/pages/Room/ScoreBoard/ScoreBoard.tsx | 4 +- .../Room/ScoreBoard/ScoreBoardButton.tsx | 4 +- .../Room/{Tiimer => Timer}/StartButton.tsx | 4 +- .../pages/Room/{Tiimer => Timer}/Timer.tsx | 0 client/src/store/roomStore.ts | 32 +++++++++++++ client/src/types/RoomStoreType.ts | 17 +++++++ 17 files changed, 126 insertions(+), 68 deletions(-) rename client/src/pages/Room/{Tiimer => Timer}/StartButton.tsx (91%) rename client/src/pages/Room/{Tiimer => Timer}/Timer.tsx (100%) create mode 100644 client/src/store/roomStore.ts create mode 100644 client/src/types/RoomStoreType.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 3bf7f6d..fb94188 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -18,6 +18,7 @@ "tanstack", "toastify", "typeorm", - "Xmark" + "Xmark", + "zustand" ] } diff --git a/client/package-lock.json b/client/package-lock.json index addd773..16a2ad1 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -17,7 +17,8 @@ "react-router-dom": "^6.18.0", "react-textarea-autosize": "^8.5.3", "react-toastify": "^9.1.3", - "socket.io-client": "^4.7.2" + "socket.io-client": "^4.7.2", + "zustand": "^4.5.2" }, "devDependencies": { "@types/react": "^18.2.15", @@ -4570,6 +4571,14 @@ } } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -4734,6 +4743,33 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zustand": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0.6", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/zwitch": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", diff --git a/client/package.json b/client/package.json index 6352f27..fa4c662 100644 --- a/client/package.json +++ b/client/package.json @@ -19,7 +19,8 @@ "react-router-dom": "^6.18.0", "react-textarea-autosize": "^8.5.3", "react-toastify": "^9.1.3", - "socket.io-client": "^4.7.2" + "socket.io-client": "^4.7.2", + "zustand": "^4.5.2" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/client/src/contexts/RoomProvider.tsx b/client/src/contexts/RoomProvider.tsx index 94b1254..aa6fb31 100644 --- a/client/src/contexts/RoomProvider.tsx +++ b/client/src/contexts/RoomProvider.tsx @@ -1,25 +1,13 @@ -import { ReactNode, createContext, useEffect, useRef, useState } from 'react'; +import { ReactNode, createContext, useEffect, useRef } from 'react'; import { Socket, io } from 'socket.io-client'; -import { MessageInterface } from '../types/Message'; import { RoomInfoType } from '../types/RoomInfoType'; import { ProblemType } from '../types/ProblemType'; -import { useLocation, useParams } from 'react-router-dom'; +import { useRoomStore } from '../store/roomStore'; export type RoomContextType = { - isHost: boolean; - roomCode: string; - roomId: string | undefined; inputRef: React.RefObject; messagesRef: React.RefObject; socketRef: React.RefObject; - messages: MessageInterface[]; - setMessages: React.Dispatch>; - roomInfo: RoomInfoType; - setRoomInfo: React.Dispatch>; - problems: ProblemType[]; - setProblems: React.Dispatch>; - duration: number; - setDuration: React.Dispatch>; }; export const RoomContext = createContext( @@ -32,24 +20,25 @@ interface RoomProviderProps { export const RoomProvider: React.FC = ({ children }) => { const serverUrl = import.meta.env.VITE_BASE_URL; + const { setRoomInfo, setProblems, roomId } = useRoomStore(); - const location = useLocation(); + // const location = useLocation(); - const isHost = location.state?.isHost; - const roomCode = location.state?.roomCode; - const roomId = useParams<{ roomId: string }>().roomId; + // const isHost = location.state?.isHost; + // const roomCode = location.state?.roomCode; + // const roomId = useParams<{ roomId: string }>().roomId; const inputRef = useRef(null); const messagesRef = useRef(null); const socketRef = useRef(null); - const [messages, setMessages] = useState([]); + // const [messages, setMessages] = useState([]); - const [roomInfo, setRoomInfo] = useState({} as RoomInfoType); + // const [roomInfo, setRoomInfo] = useState({} as RoomInfoType); - const [problems, setProblems] = useState([]); + // const [problems, setProblems] = useState([]); - const [duration, setDuration] = useState(0); // minutes + // const [duration, setDuration] = useState(0); // minutes useEffect(() => { const socket: Socket = io(serverUrl, { @@ -74,25 +63,14 @@ export const RoomProvider: React.FC = ({ children }) => { return () => { socket.disconnect(); }; - }, [roomId, serverUrl]); + }, [roomId, serverUrl, setProblems, setRoomInfo]); return ( {children} diff --git a/client/src/pages/Room/Chat/Chat.tsx b/client/src/pages/Room/Chat/Chat.tsx index 690c4ed..b84f5bb 100644 --- a/client/src/pages/Room/Chat/Chat.tsx +++ b/client/src/pages/Room/Chat/Chat.tsx @@ -15,10 +15,12 @@ import { } from '../../../types/Message'; import { useRoom } from '../../../hooks/useRoom'; import { useEffect } from 'react'; +import { useRoomStore } from '../../../store/roomStore'; export default function Chat() { const { user } = useAuthContext(); - const { roomId, messages, setMessages, inputRef, messagesRef, socketRef } = + const {roomId, messages, setMessages} = useRoomStore(); + const { inputRef, messagesRef, socketRef } = useRoom(); const socket = socketRef.current; @@ -80,8 +82,8 @@ export default function Chat() { } socket?.on('chat-message', (newMessage) => { - setMessages((prevMessages) => { - const newMessages = [...prevMessages, newMessage]; + setMessages((prevMessages: MessageInterface[]) => { + const newMessages: MessageInterface[] = [...prevMessages, newMessage]; setLocalStorageItem( `${roomId}-messages`, JSON.stringify({ diff --git a/client/src/pages/Room/Chat/Message.tsx b/client/src/pages/Room/Chat/Message.tsx index 34ac6b5..b8b1459 100644 --- a/client/src/pages/Room/Chat/Message.tsx +++ b/client/src/pages/Room/Chat/Message.tsx @@ -1,11 +1,11 @@ -import { useRoom } from '../../../hooks/useRoom'; import { userColors } from '../../../../public/userColors'; import { hash } from '../../../utils/hash'; import { ChatEvent, MessageInterface } from '../../../types/Message'; import MessageBody from './MessageBody'; +import { useRoomStore } from '../../../store/roomStore'; export default function Message({ message }: { message: MessageInterface }) { - const { roomCode } = useRoom(); + const { roomCode } = useRoomStore(); const generateRandomColor = (username: string) => { const idx = Math.abs(hash(username + roomCode) % userColors.length); return userColors[idx]; diff --git a/client/src/pages/Room/Problems/Problems.tsx b/client/src/pages/Room/Problems/Problems.tsx index 685b1ec..7cbfc79 100644 --- a/client/src/pages/Room/Problems/Problems.tsx +++ b/client/src/pages/Room/Problems/Problems.tsx @@ -3,12 +3,11 @@ import { FaPencil } from 'react-icons/fa6'; import RoomSettingModal from './RoomSettingModal/RoomSettingModal'; import { useTheme } from '../../../hooks/useTheme'; -import { useRoom } from '../../../hooks/useRoom'; import ProblemLists from './ProblemLists'; +import { useRoomStore } from '../../../store/roomStore'; export default function Problems() { - const { isHost, roomInfo, problems, setProblems, duration, setDuration } = - useRoom(); + const { isHost, roomInfo, problems } = useRoomStore(); const { theme } = useTheme(); const [isModalOpen, setIsModalOpen] = useState(false); @@ -57,10 +56,6 @@ export default function Problems() { modalOverlayRef={modalOverlayRef} closeModal={closeModal} modalOutsideClick={modalOutsideClick} - problems={problems} - setProblems={setProblems} - duration={duration} - setDuration={setDuration} /> )} diff --git a/client/src/pages/Room/Problems/RoomSettingModal/Dropdown.tsx b/client/src/pages/Room/Problems/RoomSettingModal/Dropdown.tsx index 93fcbf5..b1b8ef8 100644 --- a/client/src/pages/Room/Problems/RoomSettingModal/Dropdown.tsx +++ b/client/src/pages/Room/Problems/RoomSettingModal/Dropdown.tsx @@ -5,7 +5,7 @@ export interface DropdownProps { options: Array; optionPostFix?: string; selected: T; - setSelected: React.Dispatch>; + setSelected: (value: T) => void | React.Dispatch>; buttonClassName?: string; itemBoxClassName?: string; itemClassName?: string; @@ -17,7 +17,7 @@ export interface DropdownProps { * @param {Array} props.options dropdown items with value * @param {string} props.optionPostFix postfix of dropdown item * @param {T} props.selected selected item - * @param {React.Dispatch>} props.setSelected set selected item + * @param {function(T):void | React.Dispatch> } props.setSelected set selected item * @param {string} props.buttonClassName className of dropdown button for tailwindcss * @param {string} props.itemBoxClassName className of dropdown item box for tailwindcss * @param {string} props.itemClassName className of dropdown item for tailwindcss diff --git a/client/src/pages/Room/Problems/RoomSettingModal/RoomSettingModal.tsx b/client/src/pages/Room/Problems/RoomSettingModal/RoomSettingModal.tsx index 4ba70ff..c4a2e5b 100644 --- a/client/src/pages/Room/Problems/RoomSettingModal/RoomSettingModal.tsx +++ b/client/src/pages/Room/Problems/RoomSettingModal/RoomSettingModal.tsx @@ -1,4 +1,4 @@ -import { RefObject, useState, Dispatch, SetStateAction } from 'react'; +import { RefObject, useState } from 'react'; import SelectProblem from './SelectProblem'; import RandomProblem from './RandomProblem'; @@ -8,15 +8,12 @@ import { FaToggleOff } from 'react-icons/fa6'; import { FaToggleOn } from 'react-icons/fa6'; import Dropdown from './Dropdown'; import { ProblemType } from '../../../../types/ProblemType'; +import { useRoomStore } from '../../../../store/roomStore'; interface RoomSettingModalProps { modalOverlayRef: RefObject; closeModal: () => void; modalOutsideClick: (arg: React.MouseEvent) => void; - problems: ProblemType[]; - setProblems: Dispatch>; - duration: number; - setDuration: Dispatch>; } const iconStyle = { @@ -27,11 +24,8 @@ export default function RoomSettingModal({ modalOverlayRef, closeModal, modalOutsideClick, - problems, - setProblems, - duration, - setDuration, }: RoomSettingModalProps) { + const { problems, setProblems, duration, setDuration } = useRoomStore(); const [problem, setProblem] = useState({} as ProblemType); const [problemList, setProblemList] = useState(problems); const [isRandom, setIsRandom] = useState(false); diff --git a/client/src/pages/Room/Room.tsx b/client/src/pages/Room/Room.tsx index d77dd4e..12f4d22 100644 --- a/client/src/pages/Room/Room.tsx +++ b/client/src/pages/Room/Room.tsx @@ -1,7 +1,7 @@ import Problems from './Problems/Problems'; import ScoreboardButton from './ScoreBoard/ScoreBoardButton'; import Chat from './Chat/Chat'; -import StartButton from './Tiimer/StartButton'; +import StartButton from './Timer/StartButton'; import RoomInfo from './RoomInfo/RoomInfo'; export default function Room() { diff --git a/client/src/pages/Room/RoomInfo/RoomInfo.tsx b/client/src/pages/Room/RoomInfo/RoomInfo.tsx index ac3f70e..805b4f2 100644 --- a/client/src/pages/Room/RoomInfo/RoomInfo.tsx +++ b/client/src/pages/Room/RoomInfo/RoomInfo.tsx @@ -2,10 +2,10 @@ import ExitButton from './ExitButton'; import { FaRegCopy } from 'react-icons/fa6'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; -import { useRoom } from '../../../hooks/useRoom'; +import { useRoomStore } from '../../../store/roomStore'; export default function RoomInfo() { - const { roomCode } = useRoom(); + const { roomCode } = useRoomStore(); const copyToClipboard = () => { navigator.clipboard.writeText(roomCode); diff --git a/client/src/pages/Room/ScoreBoard/ScoreBoard.tsx b/client/src/pages/Room/ScoreBoard/ScoreBoard.tsx index 7b01910..d30a14d 100644 --- a/client/src/pages/Room/ScoreBoard/ScoreBoard.tsx +++ b/client/src/pages/Room/ScoreBoard/ScoreBoard.tsx @@ -1,4 +1,4 @@ -import { useRoom } from '../../../hooks/useRoom'; +import { useRoomStore } from '../../../store/roomStore'; import { ScoreBoardInformation } from '../../../types/ScoreBoardInformation'; import { Submission } from '../../../types/Submission'; import Players from './Players'; @@ -13,7 +13,7 @@ interface PlayerScore { } export default function ScoreBoard({ scores }: ScoreBoardProps) { - const { participantNames, problems } = useRoom().roomInfo; + const { participantNames, problems } = useRoomStore().roomInfo; const playerNames: string[] = participantNames; const problemIds: number[] = problems.map((problem) => problem.bojProblemId); diff --git a/client/src/pages/Room/ScoreBoard/ScoreBoardButton.tsx b/client/src/pages/Room/ScoreBoard/ScoreBoardButton.tsx index 7066d68..abbdf19 100644 --- a/client/src/pages/Room/ScoreBoard/ScoreBoardButton.tsx +++ b/client/src/pages/Room/ScoreBoard/ScoreBoardButton.tsx @@ -2,14 +2,14 @@ import { FaChartSimple } from 'react-icons/fa6'; import ScoreBoardModal from './ScoreBoardModal'; import { useRef, useState } from 'react'; import { getScoreBoardInformation } from '../../../apis/scoreBoard'; -import { useRoom } from '../../../hooks/useRoom'; import { ScoreBoardInformation } from '../../../types/ScoreBoardInformation'; +import { useRoomStore } from '../../../store/roomStore'; export default function ScoreboardButton() { const [isModalOpen, setIsModalOpen] = useState(false); const [scores, setScores] = useState({submissions: [], rankings: []}); const modalOverlayRef = useRef(null); - const { roomCode, roomInfo } = useRoom(); + const { roomCode, roomInfo } = useRoomStore(); const openModal = async () => { try { diff --git a/client/src/pages/Room/Tiimer/StartButton.tsx b/client/src/pages/Room/Timer/StartButton.tsx similarity index 91% rename from client/src/pages/Room/Tiimer/StartButton.tsx rename to client/src/pages/Room/Timer/StartButton.tsx index cfecbd7..427156c 100644 --- a/client/src/pages/Room/Tiimer/StartButton.tsx +++ b/client/src/pages/Room/Timer/StartButton.tsx @@ -1,4 +1,5 @@ import { useRoom } from '../../../hooks/useRoom'; +import { useRoomStore } from '../../../store/roomStore'; import Timer from './Timer'; export type StartButtonProps = { @@ -7,7 +8,8 @@ export type StartButtonProps = { }; export default function StartButton() { - const { socketRef, isHost, roomInfo, problems, duration } = useRoom(); + const { socketRef } = useRoom(); + const { isHost, roomInfo, problems, duration } = useRoomStore(); const start = () => { console.log('start'); diff --git a/client/src/pages/Room/Tiimer/Timer.tsx b/client/src/pages/Room/Timer/Timer.tsx similarity index 100% rename from client/src/pages/Room/Tiimer/Timer.tsx rename to client/src/pages/Room/Timer/Timer.tsx diff --git a/client/src/store/roomStore.ts b/client/src/store/roomStore.ts new file mode 100644 index 0000000..38c8aec --- /dev/null +++ b/client/src/store/roomStore.ts @@ -0,0 +1,32 @@ +import { create } from 'zustand'; +import { RoomInfoType } from '../types/RoomInfoType'; +import { ProblemType } from '../types/ProblemType'; +import { useLocation, Location } from 'react-router-dom'; +import { RoomStoreType } from '../types/RoomStoreType'; + +interface ExtendedLocationState { + isHost: boolean; + roomCode: string; +} + +interface ExtendedLocation extends Location {} + +export const useRoomStore = create((set) => { + const location: ExtendedLocation = useLocation(); + return { + isHost: location.state?.isHost, + roomCode: location.state?.roomCode, + roomId: '', + messages: [], + setMessages: (messages) => set((state) => ({ + ...state, + messages: typeof messages === 'function' ? messages(state.messages) : messages, + })), + roomInfo: {} as RoomInfoType, + setRoomInfo: (roomInfo: RoomInfoType) => set({ roomInfo }), + problems: [], + setProblems: (problems: ProblemType[]) => set({ problems }), + duration: 0, + setDuration: (duration: number) => set({ duration }), + }; +}); diff --git a/client/src/types/RoomStoreType.ts b/client/src/types/RoomStoreType.ts new file mode 100644 index 0000000..f3bd249 --- /dev/null +++ b/client/src/types/RoomStoreType.ts @@ -0,0 +1,17 @@ +import { MessageInterface } from "./Message"; +import { RoomInfoType } from "./RoomInfoType"; +import { ProblemType } from "./ProblemType"; + +export type RoomStoreType = { + isHost: boolean; + roomCode: string; + roomId: string | undefined; + messages: MessageInterface[]; + setMessages: (messages: ((prevMessages: MessageInterface[]) => MessageInterface[]) | MessageInterface[]) => void; + roomInfo: RoomInfoType; + setRoomInfo: (roomInfo: RoomInfoType) => void; + problems: ProblemType[]; + setProblems: (problems: ProblemType[]) => void; + duration: number; + setDuration: (duration: number) => void; +}; \ No newline at end of file From 3e033d4e5495ab0cf541d0ffa67eeef39bb3e0bb Mon Sep 17 00:00:00 2001 From: Yechan Jung Date: Mon, 29 Apr 2024 15:09:02 +0900 Subject: [PATCH 2/3] =?UTF-8?q?isHost,=20roomCode=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/contexts/RoomProvider.tsx | 11 ++++-- client/src/pages/Room/Problems/Problems.tsx | 4 ++- client/src/pages/Room/Timer/StartButton.tsx | 4 +-- client/src/store/roomStore.ts | 39 ++++++++------------- client/src/types/RoomStoreType.ts | 2 -- 5 files changed, 27 insertions(+), 33 deletions(-) diff --git a/client/src/contexts/RoomProvider.tsx b/client/src/contexts/RoomProvider.tsx index aa6fb31..ef2436b 100644 --- a/client/src/contexts/RoomProvider.tsx +++ b/client/src/contexts/RoomProvider.tsx @@ -3,8 +3,11 @@ import { Socket, io } from 'socket.io-client'; import { RoomInfoType } from '../types/RoomInfoType'; import { ProblemType } from '../types/ProblemType'; import { useRoomStore } from '../store/roomStore'; +import { useLocation } from 'react-router-dom'; export type RoomContextType = { + isHost: boolean; + roomCode: string; inputRef: React.RefObject; messagesRef: React.RefObject; socketRef: React.RefObject; @@ -22,10 +25,10 @@ export const RoomProvider: React.FC = ({ children }) => { const serverUrl = import.meta.env.VITE_BASE_URL; const { setRoomInfo, setProblems, roomId } = useRoomStore(); - // const location = useLocation(); + const location = useLocation(); - // const isHost = location.state?.isHost; - // const roomCode = location.state?.roomCode; + const isHost = location.state?.isHost; + const roomCode = location.state?.roomCode; // const roomId = useParams<{ roomId: string }>().roomId; const inputRef = useRef(null); @@ -68,6 +71,8 @@ export const RoomProvider: React.FC = ({ children }) => { return ( { console.log('start'); diff --git a/client/src/store/roomStore.ts b/client/src/store/roomStore.ts index 38c8aec..f5b42bf 100644 --- a/client/src/store/roomStore.ts +++ b/client/src/store/roomStore.ts @@ -1,32 +1,21 @@ import { create } from 'zustand'; import { RoomInfoType } from '../types/RoomInfoType'; import { ProblemType } from '../types/ProblemType'; -import { useLocation, Location } from 'react-router-dom'; import { RoomStoreType } from '../types/RoomStoreType'; -interface ExtendedLocationState { - isHost: boolean; - roomCode: string; -} - -interface ExtendedLocation extends Location {} - -export const useRoomStore = create((set) => { - const location: ExtendedLocation = useLocation(); - return { - isHost: location.state?.isHost, - roomCode: location.state?.roomCode, - roomId: '', - messages: [], - setMessages: (messages) => set((state) => ({ +export const useRoomStore = create((set) => ({ + roomId: '', + messages: [], + setMessages: (messages) => + set((state) => ({ ...state, - messages: typeof messages === 'function' ? messages(state.messages) : messages, + messages: + typeof messages === 'function' ? messages(state.messages) : messages, })), - roomInfo: {} as RoomInfoType, - setRoomInfo: (roomInfo: RoomInfoType) => set({ roomInfo }), - problems: [], - setProblems: (problems: ProblemType[]) => set({ problems }), - duration: 0, - setDuration: (duration: number) => set({ duration }), - }; -}); + roomInfo: {} as RoomInfoType, + setRoomInfo: (roomInfo: RoomInfoType) => set({ roomInfo }), + problems: [], + setProblems: (problems: ProblemType[]) => set({ problems }), + duration: 0, + setDuration: (duration: number) => set({ duration }), +})); diff --git a/client/src/types/RoomStoreType.ts b/client/src/types/RoomStoreType.ts index f3bd249..6c609a8 100644 --- a/client/src/types/RoomStoreType.ts +++ b/client/src/types/RoomStoreType.ts @@ -3,8 +3,6 @@ import { RoomInfoType } from "./RoomInfoType"; import { ProblemType } from "./ProblemType"; export type RoomStoreType = { - isHost: boolean; - roomCode: string; roomId: string | undefined; messages: MessageInterface[]; setMessages: (messages: ((prevMessages: MessageInterface[]) => MessageInterface[]) | MessageInterface[]) => void; From be36f784b20581b9f1a44c79231e5c4accfbbfc4 Mon Sep 17 00:00:00 2001 From: Yechan Jung Date: Fri, 3 May 2024 16:20:56 +0900 Subject: [PATCH 3/3] =?UTF-8?q?zustand=20=EB=A6=AC=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EC=B5=9C=EC=86=8C=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RoomSettingModal/RoomSettingModal.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/client/src/pages/Room/Problems/RoomSettingModal/RoomSettingModal.tsx b/client/src/pages/Room/Problems/RoomSettingModal/RoomSettingModal.tsx index c4a2e5b..e4062e3 100644 --- a/client/src/pages/Room/Problems/RoomSettingModal/RoomSettingModal.tsx +++ b/client/src/pages/Room/Problems/RoomSettingModal/RoomSettingModal.tsx @@ -1,11 +1,12 @@ -import { RefObject, useState } from 'react'; +import { useState, RefObject } from 'react'; +import { FaXmark } from 'react-icons/fa6'; +import { FaToggleOff } from 'react-icons/fa6'; +import { FaToggleOn } from 'react-icons/fa6'; +import { useShallow } from 'zustand/react/shallow'; import SelectProblem from './SelectProblem'; import RandomProblem from './RandomProblem'; import ProblemList from './ProblemList'; -import { FaXmark } from 'react-icons/fa6'; -import { FaToggleOff } from 'react-icons/fa6'; -import { FaToggleOn } from 'react-icons/fa6'; import Dropdown from './Dropdown'; import { ProblemType } from '../../../../types/ProblemType'; import { useRoomStore } from '../../../../store/roomStore'; @@ -25,7 +26,14 @@ export default function RoomSettingModal({ closeModal, modalOutsideClick, }: RoomSettingModalProps) { - const { problems, setProblems, duration, setDuration } = useRoomStore(); + const { problems, setProblems, duration, setDuration } = useRoomStore( + useShallow((state) => ({ + problems: state.problems, + setProblems: state.setProblems, + duration: state.duration, + setDuration: state.setDuration, + })), + ); const [problem, setProblem] = useState({} as ProblemType); const [problemList, setProblemList] = useState(problems); const [isRandom, setIsRandom] = useState(false);