-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Feat: 꾸미기 페이지 이동 * Feat: letter index 전역 상태로 저장 * Feat: react-to-image 라이브러리 설치 * Chore: 더미데이터 추가 * Feat: 기본 편지지 컴포넌트 추가 * Feat: 하단 버튼 추가 * Feat: 폰트 두께 편집 기능 * Feat: 폰트 크기 조정 * Feat: 날짜 표시하기 * Chore: 배경 이미지 데이터 추가 * Feat: 배경 이미지 설정
- Loading branch information
Showing
11 changed files
with
297 additions
and
7 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export const bgImageData = { | ||
| bg1: '/bg1.jpg', | ||
| bg2: '/bg2.jpg', | ||
| bg3: '/bg3.jpg', | ||
| bg4: '/bg4.jpg', | ||
| }; | ||
|
|
||
| export type bgImageType = keyof typeof bgImageData; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,220 @@ | ||
| 'use client'; | ||
|
|
||
| import { | ||
| Text, | ||
| Heading, | ||
| VStack, | ||
| Box, | ||
| Button, | ||
| HStack, | ||
| Drawer, | ||
| DrawerBody, | ||
| DrawerOverlay, | ||
| DrawerContent, | ||
| useDisclosure, | ||
| IconButton, | ||
| NumberInput, | ||
| NumberInputField, | ||
| NumberInputStepper, | ||
| NumberIncrementStepper, | ||
| NumberDecrementStepper, | ||
| Select, | ||
| SimpleGrid, | ||
| Checkbox, | ||
| Input, | ||
| } from '@chakra-ui/react'; | ||
| import { useLetterStore } from '../letter-store'; | ||
| import { useRef, useState } from 'react'; | ||
| import { useToPng } from '@hugocxl/react-to-image'; | ||
| import { useLetterFlowStore } from '../letter-flow-store'; | ||
| import { ArrowLeftIcon } from '@chakra-ui/icons'; | ||
| import { bgImageData, bgImageType } from './bgImage'; | ||
|
|
||
| const Page = () => { | ||
| const { isOpen, onOpen, onClose } = useDisclosure(); | ||
| const openButtonRef = useRef(null); | ||
| const { setState } = useLetterFlowStore(); | ||
| const { letter, currentLetterIndex } = useLetterStore(); | ||
| const [imageSrc, setImageSrc] = useState<string | undefined>(); | ||
| const [{ status, isLoading }, convertToImage, ref] = useToPng<HTMLDivElement>( | ||
| { | ||
| onStart: () => { | ||
| console.log('onStart'); | ||
| }, | ||
| onSuccess: (data) => { | ||
| setImageSrc(data); | ||
| }, | ||
| onError: (error) => { | ||
| console.error(error); | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| const [fontWeight, setFontWeight] = useState('normal'); | ||
| const [fontSize, setFontSize] = useState(16); | ||
| const [date, setDate] = useState( | ||
| new Date().toISOString().split('T')[0].split('-').join('-') | ||
| ); | ||
| const [showDate, setShowDate] = useState(false); | ||
| const [bgImage, setBgImage] = useState<bgImageType>('bg1'); | ||
|
|
||
| return ( | ||
| <> | ||
| <VStack> | ||
| {/* 편지 이미지 컴포넌트 */} | ||
| <VStack | ||
| p={6} | ||
| spacing={4} | ||
| alignItems={'flex-start'} | ||
| w="1024px" | ||
| backgroundImage={bgImageData[bgImage]} | ||
| ref={ref} | ||
| > | ||
| <Heading mx={'auto'}>{letter[currentLetterIndex].title}</Heading> | ||
| <Text | ||
| fontWeight={'bold'} | ||
| >{`To. ${letter[currentLetterIndex].to}`}</Text> | ||
| <Box> | ||
| {letter[currentLetterIndex].body.split('\n').map((line, index) => ( | ||
| <Text | ||
| key={index} | ||
| fontWeight={fontWeight} | ||
| fontSize={`${fontSize}px`} | ||
| > | ||
| {line} | ||
| </Text> | ||
| ))} | ||
| </Box> | ||
| <HStack w={'100%'} justifyContent={'space-between'}> | ||
| <Text | ||
| fontWeight={'bold'} | ||
| >{`From. ${letter[currentLetterIndex].from}`}</Text> | ||
| {showDate && <Text fontWeight={'bold'}>{`Date. ${date}`}</Text>} | ||
| </HStack> | ||
| </VStack> | ||
| <HStack> | ||
| <Button onClick={() => setState('create')}> | ||
| <Text>편지 수정</Text> | ||
| </Button> | ||
| <Button> | ||
| <Text>편지 완성하기</Text> | ||
| </Button> | ||
| </HStack> | ||
| </VStack> | ||
| <IconButton | ||
| ref={openButtonRef} | ||
| onClick={onOpen} | ||
| aria-label={'open-drawer'} | ||
| icon={<ArrowLeftIcon />} | ||
| /> | ||
| <Drawer | ||
| isOpen={isOpen} | ||
| placement="right" | ||
| onClose={onClose} | ||
| finalFocusRef={openButtonRef} | ||
| > | ||
| <DrawerOverlay /> | ||
| <DrawerContent> | ||
| <DrawerBody> | ||
| <VStack> | ||
| <VStack> | ||
| <Text>텍스트</Text> | ||
| <Select placeholder="폰트"> | ||
| <option value="option1">option1</option> | ||
| <option value="option2">option2</option> | ||
| <option value="option3">option3</option> | ||
| </Select> | ||
| <NumberInput | ||
| defaultValue={16} | ||
| min={10} | ||
| max={20} | ||
| onChange={(_valueAsString, valueAsNumber) => { | ||
| setFontSize(valueAsNumber); | ||
| }} | ||
| > | ||
| <NumberInputField /> | ||
| <NumberInputStepper> | ||
| <NumberIncrementStepper /> | ||
| <NumberDecrementStepper /> | ||
| </NumberInputStepper> | ||
| </NumberInput> | ||
| <Select | ||
| placeholder="폰트 두께" | ||
| defaultValue={'normal'} | ||
| onChange={(select) => { | ||
| setFontWeight(select.target.value); | ||
| }} | ||
| > | ||
| <option value="hairline">hairline</option> | ||
| <option value="thin">thin</option> | ||
| <option value="light">light</option> | ||
| <option value="normal">normal</option> | ||
| <option value="medium">medium</option> | ||
| <option value="semibold">semibold</option> | ||
| <option value="bold">bold</option> | ||
| <option value="extrabold">extrabold</option> | ||
| <option value="black">black</option> | ||
| </Select> | ||
| </VStack> | ||
| <VStack> | ||
| <Text>텍스트</Text> | ||
| <Checkbox | ||
| isChecked={showDate} | ||
| onChange={() => { | ||
| setShowDate(!showDate); | ||
| }} | ||
| > | ||
| 날짜 표시하기 | ||
| </Checkbox> | ||
| <Input | ||
| placeholder="날짜" | ||
| type="date" | ||
| value={date} | ||
| onChange={(event) => { | ||
| setDate(event.target.value); | ||
| }} | ||
| /> | ||
| </VStack> | ||
| <VStack> | ||
| <Text>편지지</Text> | ||
| <SimpleGrid columns={3} spacing={5}> | ||
| <Button | ||
| onClick={() => setBgImage('bg1')} | ||
| colorScheme={bgImage === 'bg1' ? 'orange' : 'gray'} | ||
| > | ||
| 편지지1 | ||
| </Button> | ||
| <Button | ||
| onClick={() => setBgImage('bg2')} | ||
| colorScheme={bgImage === 'bg2' ? 'orange' : 'gray'} | ||
| > | ||
| 편지지2 | ||
| </Button> | ||
| <Button | ||
| onClick={() => setBgImage('bg3')} | ||
| colorScheme={bgImage === 'bg3' ? 'orange' : 'gray'} | ||
| > | ||
| 편지지3 | ||
| </Button> | ||
| <Button | ||
| onClick={() => setBgImage('bg4')} | ||
| colorScheme={bgImage === 'bg4' ? 'orange' : 'gray'} | ||
| > | ||
| 편지지4 | ||
| </Button> | ||
| <Button isDisabled>편지지5</Button> | ||
| <Button isDisabled>편지지6</Button> | ||
| <Button isDisabled>편지지7</Button> | ||
| <Button isDisabled>편지지8</Button> | ||
| <Button isDisabled>편지지9</Button> | ||
| </SimpleGrid> | ||
| </VStack> | ||
| </VStack> | ||
| </DrawerBody> | ||
| </DrawerContent> | ||
| </Drawer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Page; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters