From c051c45e9f96db7ad5a8537aa7a911841a22c46b Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Tue, 13 Aug 2024 16:09:06 +0900 Subject: [PATCH 01/21] =?UTF-8?q?[FE]=20FIX:=20debounce=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=ED=95=B4=20=EC=BD=94=EC=9D=B8=20=EB=82=B4=EC=97=AD=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=95=84=ED=84=B0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=8B=9C=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20api?= =?UTF-8?q?=20=EC=9A=94=EC=B2=AD=20=EB=B3=B4=EB=82=B4=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95=20#1677?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/components/Store/CoinLog/CoinLog.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/Cabinet/components/Store/CoinLog/CoinLog.tsx b/frontend/src/Cabinet/components/Store/CoinLog/CoinLog.tsx index b6d867c8c..425692936 100644 --- a/frontend/src/Cabinet/components/Store/CoinLog/CoinLog.tsx +++ b/frontend/src/Cabinet/components/Store/CoinLog/CoinLog.tsx @@ -11,6 +11,7 @@ import { ReactComponent as CoinIcon } from "@/Cabinet/assets/images/coinIcon.svg import { ReactComponent as Select } from "@/Cabinet/assets/images/selectMaincolor.svg"; import { CoinLogToggleType } from "@/Cabinet/types/enum/store.enum"; import { axiosCoinLog } from "@/Cabinet/api/axios/axios.custom"; +import useDebounce from "@/Cabinet/hooks/useDebounce"; import { formatDate } from "@/Cabinet/utils/dateUtils"; const toggleList: toggleItem[] = [ @@ -44,10 +45,11 @@ const CoinLog = () => { const [userInfo] = useRecoilState(userState); const size = 5; // NOTE : size 만큼 데이터 불러옴 + const { debounce } = useDebounce(); - const getCoinLog = async (type: CoinLogToggleType) => { + const getCoinLog = async () => { try { - const response = await axiosCoinLog(type, page, size); + const response = await axiosCoinLog(toggleType, page, size); if (page === 0) { setCoinLogs(response.data.result); } else { @@ -71,9 +73,7 @@ const CoinLog = () => { }; useEffect(() => { - setTimeout(() => { - getCoinLog(toggleType); - }, 333); + debounce("coinLog", getCoinLog, 100); }, [page, toggleType]); useEffect(() => { From ac7b11eec89df03c409bc7c2873cb2a06ad60b28 Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Tue, 13 Aug 2024 18:31:23 +0900 Subject: [PATCH 02/21] =?UTF-8?q?[FE]=20FIX:=20=EA=B3=B5=EC=9C=A0=EC=82=AC?= =?UTF-8?q?=EB=AC=BC=ED=95=A8=20=EC=BD=94=EB=93=9C=20=EB=B3=B5=EC=82=AC,?= =?UTF-8?q?=20=ED=81=B4=EB=9F=BD=20=EB=A9=A4=EB=B2=84=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EC=99=80=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=20=EB=82=B4=EC=97=AD=20=EB=B6=88=EB=9F=AC=EC=98=A4?= =?UTF-8?q?=EA=B8=B0=EC=97=90=EC=84=9C=20debouncing=20=EC=A0=81=EC=9A=A9#1?= =?UTF-8?q?677?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CabinetInfoArea/CountTime/CodeAndTime.tsx | 12 +++++++++--- .../ClubMemberList/ClubMemberList.container.tsx | 16 +++++++++++----- frontend/src/Cabinet/pages/ItemUsageLogPage.tsx | 15 +++++++++++---- frontend/src/Cabinet/pages/PostLogin.tsx | 1 + 4 files changed, 32 insertions(+), 12 deletions(-) diff --git a/frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx b/frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx index c3c013be9..1984630d3 100644 --- a/frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx +++ b/frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx @@ -5,6 +5,7 @@ import { myCabinetInfoState } from "@/Cabinet/recoil/atoms"; import alertImg from "@/Cabinet/assets/images/cautionSign.svg"; import { ReactComponent as ClockImg } from "@/Cabinet/assets/images/clock.svg"; import { MyCabinetInfoResponseDto } from "@/Cabinet/types/dto/cabinet.dto"; +import useDebounce from "@/Cabinet/hooks/useDebounce"; interface CountTimeProps { minutes: string; @@ -17,13 +18,18 @@ const CodeAndTime = ({ minutes, seconds, isTimeOver }: CountTimeProps) => { useRecoilValue(myCabinetInfoState); const code = myCabinetInfo.shareCode + ""; const [copySuccess, setCopySuccess] = useState(false); + const { debounce } = useDebounce(); const handleCopyClick = () => { navigator.clipboard.writeText(code).then(() => { setCopySuccess(true); - setTimeout(() => { - setCopySuccess(false); - }, 2000); + debounce( + "codeAndTimeCopyClick", + () => { + setCopySuccess(false); + }, + 2000 + ); }); }; diff --git a/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx b/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx index 0df8e737c..aa08a10c2 100644 --- a/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx +++ b/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx @@ -1,11 +1,12 @@ import { useEffect, useState } from "react"; -import { useRecoilState, useRecoilValue } from "recoil"; -import { targetClubUserInfoState, userState } from "@/Cabinet/recoil/atoms"; +import { useRecoilState } from "recoil"; +import { targetClubUserInfoState } from "@/Cabinet/recoil/atoms"; import ClubMemberList from "@/Cabinet/components/Club/ClubMemberList/ClubMemberList"; import { ClubInfoResponseDto, ClubUserResponseDto, } from "@/Cabinet/types/dto/club.dto"; +import useDebounce from "@/Cabinet/hooks/useDebounce"; import useMenu from "@/Cabinet/hooks/useMenu"; export type TClubMemberModalState = "addModal"; @@ -36,12 +37,17 @@ const ClubMemberListContainer = ({ const [targetClubUser, setTargetClubUser] = useRecoilState( targetClubUserInfoState ); + const { debounce } = useDebounce(); const clickMoreButton = () => { setIsLoading(true); - setTimeout(() => { - setPage(page + 1); - }, 100); + debounce( + "clubMemberList", + () => { + setPage(page + 1); + }, + 100 + ); }; const selectClubMemberOnClick = (member: ClubUserResponseDto) => { diff --git a/frontend/src/Cabinet/pages/ItemUsageLogPage.tsx b/frontend/src/Cabinet/pages/ItemUsageLogPage.tsx index f34eb2c90..455e6d119 100644 --- a/frontend/src/Cabinet/pages/ItemUsageLogPage.tsx +++ b/frontend/src/Cabinet/pages/ItemUsageLogPage.tsx @@ -7,6 +7,7 @@ import { ItemIconMap } from "@/Cabinet/assets/data/maps"; import { ReactComponent as DropdownChevron } from "@/Cabinet/assets/images/dropdownChevron.svg"; import { StoreItemType } from "@/Cabinet/types/enum/store.enum"; import { axiosGetItemUsageHistory } from "@/Cabinet/api/axios/axios.custom"; +import useDebounce from "@/Cabinet/hooks/useDebounce"; const mapItemNameToType = (itemName: string): StoreItemType => { switch (itemName) { @@ -55,8 +56,9 @@ const ItemUsageLogPage = () => { const [isMoreBtnLoading, setIsMoreBtnLoading] = useState(true); const [isLoading, setIsLoading] = useState(true); const size = 5; + const { debounce } = useDebounce(); - const getItemUsageLog = async (page: number, size: number) => { + const getItemUsageLog = async () => { try { const data = await axiosGetItemUsageHistory(page, size); const newLogs = createLogEntries(data); @@ -72,13 +74,19 @@ const ItemUsageLogPage = () => { useEffect(() => { setTimeout(() => { - getItemUsageLog(page, size); + getItemUsageLog(); }, 333); }, [page]); const handleMoreClick = () => { - setPage((prev) => prev + 1); setIsMoreBtnLoading(true); + debounce( + "itemUsageLog", + () => { + setPage((prev) => prev + 1); + }, + 333 + ); }; return ( @@ -111,7 +119,6 @@ const ItemUsageLogPage = () => { {isMoreBtnLoading ? ( diff --git a/frontend/src/Cabinet/pages/PostLogin.tsx b/frontend/src/Cabinet/pages/PostLogin.tsx index c840badad..ef31dbbd8 100644 --- a/frontend/src/Cabinet/pages/PostLogin.tsx +++ b/frontend/src/Cabinet/pages/PostLogin.tsx @@ -46,6 +46,7 @@ const PostLogin = (): JSX.Element => { let time = setTimeout(() => { navigate("/home"); }, 600); + return () => { clearTimeout(time); }; From e9da7497a3e8e9a3b02d9e5d97f9466827e94738 Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Tue, 13 Aug 2024 21:30:06 +0900 Subject: [PATCH 03/21] =?UTF-8?q?[FE]=20FIX:=20AvailablePage=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=82=AD=EC=A0=9C#1677?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/components/Search/SearchCabinetDetails.tsx | 6 +----- .../Cabinet/components/Search/SearchNoCabinetDetails.tsx | 1 - frontend/src/Cabinet/pages/AvailablePage.tsx | 6 +----- 3 files changed, 2 insertions(+), 11 deletions(-) diff --git a/frontend/src/Cabinet/components/Search/SearchCabinetDetails.tsx b/frontend/src/Cabinet/components/Search/SearchCabinetDetails.tsx index 8861c7450..b092bb807 100644 --- a/frontend/src/Cabinet/components/Search/SearchCabinetDetails.tsx +++ b/frontend/src/Cabinet/components/Search/SearchCabinetDetails.tsx @@ -49,9 +49,7 @@ const SearchCabinetDetails = (props: ISearchDetail) => { ); const { openCabinet, closeCabinet } = useMenu(); const CabinetIcon = - cabinetIconComponentMap[ - cabinetInfo?.lentType || CabinetType.PRIVATE - ]; + cabinetIconComponentMap[cabinetInfo?.lentType || CabinetType.PRIVATE]; const clickSearchItem = () => { if ( @@ -150,7 +148,6 @@ const SearchCabinetDetails = (props: ISearchDetail) => { ); }; - const WrapperStyled = styled.div` width: 350px; height: 110px; @@ -252,4 +249,3 @@ const ButtonWrapper = styled.div` `; export default SearchCabinetDetails; - diff --git a/frontend/src/Cabinet/components/Search/SearchNoCabinetDetails.tsx b/frontend/src/Cabinet/components/Search/SearchNoCabinetDetails.tsx index 455a58aed..6456dfc49 100644 --- a/frontend/src/Cabinet/components/Search/SearchNoCabinetDetails.tsx +++ b/frontend/src/Cabinet/components/Search/SearchNoCabinetDetails.tsx @@ -145,7 +145,6 @@ const SearchNoCabinetDetails = (props: ISearchDetail) => { ); }; - const WrapperStyled = styled.div` width: 350px; height: 110px; diff --git a/frontend/src/Cabinet/pages/AvailablePage.tsx b/frontend/src/Cabinet/pages/AvailablePage.tsx index 9cd4291a4..82ebd53ff 100644 --- a/frontend/src/Cabinet/pages/AvailablePage.tsx +++ b/frontend/src/Cabinet/pages/AvailablePage.tsx @@ -98,10 +98,6 @@ const AvailablePage = () => { useEffect(() => { deleteRecoilPersistFloorSection(); - setTimeout(() => { - // 새로고침 광클 방지를 위한 초기 로딩 딜레이 - setIsLoaded(true); - }, 500); }, []); useEffect(() => { @@ -156,7 +152,7 @@ const AvailablePage = () => { /> - {isLoaded && cabinets ? ( + {Object.keys(cabinets).length ? ( Object.entries(cabinets).map(([key, value]) => ( Date: Tue, 20 Aug 2024 14:03:57 +0900 Subject: [PATCH 04/21] [BE] local 42auth key refresh --- config | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config b/config index d72c8b1fb..a417381bd 160000 --- a/config +++ b/config @@ -1 +1 @@ -Subproject commit d72c8b1fb948031bd8084f72dc42c713f16d2152 +Subproject commit a417381bdc111983aaab13ad25fcce20bee8b646 From 37b3c9b98f4e0adca1fbc4a9a2d4a6e0db2ccdf6 Mon Sep 17 00:00:00 2001 From: chyo1 Date: Tue, 20 Aug 2024 14:08:24 +0900 Subject: [PATCH 05/21] [BE] FIX: local config fix --- config | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config b/config index a417381bd..f185aa6c7 160000 --- a/config +++ b/config @@ -1 +1 @@ -Subproject commit a417381bdc111983aaab13ad25fcce20bee8b646 +Subproject commit f185aa6c734e4c7f8dd672610802e25c5c4f8d3e From 47a35ef199347451527d49d70c0118b3f8566ea1 Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Tue, 20 Aug 2024 15:22:51 +0900 Subject: [PATCH 06/21] =?UTF-8?q?[FE]=20FIX:=20UserCabinetInfoArea.tsx?= =?UTF-8?q?=EC=97=90=EC=84=9C=20font=20color=20=EA=B0=92=20=EB=AC=B8?= =?UTF-8?q?=EB=B2=95=EC=A0=81=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0=20?= =?UTF-8?q?#1677?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config | 2 +- .../components/UserCabinetInfoArea/UserCabinetInfoArea.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config b/config index d72c8b1fb..f185aa6c7 160000 --- a/config +++ b/config @@ -1 +1 @@ -Subproject commit d72c8b1fb948031bd8084f72dc42c713f16d2152 +Subproject commit f185aa6c734e4c7f8dd672610802e25c5c4f8d3e diff --git a/frontend/src/Cabinet/components/UserCabinetInfoArea/UserCabinetInfoArea.tsx b/frontend/src/Cabinet/components/UserCabinetInfoArea/UserCabinetInfoArea.tsx index 67840970f..10071a05d 100644 --- a/frontend/src/Cabinet/components/UserCabinetInfoArea/UserCabinetInfoArea.tsx +++ b/frontend/src/Cabinet/components/UserCabinetInfoArea/UserCabinetInfoArea.tsx @@ -59,7 +59,7 @@ const UserCabinetInfoArea: React.FC<{ - + {selectedUserInfo.name} From fb876b19eae8d01ab2fe13de03f2bb82c7174b9e Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Tue, 20 Aug 2024 15:41:57 +0900 Subject: [PATCH 07/21] =?UTF-8?q?[FE]=20FIX:=20z-index=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=ED=95=B4=EC=84=9C=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=20?= =?UTF-8?q?=EC=BB=AC=EB=9F=AC=20=EC=B9=B4=EB=93=9C=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=83=89=20=EC=84=A0=ED=83=9D=ED=96=88=EC=9D=84=EB=95=8C=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=EB=8F=84=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9#1682?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Card/DisplayStyleCard/DisplayStyleCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx index f24601027..59685d886 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx @@ -75,7 +75,6 @@ const DisplayStyleCard = ({ }; const DisplayStyleCardWrapper = styled.div` - z-index: 1; align-self: start; `; From 4b6ddf458861cdb2bbaf2c0440015adbecd30633 Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Tue, 20 Aug 2024 15:49:24 +0900 Subject: [PATCH 08/21] =?UTF-8?q?[FE]=20REMOVE:=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=20=EC=97=B0=EC=9E=A5=EA=B6=8C=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C#16?= =?UTF-8?q?82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ExtensionCard/ExtensionCard.container.tsx | 76 ------------------- .../Card/ExtensionCard/ExtensionCard.tsx | 63 --------------- 2 files changed, 139 deletions(-) delete mode 100644 frontend/src/Cabinet/components/Card/ExtensionCard/ExtensionCard.container.tsx delete mode 100644 frontend/src/Cabinet/components/Card/ExtensionCard/ExtensionCard.tsx diff --git a/frontend/src/Cabinet/components/Card/ExtensionCard/ExtensionCard.container.tsx b/frontend/src/Cabinet/components/Card/ExtensionCard/ExtensionCard.container.tsx deleted file mode 100644 index 18958f830..000000000 --- a/frontend/src/Cabinet/components/Card/ExtensionCard/ExtensionCard.container.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { useRecoilState, useSetRecoilState } from "recoil"; -import { - currentCabinetIdState, - myCabinetInfoState, - targetCabinetInfoState, - userState, -} from "@/Cabinet/recoil/atoms"; -import ExtensionCard from "@/Cabinet/components/Card/ExtensionCard/ExtensionCard"; -import { CabinetInfo } from "@/Cabinet/types/dto/cabinet.dto"; -import { LentDto, LentExtensionDto } from "@/Cabinet/types/dto/lent.dto"; -import { axiosCabinetById } from "@/Cabinet/api/axios/axios.custom"; -import useMenu from "@/Cabinet/hooks/useMenu"; - -const ExtensionCardContainer = ({ - extensionInfo, -}: { - extensionInfo: LentExtensionDto | null; -}) => { - const { toggleCabinet, openCabinet, closeAll } = useMenu(); - const [myInfo, setMyInfo] = useRecoilState(userState); - const [currentCabinetId, setCurrentCabinetId] = useRecoilState( - currentCabinetIdState - ); - const [myCabinetInfo, setMyCabinetInfo] = useRecoilState(myCabinetInfoState); - const setTargetCabinetInfo = useSetRecoilState( - targetCabinetInfoState - ); - async function setTargetCabinetInfoToMyCabinet() { - setCurrentCabinetId(myInfo.cabinetId); - setMyInfo((prev) => ({ ...prev, cabinetId: null })); - try { - if (!myCabinetInfo?.cabinetId) return; - const { data } = await axiosCabinetById(myCabinetInfo.cabinetId); - if (data.lents.length === 0 && myInfo.cabinetId !== null) { - setMyInfo((prev) => ({ ...prev, cabinetId: null })); - } else { - const doesNameExist = data.lents.some( - (lent: LentDto) => lent.name === myInfo.name - ); - if (doesNameExist) { - setTargetCabinetInfo(data); - setCurrentCabinetId(data.cabinetId); - setMyInfo((prev) => ({ ...prev, cabinetId: data.cabinetId })); - } - } - } catch (error) { - console.log(error); - } - } - const clickMyCabinet = () => { - if (!!extensionInfo && !!myInfo.cabinetId) { - if (myInfo.cabinetId === null && !myCabinetInfo?.cabinetId) { - setTargetCabinetInfoToMyCabinet(); - toggleCabinet(); - } else if (currentCabinetId !== myInfo.cabinetId) { - setTargetCabinetInfoToMyCabinet(); - openCabinet(); - } else { - toggleCabinet(); - } - } - }; - return ( - clickMyCabinet(), - isClickable: !!extensionInfo && !!myInfo.cabinetId, - isExtensible: !!extensionInfo, - }} - /> - ); -}; - -export default ExtensionCardContainer; diff --git a/frontend/src/Cabinet/components/Card/ExtensionCard/ExtensionCard.tsx b/frontend/src/Cabinet/components/Card/ExtensionCard/ExtensionCard.tsx deleted file mode 100644 index e35446a69..000000000 --- a/frontend/src/Cabinet/components/Card/ExtensionCard/ExtensionCard.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { useState } from "react"; -import Card, { IButtonProps } from "@/Cabinet/components/Card/Card"; -import { - CardContentStyled, - CardContentWrapper, - ContentDetailStyled, - ContentInfoStyled, -} from "@/Cabinet/components/Card/CardStyles"; -import { NotificationModal } from "@/Cabinet/components/Modals/NotificationModal/NotificationModal"; -import { LentExtensionDto } from "@/Cabinet/types/dto/lent.dto"; -import { formatDate } from "@/Cabinet/utils/dateUtils"; - -interface ExtensionProps { - extensionInfo: LentExtensionDto | null; - button: IButtonProps; -} - -const NotificationModalDetail = `연장권은 매월 2일 제공되며,
이전에 받은 연장권은 사용이 불가능 합니다.
24HANE 기준 160시간을 출석한 경우,
연장권이 부여됩니다.`; - -const ExtensionCard = ({ extensionInfo, button }: ExtensionProps) => { - const [showNotificationModal, setShowNotificationModal] = - useState(false); - return ( - <> - { - setShowNotificationModal(true); - }} - gridArea={"extension"} - width={"350px"} - height={"183px"} - buttons={[button]} - > - - - 사용 기한 - - {!!extensionInfo - ? formatDate(new Date(extensionInfo.expiredAt), ".", 4, 2, 2) - : "-"} - - - - 연장 기간 - - {!!extensionInfo ? extensionInfo.extensionPeriod + "일" : "-"} - - - - - {showNotificationModal && ( - setShowNotificationModal(false)} - /> - )} - - ); -}; - -export default ExtensionCard; From 92a5c3110d85f168a02b3a6995107d13885b581e Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Tue, 20 Aug 2024 16:04:18 +0900 Subject: [PATCH 09/21] =?UTF-8?q?[FE]=20FIX:=20=EA=B3=B5=EC=9C=A0=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=ED=81=B4=EB=A6=AD=ED=96=88=EC=9D=84=EB=95=8C=20deb?= =?UTF-8?q?ounce=20=ED=95=A8=EC=88=98=20=ED=98=B8=EC=B6=9C=EC=8B=9C=20key?= =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=EC=97=90=EC=84=9C=20time=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=82=AD=EC=A0=9C#1677?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CabinetInfoArea/CountTime/CodeAndTime.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx b/frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx index 1984630d3..5535b3852 100644 --- a/frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx +++ b/frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx @@ -24,7 +24,7 @@ const CodeAndTime = ({ minutes, seconds, isTimeOver }: CountTimeProps) => { navigator.clipboard.writeText(code).then(() => { setCopySuccess(true); debounce( - "codeAndTimeCopyClick", + "codeCopyClick", () => { setCopySuccess(false); }, From 048e6c9454963b9e3d97fc9fa24c0e8b9b989349 Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Wed, 4 Sep 2024 15:00:05 +0900 Subject: [PATCH 10/21] =?UTF-8?q?[FE]=20REFACT:=20getClubInfo=EC=99=80=20c?= =?UTF-8?q?lickMoreButton=EC=9D=98=20=EC=A4=91=EB=B3=B5=EB=90=9C=20setTime?= =?UTF-8?q?out=20clickMoreButton=EC=97=90=EC=84=9C=20=EC=A0=9C=EA=B1=B0#16?= =?UTF-8?q?77?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config | 2 +- .../Club/ClubMemberList/ClubMemberList.container.tsx | 10 +--------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/config b/config index f185aa6c7..dd72d80cc 160000 --- a/config +++ b/config @@ -1 +1 @@ -Subproject commit f185aa6c734e4c7f8dd672610802e25c5c4f8d3e +Subproject commit dd72d80cce8800e34f3938f3da0dfeb4ef9eb8eb diff --git a/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx b/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx index aa08a10c2..1e5e24317 100644 --- a/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx +++ b/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx @@ -6,7 +6,6 @@ import { ClubInfoResponseDto, ClubUserResponseDto, } from "@/Cabinet/types/dto/club.dto"; -import useDebounce from "@/Cabinet/hooks/useDebounce"; import useMenu from "@/Cabinet/hooks/useMenu"; export type TClubMemberModalState = "addModal"; @@ -37,17 +36,10 @@ const ClubMemberListContainer = ({ const [targetClubUser, setTargetClubUser] = useRecoilState( targetClubUserInfoState ); - const { debounce } = useDebounce(); const clickMoreButton = () => { setIsLoading(true); - debounce( - "clubMemberList", - () => { - setPage(page + 1); - }, - 100 - ); + setPage(page + 1); }; const selectClubMemberOnClick = (member: ClubUserResponseDto) => { From 9027033d841617c68de8ed50589923e48926edef Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Fri, 6 Sep 2024 09:26:53 +0900 Subject: [PATCH 11/21] =?UTF-8?q?[FE]=20FIX:=20=EB=A9=A4=EB=B2=84=20?= =?UTF-8?q?=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20page=20=EB=B3=80=EA=B2=BD=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EB=B6=80=EB=B6=84=EC=97=90=20debounce=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9#1677?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Club/ClubMemberList/ClubMemberList.container.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx b/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx index 1e5e24317..44c6344cd 100644 --- a/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx +++ b/frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx @@ -6,6 +6,7 @@ import { ClubInfoResponseDto, ClubUserResponseDto, } from "@/Cabinet/types/dto/club.dto"; +import useDebounce from "@/Cabinet/hooks/useDebounce"; import useMenu from "@/Cabinet/hooks/useMenu"; export type TClubMemberModalState = "addModal"; @@ -27,7 +28,6 @@ const ClubMemberListContainer = ({ }: ClubMemberListContainerProps) => { const [moreButton, setMoreButton] = useState(true); const [members, setMembers] = useState([]); - // const [sortMembers, setSortMembers] = useState([]); const [clubModal, setClubModal] = useState({ addModal: false, }); @@ -36,10 +36,16 @@ const ClubMemberListContainer = ({ const [targetClubUser, setTargetClubUser] = useRecoilState( targetClubUserInfoState ); - + const { debounce } = useDebounce(); const clickMoreButton = () => { setIsLoading(true); - setPage(page + 1); + debounce( + "clubMemberList", + () => { + setPage(page + 1); + }, + 300 + ); }; const selectClubMemberOnClick = (member: ClubUserResponseDto) => { From 43debf7ed2cc53f7ad426041d2e2c49e67aae8ef Mon Sep 17 00:00:00 2001 From: chyo1 Date: Fri, 13 Sep 2024 15:04:43 +0900 Subject: [PATCH 12/21] =?UTF-8?q?[BE]=20fcm=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=9C=20dev=20=ED=99=98=EA=B2=BD=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=9E=84=EC=8B=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/org/ftclub/cabinet/alarm/config/AlarmProperties.java | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/backend/src/main/java/org/ftclub/cabinet/alarm/config/AlarmProperties.java b/backend/src/main/java/org/ftclub/cabinet/alarm/config/AlarmProperties.java index 556f30571..60bbc6692 100644 --- a/backend/src/main/java/org/ftclub/cabinet/alarm/config/AlarmProperties.java +++ b/backend/src/main/java/org/ftclub/cabinet/alarm/config/AlarmProperties.java @@ -8,8 +8,8 @@ @Getter public class AlarmProperties { - @Value("${cabinet.production}") - private Boolean isProduction; +// @Value("${cabinet.production}") + private Boolean isProduction = true; /*===================== lentSuccess =========================*/ @Value("${cabinet.alarm.mail.lentSuccess.subject}") From 5c6848138a664c7bbb92f2ad6d72c4c8f2e26b4e Mon Sep 17 00:00:00 2001 From: chyo1 Date: Fri, 13 Sep 2024 16:00:07 +0900 Subject: [PATCH 13/21] =?UTF-8?q?[BE]=20fcm=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=9C=20dev=20=ED=99=98=EA=B2=BD=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EB=B3=80=EA=B2=BD=20=ED=9B=84=20=EC=9B=90?= =?UTF-8?q?=EC=83=81=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/org/ftclub/cabinet/alarm/config/AlarmProperties.java | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/backend/src/main/java/org/ftclub/cabinet/alarm/config/AlarmProperties.java b/backend/src/main/java/org/ftclub/cabinet/alarm/config/AlarmProperties.java index 60bbc6692..556f30571 100644 --- a/backend/src/main/java/org/ftclub/cabinet/alarm/config/AlarmProperties.java +++ b/backend/src/main/java/org/ftclub/cabinet/alarm/config/AlarmProperties.java @@ -8,8 +8,8 @@ @Getter public class AlarmProperties { -// @Value("${cabinet.production}") - private Boolean isProduction = true; + @Value("${cabinet.production}") + private Boolean isProduction; /*===================== lentSuccess =========================*/ @Value("${cabinet.alarm.mail.lentSuccess.subject}") From 5276f4fa080309212ddff958737c46ab668d2989 Mon Sep 17 00:00:00 2001 From: JunSeong Date: Tue, 24 Sep 2024 16:57:27 +0900 Subject: [PATCH 14/21] =?UTF-8?q?[FE]=20BUG:=20=EB=AA=A8=EB=8B=AC=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EB=A7=81=ED=81=AC=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EC=8B=9C=20=EB=AA=A8=EB=93=A0=20=EC=B0=BD=EC=9D=84=20=EB=8B=AB?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20closeAll=20=EC=B6=94=EA=B0=80=20#1668?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/components/Modals/Modal.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/Cabinet/components/Modals/Modal.tsx b/frontend/src/Cabinet/components/Modals/Modal.tsx index a854f03a8..545b606bb 100644 --- a/frontend/src/Cabinet/components/Modals/Modal.tsx +++ b/frontend/src/Cabinet/components/Modals/Modal.tsx @@ -6,6 +6,7 @@ import Button from "@/Cabinet/components/Common/Button"; import { ReactComponent as CheckIcon } from "@/Cabinet/assets/images/checkIcon.svg"; import { ReactComponent as ErrorIcon } from "@/Cabinet/assets/images/errorIcon.svg"; import { ReactComponent as NotificationIcon } from "@/Cabinet/assets/images/notificationSign.svg"; +import useMenu from "@/Cabinet/hooks/useMenu"; import useMultiSelect from "@/Cabinet/hooks/useMultiSelect"; /** @@ -63,6 +64,7 @@ const Modal: React.FC<{ modalContents: IModalContents }> = (props) => { } = props.modalContents; const { isMultiSelect, closeMultiSelectMode } = useMultiSelect(); const navigator = useNavigate(); + const { closeAll } = useMenu(); return ( <> @@ -127,6 +129,7 @@ const Modal: React.FC<{ modalContents: IModalContents }> = (props) => { {url && urlTitle && ( { + closeAll(); navigator(url); }} > From 9720bc6f2ac4fb8b9b80feb6d271b5848e9497fd Mon Sep 17 00:00:00 2001 From: jimchoi9 <146968639+jimchoi9@users.noreply.github.com> Date: Tue, 8 Oct 2024 14:52:24 +0900 Subject: [PATCH 15/21] =?UTF-8?q?[FE]=20FEAT:=20MAIN=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=9E=AC=ED=99=94=20=EC=86=8C=EA=B0=9C=20=EC=B6=94=EA=B0=80#16?= =?UTF-8?q?81=20(#1686)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [FE] FEAT: main layout 설정 #1681 * [FE] FEAT: coinDolar.svg 아이콘 추가 #1681 * Co-authored-by: Gyeong A Koh * FE] FEAT: ManualModal 동전 사용법 모달 수정 #1681 * [FE] FEAT: main ui 티켓 디자인 v1 #1681 * FE] FEAT: ManualModal 아이템 내용추가 #1681 * [FE] FEAT: CSS clip-path 를 사용해 STORE MandualContentBox 생성 #1681 * [FE] FIX: ManualContentBox 의 CSS 모듈화 #1681 * [FE] FIX: ManualContentBox 의 CSS Map 생성 #1681 * [FE] FIX: CSS Map 을 사용해 ManualContentBoxStyled 간소화 #1681 * [FE] FEAT: 티켓 이미지 그림자 적용 #1681 * [FE] FEAT: ManualModal 아이콘 호버 효과 적용 #1681 * [FE] FEAT: 티켓 이미지 반응형 적용 #1681 * [FE] FEAT: coin manual color 적용 #1681 * [FE] FEAT: ItemContentsStyled width 수정 #1681 * [FE] FEAT: new! #1681 * [FE] FEAT: 아이콘 resizing #1681 * [FE] DOCS: 바뀐 정책에 따라 슬랙 알림 연체 문구 수정#1681 * [FE] DOCS: 슬랙 알림 문구 볼드체 적용되게 띄어쓰기 #1681 * [FE] FEAT: 사물함 대여 모달에 연체주의사항 문구 추가 #1681 * [FE] FEAT: 사물함 대여 모달에 연체주의사항 문구 띄어쓰기 수정 #1681 * [FE] FEAT: 불필요한 파일 및 코드 삭제, storeItems 배열을 manualItemsData 객체로 수정 및 적용 #1681 * [FE] FIX: ManualModal 아이템 아이콘 그림자 잘림 해결, 오타 수정 #1681 * [FE] FEAT: 사용 안하는 css 제거 #1681 --------- Co-authored-by: Minkyu01 Co-authored-by: gykoh42 Co-authored-by: jiminChoi Co-authored-by: jusohn Eddie Sohn Co-authored-by: jnkeniaem --- config | 2 +- .../src/Cabinet/assets/data/ManualContent.ts | 113 +++++++++++++++++ .../src/Cabinet/assets/data/SlackAlarm.ts | 10 +- frontend/src/Cabinet/assets/data/maps.ts | 24 +++- .../src/Cabinet/assets/images/coinDolar.svg | 5 + .../src/Cabinet/assets/images/storeAlarm.svg | 6 +- .../Cabinet/assets/images/storeExtension.svg | 10 +- .../src/Cabinet/assets/images/storeMove.svg | 12 +- .../Cabinet/assets/images/storePenalty.svg | 8 +- .../Card/StoreItemCard/StoreItemCard.tsx | 2 - .../components/Home/ManualContentBox.tsx | 91 ++++++-------- .../components/Home/ManualContentBoxStyles.ts | 97 ++++++++++++++ .../Cabinet/components/Home/ServiceManual.tsx | 68 +++++----- .../components/Modals/LentModal/LentModal.tsx | 8 +- .../Modals/ManualModal/ManualModal.tsx | 118 +++++++++++++++--- .../Store/Inventory/InventoryItem.tsx | 3 +- .../Store/ItemUsageLog/ItemLogBlock.tsx | 9 +- .../Cabinet/types/enum/content.status.enum.ts | 2 + 18 files changed, 449 insertions(+), 139 deletions(-) create mode 100644 frontend/src/Cabinet/assets/images/coinDolar.svg create mode 100644 frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts diff --git a/config b/config index dd72d80cc..93674bce3 160000 --- a/config +++ b/config @@ -1 +1 @@ -Subproject commit dd72d80cce8800e34f3938f3da0dfeb4ef9eb8eb +Subproject commit 93674bce354efe9ad8fb3a7a934bdbf5acd1d162 diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 7e92e6370..8b39bebca 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -1,9 +1,13 @@ +import { ItemIconMap } from "@/Cabinet/assets/data/maps"; import { ReactComponent as ClockImg } from "@/Cabinet/assets/images/clock.svg"; import { ReactComponent as ClubIcon } from "@/Cabinet/assets/images/clubIcon.svg"; +import { ReactComponent as DollarImg } from "@/Cabinet/assets/images/coinDolar.svg"; import { ReactComponent as ExtensionIcon } from "@/Cabinet/assets/images/extension.svg"; import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIcon.svg"; import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg"; +import { ReactComponent as StoreImg } from "@/Cabinet/assets/images/storeIconGray.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; +import { StoreItemType } from "@/Cabinet/types/enum/store.enum"; interface ContentStatusData { contentTitle: string; @@ -15,6 +19,12 @@ interface ContentStatusData { pointColor: string; } +interface ItemStatusData { + icon: React.FunctionComponent>; + title: string; + content: string; +} + export const manualContentData: Record = { [ContentStatus.PRIVATE]: { contentTitle: "개인 사물함", @@ -153,4 +163,107 @@ export const manualContentData: Record = { `, pointColor: "var(--normal-text-color)", }, + [ContentStatus.COIN]: { + contentTitle: `코인 사용법`, + iconComponent: DollarImg, + background: "var(--card-bg-color)", + contentText: `◦ 160시간 출석하기
+
+ 42 출석 160시간을 채운다면 다음달 2일에 2000까비가 지급됩니다.
+
+
+ ◦ 동전줍기
+
+ Cabi 홈페이지에 접속해, 하루에 한 번 동전을 주울 수 있습니다.
+ 한 달 동안 20개의 코인을 모두 줍는다면 랜덤 보상이 주어집니다.
+
+
+ ◦ 수요지식회 발표하기
+
+ 수요지식회 발표자 분께 1000까비를 지급해 드립니다.
+ 수요지식회 신청은 왼쪽 상단의수요지식회 홈페이지에서 신청할 수 있습니다.
+
+ + `, + pointColor: "var(--sys-default-main-color)", + }, + [ContentStatus.STORE]: { + contentTitle: "까비 상점 OPEN!", + iconComponent: StoreImg, + background: + "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", + contentText: ` + `, + pointColor: "var(--white-text-with-bg-color)", + }, +}; + +export const manualItemsData: Record = { + [StoreItemType.EXTENSION]: { + icon: ItemIconMap.EXTENSION, + title: "연장권", + content: ` + store 탭을 눌러 연장권 구매하기 버튼을 클릭 후 3일, 15일, 31일 단위로 구매할 수 있습니다.
+ 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
+
+ ◦ 사용방법
+
+ 사물함을 대여한 상태로, 상단 오른쪽의 상자 아이콘을 누르면 현재 자신의 사물함의 정보를 볼 수 있습니다.
+ 연장권 사용하기 버튼을 눌러 보유한 연장권 중 원하는 타입을 선택 후 사용합니다.
+ 이미 사용한 연장권은 취소할 수 없습니다.
+ 공유사물함의 모든 인원이 연장권을 사용할 수 있지만, 남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다. +
+ `, + }, + [StoreItemType.SWAP]: { + icon: ItemIconMap.SWAP, + title: "이사권", + content: ` + + 기존 일주일에 한 번 가능했던 이사하기 기능을 제한 없이 자유롭게 사용할 수 있습니다.
+ 현재 이용중인 사물함의 대여 기간을 유지한 채 다른 사물함으로 이사할 수 있습니다.
+ store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다. +
+ ◦ 사용방법
+
+ 개인 사물함을 이용중인 사용자만 이사권을 사용할 수 있습니다.
+ 아이템을 보유한 상태로 비어있는 개인 사물함을 눌렀을 때 이사하기 버튼이 활성화됩니다.
+ 이미 사용한 이사권은 취소할 수 없습니다.
+ +
+ `, + }, + [StoreItemType.ALARM]: { + icon: ItemIconMap.ALARM, + title: "알림 등록권", + content: ` + 내가 원하는 섹션에 빈 자리가 나온다면 알림을 받을 수 있습니다.
+ 개인사물함에 대해서만 알림을 받을 수 있습니다.
+ store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다.
+
+ ◦ 사용방법
+
+ 아이템 구매 후 원하는 섹션으로 이동해 우측 상단의 하트 아이콘을 클릭합니다.
+ 사용한 알림 등록권은 섹션을 변경하거나 취소할 수 없습니다.
+ 알림등록권은 1회 알림 후 소멸됩니다. +
+ + `, + }, + [StoreItemType.PENALTY]: { + icon: ItemIconMap.PENALTY, + title: "페널티 감면권", + content: ` + 페널티 감면권은 7일, 15일, 31일 단위로 구매할 수 있습니다.
+ 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
+
+ ◦ 사용방법
+
+ 사물함 대여 불가 페널티가 부과된 유저라면 Profile 탭을 눌러 대여정보 상자 상단의
+ 페널티 감면권 사용하기 버튼이 활성화됩니다.
+ 버튼을 눌러 내가 보유한 페널티 감면권을 선택하면, 남은 페널티 기간을 확인하실 수 있습니다.
+ 연체된 사물함을 아직 반납하지 않았다면, 우선 반납하기 버튼을 눌러야 사용 버튼이 활성화됩니다. +
+ `, + }, }; diff --git a/frontend/src/Cabinet/assets/data/SlackAlarm.ts b/frontend/src/Cabinet/assets/data/SlackAlarm.ts index 514b7e654..3def9e28e 100644 --- a/frontend/src/Cabinet/assets/data/SlackAlarm.ts +++ b/frontend/src/Cabinet/assets/data/SlackAlarm.ts @@ -27,7 +27,7 @@ export const SlackAlarmTemplates: ISlackAlarmTemplate[] = [ :happy_ccabi: 안녕하세요. Cabi 팀입니다! :happy_ccabi: :sad_ccabi: 서비스 개선을 위해, 서버를 점검하게 되었습니다. :sad_ccabi: :file_cabinet: 서비스 개선과 관련한 사항은 Cabi 채널 에서, :file_cabinet: -:hammer_and_wrench: 보관물 관련 사항은 *데스크에 직접 문의*해주세요! :hammer_and_wrench: +:hammer_and_wrench: 보관물 관련 사항은 *데스크에 직접 문의* 해주세요! :hammer_and_wrench: 점검 일자 : 2024년 04월 02일 (화요일) 점검 시간 : 15시 10분 ~ 완료 공지 시점까지 @@ -179,9 +179,9 @@ export const SlackAlarmTemplates: ISlackAlarmTemplate[] = [ { title: "연체", content: `[CABI] 안녕하세요! :embarrassed_cabi: -현재 이용 중이신 사물함이 연체인 것으로 확인되어 연락드립니다. -장기간 연체시 서비스 이용에 대한 페널티, 혹은 :tig:가 부여될 수 있음을 인지해주세요! -사물함의 대여 기간을 확인하신 후 반납 부탁드립니다. -항상 저희 서비스를 이용해 주셔서 감사합니다:)`, + 현재 이용 중이신 사물함이 *연체* 된 것으로 확인되어 연락드립니다. + *3주(21일) 이상 연체 시 미회수된 개인 물품은 폐기될 수 있음을 인지해 주세요!* + 사물함의 대여 기간을 확인하신 후 반납 부탁드립니다. + 항상 저희 서비스를 이용해 주셔서 감사합니다:)`, }, ]; diff --git a/frontend/src/Cabinet/assets/data/maps.ts b/frontend/src/Cabinet/assets/data/maps.ts index 8706697ba..a1bfdfc83 100644 --- a/frontend/src/Cabinet/assets/data/maps.ts +++ b/frontend/src/Cabinet/assets/data/maps.ts @@ -1,5 +1,13 @@ +import { css } from "styled-components"; +import { + coinBoxStyles, + extensionBoxStyles, + inSessionBoxStyles, + pendingBoxStyles, + storeBoxStyles, +} from "@/Cabinet/components/Home/ManualContentBoxStyles"; import { ReactComponent as ClubIcon } from "@/Cabinet/assets/images/clubIcon.svg"; -import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/extension.svg"; +import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/storeExtension.svg"; import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIcon.svg"; import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg"; import { ReactComponent as AlarmImg } from "@/Cabinet/assets/images/storeAlarm.svg"; @@ -7,6 +15,7 @@ import { ReactComponent as SwapImg } from "@/Cabinet/assets/images/storeMove.svg import { ReactComponent as PenaltyImg } from "@/Cabinet/assets/images/storePenalty.svg"; import CabinetStatus from "@/Cabinet/types/enum/cabinet.status.enum"; import CabinetType from "@/Cabinet/types/enum/cabinet.type.enum"; +import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; import { StoreExtensionType, StoreItemType, @@ -267,3 +276,16 @@ export const ItemTypeExtensionMap = { [StoreExtensionType.EXTENSION_15]: "15일", [StoreExtensionType.EXTENSION_31]: "31일", }; + +export const ContentStatusStylesMap: { + [key in ContentStatus]: any; +} = { + [ContentStatus.EXTENSION]: extensionBoxStyles, + [ContentStatus.STORE]: storeBoxStyles, + [ContentStatus.COIN]: coinBoxStyles, + [ContentStatus.PENDING]: pendingBoxStyles, + [ContentStatus.IN_SESSION]: inSessionBoxStyles, + [ContentStatus.PRIVATE]: css``, + [ContentStatus.SHARE]: css``, + [ContentStatus.CLUB]: css``, +}; diff --git a/frontend/src/Cabinet/assets/images/coinDolar.svg b/frontend/src/Cabinet/assets/images/coinDolar.svg new file mode 100644 index 000000000..72f985b8f --- /dev/null +++ b/frontend/src/Cabinet/assets/images/coinDolar.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/Cabinet/assets/images/storeAlarm.svg b/frontend/src/Cabinet/assets/images/storeAlarm.svg index fdec88cdb..deb44a952 100644 --- a/frontend/src/Cabinet/assets/images/storeAlarm.svg +++ b/frontend/src/Cabinet/assets/images/storeAlarm.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/frontend/src/Cabinet/assets/images/storeExtension.svg b/frontend/src/Cabinet/assets/images/storeExtension.svg index 91c16096c..d97f6f116 100644 --- a/frontend/src/Cabinet/assets/images/storeExtension.svg +++ b/frontend/src/Cabinet/assets/images/storeExtension.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/frontend/src/Cabinet/assets/images/storeMove.svg b/frontend/src/Cabinet/assets/images/storeMove.svg index 4500e4867..f87ec2c31 100644 --- a/frontend/src/Cabinet/assets/images/storeMove.svg +++ b/frontend/src/Cabinet/assets/images/storeMove.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/frontend/src/Cabinet/assets/images/storePenalty.svg b/frontend/src/Cabinet/assets/images/storePenalty.svg index 158760b33..9838cbd18 100644 --- a/frontend/src/Cabinet/assets/images/storePenalty.svg +++ b/frontend/src/Cabinet/assets/images/storePenalty.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/frontend/src/Cabinet/components/Card/StoreItemCard/StoreItemCard.tsx b/frontend/src/Cabinet/components/Card/StoreItemCard/StoreItemCard.tsx index 717e0c2df..17b021574 100644 --- a/frontend/src/Cabinet/components/Card/StoreItemCard/StoreItemCard.tsx +++ b/frontend/src/Cabinet/components/Card/StoreItemCard/StoreItemCard.tsx @@ -137,8 +137,6 @@ const ItemIconStyled = styled.div<{ itemType: StoreItemType }>` & > svg > path { stroke: var(--white-text-with-bg-color); - stroke-width: ${(props) => - props.itemType === StoreItemType.EXTENSION ? "2.8px" : "1.5px"}; } `; diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index 5f4885e30..2f973569d 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -1,18 +1,19 @@ import styled, { css, keyframes } from "styled-components"; import { manualContentData } from "@/Cabinet/assets/data/ManualContent"; +import { ContentStatusStylesMap } from "@/Cabinet/assets/data/maps"; import { ReactComponent as ManualPeopleImg } from "@/Cabinet/assets/images/manualPeople.svg"; import { ReactComponent as MoveBtnImg } from "@/Cabinet/assets/images/moveButton.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; -interface MaunalContentBoxProps { +interface ManualContentBoxProps { contentStatus: ContentStatus; } -const MaunalContentBox = ({ contentStatus }: MaunalContentBoxProps) => { +const ManualContentBox = ({ contentStatus }: ManualContentBoxProps) => { const contentData = manualContentData[contentStatus]; return ( - @@ -23,15 +24,13 @@ const MaunalContentBox = ({ contentStatus }: MaunalContentBoxProps) => { contentData.iconComponent && ( )} + - {contentStatus === ContentStatus.IN_SESSION && - contentData.iconComponent && ( - - )}

{contentData.contentTitle}

+ - + ); }; @@ -41,7 +40,7 @@ const Rotation = keyframes` } `; -const MaunalContentBoxStyled = styled.div<{ +const ManualContentBoxStyled = styled.div<{ background: string; contentStatus: ContentStatus; }>` @@ -59,12 +58,14 @@ const MaunalContentBoxStyled = styled.div<{ font-weight: bold; cursor: pointer; + ${(props) => ContentStatusStylesMap[props.contentStatus]} + .clockImg { width: 35px; margin-right: 10px; margin-top: 160px; animation: ${Rotation} 1s linear infinite; - stroke: var(--sys-main-color); + stroke: var(--sys-default-main-color); } .contentImg { @@ -73,8 +74,8 @@ const MaunalContentBoxStyled = styled.div<{ & > path { stroke: ${(props) => - props.contentStatus === ContentStatus.EXTENSION - ? "var(--normal-text-color)" + props.contentStatus === ContentStatus.COIN + ? "var(--sys-default-main-color)" : "var(--white-text-with-bg-color)"}; } } @@ -86,44 +87,17 @@ const MaunalContentBoxStyled = styled.div<{ position: absolute; right: 100px; bottom: 30px; - fill: var(--sys-main-color); + fill: var(--sys-def-main-color); } - ${({ contentStatus }) => - contentStatus === ContentStatus.PENDING && - css` - border: 5px double var(--sys-main-color); - box-shadow: inset 0px 0px 0px 5px var(--bg-color); - `} - - ${({ contentStatus }) => - contentStatus === ContentStatus.IN_SESSION && - css` - border: 5px solid var(--sys-main-color); - color: var(--sys-main-color); - `} - - ${({ contentStatus }) => - contentStatus === ContentStatus.EXTENSION && - css` - width: 900px; - color: var(--normal-text-color); - @media screen and (max-width: 1000px) { - width: 280px; - .peopleImg { - display: none; - } - font-size: 21px; - } - `} - - p { + p { margin-top: 90px; ${({ contentStatus }) => (contentStatus === ContentStatus.PENDING || + contentStatus === ContentStatus.COIN || contentStatus === ContentStatus.IN_SESSION) && css` - margin-top: 160px; + color: var(--sys-default-main-color); `} } @@ -134,34 +108,42 @@ const MaunalContentBoxStyled = styled.div<{ right: 35px; bottom: 35px; stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION - ? "var(--sys-main-color)" + props.contentStatus === ContentStatus.COIN + ? "var(--sys-default-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" : "var(--white-text-with-bg-color)"}; cursor: pointer; } - :hover { + &:hover { transition: all 0.3s ease-in-out; ${({ contentStatus }) => contentStatus === ContentStatus.PENDING ? css` - border: 5px double var(--sys-main-color); - box-shadow: inset 0px 0px 0px 5px var(--bg-color), - 10px 10px 25px 0 var(--left-nav-border-shadow-color); + border: 5px double var(--sys-default-main-color); + box-shadow: inset 0px 0px 0px 5px var(--bg-color); + filter: drop-shadow( + 10px 10px 10px var(--left-nav-border-shadow-color) + ); ` + : contentStatus === ContentStatus.STORE + ? css`` // No box-shadow or filter for STORE status : css` - box-shadow: 10px 10px 25px 0 var(--left-nav-border-shadow-color); + filter: drop-shadow( + 10px 10px 10px var(--left-nav-border-shadow-color) + ); `} + p { transition: all 0.3s ease-in-out; transform: translateY(-5px); ${({ contentStatus }) => (contentStatus === ContentStatus.PENDING || + contentStatus === ContentStatus.COIN || contentStatus === ContentStatus.IN_SESSION) && css` - margin-top: 155px; + color: var(--sys-default-main-color); `} } .clockImg { @@ -174,6 +156,11 @@ const MaunalContentBoxStyled = styled.div<{ const ContentTextStyled = styled.div` display: flex; align-items: center; + + & > span { + font-weight: 400; + font-size: 1rem; + } `; -export default MaunalContentBox; +export default ManualContentBox; diff --git a/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts new file mode 100644 index 000000000..99c3489d6 --- /dev/null +++ b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts @@ -0,0 +1,97 @@ +import { css } from "styled-components"; + +export const extensionBoxStyles = css` + width: 900px; + color: var(--normal-text-color); + @media screen and (max-width: 1000px) { + width: 280px; + font-size: 21px; + } +`; + +export const storeBoxStyles = css` + width: 620px; + height: 280px; + position: relative; + background: linear-gradient( + to bottom, + var(--ref-purple-400), + var(--ref-purple-600) + ); + border-radius: 40px; + clip-path: path( + "M 0 163.33 + A 23.33 23.33 1 0 0 0 116.67 + L 0 0 + L 396.56 0 + L 413.354 15.67 + L 430.148 0 + L 620 0 + L 620 280 + L 430.148 280 + L 413.354 264.33 + L 396.56 280 + L 0 280 + Z" + ); + /* Explanation of path: + - M 0 175: Move to (0, 175) + - A 25 25 1 0 0 0 125: Draw an arc with radius 25, starting from (0, 175) to (0, 125) // radius-x, radius-y, x-axis-rotation, large-arc-flag, sweep-flag, x, y + - L 0 0: Draw a line from (0, 125) to (0, 0) + - L 396.56 0: Draw a line from (0, 0) to (396.56, 0) + - L 413.354 16.794: Draw a line from (396.56, 0) to (413.354, 16.794) + - L 430.148 0: Draw a line from (413.354, 16.794) to (430.148, 0) + - L 620 0: Draw a line from (430.148, 0) to (620, 0) + - L 620 300: Draw a line from (620, 0) to (620, 300) + - L 430.148 300: Draw a line from (620, 300) to (430.148, 300) + - L 413.354 283.206: Draw a line from (430.148, 300) to (413.354, 283.206) + - L 396.56 300: Draw a line from (413.354, 283.206) to (396.56, 300) + - L 0 300: Draw a line from (396.56, 300) to (0, 300) + - Z: Close the path + */ + &:after { + content: ""; + position: absolute; + top: 25px; + right: 32.99%; /* 2/3 point */ + height: 100%; + width: 4px; + background-image: linear-gradient( + to bottom, + white 33%, + rgba(255, 255, 255, 0) 0% + ); + background-position: right; + background-size: 10px 30px; + background-repeat: repeat-y; + } + @media screen and (max-width: 1100px) { + width: 280px; + font-size: 21px; + clip-path: none; + + &:after { + display: none; + } + } +`; + +export const coinBoxStyles = css` + border: 5px solid var(--sys-default-main-color); + color: var(--sys-main-color); +`; + +export const pendingBoxStyles = css` + border: 6px double var(--sys-main-color); + box-shadow: inset 0px 0px 0px 5px var(--bg-color); +`; + +export const inSessionBoxStyles = css` + border: 5px solid var(--sys-main-color); + color: var(--sys-main-color); +`; + +export const privateBoxStyles = css` + /* border: 5px solid var(--sys-main-color); + color: var(--sys-main-color); */ +`; diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index 94f766f70..ccf8c876c 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import styled from "styled-components"; -import MaunalContentBox from "@/Cabinet/components/Home/ManualContentBox"; +import ManualContentBox from "@/Cabinet/components/Home/ManualContentBox"; import ManualModal from "@/Cabinet/components/Modals/ManualModal/ManualModal"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; @@ -36,62 +36,53 @@ const ServiceManual = ({

- 가능성의 확장 + 당신의 사물함
- 개인, 공유, 동아리 사물함. + 당신의 방식으로,

+
openModal(ContentStatus.PRIVATE)} - > - -
-
openModal(ContentStatus.SHARE)} - > - -
-
openModal(ContentStatus.CLUB)} + onClick={() => openModal(ContentStatus.COIN)} > - + +

new

+ +
openModal(ContentStatus.STORE)} + > + +

new

+
+ +

- 공정한 대여를 위한 + 가능성의 확장
- 새로운 사물함 서비스. + 개인, 공유, 동아리 사물함.

openModal(ContentStatus.PENDING)} + onClick={() => openModal(ContentStatus.PRIVATE)} > - -

new

+
openModal(ContentStatus.IN_SESSION)} + onClick={() => openModal(ContentStatus.SHARE)} > - -

new

+
- -

- 사물함을 더 오래 -
- 사용할 수 있는 방법. -

-
openModal(ContentStatus.EXTENSION)} + onClick={() => openModal(ContentStatus.CLUB)} > - +
@@ -107,6 +98,15 @@ const ServiceManual = ({ ); }; +const TicketWrapperStyled = styled.div` + width: 620px; + &:hover { + transition: all 0.3s ease-in-out; + transform: translateY(-5px); + filter: drop-shadow(10px 10px 10px var(--left-nav-border-shadow-color)); + } +`; + const WrapperStyled = styled.div` display: flex; flex-direction: column; diff --git a/frontend/src/Cabinet/components/Modals/LentModal/LentModal.tsx b/frontend/src/Cabinet/components/Modals/LentModal/LentModal.tsx index 614cfaafa..556af4a8e 100644 --- a/frontend/src/Cabinet/components/Modals/LentModal/LentModal.tsx +++ b/frontend/src/Cabinet/components/Modals/LentModal/LentModal.tsx @@ -46,7 +46,9 @@ const LentModal: React.FC<{ const formattedExpireDate = getExpireDateString(props.lentType); const privateLentDetail = `대여기간은 ${formattedExpireDate} 23:59까지 입니다. - 귀중품 분실 및 메모 내용의 유출에 책임지지 않습니다.`; + 귀중품 분실 및 메모 내용의 유출에 책임지지 않습니다. + 3주(21일) 이상 연체 시 사물함은 강제 반납되며 + 미회수된 개인 물품은 폐기될 수 있습니다.`; const shareLentDetail = `대여 후 ${ 10 // import.meta.env.VITE_SHARE_LENT_COUNTDOWN // TODO: .env 에 등록하기 @@ -54,7 +56,9 @@ const LentModal: React.FC<{ 공유 인원 (2인~4인) 이 충족되지 않으면, 공유 사물함의 대여가 취소됩니다. “메모 내용”은 공유 인원끼리 공유됩니다. - 귀중품 분실 및 메모 내용의 유출에 책임지지 않습니다.`; + 귀중품 분실 및 메모 내용의 유출에 책임지지 않습니다. + 3주(21일) 이상 연체 시 사물함은 강제 반납되며 + 미회수된 개인 물품은 폐기될 수 있습니다.`; const tryLentRequest = async (e: React.MouseEvent) => { setIsLoading(true); try { diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index 494d11383..a238f8fb1 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -1,9 +1,13 @@ import React from "react"; import { useState } from "react"; import styled, { keyframes } from "styled-components"; -import { manualContentData } from "@/Cabinet/assets/data/ManualContent"; +import { + manualContentData, + manualItemsData, +} from "@/Cabinet/assets/data/ManualContent"; import { ReactComponent as MoveBtnImg } from "@/Cabinet/assets/images/moveButton.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; +import { StoreItemType } from "@/Cabinet/types/enum/store.enum"; interface ModalProps { contentStatus: ContentStatus; @@ -15,6 +19,9 @@ const ManualModal: React.FC = ({ setIsModalOpen, }) => { const [modalIsOpen, setModalIsOpen] = useState(true); + const [selectedItem, setSelectedItem] = useState( + StoreItemType.EXTENSION + ); const contentData = manualContentData[contentStatus]; const isCabinetType = @@ -28,6 +35,10 @@ const ManualModal: React.FC = ({ contentStatus === ContentStatus.SHARE || contentStatus === ContentStatus.CLUB; + const handleIconClick = (index: StoreItemType) => { + setSelectedItem(index); + }; + const closeModal = () => { if (modalIsOpen) { setModalIsOpen(false); @@ -76,12 +87,40 @@ const ManualModal: React.FC = ({ )} )} - {contentData.contentTitle} - -
- + {contentStatus === ContentStatus.STORE && ( + <> + + {Object.entries(manualItemsData).map(([key, item]) => ( + handleIconClick(key as StoreItemType)} + className={selectedItem === key ? "selected" : ""} + color={contentData.pointColor} + > + + + ))} + + {manualItemsData[selectedItem].title} + +
+ + + )} + {contentStatus !== ContentStatus.STORE && ( + <> + {contentData.contentTitle} + +
+ + + )} @@ -144,9 +183,10 @@ const ModalWrapper = styled.div<{ border-radius: 40px 40px 0 0; border: ${(props) => props.contentStatus === ContentStatus.PENDING - ? "5px double var(--sys-main-color)" - : props.contentStatus === ContentStatus.IN_SESSION - ? "5px solid var(--sys-main-color)" + ? "5px double var(--sys-default-main-color)" + : props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN + ? "5px solid var(--sys-default-main-color)" : "none"}; box-shadow: ${(props) => props.contentStatus === ContentStatus.PENDING && @@ -166,8 +206,9 @@ const ModalContent = styled.div<{ display: flex; flex-direction: column; color: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION - ? "var(--sys-main-color)" + props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN + ? "var(--sys-default-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" : "var(--white-text-with-bg-color)"}; @@ -188,8 +229,9 @@ const ModalContent = styled.div<{ } .moveButton { stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION - ? "var(--sys-main-color)" + props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN + ? "var(--sys-default-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" : "var(--white-text-with-bg-color)"}; @@ -210,8 +252,9 @@ const CloseButton = styled.div<{ svg { transform: scaleX(-1); stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION - ? "var(--sys-main-color)" + props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN + ? "var(--sys-default-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" : "var(--bg-color)"}; @@ -269,7 +312,7 @@ const BoxInfo2 = styled.div` } `; -const ManualContentStyeld = styled.div<{ +const ManualContentStyled = styled.div<{ color: string; }>` margin: 40px 0 0 20px; @@ -330,4 +373,45 @@ const ContentImgStyled = styled.div<{ } `; +const ItemContentsStyled = styled.div` + width: 45%; + height: 90px; + display: flex; + margin-bottom: 30px; +`; + +const ItemIconStyled = styled.div<{ + color: string; +}>` + width: 80px; + height: 80px; + margin-right: 10px; + display: flex; + justify-content: center; + align-items: center; + + & > svg { + padding: 4px; + width: 80px; + height: 80px; + cursor: pointer; + stroke-width: 50px; + & > path { + transform: scale(2); + stroke: var(--ref-purple-690); + } + } + + &:hover:not(.selected), + &.selected > svg { + width: 80px; + height: 80px; + filter: drop-shadow(0px 5px 3px var(--hover-box-shadow-color)); + transition: all 0.2s ease; + & > path { + stroke: ${(props) => props.color}; + } + } +`; + export default ManualModal; diff --git a/frontend/src/Cabinet/components/Store/Inventory/InventoryItem.tsx b/frontend/src/Cabinet/components/Store/Inventory/InventoryItem.tsx index e15a09d89..340134de8 100644 --- a/frontend/src/Cabinet/components/Store/Inventory/InventoryItem.tsx +++ b/frontend/src/Cabinet/components/Store/Inventory/InventoryItem.tsx @@ -170,8 +170,7 @@ const ItemIconStyled = styled.div<{ itemType: StoreItemType }>` & > svg > path { stroke: var(--sys-main-color); - stroke-width: ${(props) => - props.itemType === StoreItemType.EXTENSION ? "2.8px" : "1.5px"}; + stroke-width: "1.5px"; } `; diff --git a/frontend/src/Cabinet/components/Store/ItemUsageLog/ItemLogBlock.tsx b/frontend/src/Cabinet/components/Store/ItemUsageLog/ItemLogBlock.tsx index b82eacb00..b6a2fae71 100644 --- a/frontend/src/Cabinet/components/Store/ItemUsageLog/ItemLogBlock.tsx +++ b/frontend/src/Cabinet/components/Store/ItemUsageLog/ItemLogBlock.tsx @@ -50,14 +50,13 @@ const IconBlockStyled = styled.div<{ itemName: string }>` svg { width: 40px; height: 40px; + transform-origin: center; } - & > svg > path { + & > svg > * { + transform: scale(1.25); stroke: var(--white-text-with-bg-color); - stroke-width: ${(props) => - props.itemName === ItemTypeLabelMap[StoreItemType.EXTENSION] - ? "3px" - : "1.5px"}; + stroke-width: "1.5px"; } `; diff --git a/frontend/src/Cabinet/types/enum/content.status.enum.ts b/frontend/src/Cabinet/types/enum/content.status.enum.ts index cb348bd85..535867bca 100644 --- a/frontend/src/Cabinet/types/enum/content.status.enum.ts +++ b/frontend/src/Cabinet/types/enum/content.status.enum.ts @@ -5,6 +5,8 @@ export enum ContentStatus { PENDING = "PENDING", IN_SESSION = "IN_SESSION", EXTENSION = "EXTENSION", + COIN = "COIN", + STORE = "STORE", } export default ContentStatus; From 919b305041b5b36c4c88f25c37320ab85ba841a5 Mon Sep 17 00:00:00 2001 From: chyo1 Date: Tue, 8 Oct 2024 15:02:49 +0900 Subject: [PATCH 16/21] =?UTF-8?q?[BE]=20=EC=9D=B4=EC=9A=A9=20=EC=A0=95?= =?UTF-8?q?=EC=A7=80=20=EC=B5=9C=EB=8C=80=20=EA=B8=B0=ED=95=9C=20180?= =?UTF-8?q?=EC=9D=BC=EB=A1=9C=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/org/ftclub/cabinet/user/service/BanPolicyService.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/src/main/java/org/ftclub/cabinet/user/service/BanPolicyService.java b/backend/src/main/java/org/ftclub/cabinet/user/service/BanPolicyService.java index f856b75c1..3df7b51f7 100644 --- a/backend/src/main/java/org/ftclub/cabinet/user/service/BanPolicyService.java +++ b/backend/src/main/java/org/ftclub/cabinet/user/service/BanPolicyService.java @@ -20,7 +20,7 @@ public BanType verifyBan(LocalDateTime endedAt, LocalDateTime expiredAt) { public LocalDateTime getUnBannedAt(LocalDateTime endedAt, LocalDateTime expiredAt) { long recentBanDays = DateUtil.calculateTwoDateDiffCeil(expiredAt, endedAt); - double squaredBanDays = Math.pow(recentBanDays, 2); + double squaredBanDays = Math.min(Math.pow(recentBanDays, 2), 180); return endedAt.plusDays((long) squaredBanDays); } } From bcf8c5428a7ee2122c3f74d2a33c98282904bb15 Mon Sep 17 00:00:00 2001 From: Jihyun Kim Date: Tue, 8 Oct 2024 21:02:25 +0900 Subject: [PATCH 17/21] =?UTF-8?q?[FE]=20FIX:=20=EB=A1=9C=EB=94=A9=20?= =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=9E=91?= =?UTF-8?q?=EB=8F=99=20=EC=8B=9C,=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=ED=95=98=EA=B8=B0=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?css=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/components/Common/LoadingAnimation.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/Cabinet/components/Common/LoadingAnimation.tsx b/frontend/src/Cabinet/components/Common/LoadingAnimation.tsx index f0b636b88..c458265fc 100644 --- a/frontend/src/Cabinet/components/Common/LoadingAnimation.tsx +++ b/frontend/src/Cabinet/components/Common/LoadingAnimation.tsx @@ -13,6 +13,7 @@ const LoadingAnimationWrapperStyled = styled.div` width: 100%; height: 100%; display: flex; + overflow-y: hidden; justify-content: center; align-items: center; `; From 1b0744818a5a045c7f6fd76433dee6129d90f004 Mon Sep 17 00:00:00 2001 From: Jihyun Kim Date: Tue, 8 Oct 2024 21:27:40 +0900 Subject: [PATCH 18/21] =?UTF-8?q?[FE]=20FIX:=20=EC=83=88=EB=A1=9C=EA=B3=A0?= =?UTF-8?q?=EC=B9=A8=20=EC=8B=9C=20=EB=82=98=ED=83=80=EB=82=98=EB=8A=94=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EC=9C=84=ED=95=9C=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/pages/MainPage.tsx | 119 +++++++++--------- .../src/Cabinet/pages/admin/AdminMainPage.tsx | 73 ++++++----- 2 files changed, 95 insertions(+), 97 deletions(-) diff --git a/frontend/src/Cabinet/pages/MainPage.tsx b/frontend/src/Cabinet/pages/MainPage.tsx index dc73bc107..506e99c1f 100644 --- a/frontend/src/Cabinet/pages/MainPage.tsx +++ b/frontend/src/Cabinet/pages/MainPage.tsx @@ -123,66 +123,65 @@ const MainPage = () => { setIsCurrentSectionRender(false); }; - return ( - <> - {isLoading && } - { - touchStartPosX.current = e.changedTouches[0].screenX; - touchStartPosY.current = e.changedTouches[0].screenY; - }} - onTouchEnd={(e: React.TouchEvent) => { - swipeSection( - e.changedTouches[0].screenX, - e.changedTouches[0].screenY - ); - }} - > - - {currentFloorSectionNames.includes(currentSectionName) && - !isClubSection && ( - - {sectionList[currentSectionIndex]?.alarmRegistered === true ? ( - - ) : ( - - )} - - )} - - - - - {currentSectionName !== SectionType.elevator && - currentSectionName !== SectionType.stairs && ( - - 새로고침 - - )} - - {showSectionAlertModal && ( - - )} - - + return isLoading ? ( + + ) : ( + { + touchStartPosX.current = e.changedTouches[0].screenX; + touchStartPosY.current = e.changedTouches[0].screenY; + }} + onTouchEnd={(e: React.TouchEvent) => { + swipeSection( + e.changedTouches[0].screenX, + e.changedTouches[0].screenY + ); + }} + > + + {currentFloorSectionNames.includes(currentSectionName) && + !isClubSection && ( + + {sectionList[currentSectionIndex]?.alarmRegistered === true ? ( + + ) : ( + + )} + + )} + + + + + {currentSectionName !== SectionType.elevator && + currentSectionName !== SectionType.stairs && ( + + 새로고침 + + )} + + {showSectionAlertModal && ( + + )} + ); }; diff --git a/frontend/src/Cabinet/pages/admin/AdminMainPage.tsx b/frontend/src/Cabinet/pages/admin/AdminMainPage.tsx index de410c157..adc495cb1 100644 --- a/frontend/src/Cabinet/pages/admin/AdminMainPage.tsx +++ b/frontend/src/Cabinet/pages/admin/AdminMainPage.tsx @@ -93,44 +93,43 @@ const AdminMainPage = () => { else moveToRightSection(); }; - return ( - <> - {isLoading && } - { - touchStartPosX.current = e.changedTouches[0].screenX; - touchStartPosY.current = e.changedTouches[0].screenY; - }} - onTouchEnd={(e: React.TouchEvent) => { - swipeSection( - e.changedTouches[0].screenX, - e.changedTouches[0].screenY - ); - }} - > - - - - - - + return isLoading ? ( + + ) : ( + { + touchStartPosX.current = e.changedTouches[0].screenX; + touchStartPosY.current = e.changedTouches[0].screenY; + }} + onTouchEnd={(e: React.TouchEvent) => { + swipeSection( + e.changedTouches[0].screenX, + e.changedTouches[0].screenY + ); + }} + > + + + + + + - - 새로고침 - - - - + + 새로고침 + + + ); }; From 08660f1b765a2e62e1424b3855527d1f5aafbd36 Mon Sep 17 00:00:00 2001 From: Jihyun Kim Date: Thu, 10 Oct 2024 14:44:52 +0900 Subject: [PATCH 19/21] =?UTF-8?q?[FE]=20REFACTOR:=20=ED=95=84=EC=9A=94?= =?UTF-8?q?=EC=97=86=EB=8A=94=20css=20=EC=86=8D=EC=84=B1=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/components/Common/LoadingAnimation.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/Cabinet/components/Common/LoadingAnimation.tsx b/frontend/src/Cabinet/components/Common/LoadingAnimation.tsx index c458265fc..f0b636b88 100644 --- a/frontend/src/Cabinet/components/Common/LoadingAnimation.tsx +++ b/frontend/src/Cabinet/components/Common/LoadingAnimation.tsx @@ -13,7 +13,6 @@ const LoadingAnimationWrapperStyled = styled.div` width: 100%; height: 100%; display: flex; - overflow-y: hidden; justify-content: center; align-items: center; `; From cf02deaa54943d707a7f799ae5d47fd6e9562f1c Mon Sep 17 00:00:00 2001 From: jusohn Eddie Sohn Date: Tue, 22 Oct 2024 15:25:08 +0900 Subject: [PATCH 20/21] =?UTF-8?q?[FE]=20HOTFIX:=20AvailablePage=20?= =?UTF-8?q?=EC=97=90=EC=84=9C=204=EC=B8=B5=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/pages/AvailablePage.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/frontend/src/Cabinet/pages/AvailablePage.tsx b/frontend/src/Cabinet/pages/AvailablePage.tsx index 82ebd53ff..9ec0be173 100644 --- a/frontend/src/Cabinet/pages/AvailablePage.tsx +++ b/frontend/src/Cabinet/pages/AvailablePage.tsx @@ -29,6 +29,9 @@ const toggleList: toggleItem[] = [ { name: "공유", key: AvailableCabinetsType.SHARE }, ]; +/* TODO: DISABLED_FLOOR 을 환경변수로 넣기 */ +export const DISABLED_FLOOR = ["4"]; + const AvailablePage = () => { const [toggleType, setToggleType] = useState( AvailableCabinetsType.ALL @@ -153,13 +156,15 @@ const AvailablePage = () => { {Object.keys(cabinets).length ? ( - Object.entries(cabinets).map(([key, value]) => ( - - )) + Object.entries(cabinets) + .filter(([key, _]) => !DISABLED_FLOOR.includes(key)) + .map(([key, value]) => ( + + )) ) : ( )} From 66db19c10311e427f079767b028e6462f036d407 Mon Sep 17 00:00:00 2001 From: jusohn Eddie Sohn Date: Tue, 22 Oct 2024 15:25:33 +0900 Subject: [PATCH 21/21] =?UTF-8?q?[FE]=20HOTFIX:=204=EC=B8=B5=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=95=8C=EB=A6=BC=EA=B6=8C=EC=9D=84=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=A7=80=20=EB=AA=BB=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/pages/MainPage.tsx | 26 +++++++++++-------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/frontend/src/Cabinet/pages/MainPage.tsx b/frontend/src/Cabinet/pages/MainPage.tsx index 506e99c1f..c98123f84 100644 --- a/frontend/src/Cabinet/pages/MainPage.tsx +++ b/frontend/src/Cabinet/pages/MainPage.tsx @@ -12,6 +12,7 @@ import { targetCabinetInfoState, } from "@/Cabinet/recoil/atoms"; import { currentFloorSectionState } from "@/Cabinet/recoil/selectors"; +import { DISABLED_FLOOR } from "@/Cabinet/pages/AvailablePage"; import CabinetListContainer from "@/Cabinet/components/CabinetList/CabinetList.container"; import LoadingAnimation from "@/Cabinet/components/Common/LoadingAnimation"; import SectionAlertModal from "@/Cabinet/components/Modals/StoreModal/SectionAlertModal"; @@ -74,11 +75,9 @@ const MainPage = () => { }, []); useEffect(() => { - const clubSection = clubSectionsData.find((section) => { + const clubSection = !!clubSectionsData.find((section) => { return section === currentSectionName; - }) - ? true - : false; + }); setIsClubSection(clubSection); }, [currentSectionName]); @@ -133,22 +132,15 @@ const MainPage = () => { touchStartPosY.current = e.changedTouches[0].screenY; }} onTouchEnd={(e: React.TouchEvent) => { - swipeSection( - e.changedTouches[0].screenX, - e.changedTouches[0].screenY - ); + swipeSection(e.changedTouches[0].screenX, e.changedTouches[0].screenY); }} > - + {currentFloorSectionNames.includes(currentSectionName) && !isClubSection && ( {sectionList[currentSectionIndex]?.alarmRegistered === true ? ( @@ -228,7 +220,11 @@ const IconWrapperStyled = styled.div<{ disabled: boolean }>` } `; -const AlertStyled = styled.div` +const AlertStyled = styled.div<{ currentFloor: number }>` + visibility: ${(props) => + DISABLED_FLOOR.includes(props.currentFloor.toString()) + ? "hidden" + : "visible"}; height: 30px; display: flex; justify-content: end;