From fd2338f879cf8cb8faa1fbcd1327c1f063a9c6fc Mon Sep 17 00:00:00 2001 From: JinHo Kim <81083461+jinhokim98@users.noreply.github.com> Date: Thu, 17 Oct 2024 15:24:39 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EC=A0=91=EA=B7=BC=EC=84=B1=20:=20?= =?UTF-8?q?=EB=84=98=EB=B2=84=20=ED=82=A4=ED=8C=A8=EB=93=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=B0=EB=A6=AC=EB=8D=94=20=EA=B0=9C=EC=84=A0=20(#7?= =?UTF-8?q?49)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 넘버 키패드 스크린리더로 사용했을 때 버튼 헷갈리지 않도록 label 설정 * style: label => ariaLabel으로 변수명 변경 * style: button element prop 확장해서 넘겨주는 방식으로 변경 * feat: button text를 읽은 후 text도 읽히지 않도록 aria-hidden 설정 * feat: 직전 입력 지우기 -> 마지막 숫자 지우기로 변경 * style: html button 내 value가 아닌 직접 정의한 value임을 명시 * refactor: 키패드 만드는 함수로 개선 --- .../components/NumberKeyboard/Keypad.tsx | 16 +++++----- .../NumberKeyboard/NumberKeyboard.tsx | 16 +++++----- .../components/NumberKeyboard/keypads.ts | 29 +++++++++++++++++++ 3 files changed, 44 insertions(+), 17 deletions(-) create mode 100644 client/src/components/Design/components/NumberKeyboard/keypads.ts diff --git a/client/src/components/Design/components/NumberKeyboard/Keypad.tsx b/client/src/components/Design/components/NumberKeyboard/Keypad.tsx index 3f41fad95..3447e1f1d 100644 --- a/client/src/components/Design/components/NumberKeyboard/Keypad.tsx +++ b/client/src/components/Design/components/NumberKeyboard/Keypad.tsx @@ -5,16 +5,16 @@ import {setDarker, setLighter} from '@components/Design/utils/colors'; import {Text, useTheme} from '@components/Design'; -interface Props { +type KeypadProps = Omit, 'value'> & { value: string; - onClick: () => void; - disabled?: boolean; -} +}; -export function Keypad({value, onClick, disabled = false}: Props) { +export function Keypad({value, ...restButtonProps}: KeypadProps) { const {theme} = useTheme(); + return ( ); } diff --git a/client/src/components/Design/components/NumberKeyboard/NumberKeyboard.tsx b/client/src/components/Design/components/NumberKeyboard/NumberKeyboard.tsx index 97d8b090d..81a10ff36 100644 --- a/client/src/components/Design/components/NumberKeyboard/NumberKeyboard.tsx +++ b/client/src/components/Design/components/NumberKeyboard/NumberKeyboard.tsx @@ -7,8 +7,7 @@ import {Button} from '@components/Design'; import {Keypad} from './Keypad'; import useNumberKeyboard from './useNumberKeyboard'; - -export type KeyboardType = 'number' | 'string' | 'amount'; +import {KeyboardType, makeKeypads} from './keypads'; export interface NumberKeyboardProps { type: KeyboardType; @@ -19,8 +18,6 @@ export interface NumberKeyboardProps { export default function NumberKeyboard({type, maxNumber, initialValue, onChange}: NumberKeyboardProps) { const {theme} = useTheme(); - const amountKeypads = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '00', '0', '<-']; - const numberKeypads = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '<-']; const {onClickKeypad, onClickDelete, onClickDeleteAll, onClickAddAmount} = useNumberKeyboard({ type, @@ -65,12 +62,13 @@ export default function NumberKeyboard({type, maxNumber, initialValue, onChange} )} - {(type === 'amount' ? amountKeypads : numberKeypads).map(el => ( + {makeKeypads(type).map(({keypad, ariaLabel}) => ( onClickKeypad(el)} + key={keypad} + value={keypad} + aria-label={ariaLabel} + disabled={keypad === ''} + onClick={keypad === '<-' ? onClickDelete : () => onClickKeypad(keypad)} /> ))} diff --git a/client/src/components/Design/components/NumberKeyboard/keypads.ts b/client/src/components/Design/components/NumberKeyboard/keypads.ts new file mode 100644 index 000000000..a1a6204f4 --- /dev/null +++ b/client/src/components/Design/components/NumberKeyboard/keypads.ts @@ -0,0 +1,29 @@ +export type KeyboardType = 'number' | 'string' | 'amount'; + +type Keypad = { + keypad: string; + ariaLabel: string; +}; + +export const makeKeypads = (type: KeyboardType): Keypad[] => { + const keypads: Keypad[] = []; + + // 1~9는 동일 + keypads.push(...new Array(9).fill(0).map((_, index) => ({keypad: String(index + 1), ariaLabel: String(index + 1)}))); + + // amount는 00버튼 나머지는 숨기기 + if (type === 'amount') { + keypads.push({keypad: '00', ariaLabel: '0 2개 버튼'}); + } else { + keypads.push({keypad: '', ariaLabel: ''}); + } + + // 나머지 0과 지우기 버튼 + keypads.push({keypad: '0', ariaLabel: '0'}); + keypads.push({ + keypad: '<-', + ariaLabel: '마지막 숫자 지우기', + }); + + return keypads; +}; From 81ede39c37f21d7c8cee7831ac95ea45d0eef1a5 Mon Sep 17 00:00:00 2001 From: Soyeon Choe <77609591+soi-ha@users.noreply.github.com> Date: Thu, 17 Oct 2024 15:24:59 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix:=20SelectBox=20=EC=88=98=EC=A0=95=20+?= =?UTF-8?q?=20globalStyle=20=ED=8C=8C=EB=9E=80=EC=83=89=20=ED=95=98?= =?UTF-8?q?=EC=9D=B4=EB=9D=BC=EC=9D=B4=ED=8C=85=20=EC=A0=9C=EA=B1=B0=20(#7?= =?UTF-8?q?51)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 디자인과 불일치하는 gap 삭제 * fix: 모바일에서 클릭시 파란색 하이라이트 효과 제거 --- client/src/GlobalStyle.ts | 1 + client/src/components/Design/components/Select/SelectInput.tsx | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/GlobalStyle.ts b/client/src/GlobalStyle.ts index b2eca3474..22c43decc 100644 --- a/client/src/GlobalStyle.ts +++ b/client/src/GlobalStyle.ts @@ -118,6 +118,7 @@ export const GlobalStyle = css` #root { display: flex; justify-content: center; + -webkit-tap-highlight-color: transparent; } button { diff --git a/client/src/components/Design/components/Select/SelectInput.tsx b/client/src/components/Design/components/Select/SelectInput.tsx index b2b4228ee..75d7f4442 100644 --- a/client/src/components/Design/components/Select/SelectInput.tsx +++ b/client/src/components/Design/components/Select/SelectInput.tsx @@ -1,5 +1,4 @@ /** @jsxImportSource @emotion/react */ -import {useState} from 'react'; import {useTheme} from '@components/Design/theme/HDesignProvider'; @@ -28,7 +27,7 @@ const SelectInput = ({ }; return ( - + {labelText && ( {labelText && ( From 926af89a48c37e68e4699f82fc929e730c33e5cc Mon Sep 17 00:00:00 2001 From: JinHo Kim <81083461+jinhokim98@users.noreply.github.com> Date: Thu, 17 Oct 2024 15:25:23 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=EC=A0=81=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=ED=98=B8=EC=B6=9C=ED=95=98=EB=8A=94=20postAuthenti?= =?UTF-8?q?cate=20=EA=B5=AC=EB=AC=B8=20=EC=A0=9C=EA=B1=B0=20(#753)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useAdminPage.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/client/src/hooks/useAdminPage.ts b/client/src/hooks/useAdminPage.ts index 54794da08..17d7e2d30 100644 --- a/client/src/hooks/useAdminPage.ts +++ b/client/src/hooks/useAdminPage.ts @@ -11,7 +11,6 @@ import SessionStorage from '@utils/SessionStorage'; import SESSION_STORAGE_KEYS from '@constants/sessionStorageKeys'; import useRequestGetSteps from './queries/step/useRequestGetSteps'; -import useRequestPostAuthentication from './queries/auth/useRequestPostAuthentication'; const useAdminPage = () => { const eventId = getEventIdByUrl(); @@ -20,11 +19,6 @@ const useAdminPage = () => { const {totalExpenseAmount} = useTotalExpenseAmountStore(); const {steps} = useRequestGetSteps(); - const {postAuthenticate} = useRequestPostAuthentication(); - - useEffect(() => { - postAuthenticate(); - }, [postAuthenticate]); // session storage에 배너를 지웠는지 관리 const storageValue = SessionStorage.get(SESSION_STORAGE_KEYS.closeAccountBannerByEventToken(eventId)); From f86c6abedaaa50a771baabd50aaf9b988dbfd435 Mon Sep 17 00:00:00 2001 From: Soyeon Choe <77609591+soi-ha@users.noreply.github.com> Date: Thu, 17 Oct 2024 15:26:58 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=EC=B2=AB=20=EC=A7=80=EC=B6=9C?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20=EC=B6=94=EA=B0=80=20=EC=8B=9C,=20?= =?UTF-8?q?=EC=9E=85=EA=B8=88=20=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?Banner=20=EB=9D=84=EC=9A=B0=EA=B8=B0=20(#756)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 계좌번호가 존재하고 지출내역이 있을 때, 입금 상태관리 배너 띄우기 * feat: 입금상태 배너 버튼 이동 페이지 변경 * chore: 참여자 입금 상태 배너 description 수정 * fix: 지출내역 추가 -> 계좌번호 입력 flow일때 입금상태 관리 배너가 띄워지지 않는 오류 해결 * chore: 불필요한 console.log삭제 * chore: 입금 상태 Banner의 description 수정 * refactor: banner 관련 상태를 useBanner Hook으로 분리 --------- Co-authored-by: TaehunLee <85233397+Todari@users.noreply.github.com> --- client/src/constants/sessionStorageKeys.ts | 1 + client/src/hooks/useAdminPage.ts | 31 ++++------ client/src/hooks/useBanner.ts | 61 +++++++++++++++++++ .../pages/EventPage/AdminPage/AdminPage.tsx | 25 +++++++- .../src/pages/EventPage/EventPageLayout.tsx | 2 - 5 files changed, 95 insertions(+), 25 deletions(-) create mode 100644 client/src/hooks/useBanner.ts diff --git a/client/src/constants/sessionStorageKeys.ts b/client/src/constants/sessionStorageKeys.ts index da9097d5d..ae9974000 100644 --- a/client/src/constants/sessionStorageKeys.ts +++ b/client/src/constants/sessionStorageKeys.ts @@ -1,5 +1,6 @@ const SESSION_STORAGE_KEYS = { closeAccountBannerByEventToken: (eventToken: string) => `closeAccountBanner-${eventToken}`, + closeDepositStateBannerByEventToken: (eventToken: string) => `closeDepositStateBanner-${eventToken}`, } as const; export default SESSION_STORAGE_KEYS; diff --git a/client/src/hooks/useAdminPage.ts b/client/src/hooks/useAdminPage.ts index 17d7e2d30..e3aaad8ad 100644 --- a/client/src/hooks/useAdminPage.ts +++ b/client/src/hooks/useAdminPage.ts @@ -6,9 +6,6 @@ import {EventPageContextProps} from '@pages/EventPage/EventPageLayout'; import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore'; import getEventIdByUrl from '@utils/getEventIdByUrl'; -import SessionStorage from '@utils/SessionStorage'; - -import SESSION_STORAGE_KEYS from '@constants/sessionStorageKeys'; import useRequestGetSteps from './queries/step/useRequestGetSteps'; @@ -19,30 +16,24 @@ const useAdminPage = () => { const {totalExpenseAmount} = useTotalExpenseAmountStore(); const {steps} = useRequestGetSteps(); - - // session storage에 배너를 지웠는지 관리 - const storageValue = SessionStorage.get(SESSION_STORAGE_KEYS.closeAccountBannerByEventToken(eventId)); - const isClosed = storageValue !== null && storageValue === true; - - const [isShowBanner, setIsShowBanner] = useState((bankName === '' || accountNumber === '') && !isClosed); - - useEffect(() => { - setIsShowBanner((bankName === '' || accountNumber === '') && !isClosed); - }, [bankName, accountNumber, isShowBanner]); - - const onDelete = () => { - setIsShowBanner(false); - SessionStorage.set(SESSION_STORAGE_KEYS.closeAccountBannerByEventToken(eventId), true); - }; + + const {isShowAccountBanner, onDeleteAccount, isShowDepositStateBanner, onDeleteDepositState} = useBanner({ + eventId, + bankName, + accountNumber, + steps, + }); return { eventId, isAdmin, eventName, totalExpenseAmount, - isShowBanner, - onDelete, + isShowAccountBanner, + onDeleteAccount, steps, + isShowDepositStateBanner, + onDeleteDepositState, }; }; diff --git a/client/src/hooks/useBanner.ts b/client/src/hooks/useBanner.ts new file mode 100644 index 000000000..98b5e0725 --- /dev/null +++ b/client/src/hooks/useBanner.ts @@ -0,0 +1,61 @@ +import {useEffect, useState} from 'react'; + +import {Step} from 'types/serviceType'; + +import SessionStorage from '@utils/SessionStorage'; + +import SESSION_STORAGE_KEYS from '@constants/sessionStorageKeys'; + +interface Props { + eventId: string; + bankName: string; + accountNumber: string; + steps: Step[]; +} + +const useBanner = ({eventId, bankName, accountNumber, steps}: Props) => { + // session storage에 계좌번호 입력 배너를 지웠는지 관리 + const storageAccountValue = SessionStorage.get(SESSION_STORAGE_KEYS.closeAccountBannerByEventToken(eventId)); + const isClosedAccount = storageAccountValue !== null && storageAccountValue === true; + + const isEmptyAccount = bankName === '' || accountNumber === ''; + const [isShowAccountBanner, setIsShowAccountBanner] = useState(isEmptyAccount && !isClosedAccount); + + useEffect(() => { + setIsShowAccountBanner(isEmptyAccount && !isClosedAccount); + }, [bankName, accountNumber, isShowAccountBanner]); + + const onDeleteAccount = () => { + setIsShowAccountBanner(false); + SessionStorage.set(SESSION_STORAGE_KEYS.closeAccountBannerByEventToken(eventId), true); + }; + + // session storage에 입금 상태관리 배너를 지웠는지 관리 + const storageDepositStateValue = SessionStorage.get( + SESSION_STORAGE_KEYS.closeDepositStateBannerByEventToken(eventId), + ); + const isClosedDepositState = storageDepositStateValue != null && storageDepositStateValue; + + const isExistStepsAndAccount = steps.length && !isEmptyAccount; + const [isShowDepositStateBanner, setIsShowDepositStateBanner] = useState( + !!isExistStepsAndAccount && !isClosedDepositState, + ); + + useEffect(() => { + setIsShowDepositStateBanner(!!isExistStepsAndAccount && !isClosedDepositState); + }, [isShowDepositStateBanner, steps, bankName, accountNumber]); + + const onDeleteDepositState = () => { + setIsShowDepositStateBanner(false); + SessionStorage.set(SESSION_STORAGE_KEYS.closeDepositStateBannerByEventToken(eventId), true); + }; + + return { + isShowAccountBanner, + onDeleteAccount, + isShowDepositStateBanner, + onDeleteDepositState, + }; +}; + +export default useBanner; diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.tsx b/client/src/pages/EventPage/AdminPage/AdminPage.tsx index a6c32f855..1e0c9540e 100644 --- a/client/src/pages/EventPage/AdminPage/AdminPage.tsx +++ b/client/src/pages/EventPage/AdminPage/AdminPage.tsx @@ -14,7 +14,17 @@ const AdminPage = () => { const navigate = useNavigate(); const {trackAddBillStart} = useAmplitude(); - const {eventId, isAdmin, eventName, totalExpenseAmount, isShowBanner, onDelete, steps} = useAdminPage(); + const { + eventId, + isAdmin, + eventName, + totalExpenseAmount, + isShowAccountBanner, + onDeleteAccount, + steps, + isShowDepositStateBanner, + onDeleteDepositState, + } = useAdminPage(); const navigateAccountInputPage = () => { navigate(`/event/${eventId}/admin/edit`); @@ -46,15 +56,24 @@ const AdminPage = () => { } /> - {isShowBanner && ( + {isShowAccountBanner && ( )} + {isShowDepositStateBanner && ( + + )} {steps.length > 0 && } @@ -60,7 +72,7 @@ const MainSection = ({trackStartCreateEvent}: MainSectionProps) => { animation: `${bounce} 2s infinite ease-in-out`, })} > - + ); From a61a518ecfaa0e9603d31542001425bfe451084e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?= =?UTF-8?q?=E1=86=AB?= Date: Thu, 17 Oct 2024 15:36:21 +0900 Subject: [PATCH 8/8] =?UTF-8?q?style:=20lint=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Design/components/Icon/Icon.tsx | 1 - client/src/hooks/useAdminPage.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/client/src/components/Design/components/Icon/Icon.tsx b/client/src/components/Design/components/Icon/Icon.tsx index 84ba4c575..bc4dc4bee 100644 --- a/client/src/components/Design/components/Icon/Icon.tsx +++ b/client/src/components/Design/components/Icon/Icon.tsx @@ -39,7 +39,6 @@ export const ICON = { chevronDown: , } as const; - export const Icon = ({iconColor, iconType, ...htmlProps}: IconProps) => { const {theme} = useTheme(); diff --git a/client/src/hooks/useAdminPage.ts b/client/src/hooks/useAdminPage.ts index e3aaad8ad..e42cf2ccd 100644 --- a/client/src/hooks/useAdminPage.ts +++ b/client/src/hooks/useAdminPage.ts @@ -16,7 +16,7 @@ const useAdminPage = () => { const {totalExpenseAmount} = useTotalExpenseAmountStore(); const {steps} = useRequestGetSteps(); - + const {isShowAccountBanner, onDeleteAccount, isShowDepositStateBanner, onDeleteDepositState} = useBanner({ eventId, bankName,