diff --git a/backend/app/main.py b/backend/app/main.py index d12a489..795bfc3 100644 --- a/backend/app/main.py +++ b/backend/app/main.py @@ -7,7 +7,6 @@ from app.api.qr import router as qr_router def create_app() -> FastAPI: app = FastAPI(title="QR Code Service") - # Open CORS to all origins app.add_middleware( CORSMiddleware, allow_origins=["*"], diff --git a/backend/app/services/qr_service.py b/backend/app/services/qr_service.py index 0d1e7c9..2f428e5 100644 --- a/backend/app/services/qr_service.py +++ b/backend/app/services/qr_service.py @@ -6,7 +6,6 @@ import qrcode def generate_qr_image_bytes(text: str, size: int = 300) -> bytes: img = qrcode.make(text) - # Ensure RGB for consistent PNG output if getattr(img, "mode", None) != "RGB": img = img.convert("RGB") diff --git a/frontend/src/components/organisms/QRForm.tsx b/frontend/src/components/organisms/QRForm.tsx index 1a3cc9e..9b895f7 100644 --- a/frontend/src/components/organisms/QRForm.tsx +++ b/frontend/src/components/organisms/QRForm.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import styles from '@styles/QRForm.module.scss'; import { useQrStore } from '@store/qrStore'; import { generateQr } from '@api/qrcode'; @@ -6,6 +6,7 @@ import { imageSizes, initialState } from '@/constants'; import type { GenerateResult } from '@appTypes/qrcode'; const QRForm: React.FC = () => { + const [callApiOnReset, setCallApiOnReset] = useState(false); const { state, dispatch } = useQrStore(); const { text, size, loading } = state; @@ -44,7 +45,8 @@ const QRForm: React.FC = () => { }; const handleReset = () => { - dispatch({ type: 'restore', payload: null }); + dispatch({ type: 'setText', payload: '' }); + setCallApiOnReset(true); }; const hasCalledRef = useRef(false); @@ -57,10 +59,11 @@ const QRForm: React.FC = () => { }, []); useEffect(() => { - if (!text) { - dispatch({ type: 'restore', payload: null }); + if (text === initialState.text && callApiOnReset) { + callingApi(); + setCallApiOnReset(false); } - }, [text]); + }, [callApiOnReset]); return (
@@ -70,7 +73,7 @@ const QRForm: React.FC = () => { type="text" value={text === initialState.text ? null : text} onChange={(e) => dispatch({ type: 'setText', payload: e.target.value })} - placeholder={text} + placeholder={initialState.text} className={styles.qrFormInput} /> @@ -91,12 +94,14 @@ const QRForm: React.FC = () => { {state.error &&
{state.error}
} - - +
+ + +
); diff --git a/frontend/src/store/qrStore.tsx b/frontend/src/store/qrStore.tsx index 1448e0e..0ac26c3 100644 --- a/frontend/src/store/qrStore.tsx +++ b/frontend/src/store/qrStore.tsx @@ -8,7 +8,7 @@ const handlers: Record QRState> = { setImageUrl: (state, payload) => ({ ...state, imageUrl: payload }), setLoading: (state, payload) => ({ ...state, loading: payload }), setError: (state, payload) => ({ ...state, error: payload }), - restore: (state) => ({ ...state, text: initialState.text }), + restore: () => ({ ...initialState }), }; const reducer = (state: QRState, action: Action): QRState => { diff --git a/frontend/src/styles/QRForm.module.scss b/frontend/src/styles/QRForm.module.scss index b5bed81..080db54 100644 --- a/frontend/src/styles/QRForm.module.scss +++ b/frontend/src/styles/QRForm.module.scss @@ -69,3 +69,10 @@ color: crimson; margin-bottom: 12px; } + +.buttons { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 5px; +}