design: 편지작성 페이지 퍼블리싱

src/components/ResultLetter.tsx

@@ -0,0 +1,45 @@
+import letterPink from '@/assets/images/letter-pink.png';
+
+import { STAMPS } from '../pages/Write/constants';
+
+export default function ResultLetter({
+  stampName = '위로와 공감',
+  title,
+}: {
+  stampName: Stamp;
+  title: string;
+}) {
+  const address = '1A3E2';
+  const date = new Date();
+  const today = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
+
+  return (
+    <div
+      className="flex w-full flex-col gap-[35px] p-4"
+      style={{ backgroundImage: `url(${letterPink})` }}
+    >
+      <div className="flex justify-between gap-3">
+        <div className="flex flex-col gap-2.5">
+          <span className="caption-b text-gray-60">따숨이님께</span>
+          <span className="caption-r text-gray-80 line-clamp-3 break-all">{title}</span>
+        </div>
+        <img src={STAMPS[stampName]} alt="우표" />
+      </div>
+      <div className="flex flex-col gap-[5px]">
+        <span className="caption-sb text-gray-60">{today}</span>
+        <div className="flex gap-1">
+          {address.split('').map((spell, idx) => {
+            return (
+              <span
+                className="caption-r flex h-6 w-6 items-center justify-center rounded-sm bg-white/40"
+                key={idx}
+              >
+                {spell}
+              </span>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Write/CategorySelect.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Link } from 'react-router';
+
+import useWrite from '@/stores/writeStore';
+
+import CategoryList from './components/CategoryList';
+import ResultLetterAnimation from './components/ResultLetterAnimation';
+import WritePageButton from './components/WritePageButton';
+
+export default function CategorySelect({
+  setStep,
+  prevLetter,
+}: {
+  setStep: React.Dispatch<React.SetStateAction<Step>>;
+  prevLetter: PrevLetter;
+}) {
+  const [send, setSend] = useState<boolean>(false);
+
+  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="absolute right-5">
+          {!send && !prevLetter && (
+            <WritePageButton
+              text="이전 단계"
+              onClick={() => {
+                setStep('edit');
+              }}
+              bgColor="white"
+            />
+          )}
+        </div>
+
+        <span className="body-b text-gray-60 mt-15 rounded-full bg-white px-6 py-4">
+          {send || prevLetter ? '편지 작성이 완료 되었어요!' : '어떤 답장을 받고 싶나요?'}
+        </span>
+
+        {/* 카테고리 선택 컴포넌트 */}
+        {!send && !prevLetter && <CategoryList />}
+
+        {prevLetter && (
+          <div className="mt-25 flex w-full max-w-[300px] flex-col items-center gap-5">
+            <ResultLetterAnimation stampName="답변자" />
+            <div className="animate-show-text flex flex-col items-center opacity-0">
+              <span className="body-sb text-gray-60">작성하신 편지는</span>
+              <span className="body-sb text-gray-60">
+                <span>{'00'}시간 </span>
+                <span>{'00'}분 </span>
+                <span>{'00'}초 후에 도착합니다.</span>
+              </span>
+            </div>
+          </div>
+        )}
+
+        {send && (
+          <div className="mt-25 flex w-full max-w-[300px] flex-col items-center gap-5">
+            <ResultLetterAnimation stampName={stamp} />
+            <span className="animate-show-text body-sb text-gray-60 opacity-0">
+              두근두근! 답장이 언제 올까요?
+            </span>
+          </div>
+        )}
+
+        {send || prevLetter ? (
+          <Link
+            to={'/'}
+            className="bg-primary-3 body-m mt-auto flex h-10 w-[280px] cursor-pointer items-center justify-center rounded-lg"
+          >
+            홈으로 돌아가기
+          </Link>
+        ) : (
+          <button
+            className="bg-primary-3 body-m mt-auto flex h-10 w-[280px] cursor-pointer items-center justify-center rounded-lg"
+            onClick={() => {
+              if (stamp) {
+                setSend(true);
+              } else {
+                alert('우표 선택을 해주세요');
+              }
+            }}
+          >
+            편지 전송
+          </button>
+        )}
+      </div>
+    </>
+  );
+}

src/pages/Write/LetterEditor.tsx

@@ -0,0 +1,89 @@
+import { useRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import useWrite from '@/stores/writeStore';
+
+import WritePageButton from './components/WritePageButton';
+import OptionSlide from './OptionSlide';
+
+export default function LetterEditor({
+  setStep,
+  prevLetter,
+}: {
+  setStep: React.Dispatch<React.SetStateAction<Step>>;
+  prevLetter: PrevLetter;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const font = useWrite((state) => state.font);
+
+  const letterTitle = useWrite((state) => state.letterTitle);
+  const setLetterTitle = useWrite((state) => state.setLetterTitle);
+
+  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 초기화
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  };
+
+  return (
+    <div className="mb-12">
+      <OptionSlide prevLetter={prevLetter} />
+      <div className="absolute right-5">
+        {prevLetter ? (
+          <WritePageButton
+            text="답장 전송"
+            onClick={() => {
+              if (letterTitle.trim() !== '' && letterText.trim() !== '') {
+                setStep('category');
+              } else {
+                alert('편지 제목, 내용이 작성되었는지 확인해주세요');
+              }
+            }}
+          />
+        ) : (
+          <WritePageButton
+            text="다음 단계"
+            onClick={() => {
+              if (letterTitle.trim() !== '' && letterText.trim() !== '') {
+                setStep('category');
+              } else {
+                alert('편지 제목, 내용이 작성되었는지 확인해주세요');
+              }
+            }}
+          />
+        )}
+      </div>
+      <div className="flex flex-col gap-3 px-6">
+        <div className="body-b mt-15">TO. {'12EE1'}</div>
+        <input
+          type="text"
+          placeholder="제목을 입력해주세요."
+          className="body-sb placeholder:text-gray-40 placeholder:border-0 focus:outline-none"
+          onChange={(e) => {
+            setLetterTitle(e.target.value);
+          }}
+          value={letterTitle}
+        />
+      </div>
+      <div className="mt-9">
+        <textarea
+          rows={18}
+          className={editorStyle}
+          placeholder="클릭해서 내용을 작성하세요"
+          onChange={(e) => {
+            handleResizeHeight();
+            setLetterText(e.target.value);
+          }}
+          value={letterText}
+        ></textarea>
+      </div>
+    </div>
+  );
+}

src/pages/Write/OptionSlide.tsx

@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import FontOption from './components/FontOption';
+import PreviousLetterOption from './components/PreviousLetterOption';
+import ThemeOption from './components/ThemeOption';
+import WritePageButton from './components/WritePageButton';
+
+function OptionSlide({ prevLetter }: { prevLetter: PrevLetter }) {
+  const [clicked, setClicked] = useState<Option>(null);
+  const [slideActive, setSlideActive] = useState<boolean>(false);
+  const buttonTitle = ['편지지', '글꼴', '이전 편지 내용'];
+
+  const headRef = useRef<HTMLDivElement>(null);
+
+  // 슬라이드 애니메이션을 줘야 하는데 마음데로 안되네에에엑
+  const slideStyle = twMerge(
+    `bg-primary-3 fixed bottom-0 left-[50%] flex w-full max-w-[600px] translate-x-[-50%] flex-col rounded-t-[20px] duration-100`,
+  );
+  // 슬라이드 계산부터 시작
+  //
+
+  return (
+    <div className={slideStyle}>
+      <div
+        className="border-primary-1 flex cursor-pointer items-center justify-between border-b-2 px-4 pt-6 pb-4"
+        ref={headRef}
+      >
+        <div className="bg-primary-1 absolute top-3 left-[50%] h-[3px] w-7.5 translate-x-[-50%] translate-y-[-50%]"></div>
+        <div className="flex gap-2">
+          <WritePageButton
+            text={buttonTitle[0]}
+            bgColor="white"
+            rounded="lg"
+            clicked={clicked}
+            onClick={() => {
+              if (clicked !== buttonTitle[0]) {
+                setClicked('편지지');
+                setSlideActive(() => true);
+              } else {
+                setClicked(null);
+                setSlideActive(() => false);
+              }
+            }}
+          />
+          <WritePageButton
+            text={buttonTitle[1]}
+            bgColor="white"
+            rounded="lg"
+            clicked={clicked}
+            onClick={() => {
+              if (clicked !== buttonTitle[1]) {
+                setClicked('글꼴');
+                setSlideActive(() => true);
+              } else {
+                setClicked(null);
+                setSlideActive(() => false);
+              }
+            }}
+          />
+        </div>
+        {prevLetter && (
+          <WritePageButton
+            text={buttonTitle[2]}
+            bgColor="white"
+            rounded="lg"
+            clicked={clicked}
+            onClick={() => {
+              if (clicked !== buttonTitle[2]) {
+                setClicked('이전 편지 내용');
+                setSlideActive(() => true);
+              } else {
+                setClicked(null);
+                setSlideActive(() => false);
+              }
+            }}
+          />
+        )}
+      </div>
+      {clicked === '편지지' && <ThemeOption />}
+      {clicked === '글꼴' && <FontOption />}
+      {clicked === '이전 편지 내용' && <PreviousLetterOption prevLetter={prevLetter} />}
+    </div>
+  );
+}
+
+export default OptionSlide;

src/pages/Write/components/CategoryList.tsx

@@ -0,0 +1,20 @@
+import { CATEGORY_STAMPS } from '../constants';
+
+import CategoryStamp from './CategoryStamp';
+
+function CategoryList() {
+  return (
+    <div className="mt-[70px] flex w-[80%] flex-wrap justify-between gap-6 px-5">
+      {CATEGORY_STAMPS.map((stamp, idx) => {
+        return (
+          <div className="w-[calc(50%-12px)]" key={idx}>
+            <CategoryStamp title={stamp.title} image={stamp.image} />
+            <p className="body-m mt-2 flex items-center justify-center">{stamp.title}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default CategoryList;

src/pages/Write/components/CategoryStamp.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import useWrite from '@/stores/writeStore';
+
+function CategoryStamp({ title, image }: { title: Stamp; image: string }) {
+  const [hovered, setHovered] = useState(false);
+
+  const stamp = useWrite((state) => state.stamp);
+  const setStamp = useWrite((state) => state.setStamp);
+
+  return (
+    <div className="flex w-full cursor-pointer flex-col items-center justify-center">
+      <svg
+        height="80%"
+        viewBox="0 0 138 170"
+        fill="none"
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onClick={() => setStamp(title)}
+      >
+        <image href={image} width="125" height="150" x={5} y={5}></image>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M129.303 4.27673C131.675 4.27673 133.598 2.36197 133.598 2.22916e-08L137.894 0V5.34591C135.521 5.34591 133.598 7.26067 133.598 9.62264C133.598 11.9846 135.521 13.8994 137.894 13.8994V20.3145C135.521 20.3145 133.598 22.2292 133.598 24.5912C133.598 26.9532 135.521 28.8679 137.894 28.8679V35.283C135.521 35.283 133.598 37.1978 133.598 39.5597C133.598 41.9217 135.521 43.8365 137.894 43.8365V50.2516C135.521 50.2516 133.598 52.1663 133.598 54.5283C133.598 56.8903 135.521 58.805 137.894 58.805V65.2201C135.521 65.2201 133.598 67.1349 133.598 69.4969C133.598 71.8588 135.521 73.7736 137.894 73.7736V80.1887C135.521 80.1887 133.598 82.1034 133.598 84.4654C133.598 86.8274 135.521 88.7421 137.894 88.7421V95.1572C135.521 95.1572 133.598 97.072 133.598 99.434C133.598 101.796 135.521 103.711 137.894 103.711V110.126C135.521 110.126 133.598 112.041 133.598 114.403C133.598 116.764 135.521 118.679 137.894 118.679V125.094C135.521 125.094 133.598 127.009 133.598 129.371C133.598 131.733 135.521 133.648 137.894 133.648V140.063C135.521 140.063 133.598 141.978 133.598 144.34C133.598 146.702 135.521 148.616 137.894 148.616V155.031C135.521 155.031 133.598 156.946 133.598 159.308C133.598 161.67 135.521 163.585 137.894 163.585L137.894 170H133.598C133.598 167.638 131.675 165.723 129.303 165.723C126.931 165.723 125.008 167.638 125.008 170H118.565C118.565 167.638 116.642 165.723 114.27 165.723C111.898 165.723 109.975 167.638 109.975 170H103.532C103.532 167.638 101.609 165.723 99.2367 165.723C96.8645 165.723 94.9415 167.638 94.9415 170H88.4986C88.4986 167.638 86.5756 165.723 84.2034 165.723C81.8312 165.723 79.9082 167.638 79.9082 170H73.4654C73.4654 167.638 71.5424 165.723 69.1702 165.723C66.798 165.723 64.875 167.638 64.875 170H58.4321C58.4321 167.638 56.5091 165.723 54.1369 165.723C51.7648 165.723 49.8417 167.638 49.8417 170H43.3989C43.3989 167.638 41.4759 165.723 39.1037 165.723C36.7315 165.723 34.8085 167.638 34.8085 170H28.3657C28.3657 167.638 26.4426 165.723 24.0704 165.723C21.6983 165.723 19.7752 167.638 19.7752 170H13.3324C13.3324 167.638 11.4094 165.723 9.0372 165.723C6.66502 165.723 4.74199 167.638 4.74199 170H0.446785L0.446777 163.585C2.81896 163.585 4.74199 161.67 4.74199 159.308C4.74199 156.946 2.81896 155.031 0.446777 155.031L0.446777 148.616C2.81896 148.616 4.74199 146.702 4.74199 144.34C4.74199 141.978 2.81896 140.063 0.446777 140.063L0.446777 133.648C2.81896 133.648 4.74199 131.733 4.74199 129.371C4.74199 127.009 2.81896 125.094 0.446779 125.094L0.446779 118.679C2.81896 118.679 4.74199 116.764 4.74199 114.403C4.74199 112.041 2.81896 110.126 0.44678 110.126L0.44678 103.711C2.81896 103.711 4.74199 101.796 4.74199 99.434C4.74199 97.072 2.81896 95.1572 0.44678 95.1572L0.446781 88.7421C2.81896 88.7421 4.74199 86.8274 4.74199 84.4654C4.74199 82.1034 2.81896 80.1887 0.446781 80.1887L0.446781 73.7736C2.81896 73.7736 4.74199 71.8588 4.74199 69.4969C4.74199 67.1349 2.81896 65.2201 0.446782 65.2201L0.446782 58.805C2.81896 58.805 4.74199 56.8903 4.74199 54.5283C4.74199 52.1663 2.81896 50.2516 0.446782 50.2516L0.446783 43.8365C2.81896 43.8365 4.74199 41.9217 4.742 39.5597C4.742 37.1978 2.81896 35.283 0.446782 35.283L0.446783 28.8679C2.81896 28.8679 4.742 26.9532 4.742 24.5912C4.742 22.2292 2.81896 20.3145 0.446783 20.3145L0.446783 13.8994C2.81896 13.8994 4.742 11.9846 4.742 9.62264C4.742 7.26067 2.81896 5.34591 0.446784 5.34591L0.446784 7.1333e-07L4.74199 6.91038e-07C4.74199 2.36197 6.66502 4.27673 9.0372 4.27673C11.4094 4.27673 13.3324 2.36197 13.3324 6.46455e-07L19.7752 6.13018e-07C19.7752 2.36197 21.6983 4.27673 24.0704 4.27673C26.4426 4.27673 28.3657 2.36197 28.3657 5.68435e-07L34.8085 5.34998e-07C34.8085 2.36197 36.7315 4.27673 39.1037 4.27673C41.4759 4.27673 43.3989 2.36197 43.3989 4.90415e-07L49.8417 4.56977e-07C49.8417 2.36197 51.7648 4.27673 54.1369 4.27673C56.5091 4.27673 58.4321 2.36197 58.4321 4.12394e-07L64.875 3.78957e-07C64.875 2.36197 66.798 4.27673 69.1702 4.27673C71.5424 4.27673 73.4654 2.36197 73.4654 3.34373e-07L79.9082 3.00936e-07C79.9082 2.36197 81.8312 4.27673 84.2034 4.27673C86.5756 4.27673 88.4986 2.36197 88.4986 2.56353e-07L94.9415 2.22916e-07C94.9415 2.36197 96.8645 4.27673 99.2367 4.27673C101.609 4.27673 103.532 2.36197 103.532 1.78333e-07L109.975 1.44895e-07C109.975 2.36197 111.898 4.27673 114.27 4.27673C116.642 4.27673 118.565 2.36197 118.565 1.00312e-07L125.008 6.68747e-08C125.008 2.36197 126.931 4.27673 129.303 4.27673ZM119.809 18.0851H18.5324V151.915H119.809V18.0851Z"
+          fill={`${stamp === title || hovered ? '#FAB546' : 'white'}`}
+        />
+      </svg>
+    </div>
+  );
+}
+
+export default CategoryStamp;

src/pages/Write/components/CheckIcon.tsx

@@ -0,0 +1,23 @@
+export default function CheckIcon({ idx, selected }: { idx: number; selected: number }) {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <mask id="mask0_285_3381" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+          <rect width="20" height="20" fill="#D9D9D9" />
+        </mask>
+        <g mask="url(#mask0_285_3381)">
+          <path
+            d="M8.83317 11.5L7.0415 9.70835C6.88873 9.55558 6.69428 9.47919 6.45817 9.47919C6.22206 9.47919 6.02762 9.55558 5.87484 9.70835C5.72206 9.86113 5.64567 10.0556 5.64567 10.2917C5.64567 10.5278 5.72206 10.7222 5.87484 10.875L8.24984 13.25C8.4165 13.4167 8.61095 13.5 8.83317 13.5C9.05539 13.5 9.24984 13.4167 9.4165 13.25L14.1248 8.54169C14.2776 8.38891 14.354 8.19446 14.354 7.95835C14.354 7.72224 14.2776 7.5278 14.1248 7.37502C13.9721 7.22224 13.7776 7.14585 13.5415 7.14585C13.3054 7.14585 13.1109 7.22224 12.9582 7.37502L8.83317 11.5ZM9.99984 18.3334C8.84706 18.3334 7.76373 18.1146 6.74984 17.6771C5.73595 17.2396 4.854 16.6459 4.104 15.8959C3.354 15.1459 2.76025 14.2639 2.32275 13.25C1.88525 12.2361 1.6665 11.1528 1.6665 10C1.6665 8.84724 1.88525 7.76391 2.32275 6.75002C2.76025 5.73613 3.354 4.85419 4.104 4.10419C4.854 3.35419 5.73595 2.76044 6.74984 2.32294C7.76373 1.88544 8.84706 1.66669 9.99984 1.66669C11.1526 1.66669 12.2359 1.88544 13.2498 2.32294C14.2637 2.76044 15.1457 3.35419 15.8957 4.10419C16.6457 4.85419 17.2394 5.73613 17.6769 6.75002C18.1144 7.76391 18.3332 8.84724 18.3332 10C18.3332 11.1528 18.1144 12.2361 17.6769 13.25C17.2394 14.2639 16.6457 15.1459 15.8957 15.8959C15.1457 16.6459 14.2637 17.2396 13.2498 17.6771C12.2359 18.1146 11.1526 18.3334 9.99984 18.3334ZM9.99984 16.6667C11.8609 16.6667 13.4373 16.0209 14.729 14.7292C16.0207 13.4375 16.6665 11.8611 16.6665 10C16.6665 8.13891 16.0207 6.56252 14.729 5.27085C13.4373 3.97919 11.8609 3.33335 9.99984 3.33335C8.13873 3.33335 6.56234 3.97919 5.27067 5.27085C3.979 6.56252 3.33317 8.13891 3.33317 10C3.33317 11.8611 3.979 13.4375 5.27067 14.7292C6.56234 16.0209 8.13873 16.6667 9.99984 16.6667Z"
+            fill={`${idx === selected ? '#FAB546' : '#000000'}`}
+          />
+        </g>
+      </svg>
+    </>
+  );
+}