Skip to content

Commit

Permalink
fix: wrap qrcode with my qr code div
Browse files Browse the repository at this point in the history
  • Loading branch information
@moolmin
moolmin committed Sep 23, 2024
1 parent 940836c commit 10e2894
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 73 deletions.
50 changes: 27 additions & 23 deletions src/app/(pages)/4q-create/_components/third.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import styles from "./third.module.css";
import Konva from "konva";
import { PiTextTBold } from "react-icons/pi";
import { HiTrash } from "react-icons/hi";
import { generateTicket } from '@/service/photo_api';
import Lottie from 'react-lottie-player';
import loadingLottie from '../../../../../public/rotties/image-loading.json';
import type { Stage as StageType } from 'konva/lib/Stage';
import { generateTicket } from "@/service/photo_api";
import Lottie from "react-lottie-player";
import loadingLottie from "../../../../../public/rotties/image-loading.json";
import type { Stage as StageType } from "konva/lib/Stage";

interface TextNode {
id: number;
Expand All @@ -26,7 +26,7 @@ interface FormData {
shortenUrl: string;
title: string;
backgroundImageUrl: string;
backgroundImageId: number;
backgroundImageId: number;
shortenUrlId: number;
tags: string;
category: string;
Expand Down Expand Up @@ -56,8 +56,8 @@ export default function Third() {
const [isLoading, setLoading] = useState(false);

useEffect(() => {
if (typeof window !== 'undefined') {
const storedFormDataString = sessionStorage.getItem('form_data');
if (typeof window !== "undefined") {
const storedFormDataString = sessionStorage.getItem("form_data");
if (storedFormDataString) {
const parsedFormData = JSON.parse(storedFormDataString);
setStoredFormData(parsedFormData);
Expand All @@ -83,9 +83,11 @@ export default function Third() {
}
};

const [backgroundImage] = useImage(storedFormData.backgroundImageUrl, 'anonymous');
const [qrImage] = useImage(qrImageUrl, 'anonymous');

const [backgroundImage] = useImage(
storedFormData.backgroundImageUrl,
"anonymous"
);
const [qrImage] = useImage(qrImageUrl, "anonymous");

const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>) => {
setQrPosition({
Expand Down Expand Up @@ -148,26 +150,27 @@ export default function Third() {
}
}, [qrImage, isSelected]);


const handleSubmit = async () => {
setLoading(true);
try {
if (stageRef.current) {
const dataURL = stageRef.current.toDataURL({ pixelRatio: 3 });
const ticketImage = await fetch(dataURL)
.then(res => res.blob())
.then(blob => new File([blob], "ticket.png", { type: "image/png" }));
.then((res) => res.blob())
.then(
(blob) => new File([blob], "ticket.png", { type: "image/png" })
);

const responseMessage = await generateTicket(
ticketImage,
storedFormData.backgroundImageId,
storedFormData.shortenUrlId,
storedFormData.title,
storedFormData.title
);
if (responseMessage?.ticketId) {
setTimeout(() => {
setLoading(false);
}, 4000);
}, 4000);
// console.log('id:', responseMessage?.ticketId);
window.location.href = `/4q-create/download/${responseMessage.ticketId}`;
} else {
Expand All @@ -179,7 +182,7 @@ export default function Third() {
} finally {
setTimeout(() => {
setLoading(false);
}, 8000);
}, 8000);
}
};

Expand Down Expand Up @@ -300,17 +303,18 @@ export default function Third() {
/>
</Tooltip>
</div>
<QRCode
id="myqrcode"
value={shortenUrl}
bgColor="#fff"
style={{ margin: 16, display: 'none' }}
/>
<div id="myqrcode">
<QRCode
value={shortenUrl}
bgColor="#fff"
style={{ margin: 16, display: "none" }}
/>
</div>
</div>
<div className={styles.submitBtnContainer}>
<Button
className={styles.submitBtn}
style={{ height: '40px', width: '140px' }}
style={{ height: "40px", width: "140px" }}
onClick={handleSubmit}
>
생성하기
Expand Down
105 changes: 55 additions & 50 deletions src/app/(pages)/4q-gallery/_components/second.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import styles from "./second.module.css";
import Konva from "konva";
import { PiTextTBold } from "react-icons/pi";
import { HiTrash } from "react-icons/hi";
import { generateTicket } from '../../../../service/photo_api'
import Lottie from 'react-lottie-player';
import loadingLottie from '../../../../../public/rotties/image-loading.json';
import type { Stage as StageType } from 'konva/lib/Stage';
import { generateTicket } from "../../../../service/photo_api";
import Lottie from "react-lottie-player";
import loadingLottie from "../../../../../public/rotties/image-loading.json";
import type { Stage as StageType } from "konva/lib/Stage";
import { isMobile } from "react-device-detect";

interface TextNode {
Expand All @@ -27,7 +27,7 @@ interface FormData {
shortenUrl: string;
title: string;
backgroundImageUrl: string;
backgroundImageId: number;
backgroundImageId: number;
shortenUrlId: number;
tags: string;
category: string;
Expand Down Expand Up @@ -56,12 +56,12 @@ export default function Third() {
const [isLoading, setLoading] = useState(false);

useEffect(() => {
sessionStorage.setItem('createStep', 'second');
sessionStorage.setItem("createStep", "second");
}, []);

useEffect(() => {
if (typeof window !== 'undefined') {
const storedFormDataString = sessionStorage.getItem('form_data');
if (typeof window !== "undefined") {
const storedFormDataString = sessionStorage.getItem("form_data");
if (storedFormDataString) {
const parsedFormData = JSON.parse(storedFormDataString);
setStoredFormData(parsedFormData);
Expand All @@ -87,9 +87,11 @@ export default function Third() {
}
};

const [backgroundImage] = useImage(storedFormData.backgroundImageUrl, 'anonymous');
const [qrImage] = useImage(qrImageUrl, 'anonymous');

const [backgroundImage] = useImage(
storedFormData.backgroundImageUrl,
"anonymous"
);
const [qrImage] = useImage(qrImageUrl, "anonymous");

const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>) => {
setQrPosition({
Expand Down Expand Up @@ -152,19 +154,21 @@ export default function Third() {
if (stageRef.current) {
const dataURL = stageRef.current.toDataURL({ pixelRatio: 3 });
const ticketImage = await fetch(dataURL)
.then(res => res.blob())
.then(blob => new File([blob], "ticket.png", { type: "image/png" }));
.then((res) => res.blob())
.then(
(blob) => new File([blob], "ticket.png", { type: "image/png" })
);

const responseMessage = await generateTicket(
ticketImage,
storedFormData.backgroundImageId,
storedFormData.shortenUrlId,
storedFormData.title,
storedFormData.title
);
if (responseMessage?.ticketId) {
setTimeout(() => {
setLoading(false);
}, 4000);
}, 4000);
window.location.href = `/4q-create/download/${responseMessage.ticketId}`;
} else {
alert("티켓 생성에 실패했습니다.");
Expand All @@ -175,7 +179,7 @@ export default function Third() {
} finally {
setTimeout(() => {
setLoading(false);
}, 8000);
}, 8000);
}
};

Expand Down Expand Up @@ -247,45 +251,46 @@ export default function Third() {
</Layer>
</Stage>
</div>
{ !isMobile ?
<div className={styles.btnContainer}>
<Tooltip title="title 추가">
<Button
onClick={addText}
type="primary"
icon={<PiTextTBold />}
size="small"
/>
</Tooltip>
<Tooltip title="텍스트를 더블클릭하고 삭제버튼 활성화">
<Button
onClick={deleteText}
type="primary"
icon={<HiTrash />}
size="small"
disabled={selectedId === null}
/>
</Tooltip>
<Tooltip title="텍스트를 더블클릭하고 색상 변경">
<ColorPicker
value={selectedColor}
onChange={(color) => handleColorChange(color.toHexString())}
size="small"
/>
</Tooltip>
{!isMobile ? (
<div className={styles.btnContainer}>
<Tooltip title="title 추가">
<Button
onClick={addText}
type="primary"
icon={<PiTextTBold />}
size="small"
/>
</Tooltip>
<Tooltip title="텍스트를 더블클릭하고 삭제버튼 활성화">
<Button
onClick={deleteText}
type="primary"
icon={<HiTrash />}
size="small"
disabled={selectedId === null}
/>
</Tooltip>
<Tooltip title="텍스트를 더블클릭하고 색상 변경">
<ColorPicker
value={selectedColor}
onChange={(color) => handleColorChange(color.toHexString())}
size="small"
/>
</Tooltip>
</div>
) : null}
<div id="myqrcode">
<QRCode
value={shortenUrl}
bgColor="#fff"
style={{ margin: 16, display: "none" }}
/>
</div>
: null }
<QRCode
id="myqrcode"
value={shortenUrl}
bgColor="#fff"
style={{ margin: 16, display: 'none' }}
/>
</div>
<div className={styles.submitBtnContainer}>
<Button
className={styles.submitBtn}
style={{ height: '40px', width: '140px' }}
style={{ height: "40px", width: "140px" }}
onClick={handleSubmit}
>
생성하기
Expand Down

0 comments on commit 10e2894

Please sign in to comment.