chore

src/App.tsx

@@ -27,13 +27,13 @@ export const App = () => {
 					</SubContent>
 					<MainContent>
 						<Section>
-							<h2>Edit</h2>
+							<h2 className="text-2xl font-semibold">Edit</h2>
 							<DragAndDropArea />
 							<Spacer size={24} />
 							{contents.length > 0 && <BottomAddSection />}
 						</Section>
 						<Section>
-							<h2>Preview</h2>
+							<h2 className="text-2xl font-semibold">Preview</h2>
 							<PreviewSection contents={contents} />
 							<Spacer size={16} />
 						</Section>

src/components/atoms/icon/BottomAddSectionIcon/index.tsx

@@ -6,7 +6,7 @@ import { useAddSection } from "@/hooks/useAddSection";
 export const BottomAddSection = () => {
 	const { handleAddSection } = useAddSection();
 	return (
-		<div className="flex items-center justify-start">
+		<div className="flex items-center justify-start bg-gray-100 rounded-md p-4">
 			<div>
 				<Spacer horizontal size={30} />
 			</div>

src/components/features/card/mode/display/index.tsx

@@ -12,7 +12,7 @@ export const DisplayMode = ({
 	contentMarkdown,
 }: DisplayCardProps) => {
 	return (
-		<div className="p-0 px-4 pb-4 rounded-lg markdown-body filter invert">
+		<div className="p-4 pb-4 rounded-md markdown-body">
 			<div className="absolute top-2 right-4">
 				<EditCardIcon toggleIsEdit={toggleIsEdit} />
 			</div>

src/components/features/card/mode/edit/index.tsx

@@ -35,7 +35,7 @@ export const EditMode = ({
 				/>
 			</div>
 			<textarea
-				className="w-full h-[20vh] text-base border-2 border-[#e0e0e0] rounded-md p-2 box-border bg-[#e0e0e0]"
+				className="w-full h-[20vh] text-base border-2 border-gray-200 rounded-md p-2 box-border bg-gray-200"
 				value={editContent}
 				onChange={(event) => {
 					setEditContent(event.target.value);

src/features/markdown-editor/ui/index.tsx

@@ -1,4 +1,9 @@
-import { type Dispatch, useReducer, type DragEvent } from "react";
+import {
+	type Dispatch,
+	useReducer,
+	type DragEvent,
+	type DragEventHandler,
+} from "react";
 
 import { Card } from "@/components/atoms/card";
 import { DraggableIcon } from "@/components/atoms/icon/DraggableIcon";
@@ -11,9 +16,9 @@ type Props = {
 	content: ContentType;
 	updateContents: Dispatch<ContentType>;
 	deleteContents: Dispatch<ContentType>;
-	dragOver: Dispatch<DragEvent>;
-	dragStart: DragEvent;
-	handleDrop: DragEvent;
+	dragOver: DragEventHandler<HTMLDivElement>;
+	dragStart: DragEventHandler<HTMLDivElement>;
+	handleDrop: DragEventHandler<HTMLDivElement>;
 };
 
 export const CardSection = ({
@@ -56,6 +61,7 @@ export const CardSection = ({
 					onDrop={handleDrop}
 					onDragStart={dragStart}
 					onDragOver={dragOver}
+					className="active:cursor-grabbing"
 				>
 					<div className="cursor-grab flex items-center justify-start">
 						<DraggableIcon />

src/layouts/Frame/index.tsx

@@ -9,7 +9,7 @@ export const Frame = (props: PropsWithChildren) => {
 			<div className="sticky top-0 bg-[#e4e4e4] z-100">
 				<TabBar />
 			</div>
-			<div className="mx-auto">{props.children}</div>
+			<div className="mx-auto p-4">{props.children}</div>
 		</>
 	);
 };

src/layouts/SubContent/index.tsx

@@ -1,4 +1,4 @@
-import { Composition } from "@/types";
+import type { Composition } from "@/types";
 export const SubContent = ({ children }: Composition): JSX.Element => (
-	<div className="px-6">{children}</div>
+	<div className="px-6 bg-gray-100 rounded-md p-4">{children}</div>
 );