design:편지 작성 페이지 작업 시작

Author: wldnjs990

src/assets/svg/test.svg

@@ -0,0 +1,12 @@
+function WritePageButton({ text, onClick }: { text: string; onClick: () => void }) {
+  return (
+    <button
+      className="caption-sb bg-primary-3 text-gray-60 cursor-pointer rounded-[4px] px-2 py-1"
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+}
+
+export default WritePageButton;

src/pages/Write/WritePageButton.tsx

@@ -0,0 +1,9 @@
+function WritePageOptionSlide() {
+  return (
+    <div className="bg-primary-3 absolute bottom-0 left-0 h-110 w-full rounded-t-[20px]">
+      <div className="bg-primary-1 absolute top-3 left-[50%] h-[3px] w-7.5 translate-x-[-50%] translate-y-[-50%]"></div>
+    </div>
+  );
+}
+
+export default WritePageOptionSlide;

src/pages/Write/WritePageOptionSlide.tsx

@@ -1,5 +1,57 @@
+import { useRef } from 'react';
+
+import WritePageButton from './WritePageButton';
+import WritePageOptionSlide from './WritePageOptionSlide';
+
 const WritePage = () => {
-  return <div>WritePage</div>;
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleResizeHeight = () => {
+    if (textareaRef.current !== null) {
+      textareaRef.current.style.height = 'auto'; //height 초기화
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  };
+
+  return (
+    <div className="relative p-5">
+      <WritePageOptionSlide />
+      <div className="flex w-full justify-end gap-3">
+        <WritePageButton
+          text="연락 끊기"
+          onClick={() => {
+            console.log('연락 끊기');
+          }}
+        />
+        <WritePageButton
+          text="작성 완료"
+          onClick={() => {
+            console.log('작성 완료');
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3 px-6">
+        <div className="body-b mt-7 flex">
+          <span>TO. </span>
+          <span>{'12EE1'}</span>
+        </div>
+        <input
+          type="text"
+          placeholder="제목을 입력해주세요."
+          className="body-sb placeholder:text-gray-40 placeholder:border-0 focus:outline-0"
+        />
+      </div>
+      <div className="mt-9">
+        <textarea
+          rows={20}
+          className="body-r basic-theme h-auto w-full px-6 focus:outline-none"
+          placeholder="클릭해서 내용을 작성하세요"
+          onChange={handleResizeHeight}
+          ref={textareaRef}
+        ></textarea>
+      </div>
+    </div>
+  );
 };
 
 export default WritePage;

src/pages/Write/index.tsx

@@ -1,4 +1,13 @@
 /* Tailwind에서 기본적으로 제공하지 않는 추가 유틀리티 클래스 정의 */
 
 @layer utilities {
+  /* 편지지 테마용 css */
+  .basic-theme {
+    background-attachment: local;
+    background-image:
+      linear-gradient(to right, white 10px, transparent 10px),
+      linear-gradient(to left, white 10px, transparent 10px),
+      repeating-linear-gradient(white, white 30px, #f8de8c 30px, #f8de8c 31px, white 31px);
+    line-height: 31px;
+  }
 }