Skip to content

Commit b8055b9

Browse files
wldnjs990wldnjs990
committed
design:편지 작성 페이지 작업중
1 parent dc96bc8 commit b8055b9

File tree

11 files changed

+217
-70
lines changed

11 files changed

+217
-70
lines changed

‎src/pages/Write/CategorySelect.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default function CategorySelect() {
2+
return (
3+
<div>
4+
<div className="mt-25 flex justify-center">
5+
<span className="body-b rounded-full bg-white px-6 py-4">어떤 답장을 받고 싶나요?</span>
6+
</div>
7+
</div>
8+
);
9+
}

‎src/pages/Write/FontOption.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { twMerge } from 'tailwind-merge';
2+
import CheckIcon from './components/CheckIcon';
3+
4+
export default function FontOption({
5+
fontFamilyName = 'courier',
6+
fontFamily = 'courier',
7+
}: {
8+
fontFamilyName?: string;
9+
fontFamily?: string;
10+
}) {
11+
const dummy = new Array(10).fill(null);
12+
13+
const fontStyle = twMerge(
14+
'w-full caption-m px-3 py-2 bg-white rounded-lg flex flex-start items-center justify-between cursor-pointer',
15+
`${fontFamily}`,
16+
);
17+
return (
18+
<>
19+
<div className="h-[330px] overflow-y-scroll">
20+
{dummy.map((_, idx) => {
21+
return (
22+
<div className="w-full" key={idx}>
23+
<div className="flex flex-col items-start gap-1.5">
24+
<p className="caption-m">{fontFamilyName}</p>
25+
<button className={fontStyle}>
26+
안녕! 나는 따수미야! 내 우편번호는 012345야. <CheckIcon />
27+
</button>
28+
</div>
29+
</div>
30+
);
31+
})}
32+
</div>
33+
</>
34+
);
35+
}

‎src/pages/Write/LetterEditor.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { useRef } from 'react';
2+
3+
import WritePageButton from './components/WritePageButton';
4+
import OptionSlide from './OptionSlide';
5+
6+
export default function LetterEditor() {
7+
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
8+
9+
const handleResizeHeight = () => {
10+
if (textareaRef.current !== null) {
11+
textareaRef.current.style.height = 'auto'; //height 초기화
12+
textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
13+
}
14+
};
15+
return (
16+
<>
17+
{/* <OptionSlide /> */}
18+
<div className="flex min-h-full w-full justify-end gap-3">
19+
<WritePageButton
20+
text="연락 끊기"
21+
onClick={() => {
22+
console.log('연락 끊기');
23+
}}
24+
/>
25+
<WritePageButton
26+
text="작성 완료"
27+
onClick={() => {
28+
console.log('작성 완료');
29+
}}
30+
/>
31+
</div>
32+
<div className="flex flex-col gap-3 px-6">
33+
<div className="body-b mt-7 flex">
34+
<span>TO. </span>
35+
<span>{'12EE1'}</span>
36+
</div>
37+
<input
38+
type="text"
39+
placeholder="제목을 입력해주세요."
40+
className="body-sb placeholder:text-gray-40 placeholder:border-0 focus:outline-0"
41+
/>
42+
</div>
43+
<div className="mt-9">
44+
<textarea
45+
rows={20}
46+
className="body-r basic-theme h-auto w-full px-6 focus:outline-none"
47+
placeholder="클릭해서 내용을 작성하세요"
48+
onChange={handleResizeHeight}
49+
ref={textareaRef}
50+
></textarea>
51+
</div>
52+
</>
53+
);
54+
}

‎src/pages/Write/OptionSlide.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, useRef } from 'react';
2+
import FontOption from './FontOption';
3+
import PreviousLetterOption from './PreviousLetterOption';
4+
import WritePageButton from './components/WritePageButton';
5+
6+
function OptionSlide() {
7+
const letterRef = useRef<Component>(null);
8+
return (
9+
<div className="bg-primary-3 absolute bottom-0 left-0 flex h-110 w-full flex-col rounded-t-[20px]">
10+
<div className="border-primary-1 flex items-center justify-between border-b-2 px-4 pt-6 pb-4">
11+
<div className="bg-primary-1 absolute top-3 left-[50%] h-[3px] w-7.5 translate-x-[-50%] translate-y-[-50%]"></div>
12+
<div className="flex gap-2">
13+
<WritePageButton text="편지지" bgColor="white" rounded="lg" />
14+
<WritePageButton text="글꼴" bgColor="white" rounded="lg" />
15+
</div>
16+
<WritePageButton text="이전 편지 내용" bgColor="white" rounded="lg" />
17+
</div>
18+
<div className="flex w-full flex-col gap-3 px-4 pt-3 pb-[30px]">
19+
{/* <ThemeOption /> */}
20+
{/* <FontOption /> */}
21+
<PreviousLetterOption />
22+
</div>
23+
</div>
24+
);
25+
}
26+
27+
export default OptionSlide;

‎src/pages/Write/PreviousLetterOption.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export default function PreviousLetterOption({ title = '제목' }: { title?: string }) {
2+
return (
3+
<div className="flex flex-col gap-1.5">
4+
<span className="caption-m">{title}</span>
5+
<div className="h-[305px] w-full overflow-y-scroll rounded-lg bg-white px-4 py-2">
6+
이 편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은
7+
당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을
8+
행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만
9+
사실입니다.영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게
10+
복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다. 어떤 이는 이 편지를
11+
받았으나 96시간 이내 자신의 손에서 떠나야 한다는 사실을 잊었습니다. 그는 곧 사직되었습니다.
12+
나중에야 이 사실을 알고 7통의 편지를 보냈는데 다시 좋은 직장을 얻었습니다. 미국의 케네디
13+
대통령은 이 편지를 받았지만 그냥 버렸습니다. 결국 9일 후 그는 암살당했습니다. 기억해 주세요.
14+
이 편지를 보내면 7년의 행운이 있을 것이고 그렇지 않으면 3년의 불행이 있을 것입니다. 이
15+
편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은
16+
당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을
17+
행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만
18+
사실입니다.영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게
19+
복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다. 어떤 이는 이 편지를
20+
받았으나 96시간 이내 자신의 손에서 떠나야 한다는 사실을 잊었습니다. 그는 곧 사직되었습니다.
21+
나중에야 이 사실을 알고 7통의 편지를 보냈는데 다시 좋은 직장을 얻었습니다. 미국의 케네디
22+
대통령은 이 편지를 받았지만 그냥 버렸습니다. 결국 9일 후 그는 암살당했습니다. 기억해 주세요.
23+
이 편지를 보내면 7년의 행운이 있을 것이고 그렇지 않으면 3년의 불행이 있을 것입니다. 이
24+
편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은
25+
당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을
26+
행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만
27+
사실입니다.영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게
28+
복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다. 어떤 이는 이 편지를
29+
받았으나 96시간 이내 자신의 손에서 떠나야 한다는 사실을 잊었습니다. 그는 곧 사직되었습니다.
30+
나중에야 이 사실을 알고 7통의 편지를 보냈는데 다시 좋은 직장을 얻었습니다. 미국의 케네디
31+
대통령은 이 편지를 받았지만 그냥 버렸습니다. 결국 9일 후 그는 암살당했습니다. 기억해 주세요.
32+
이 편지를 보내면 7년의 행운이 있을 것이고 그렇지 않으면 3년의 불행이 있을 것입니다.
33+
</div>
34+
</div>
35+
);
36+
}

‎src/pages/Write/ThemeOption.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function ThemeOption() {
2+
return <div>ThemeOption</div>;
3+
}

‎src/pages/Write/WritePageButton.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/pages/Write/WritePageOptionSlide.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/pages/Write/components/CheckIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export default function CheckIcon({ fill = '#000000' }: { fill?: string }) {
2+
return (
3+
<>
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
width="20"
7+
height="20"
8+
viewBox="0 0 20 20"
9+
fill="none"
10+
>
11+
<mask id="mask0_285_3381" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
12+
<rect width="20" height="20" fill="#D9D9D9" />
13+
</mask>
14+
<g mask="url(#mask0_285_3381)">
15+
<path
16+
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"
17+
fill={`${fill}`}
18+
/>
19+
</g>
20+
</svg>
21+
</>
22+
);
23+
}

‎src/pages/Write/components/WritePageButton.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { twMerge } from 'tailwind-merge';
2+
3+
function WritePageButton({
4+
text,
5+
onClick,
6+
bgColor = 'primary-3',
7+
rounded = '[4px]',
8+
}: {
9+
text: string;
10+
onClick?: () => void;
11+
bgColor?: string;
12+
rounded?: string;
13+
}) {
14+
const buttonStyle = twMerge(
15+
'caption-sb text-gray-60 cursor-pointer px-2 py-1',
16+
`bg-${bgColor} rounded-${rounded}`,
17+
);
18+
return (
19+
<button className={buttonStyle} onClick={onClick}>
20+
{text}
21+
</button>
22+
);
23+
}
24+
25+
export default WritePageButton;

0 commit comments

Comments
 (0)