diff --git a/public/svg/idcard_basic_B.svg b/public/svg/idcard_basic_B.svg new file mode 100644 index 0000000..5283018 --- /dev/null +++ b/public/svg/idcard_basic_B.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/idcard_mude_B.svg b/public/svg/idcard_mude_B.svg new file mode 100644 index 0000000..5060486 --- /dev/null +++ b/public/svg/idcard_mude_B.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/meeting_30_B.svg b/public/svg/meeting_30_B.svg new file mode 100644 index 0000000..79a284e --- /dev/null +++ b/public/svg/meeting_30_B.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/meeting_add_B.svg b/public/svg/meeting_add_B.svg new file mode 100644 index 0000000..af78e08 --- /dev/null +++ b/public/svg/meeting_add_B.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/svg/meeting_cancel_B.svg b/public/svg/meeting_cancel_B.svg new file mode 100644 index 0000000..f0b14df --- /dev/null +++ b/public/svg/meeting_cancel_B.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/features/preview/Container.tsx b/src/features/preview/Container.tsx index aa33082..ae4caf1 100644 --- a/src/features/preview/Container.tsx +++ b/src/features/preview/Container.tsx @@ -13,21 +13,27 @@ import usePreview from './hooks/usePreview'; const Container = () => { const [, setTitle] = useAtom(titleAtom); const [, setBottomBtn] = useAtom(bottomBtnAtom); - const { curNum, setCurNum } = usePreview(); + + const { seletedType, handleTypeClick, curNum, setCurNum } = usePreview(); + useLayoutEffect(() => { setTitle({ title: 'CardMe Preview', back: true }); - setBottomBtn({ text: 'Modification' }); + setBottomBtn({ text: 'Modification', disable: curNum !== 1 }); return () => { setTitle({}); setBottomBtn({}); }; - }, []); + }, [curNum]); return (
- - + +
); diff --git a/src/features/preview/components/ChooseType.tsx b/src/features/preview/components/ChooseType.tsx index d2ba6ec..033b39d 100644 --- a/src/features/preview/components/ChooseType.tsx +++ b/src/features/preview/components/ChooseType.tsx @@ -1,11 +1,14 @@ -import { MouseEventHandler, useState } from 'react'; +import { FunctionComponent } from 'react'; -const ChooseType = () => { - const [seletedType, setSeletedType] = useState('A'); - const handleTypeClick: MouseEventHandler = (e) => { - const target = e.target as HTMLDivElement; - setSeletedType(target.dataset.type as string); - }; +type ChooseTypeType = { + seletedType: string; + handleTypeClick: React.MouseEventHandler; +}; + +const ChooseType: FunctionComponent = ({ + seletedType, + handleTypeClick, +}) => { return (
{ onClick={handleTypeClick} data-type="A" > - CardMe Type A + Type A
{ onClick={handleTypeClick} data-type="B" > - CardMe Type B + Type B
); diff --git a/src/features/preview/components/PreviewImage.tsx b/src/features/preview/components/PreviewImage.tsx index 72c7aa1..449af51 100644 --- a/src/features/preview/components/PreviewImage.tsx +++ b/src/features/preview/components/PreviewImage.tsx @@ -1,28 +1,45 @@ import 'react-responsive-carousel/lib/styles/carousel.min.css'; import { Carousel } from 'react-responsive-carousel'; -import { Dispatch, FunctionComponent } from 'react'; import idCardBasic from '/svg/idcard_basic.svg'; import idCardMude from '/svg/idcard_mude.svg'; import meetingAdd from '/svg/meeting_add.svg'; import meetingCancel from '/svg/meeting_cancel.svg'; import meeting30 from '/svg/meeting_30.svg'; +import idCardBasicB from '/svg/idcard_basic_B.svg'; +import idCardMudeB from '/svg/idcard_mude_B.svg'; +import meetingAddB from '/svg/meeting_add_B.svg'; +import meetingCancelB from '/svg/meeting_cancel_B.svg'; +import meeting30B from '/svg/meeting_30_B.svg'; + +import { Dispatch, FunctionComponent } from 'react'; -type PreviewImageType = { +type previewImageType = { + seletedType: string; curNum: number; setCurNum: Dispatch; }; -const PreviewImage: FunctionComponent = ({ + +const PreviewImage: FunctionComponent = ({ + seletedType, curNum, setCurNum, }) => { - const imageList = [ + const imageListA = [ idCardBasic, idCardMude, meetingAdd, meetingCancel, meeting30, ]; + const imageListB = [ + idCardBasicB, + idCardMudeB, + meetingAddB, + meetingCancelB, + meeting30B, + ]; + const imageList = seletedType === 'A' ? imageListA : imageListB; return ( <>
diff --git a/src/features/preview/hooks/usePreview.ts b/src/features/preview/hooks/usePreview.ts index 8d7ba1c..53331bb 100644 --- a/src/features/preview/hooks/usePreview.ts +++ b/src/features/preview/hooks/usePreview.ts @@ -1,11 +1,18 @@ -import { useState } from 'react'; +import { MouseEventHandler, useState } from 'react'; const usePreview = () => { + const [seletedType, setSeletedType] = useState('A'); const [curNum, setCurNum] = useState(0); + const handleTypeClick: MouseEventHandler = (e) => { + const target = e.target as HTMLDivElement; + setSeletedType(target.dataset.type as string); + }; return { + seletedType, curNum, setCurNum, + handleTypeClick, }; }; diff --git a/src/features/preview/style/index.scss b/src/features/preview/style/index.scss index 75059ae..deaa977 100644 --- a/src/features/preview/style/index.scss +++ b/src/features/preview/style/index.scss @@ -17,6 +17,7 @@ } &-image-container { display: flex; + height: 670px; padding: 24px; justify-content: center; align-items: center; diff --git a/src/features/shared/layout/atom.ts b/src/features/shared/layout/atom.ts index b2c99d0..fbf6f08 100644 --- a/src/features/shared/layout/atom.ts +++ b/src/features/shared/layout/atom.ts @@ -10,6 +10,7 @@ export const titleAtom = atom({}); type BottomBtnAtom = { text?: string; add?: boolean; + disable?: boolean; }; export const bottomBtnAtom = atom({}); diff --git a/src/features/shared/layout/components/BottomBtn.tsx b/src/features/shared/layout/components/BottomBtn.tsx index fe64105..daa24d3 100644 --- a/src/features/shared/layout/components/BottomBtn.tsx +++ b/src/features/shared/layout/components/BottomBtn.tsx @@ -6,20 +6,24 @@ import { activeSaveAtom, bottomBtnAtom } from '../atom'; import addLogo from '/svg/add.svg'; const LayoutBottomBtn: FunctionComponent = () => { - const [{ text, add }] = useAtom(bottomBtnAtom); + const [{ text, add, disable }] = useAtom(bottomBtnAtom); const [, setActiveSave] = useAtom(activeSaveAtom); if (!text) return null; return (
-
setActiveSave(true)}> +
); }; diff --git a/src/features/shared/layout/layout.scss b/src/features/shared/layout/layout.scss index 7f1aba4..eebcfc8 100644 --- a/src/features/shared/layout/layout.scss +++ b/src/features/shared/layout/layout.scss @@ -72,4 +72,8 @@ background: #191919; color: #FFF; cursor: pointer; -} \ No newline at end of file + &:disabled { + opacity: 30%; + cursor: default; + } +}