diff --git a/src/assets/images/basic-theme.png b/src/assets/images/basic-theme.png new file mode 100644 index 0000000..f99e6fe Binary files /dev/null and b/src/assets/images/basic-theme.png differ diff --git a/src/assets/images/celebration-stamp.png b/src/assets/images/celebration-stamp.png new file mode 100644 index 0000000..f80d31d Binary files /dev/null and b/src/assets/images/celebration-stamp.png differ diff --git a/src/assets/images/celebration-theme-asset-bottom.png b/src/assets/images/celebration-theme-asset-bottom.png new file mode 100644 index 0000000..98a8fd2 Binary files /dev/null and b/src/assets/images/celebration-theme-asset-bottom.png differ diff --git a/src/assets/images/celebration-theme-asset-side.png b/src/assets/images/celebration-theme-asset-side.png new file mode 100644 index 0000000..28c04ee Binary files /dev/null and b/src/assets/images/celebration-theme-asset-side.png differ diff --git a/src/assets/images/celebration.png b/src/assets/images/celebration.png new file mode 100644 index 0000000..cfffc10 Binary files /dev/null and b/src/assets/images/celebration.png differ diff --git a/src/assets/images/closed-letter.png b/src/assets/images/closed-letter.png new file mode 100644 index 0000000..63fea89 Binary files /dev/null and b/src/assets/images/closed-letter.png differ diff --git a/src/assets/images/congrat-theme.png b/src/assets/images/congrat-theme.png new file mode 100644 index 0000000..286d532 Binary files /dev/null and b/src/assets/images/congrat-theme.png differ diff --git a/src/assets/images/consolation-stamp.png b/src/assets/images/consolation-stamp.png new file mode 100644 index 0000000..a4c7090 Binary files /dev/null and b/src/assets/images/consolation-stamp.png differ diff --git a/src/assets/images/consolation.png b/src/assets/images/consolation.png new file mode 100644 index 0000000..e44a027 Binary files /dev/null and b/src/assets/images/consolation.png differ diff --git a/src/assets/images/consult-stamp.png b/src/assets/images/consult-stamp.png new file mode 100644 index 0000000..094d616 Binary files /dev/null and b/src/assets/images/consult-stamp.png differ diff --git a/src/assets/images/consult.png b/src/assets/images/consult.png new file mode 100644 index 0000000..e719e2b Binary files /dev/null and b/src/assets/images/consult.png differ diff --git a/src/assets/images/etc-stamp.png b/src/assets/images/etc-stamp.png new file mode 100644 index 0000000..cc3f4dd Binary files /dev/null and b/src/assets/images/etc-stamp.png differ diff --git a/src/assets/images/etc.png b/src/assets/images/etc.png new file mode 100644 index 0000000..76174c2 Binary files /dev/null and b/src/assets/images/etc.png differ diff --git a/src/assets/images/field-theme-asset-bird.png b/src/assets/images/field-theme-asset-bird.png new file mode 100644 index 0000000..919e4dd Binary files /dev/null and b/src/assets/images/field-theme-asset-bird.png differ diff --git a/src/assets/images/field-theme-asset-bottom.png b/src/assets/images/field-theme-asset-bottom.png new file mode 100644 index 0000000..128e8c2 Binary files /dev/null and b/src/assets/images/field-theme-asset-bottom.png differ diff --git a/src/assets/images/field-theme.png b/src/assets/images/field-theme.png new file mode 100644 index 0000000..09978f8 Binary files /dev/null and b/src/assets/images/field-theme.png differ diff --git a/src/assets/images/letter-pink.png b/src/assets/images/letter-pink.png new file mode 100644 index 0000000..ba26e54 Binary files /dev/null and b/src/assets/images/letter-pink.png differ diff --git a/src/assets/images/opened-letter-front.png b/src/assets/images/opened-letter-front.png new file mode 100644 index 0000000..bc39e8d Binary files /dev/null and b/src/assets/images/opened-letter-front.png differ diff --git a/src/assets/images/opened-letter.png b/src/assets/images/opened-letter.png new file mode 100644 index 0000000..5797b4a Binary files /dev/null and b/src/assets/images/opened-letter.png differ diff --git a/src/assets/images/respondent-stamp.png b/src/assets/images/respondent-stamp.png new file mode 100644 index 0000000..2d58c20 Binary files /dev/null and b/src/assets/images/respondent-stamp.png differ diff --git a/src/assets/images/sky-theme-asset-clouds.png b/src/assets/images/sky-theme-asset-clouds.png new file mode 100644 index 0000000..98187b9 Binary files /dev/null and b/src/assets/images/sky-theme-asset-clouds.png differ diff --git a/src/assets/images/sky-theme.png b/src/assets/images/sky-theme.png new file mode 100644 index 0000000..14ba42f Binary files /dev/null and b/src/assets/images/sky-theme.png differ diff --git a/src/assets/images/vintage-theme-asset-bg.png b/src/assets/images/vintage-theme-asset-bg.png new file mode 100644 index 0000000..b67338f Binary files /dev/null and b/src/assets/images/vintage-theme-asset-bg.png differ diff --git a/src/assets/images/vintage-theme.png b/src/assets/images/vintage-theme.png new file mode 100644 index 0000000..c27e5c3 Binary files /dev/null and b/src/assets/images/vintage-theme.png differ diff --git a/src/components/ResultLetter.tsx b/src/components/ResultLetter.tsx new file mode 100644 index 0000000..4fa14ed --- /dev/null +++ b/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 ( +
+
+
+ 따숨이님께 + {title} +
+ 우표 +
+
+ {today} +
+ {address.split('').map((spell, idx) => { + return ( + + {spell} + + ); + })} +
+
+
+ ); +} diff --git a/src/pages/Write/CategorySelect.tsx b/src/pages/Write/CategorySelect.tsx new file mode 100644 index 0000000..a8a1855 --- /dev/null +++ b/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>; + prevLetter: PrevLetter; +}) { + const [send, setSend] = useState(false); + + const stamp = useWrite((state) => state.stamp); + return ( + <> +
+
+ {!send && !prevLetter && ( + { + setStep('edit'); + }} + bgColor="white" + /> + )} +
+ + + {send || prevLetter ? '편지 작성이 완료 되었어요!' : '어떤 답장을 받고 싶나요?'} + + + {/* 카테고리 선택 컴포넌트 */} + {!send && !prevLetter && } + + {prevLetter && ( +
+ +
+ 작성하신 편지는 + + {'00'}시간 + {'00'}분 + {'00'}초 후에 도착합니다. + +
+
+ )} + + {send && ( +
+ + + 두근두근! 답장이 언제 올까요? + +
+ )} + + {send || prevLetter ? ( + + 홈으로 돌아가기 + + ) : ( + + )} +
+ + ); +} diff --git a/src/pages/Write/LetterEditor.tsx b/src/pages/Write/LetterEditor.tsx new file mode 100644 index 0000000..7e2e711 --- /dev/null +++ b/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>; + prevLetter: PrevLetter; +}) { + const textareaRef = useRef(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 ( +
+ +
+ {prevLetter ? ( + { + if (letterTitle.trim() !== '' && letterText.trim() !== '') { + setStep('category'); + } else { + alert('편지 제목, 내용이 작성되었는지 확인해주세요'); + } + }} + /> + ) : ( + { + if (letterTitle.trim() !== '' && letterText.trim() !== '') { + setStep('category'); + } else { + alert('편지 제목, 내용이 작성되었는지 확인해주세요'); + } + }} + /> + )} +
+
+
TO. {'12EE1'}
+ { + setLetterTitle(e.target.value); + }} + value={letterTitle} + /> +
+
+ +
+
+ ); +} diff --git a/src/pages/Write/OptionSlide.tsx b/src/pages/Write/OptionSlide.tsx new file mode 100644 index 0000000..fef0145 --- /dev/null +++ b/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