Add the clarity of comments in the Redux store configuration

frontend/src/store/authSlice.ts

@@ -35,4 +35,13 @@ export const { setAccessToken, setRefreshToken, logout } = authSlice.actions;
 
 export const selectAuth = (state: RootState) => state.auth;
 
-export default authSlice.reducer;
+/**
+ * Manages user authentication state, including login information and tokens.
+ *
+ *  * This slice handles:
+ * - `accessToken`: The user's access token for authenticated API requests.
+ * - `refreshToken`: The user's refresh token for obtaining new access tokens.
+ */
+const reducer = authSlice.reducer;
+
+export default reducer;

frontend/src/store/configSlice.ts

@@ -51,4 +51,15 @@ export const { setTheme, setDrawerOpen, setCodeKeyType, setDisableScrollSync } =
 
 export const selectConfig = (state: RootState) => state.config;
 
-export default configSlice.reducer;
+/**
+ * Handles global application settings.
+ *
+ *  * This slice handles:
+ * - `theme`: The application theme (default, dark, or light).
+ * - `drawerOpen`: Whether the application drawer (sidebar) is open.
+ * - `codeKey`: The preferred keybinding type for code editing (Sublime, Vim, etc.).
+ * - `disableScrollSync`: A flag to enable or disable scroll synchronization.
+ */
+const reducer = configSlice.reducer;
+
+export default reducer;

frontend/src/store/documentSlice.ts

@@ -1,5 +1,5 @@
-import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
 import { RootState } from "./store";
 
 export interface Document {
@@ -20,7 +20,7 @@ const initialState: DocumentState = {
 	data: null,
 };
 
-export const documentSlice = createSlice({
+const documentSlice = createSlice({
 	name: "document",
 	initialState,
 	reducers: {
@@ -34,4 +34,10 @@ export const { setDocumentData } = documentSlice.actions;
 
 export const selectDocument = (state: RootState) => state.document;
 
-export default documentSlice.reducer;
+/**
+ * Handles document management state.
+ * This slice is designed to manage the currently active document, its metadata, and related state in the application.
+ */
+const reducer = documentSlice.reducer;
+
+export default reducer;

frontend/src/store/editorSlice.ts

@@ -59,4 +59,16 @@ export const { setMode, setShareRole, setDoc, setClient, setCmView } = editorSli
 
 export const selectEditor = (state: RootState) => state.editor;
 
-export default editorSlice.reducer;
+/**
+ * Manages the state of the collaborative code editor
+ *
+ *  * This slice handles:
+ * - `mode`: The editor's current mode (edit, read, or both).
+ * - `shareRole`: The user's role in the session (e.g., viewer, editor).
+ * - `doc`: The Yorkie document for real-time collaboration.
+ * - `client`: The Yorkie client for syncing data with the server.
+ * - `cmView`: The CodeMirror editor instance.
+ */
+const reducer = editorSlice.reducer;
+
+export default reducer;

frontend/src/store/featureSettingSlice.ts

@@ -44,4 +44,13 @@ export const { setYorkieIntelligence, setFileUpload } = featureSettingSlice.acti
 
 export const selectFeatureSetting = (state: RootState) => state.featureSetting;
 
-export default featureSettingSlice.reducer;
+/**
+ *  Manages settings for specific features (e.g., experimental feature toggles).
+ *
+ *  * This slice handles:
+ * - `yorkieIntelligence`: Settings for the Yorkie Intelligence feature
+ * - `fileUpload`: Settings for file upload functionality
+ */
+const reducer = featureSettingSlice.reducer;
+
+export default reducer;

frontend/src/store/store.ts

@@ -17,11 +17,17 @@ const persistConfig = {
 };
 
 const rootReducer = combineReducers({
-	// Persistent slices
+	/*
+	 * Persistent slices:
+	 * These slices persist their state in local storage and can restore it when the app restarts.
+	 */
 	auth: authSlice,
 	config: configSlice,
 
-	// Volatile slices
+	/**
+	 * Volatile slices:
+	 * These slices only retain their state during a session. Their state is reset when the app restarts.
+	 */
 	user: userSlice,
 	editor: editorSlice,
 	workspace: workspaceSlice,

frontend/src/store/userSlice.ts

@@ -32,4 +32,17 @@ export const { setUserData } = userSlice.actions;
 
 export const selectUser = (state: RootState) => state.user;
 
-export default userSlice.reducer;
+/**
+ * Manage user profile and user-specific information.
+ *
+ *  * This slice handles:
+ * - Storing user data, including:
+ *   - `id`: Unique identifier for the user.
+ *   - `nickname`: User's nickname, or `null` if not set.
+ *   - `lastWorkspaceSlug`: The last accessed workspace's slug.
+ *   - `updatedAt`: Timestamp of the last user update.
+ *   - `createdAt`: Timestamp of when the user was created.
+ */
+const reducer = userSlice.reducer;
+
+export default reducer;

frontend/src/store/workspaceSlice.ts

@@ -32,4 +32,9 @@ export const { setWorkspaceData } = workspaceSlice.actions;
 
 export const selectWorkspace = (state: RootState) => state.workspace;
 
-export default workspaceSlice.reducer;
+/**
+ * Manages workspace-related state.
+ */
+const reducer = workspaceSlice.reducer;
+
+export default reducer;