From 3cb72bef9dd555714bf3e6d9eb2fb4455637f233 Mon Sep 17 00:00:00 2001 From: anyl92 Date: Sun, 20 Aug 2023 05:23:53 +0900 Subject: [PATCH 1/3] feat(preview): set type --- public/svg/idcard_basic_B.svg | 3 ++ public/svg/idcard_mude_B.svg | 37 +++++++++++++++++++ public/svg/meeting_30_B.svg | 21 +++++++++++ public/svg/meeting_cancel_B.svg | 21 +++++++++++ public/svg/metting_add_B.svg | 16 ++++++++ src/features/preview/Container.tsx | 6 ++- .../preview/components/ChooseType.tsx | 17 +++++---- .../preview/components/PreviewImage.tsx | 8 ++-- src/features/preview/hooks/usePreview.ts | 9 ++++- 9 files changed, 125 insertions(+), 13 deletions(-) create mode 100644 public/svg/idcard_basic_B.svg create mode 100644 public/svg/idcard_mude_B.svg create mode 100644 public/svg/meeting_30_B.svg create mode 100644 public/svg/meeting_cancel_B.svg create mode 100644 public/svg/metting_add_B.svg diff --git a/public/svg/idcard_basic_B.svg b/public/svg/idcard_basic_B.svg new file mode 100644 index 0000000..81c73f8 --- /dev/null +++ b/public/svg/idcard_basic_B.svg @@ -0,0 +1,3 @@ + + + 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_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/public/svg/metting_add_B.svg b/public/svg/metting_add_B.svg new file mode 100644 index 0000000..af78e08 --- /dev/null +++ b/public/svg/metting_add_B.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/features/preview/Container.tsx b/src/features/preview/Container.tsx index aa33082..57165da 100644 --- a/src/features/preview/Container.tsx +++ b/src/features/preview/Container.tsx @@ -13,7 +13,9 @@ 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' }); @@ -26,7 +28,7 @@ const Container = () => { return (
- +
diff --git a/src/features/preview/components/ChooseType.tsx b/src/features/preview/components/ChooseType.tsx index d2ba6ec..e29d13b 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 (
; }; -const PreviewImage: FunctionComponent = ({ + +const PreviewImage: FunctionComponent = ({ curNum, setCurNum, }) => { 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, }; }; From 2d9414d00bfdefcc2d646d92bea53a23ab43373a Mon Sep 17 00:00:00 2001 From: anyl92 Date: Sun, 20 Aug 2023 05:48:41 +0900 Subject: [PATCH 2/3] feat(preview): set type data --- public/svg/idcard_basic_B.svg | 22 +++++++++++++++++-- .../{metting_add_B.svg => meeting_add_B.svg} | 0 src/features/preview/Container.tsx | 6 ++++- .../preview/components/ChooseType.tsx | 4 ++-- .../preview/components/PreviewImage.tsx | 17 +++++++++++++- src/features/preview/style/index.scss | 1 + 6 files changed, 44 insertions(+), 6 deletions(-) rename public/svg/{metting_add_B.svg => meeting_add_B.svg} (100%) diff --git a/public/svg/idcard_basic_B.svg b/public/svg/idcard_basic_B.svg index 81c73f8..5283018 100644 --- a/public/svg/idcard_basic_B.svg +++ b/public/svg/idcard_basic_B.svg @@ -1,3 +1,21 @@ - - + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/metting_add_B.svg b/public/svg/meeting_add_B.svg similarity index 100% rename from public/svg/metting_add_B.svg rename to public/svg/meeting_add_B.svg diff --git a/src/features/preview/Container.tsx b/src/features/preview/Container.tsx index 57165da..c70eb36 100644 --- a/src/features/preview/Container.tsx +++ b/src/features/preview/Container.tsx @@ -29,7 +29,11 @@ const Container = () => { return (
- +
); diff --git a/src/features/preview/components/ChooseType.tsx b/src/features/preview/components/ChooseType.tsx index e29d13b..033b39d 100644 --- a/src/features/preview/components/ChooseType.tsx +++ b/src/features/preview/components/ChooseType.tsx @@ -20,7 +20,7 @@ const ChooseType: FunctionComponent = ({ 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 df467a4..449af51 100644 --- a/src/features/preview/components/PreviewImage.tsx +++ b/src/features/preview/components/PreviewImage.tsx @@ -6,25 +6,40 @@ 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 = { + seletedType: string; curNum: number; setCurNum: Dispatch; }; 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/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; From e1d9b7f9521d9aef00da802ec9aa58418ec6d54e Mon Sep 17 00:00:00 2001 From: anyl92 Date: Sun, 20 Aug 2023 06:00:41 +0900 Subject: [PATCH 3/3] feat(preview): button disable --- src/features/preview/Container.tsx | 4 ++-- src/features/shared/layout/atom.ts | 1 + src/features/shared/layout/components/BottomBtn.tsx | 10 +++++++--- src/features/shared/layout/layout.scss | 6 +++++- 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/features/preview/Container.tsx b/src/features/preview/Container.tsx index c70eb36..ae4caf1 100644 --- a/src/features/preview/Container.tsx +++ b/src/features/preview/Container.tsx @@ -18,13 +18,13 @@ const Container = () => { 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/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; + } +}