From 91c2522e0de183b4963345899a8fece98298aeec Mon Sep 17 00:00:00 2001 From: aazkgh Date: Fri, 16 Feb 2024 02:48:00 +0900 Subject: [PATCH 1/8] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ApplicationPage/components/ServiceHistory.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/views/ApplicationPage/components/ServiceHistory.tsx b/src/views/ApplicationPage/components/ServiceHistory.tsx index 8cc5970a..3c29a380 100644 --- a/src/views/ApplicationPage/components/ServiceHistory.tsx +++ b/src/views/ApplicationPage/components/ServiceHistory.tsx @@ -16,13 +16,12 @@ const ServiceHistory = () => { const [step, setStep] = useRecoilState(applyStepState); const [serviceHistory, setServiceHistory] = useRecoilState(historyState); - const { hairServiceRecords } = serviceHistory; const navigate = useNavigate(); const addHistory = () => { - if (hairServiceRecords.length < MAX_LENGTH) { + if (serviceHistory.hairServiceRecords.length < MAX_LENGTH) { const tempServiceHistoryList: historyDetailProps[] = [ - ...hairServiceRecords, + ...serviceHistory.hairServiceRecords, { hairService: '', hairServiceTerm: '' }, ]; setServiceHistory({ ...serviceHistory, hairServiceRecords: tempServiceHistoryList }); @@ -56,11 +55,9 @@ const ServiceHistory = () => {

{INFO_MESSAGE.SERVICE_SUBTITLE}

- {hairServiceRecords.map((item, idx: number) => - idx < hairServiceRecords.length ? ( - - ) : null, - )} + {serviceHistory.hairServiceRecords.map((item, idx) => ( + + ))} {INFO_MESSAGE.ADD_HISTORY} From 7d3ec193eb6f42b16e06e50bc0cf3beb5a631205 Mon Sep 17 00:00:00 2001 From: aazkgh Date: Sat, 17 Feb 2024 17:36:31 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20ref=20=ED=9B=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ApplicationPage/components/ServiceHistory.tsx | 8 +++++++- .../components/ServiceHistoryListItem.tsx | 10 +++++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/views/ApplicationPage/components/ServiceHistory.tsx b/src/views/ApplicationPage/components/ServiceHistory.tsx index 3c29a380..43309d60 100644 --- a/src/views/ApplicationPage/components/ServiceHistory.tsx +++ b/src/views/ApplicationPage/components/ServiceHistory.tsx @@ -1,3 +1,4 @@ +import { useRef } from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilState } from 'recoil'; import { styled } from 'styled-components'; @@ -16,6 +17,7 @@ const ServiceHistory = () => { const [step, setStep] = useRecoilState(applyStepState); const [serviceHistory, setServiceHistory] = useRecoilState(historyState); + const activateRef = useRef(null); const navigate = useNavigate(); const addHistory = () => { @@ -56,7 +58,11 @@ const ServiceHistory = () => { {serviceHistory.hairServiceRecords.map((item, idx) => ( - + ))} diff --git a/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx b/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx index 507704fa..7dd48e11 100644 --- a/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx +++ b/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { forwardRef, useState } from 'react'; import { useRecoilState } from 'recoil'; import { css, styled } from 'styled-components'; @@ -11,7 +11,7 @@ interface ServiceHistoryListItem { idx: number; } -const ServiceHistoryListItem = ({ idx }: ServiceHistoryListItem) => { +const ServiceHistoryListItem = forwardRef(({ idx }, ref) => { const [serviceHistory, setServiceHistory] = useRecoilState(historyState); const { hairServiceRecords } = serviceHistory; const [isServiceClicked, setIsServiceClicked] = useState(false); @@ -60,9 +60,11 @@ const ServiceHistoryListItem = ({ idx }: ServiceHistoryListItem) => { { setIsServiceClicked((prev) => !prev); + console.log(ref); }}> { { setIsPeriodClicked((prev) => !prev); @@ -117,7 +120,8 @@ const ServiceHistoryListItem = ({ idx }: ServiceHistoryListItem) => { ); -}; +}); +ServiceHistoryListItem.displayName = 'ServiceHistoryListItem'; const ServiceHistoryListItemLayout = styled.li` display: flex; From a1a76c456e0daf488b5b3308f4bdc5ba851d1829 Mon Sep 17 00:00:00 2001 From: aazkgh Date: Mon, 19 Feb 2024 01:38:22 +0900 Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20=EC=8B=9C=EC=88=A0=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D,=20=EA=B8=B0=EA=B0=84=20=EC=84=A0=ED=83=9D=20state=20?= =?UTF-8?q?=ED=86=B5=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ServiceHistoryListItem.tsx | 111 ++++++------------ 1 file changed, 34 insertions(+), 77 deletions(-) diff --git a/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx b/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx index 7dd48e11..c12ac39a 100644 --- a/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx +++ b/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx @@ -1,4 +1,4 @@ -import { forwardRef, useState } from 'react'; +import React, { forwardRef, useState } from 'react'; import { useRecoilState } from 'recoil'; import { css, styled } from 'styled-components'; @@ -7,113 +7,78 @@ import { IcDelete } from '../assets/icons'; import { SELECT_PERIOD, SELECT_SERVICE } from '../constants/select'; import { historyState } from '@/recoil/atoms/applicationState'; + interface ServiceHistoryListItem { idx: number; } const ServiceHistoryListItem = forwardRef(({ idx }, ref) => { const [serviceHistory, setServiceHistory] = useRecoilState(historyState); - const { hairServiceRecords } = serviceHistory; - const [isServiceClicked, setIsServiceClicked] = useState(false); - const [isPeriodClicked, setIsPeriodClicked] = useState(false); - - const activateServiceBox = (event: React.MouseEvent) => { - setIsServiceClicked((prev) => !prev); - const tempService = event.currentTarget.innerText; - const tempServiceHistoryList = hairServiceRecords.map((item, i) => { - if (i === idx) { - return { - ...item, - hairService: tempService, - }; - } - return item; - }); - - setServiceHistory({ ...serviceHistory, hairServiceRecords: tempServiceHistoryList }); - }; - - const activatePeriodBox = (event: React.MouseEvent) => { - setIsPeriodClicked((prev) => !prev); - const tempPeriod = event.currentTarget.innerText; - const tempServiceHistoryList = hairServiceRecords.map((item, i) => { + const [clickedDropdown, setClickedDropdown] = useState(null); + + const handleDropdownClick = ( + event: React.MouseEvent, + field: 'hairService' | 'hairServiceTerm', + ) => { + const newValue = event.currentTarget.innerText; + const newServiceHistoryRecords = serviceHistory.hairServiceRecords.map((item, i) => { if (i === idx) { return { ...item, - hairServiceTerm: tempPeriod, + [field]: newValue, }; } return item; }); - setServiceHistory({ ...serviceHistory, hairServiceRecords: tempServiceHistoryList }); + setServiceHistory({ ...serviceHistory, hairServiceRecords: newServiceHistoryRecords }); + setClickedDropdown(null); }; const deleteHistory = () => { - const tempServiceHistoryList = hairServiceRecords.filter((_, i) => i !== idx); - if (tempServiceHistoryList.length >= 0) { - setServiceHistory({ ...serviceHistory, hairServiceRecords: tempServiceHistoryList }); - } + const newServiceHistoryRecords = serviceHistory.hairServiceRecords.filter((_, i) => i !== idx); + setServiceHistory({ ...serviceHistory, hairServiceRecords: newServiceHistoryRecords }); }; return ( - { - setIsServiceClicked((prev) => !prev); - console.log(ref); - }}> - - {isServiceClicked ? : } - -
- {isServiceClicked && ( + (clickedDropdown ? setClickedDropdown(null) : setClickedDropdown('service'))}> + + {clickedDropdown === 'service' ? : } + {clickedDropdown === 'service' && ( {Object.keys(SELECT_SERVICE).map((value, key) => (
  • -
    • ))}     )} -
    +     - { - setIsPeriodClicked((prev) => !prev); - }}> - - {isPeriodClicked ? : } - -
    - {isPeriodClicked && ( + (clickedDropdown ? setClickedDropdown(null) : setClickedDropdown('period'))}> + + {clickedDropdown === 'period' ? : } + {clickedDropdown === 'period' && ( {Object.keys(SELECT_PERIOD).map((value, key) => (
  • -
    • ))}     )} -
    +     - - ))} - - )} - - - - (clickedDropdown === 'period' ? setClickedDropdown(null) : setClickedDropdown('period'))}> - - {clickedDropdown === 'period' ? : } - {clickedDropdown === 'period' && ( - - {Object.keys(SELECT_PERIOD).map((value, key) => ( -
  • - -
    • - ))} -     - )} -     -     - -     - ); -}); +const ServiceHistoryListItem = forwardRef( + ({ idx, currentDropDown, setCurrentDropDown }) => { + const [serviceHistory, setServiceHistory] = useRecoilState(historyState); + const [clickedDropdown, setClickedDropdown] = useState(null); + + const handleDropdownClick = ( + event: React.MouseEvent, + field: 'hairService' | 'hairServiceTerm', + ) => { + const newValue = event.currentTarget.innerText; + const newServiceHistoryRecords = serviceHistory.hairServiceRecords.map((item, i) => { + if (i === idx) { + return { + ...item, + [field]: newValue, + }; + } + return item; + }); + + setServiceHistory({ ...serviceHistory, hairServiceRecords: newServiceHistoryRecords }); + setClickedDropdown(null); + }; + + const deleteHistory = () => { + const newServiceHistoryRecords = serviceHistory.hairServiceRecords.filter((_, i) => i !== idx); + setServiceHistory({ ...serviceHistory, hairServiceRecords: newServiceHistoryRecords }); + }; + + return ( + + + { + setCurrentDropDown(idx); + currentDropDown === idx && clickedDropdown === 'service' + ? setClickedDropdown(null) + : setClickedDropdown('service'); + }}> + + {currentDropDown === idx && clickedDropdown === 'service' ? : } + {currentDropDown === idx && clickedDropdown === 'service' && ( + + {Object.keys(SELECT_SERVICE).map((value, key) => ( +
  • + +
    • + ))} +     + )} +     +     + + { + setCurrentDropDown(idx); + currentDropDown === idx && clickedDropdown === 'period' + ? setClickedDropdown(null) + : setClickedDropdown('period'); + }}> + + {currentDropDown === idx && clickedDropdown === 'period' ? : } + {currentDropDown === idx && clickedDropdown === 'period' && ( + + {Object.keys(SELECT_PERIOD).map((value, key) => ( +
  • + +
    • + ))} +     + )} +     +     + +     + ); + }, +); ServiceHistoryListItem.displayName = 'ServiceHistoryListItem'; const ServiceHistoryListItemLayout = styled.li` From c5c42def89916f422fb7b78441bb8dccb783e64c Mon Sep 17 00:00:00 2001 From: aazkgh Date: Mon, 19 Feb 2024 17:13:52 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EC=99=B8=EB=B6=80=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=93=9C=EB=A1=AD?= =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EC=84=A0=ED=83=9D=20=ED=95=B4=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ServiceHistory.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/views/ApplicationPage/components/ServiceHistory.tsx b/src/views/ApplicationPage/components/ServiceHistory.tsx index 8a7be57f..49993a17 100644 --- a/src/views/ApplicationPage/components/ServiceHistory.tsx +++ b/src/views/ApplicationPage/components/ServiceHistory.tsx @@ -21,16 +21,16 @@ const ServiceHistory = () => { const historyRef = useRef(null); const navigate = useNavigate(); - // useEffect(() => { - // const handleFocus = (e: MouseEvent) => { - // if (historyRef.current && !historyRef.current.contains(e.target as Node)) setCurrentDropDown(null); - // }; - // document.addEventListener('mouseup', handleFocus); - - // return () => { - // document.removeEventListener('mouseup', handleFocus); - // }; - // }, [historyRef.current]); + useEffect(() => { + const handleFocus = (e: MouseEvent) => { + if (historyRef.current && !historyRef.current.contains(e.target as Node)) setCurrentDropDown(null); + }; + document.addEventListener('mouseup', handleFocus); + + return () => { + document.removeEventListener('mouseup', handleFocus); + }; + }, [historyRef.current]); const addHistory = () => { if (serviceHistory.hairServiceRecords.length < MAX_LENGTH) { From a406d16c224a2b6c434078c6b3289ca7ddd2d5e3 Mon Sep 17 00:00:00 2001 From: aazkgh Date: Mon, 19 Feb 2024 17:19:34 +0900 Subject: [PATCH 7/8] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ServiceHistoryListItem.tsx | 173 +++++++++--------- 1 file changed, 85 insertions(+), 88 deletions(-) diff --git a/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx b/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx index 4eaf039a..a43b90df 100644 --- a/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx +++ b/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useState } from 'react'; +import React, { useState } from 'react'; import { useRecoilState } from 'recoil'; import { css, styled } from 'styled-components'; @@ -14,93 +14,90 @@ interface ServiceHistoryListItem { setCurrentDropDown: React.Dispatch>; } -const ServiceHistoryListItem = forwardRef( - ({ idx, currentDropDown, setCurrentDropDown }) => { - const [serviceHistory, setServiceHistory] = useRecoilState(historyState); - const [clickedDropdown, setClickedDropdown] = useState(null); - - const handleDropdownClick = ( - event: React.MouseEvent, - field: 'hairService' | 'hairServiceTerm', - ) => { - const newValue = event.currentTarget.innerText; - const newServiceHistoryRecords = serviceHistory.hairServiceRecords.map((item, i) => { - if (i === idx) { - return { - ...item, - [field]: newValue, - }; - } - return item; - }); - - setServiceHistory({ ...serviceHistory, hairServiceRecords: newServiceHistoryRecords }); - setClickedDropdown(null); - }; - - const deleteHistory = () => { - const newServiceHistoryRecords = serviceHistory.hairServiceRecords.filter((_, i) => i !== idx); - setServiceHistory({ ...serviceHistory, hairServiceRecords: newServiceHistoryRecords }); - }; - - return ( - - - { - setCurrentDropDown(idx); - currentDropDown === idx && clickedDropdown === 'service' - ? setClickedDropdown(null) - : setClickedDropdown('service'); - }}> - - {currentDropDown === idx && clickedDropdown === 'service' ? : } - {currentDropDown === idx && clickedDropdown === 'service' && ( - - {Object.keys(SELECT_SERVICE).map((value, key) => ( -
  • - -
    • - ))} -     - )} -     -     - - { - setCurrentDropDown(idx); - currentDropDown === idx && clickedDropdown === 'period' - ? setClickedDropdown(null) - : setClickedDropdown('period'); - }}> - - {currentDropDown === idx && clickedDropdown === 'period' ? : } - {currentDropDown === idx && clickedDropdown === 'period' && ( - - {Object.keys(SELECT_PERIOD).map((value, key) => ( -
  • - -
    • - ))} -     - )} -     -     - -     - ); - }, -); -ServiceHistoryListItem.displayName = 'ServiceHistoryListItem'; +const ServiceHistoryListItem = ({ idx, currentDropDown, setCurrentDropDown }: ServiceHistoryListItem) => { + const [serviceHistory, setServiceHistory] = useRecoilState(historyState); + const [clickedDropdown, setClickedDropdown] = useState(null); + + const handleDropdownClick = ( + event: React.MouseEvent, + field: 'hairService' | 'hairServiceTerm', + ) => { + const newValue = event.currentTarget.innerText; + const newServiceHistoryRecords = serviceHistory.hairServiceRecords.map((item, i) => { + if (i === idx) { + return { + ...item, + [field]: newValue, + }; + } + return item; + }); + + setServiceHistory({ ...serviceHistory, hairServiceRecords: newServiceHistoryRecords }); + setClickedDropdown(null); + }; + + const deleteHistory = () => { + const newServiceHistoryRecords = serviceHistory.hairServiceRecords.filter((_, i) => i !== idx); + setServiceHistory({ ...serviceHistory, hairServiceRecords: newServiceHistoryRecords }); + }; + + return ( + + + { + setCurrentDropDown(idx); + currentDropDown === idx && clickedDropdown === 'service' + ? setClickedDropdown(null) + : setClickedDropdown('service'); + }}> + + {currentDropDown === idx && clickedDropdown === 'service' ? : } + {currentDropDown === idx && clickedDropdown === 'service' && ( + + {Object.keys(SELECT_SERVICE).map((value, key) => ( +
  • + +
    • + ))} +     + )} +     +     + + { + setCurrentDropDown(idx); + currentDropDown === idx && clickedDropdown === 'period' + ? setClickedDropdown(null) + : setClickedDropdown('period'); + }}> + + {currentDropDown === idx && clickedDropdown === 'period' ? : } + {currentDropDown === idx && clickedDropdown === 'period' && ( + + {Object.keys(SELECT_PERIOD).map((value, key) => ( +
  • + +
    • + ))} +     + )} +     +     + +     + ); +}; const ServiceHistoryListItemLayout = styled.li` display: flex; From 4df89669ea8f7a0391b32e246fa6cd3c464e69cc Mon Sep 17 00:00:00 2001 From: aazkgh Date: Mon, 19 Feb 2024 17:55:08 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20=EC=A4=91=EB=B3=B5=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ServiceHistory.tsx | 16 ++++++------ .../components/ServiceHistoryListItem.tsx | 26 +++++++++---------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/views/ApplicationPage/components/ServiceHistory.tsx b/src/views/ApplicationPage/components/ServiceHistory.tsx index 49993a17..c003a457 100644 --- a/src/views/ApplicationPage/components/ServiceHistory.tsx +++ b/src/views/ApplicationPage/components/ServiceHistory.tsx @@ -9,7 +9,7 @@ import { INFO_MESSAGE } from '../constants/message'; import ServiceHistoryListItem from './ServiceHistoryListItem'; -import { applyStepState, historyDetailProps, historyState } from '@/recoil/atoms/applicationState'; +import { applyStepState, historyState } from '@/recoil/atoms/applicationState'; import ProgressBar from '@/views/@common/components/ProgressBar'; const ServiceHistory = () => { @@ -33,13 +33,13 @@ const ServiceHistory = () => { }, [historyRef.current]); const addHistory = () => { - if (serviceHistory.hairServiceRecords.length < MAX_LENGTH) { - const tempServiceHistoryList: historyDetailProps[] = [ - ...serviceHistory.hairServiceRecords, - { hairService: '', hairServiceTerm: '' }, - ]; - setServiceHistory({ ...serviceHistory, hairServiceRecords: tempServiceHistoryList }); - } + setServiceHistory((prev) => ({ + ...prev, + hairServiceRecords: + prev.hairServiceRecords.length < MAX_LENGTH + ? [...prev.hairServiceRecords, { hairService: '', hairServiceTerm: '' }] + : prev.hairServiceRecords, + })); }; const exceptionNull = () => { diff --git a/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx b/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx index a43b90df..cf9aaf0f 100644 --- a/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx +++ b/src/views/ApplicationPage/components/ServiceHistoryListItem.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useRecoilState } from 'recoil'; import { css, styled } from 'styled-components'; @@ -18,6 +18,10 @@ const ServiceHistoryListItem = ({ idx, currentDropDown, setCurrentDropDown }: Se const [serviceHistory, setServiceHistory] = useRecoilState(historyState); const [clickedDropdown, setClickedDropdown] = useState(null); + useEffect(() => { + if (currentDropDown !== idx) setClickedDropdown(null); + }, [currentDropDown]); + const handleDropdownClick = ( event: React.MouseEvent, field: 'hairService' | 'hairServiceTerm', @@ -46,16 +50,14 @@ const ServiceHistoryListItem = ({ idx, currentDropDown, setCurrentDropDown }: Se { setCurrentDropDown(idx); - currentDropDown === idx && clickedDropdown === 'service' - ? setClickedDropdown(null) - : setClickedDropdown('service'); + clickedDropdown === 'service' ? setClickedDropdown(null) : setClickedDropdown('service'); }}> - {currentDropDown === idx && clickedDropdown === 'service' ? : } - {currentDropDown === idx && clickedDropdown === 'service' && ( + {clickedDropdown === 'service' ? : } + {clickedDropdown === 'service' && ( {Object.keys(SELECT_SERVICE).map((value, key) => (
  • @@ -70,16 +72,14 @@ const ServiceHistoryListItem = ({ idx, currentDropDown, setCurrentDropDown }: Se { setCurrentDropDown(idx); - currentDropDown === idx && clickedDropdown === 'period' - ? setClickedDropdown(null) - : setClickedDropdown('period'); + clickedDropdown === 'period' ? setClickedDropdown(null) : setClickedDropdown('period'); }}> - {currentDropDown === idx && clickedDropdown === 'period' ? : } - {currentDropDown === idx && clickedDropdown === 'period' && ( + {clickedDropdown === 'period' ? : } + {clickedDropdown === 'period' && ( {Object.keys(SELECT_PERIOD).map((value, key) => (