design:편지 작성 페이지 레이아웃 관련 수정

Author: wldnjs990

src/pages/Write/CategorySelect.tsx

@@ -19,7 +19,7 @@ export default function CategorySelect({
   const stamp = useWrite((state) => state.stamp);
   return (
     <>
-      <div className="flex h-full min-h-[calc(100vh-40px)] w-full flex-col items-center">
+      <div className="flex w-full grow flex-col items-center">
         <div className="absolute right-5">
           {!send && !prevLetter && (
             <WritePageButton

src/pages/Write/LetterEditor.tsx

@@ -23,8 +23,6 @@ export default function LetterEditor({
   const letterText = useWrite((state) => state.letterText);
   const setLetterText = useWrite((state) => state.setLetterText);
 
-  const editorStyle = twMerge(`body-r basic-theme w-full px-6 focus:outline-none`, `${font}`);
-
   const handleResizeHeight = () => {
     if (textareaRef.current !== null) {
       textareaRef.current.style.height = 'auto'; //height 초기화
@@ -33,7 +31,7 @@ export default function LetterEditor({
   };
 
   return (
-    <div className="mb-12">
+    <div className="flex grow flex-col pb-15">
       <OptionSlide prevLetter={prevLetter} />
       <div className="absolute right-5">
         {prevLetter ? (
@@ -72,10 +70,12 @@ export default function LetterEditor({
           value={letterTitle}
         />
       </div>
-      <div className="mt-9">
+      <div className="mt-9 flex grow">
         <textarea
-          rows={18}
-          className={editorStyle}
+          className={twMerge(
+            `body-r basic-theme min-h-full w-full px-6 focus:outline-none`,
+            `${font}`,
+          )}
           placeholder="클릭해서 내용을 작성하세요"
           onChange={(e) => {
             handleResizeHeight();

src/pages/Write/components/ResultLetterAnimation.tsx

@@ -28,7 +28,7 @@ export default function ResultLetterAnimation({ stampName }: { stampName: Stamp
       ) : (
         <>
           {next === 'st' && (
-            <div className="relative h-[400px] w-full overflow-hidden">
+            <div className="relative h-[300px] w-full overflow-hidden">
               <img
                 src={openedLetter}
                 alt="열린 편지"
@@ -43,7 +43,7 @@ export default function ResultLetterAnimation({ stampName }: { stampName: Stamp
             </div>
           )}
           {next === 'nd' && (
-            <div className="relative h-[400px] w-full">
+            <div className="relative h-[300px] w-full">
               <img
                 src={closedLetter}
                 alt="닫힌 편지"

src/pages/Write/index.tsx

@@ -20,14 +20,14 @@ const WritePage = () => {
       text: '요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민요롷고그런그런 고민',
     },
   ]);
-  // useEffect(() => {
-  //   setPrevLetter(null);
-  // });
+  useEffect(() => {
+    setPrevLetter(null);
+  });
 
   const theme = useWrite((state) => state.theme);
 
   const wrapStyle = twMerge(
-    'relative h-full min-h-screen w-full p-5',
+    'relative p-5 w-full grow flex flex-col',
     `${step === 'edit' && THEME_OBJ[theme]}`,
   );
   return (

src/styles/animations.css

@@ -11,17 +11,17 @@
       transform: translateY(-300%);
     }
     100% {
-      transform: translateY(60%);
+      transform: translateY(35%);
     }
   }
 
   @keyframes up {
     0% {
-      transform: perspective(800px) rotateY(0deg) translateY(200px);
+      transform: perspective(800px) rotateY(0deg) translateY(100px);
       opacity: 0;
     }
     20% {
-      transform: perspective(800px) rotateY(0deg) translateY(200px);
+      transform: perspective(800px) rotateY(0deg) translateY(100px);
       opacity: 1;
     }
     66% {