chore

src/App.tsx

@@ -22,15 +22,12 @@ export const App = () => {
 			<div>
 				<Frame>
 					<Spacer size={24} />
-					<SubContent>
-						<SelectSeparateLevel />
-					</SubContent>
 					<MainContent>
 						<Section>
 							<h2 className="text-2xl font-semibold">Edit</h2>
 							<DragAndDropArea />
 							<Spacer size={24} />
-							{contents.length > 0 && <BottomAddSection />}
+							<BottomAddSection />
 						</Section>
 						<Section>
 							<h2 className="text-2xl font-semibold">Preview</h2>

src/components/atoms/card/index.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from "react";
 
 export const Card = ({ children }: PropsWithChildren) => (
-	<div className="rounded-lg border-3 border-gray-800 bg-gray-200 w-full overflow-hidden">
+	<div className="rounded-lg border border-gray-300 bg-white w-full overflow-hidden shadow-sm">
 		{children}
 	</div>
 );

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 bg-gray-100 rounded-md p-4">
+		<div className="fixed bottom-0 left-0 w-full flex items-center justify-start bg-gray-100 rounded-md p-4">
 			<div>
 				<Spacer horizontal size={30} />
 			</div>

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

@@ -1,4 +1,11 @@
-import { type Dispatch, type DispatchWithoutAction, useState } from "react";
+import {
+	type Dispatch,
+	type DispatchWithoutAction,
+	useState,
+	useEffect,
+	useRef,
+	useCallback,
+} from "react";
 import type { ContentType } from "@/types";
 import { SaveCardIcon } from "@/components/atoms/icon/SaveCardIcon";
 import { useIsIncludeTag } from "@/hooks/useIsIncludeTag";
@@ -16,16 +23,44 @@ export const EditMode = ({
 }: EditCardProps) => {
 	const { isIncludeTag } = useIsIncludeTag();
 	const [editContent, setEditContent] = useState<string>(content.content);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const [errorMessage, setErrorMessage] = useState<string>("");
+
+	useEffect(() => {
+		if (textareaRef.current) {
+			textareaRef.current.style.height = "inherit";
+			textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+		}
+	}, []);
+
+	const handleUpdateContents = useCallback(() => {
+		if (isIncludeTag(editContent.split("\n")[0])) {
+			updateContents({
+				id: content.id,
+				content: editContent,
+				level: content.level,
+			});
+			setErrorMessage("");
+		} else {
+			setErrorMessage("The first line must have one to two # symbols");
+		}
+	}, [editContent, isIncludeTag, updateContents, content.id, content.level]);
+
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+				event.preventDefault();
+				handleUpdateContents();
+			}
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleUpdateContents]);
 
-	const handleUpdateContents = () => {
-		isIncludeTag(editContent.split("\n")[0])
-			? updateContents({
-					id: content.id,
-					content: editContent,
-					level: content.level,
-				})
-			: window.alert("The first line must have one to two # symbols");
-	};
 	return (
 		<div className="relative">
 			<div className="absolute top-2 right-4">
@@ -35,12 +70,15 @@ export const EditMode = ({
 				/>
 			</div>
 			<textarea
-				className="w-full h-[20vh] text-base border-2 border-gray-200 rounded-md p-2 box-border bg-gray-200"
+				ref={textareaRef}
+				className="w-full text-base border-2 border-gray-300 rounded-md p-2 box-border bg-white resize-none shadow-sm"
 				value={editContent}
 				onChange={(event) => {
 					setEditContent(event.target.value);
 				}}
+				style={{ overflow: "hidden" }}
 			/>
+			{errorMessage && <div className="text-red-500">{errorMessage}</div>}
 		</div>
 	);
 };

src/components/ui/button.tsx

@@ -9,7 +9,8 @@ const buttonVariants = cva(
 	{
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",
 				destructive:
 					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline:

src/layouts/Frame/TabBar/index.tsx

@@ -5,6 +5,7 @@ import { ClearIcon } from "@/components/atoms/icon/ClearIcon/index.tsx";
 import { useAddSection } from "@/hooks/useAddSection.ts";
 import { useRenderDownloadButton } from "@/features/drag-and-drop/ui/useRenderDownloadButton.tsx";
 import { useOnFileInputChange } from "@/hooks/useOnFileInputChange.ts";
+import { SelectSeparateLevel } from "@/components/features/selectSeparateLevel";
 
 export const TabBar = (): JSX.Element => {
 	const { handleAddSection } = useAddSection();
@@ -16,11 +17,12 @@ export const TabBar = (): JSX.Element => {
 			<div className="flex gap-6">
 				<AddSection handleAddSection={handleAddSection} />
 				<TemplateSection />
+				<FileImport handleClick={onFileInputChange} />
 				<ClearIcon />
+				<SelectSeparateLevel />
 			</div>
 
 			<div className="flex gap-6">
-				<FileImport handleClick={onFileInputChange} />
 				<DownloadButton />
 			</div>
 		</div>