From 76368091bab2689546ad412a7ac1d8d166357856 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Mon, 15 Jan 2024 02:04:19 +0900 Subject: [PATCH 1/7] design: add zero candidates state --- .../VoteMeatball/VoteMeatball.module.scss | 4 ++++ .../VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx | 5 +++-- src/pages/Vote/Vote.tsx | 7 ++++++- src/types/vote.ts | 1 + 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.module.scss b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.module.scss index cf5da3a1..5a12608a 100644 --- a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.module.scss +++ b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.module.scss @@ -13,5 +13,9 @@ display: flex; gap: 10px; + + &:disabled { + color: $neutral400; + } } } diff --git a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx index 505a66fc..191dcb86 100644 --- a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx +++ b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx @@ -21,10 +21,9 @@ import { import { AlertModalProps, VoteMeatballProps } from "@/types/vote"; -const VoteMeatball = ({ state }: VoteMeatballProps) => { +const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => { const setIsBTOpen = useSetRecoilState(isBottomSlideOpenState); const setIsModalOpen = useSetRecoilState(isModalOpenState); - const [modalProps, setModalProps] = useState( retryVoteContent, ); @@ -52,6 +51,7 @@ const VoteMeatball = ({ state }: VoteMeatballProps) => { ) : ( + + + ); +}; + +export default DeleteCandidatesButton; diff --git a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx index 191dcb86..e77249e0 100644 --- a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx +++ b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx @@ -9,12 +9,14 @@ import CheckIcon from "@/assets/voteIcons/vote_check.svg?react"; import EditIcon from "@/assets/voteIcons/vote_edit.svg?react"; import RepeatIcon from "@/assets/voteIcons/vote_repeat.svg?react"; import TrashIcon from "@/assets/voteIcons/vote_trash.svg?react"; -import { isModalOpenState } from "@/recoil/vote/alertModal"; +import { + isCandidateSelectingState, + isModalOpenState, +} from "@/recoil/vote/alertModal"; import { isBottomSlideOpenState } from "@/recoil/vote/bottomSlide"; import { confirmVoteContent, - deleteCandidateContent, deleteVoteContent, retryVoteContent, } from "./modalContent"; @@ -24,6 +26,7 @@ import { AlertModalProps, VoteMeatballProps } from "@/types/vote"; const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => { const setIsBTOpen = useSetRecoilState(isBottomSlideOpenState); const setIsModalOpen = useSetRecoilState(isModalOpenState); + const setIsCandidateSelecting = useSetRecoilState(isCandidateSelectingState); const [modalProps, setModalProps] = useState( retryVoteContent, ); @@ -38,6 +41,12 @@ const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => { setIsBTOpen(false); }; + const changeToCandidateSelecting = () => { + setIsCandidateSelecting(true); + console.log("체체체체인지"); + setIsBTOpen(false); + }; + return (
{state === "결정완료" ? ( @@ -68,18 +77,21 @@ const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => {

투표 제목 수정

+ + )}
- -
- {candidates ? ( - candidates.map((candidate, i) => ( -
- -
- -
- {candidate.memo} -
-
-
- )) - ) : ( - - )} -
+ + {/* 후보지&여행지 X -> 상품 추천 없음 */} + {isCandidateSelecting && } ); }; diff --git a/src/mocks/handlers/vote.ts b/src/mocks/handlers/vote.ts index e2842bf1..3780a480 100644 --- a/src/mocks/handlers/vote.ts +++ b/src/mocks/handlers/vote.ts @@ -12,7 +12,7 @@ const candidateData = [ voteUserId: ["Id123", "Id234", "Id345"], voteCounts: 3, memo: "예쁨~~~~~~~~~", - id: 1, + id: 111, }, { name: "니은펜션", @@ -23,7 +23,7 @@ const candidateData = [ voteUserId: ["Id123", "Id345"], voteCounts: 2, memo: "여기 개쩔드라", - id: 2, + id: 222, }, { name: "기역호텔", @@ -34,7 +34,7 @@ const candidateData = [ voteUserId: ["Id123", "Id234", "Id345"], voteCounts: 3, memo: "예쁨~~~~~~~~~", - id: 4, + id: 333, }, { name: "니은펜션", @@ -45,7 +45,7 @@ const candidateData = [ voteUserId: ["Id123", "Id345"], voteCounts: 2, memo: "여기 개쩔드라", - id: 3, + id: 444, }, ]; diff --git a/src/pages/Vote/Vote.tsx b/src/pages/Vote/Vote.tsx index cc888da8..a9fbf149 100644 --- a/src/pages/Vote/Vote.tsx +++ b/src/pages/Vote/Vote.tsx @@ -1,23 +1,26 @@ import { Button } from "@chakra-ui/react"; import { ReactNode, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import { useRecoilState } from "recoil"; +import { useRecoilState, useRecoilValue } from "recoil"; import styles from "./Vote.module.scss"; import BottomSlide from "@/components/BottomSlide/BottomSlide"; +// import DeleteCadidatesButton from "@/components/Vote/DeleteCadidatesButton/DeleteCadidatesButton"; import VoteMeatball from "@/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball"; import VoteContent from "@/components/Vote/VoteContent/VoteContent"; import VoteContentEmpty from "@/components/Vote/VoteContent/VoteContentEmpty/VoteContentEmpty"; import VoteHeader from "@/components/Vote/VoteHeader/VoteHeader"; import { getVoteData } from "@/mocks/handlers/vote"; +import { isCandidateSelectingState } from "@/recoil/vote/alertModal"; import { isBottomSlideOpenState } from "@/recoil/vote/bottomSlide"; import { VoteListData } from "@/types/vote"; const Vote = () => { const [isBTOpen, setIsBTOpen] = useRecoilState(isBottomSlideOpenState); + const isCandidateSelecting = useRecoilValue(isCandidateSelectingState); const [showResults, setShowResults] = useState(false); const [bottomSlideContent, setBottomSlideContent] = useState(null); @@ -37,22 +40,6 @@ const Vote = () => { setShowResults(!showResults); }; - // const showBottomButton = () => { - // if(data?.state === "진행 중") { - // - // } else if ("리코일 후보삭제") { - // //새로운 버튼 컴포넌트 - // } else { - // null - // } - // } - return ( <> {data && ( @@ -79,8 +66,7 @@ const Vote = () => { ) : ( )} - - {data.state === "진행 중" && ( + {!isCandidateSelecting && data.state === "진행 중" && ( )} - setIsBTOpen(false)} diff --git a/src/recoil/vote/alertModal.ts b/src/recoil/vote/alertModal.ts index c8e1875b..d6c86025 100644 --- a/src/recoil/vote/alertModal.ts +++ b/src/recoil/vote/alertModal.ts @@ -4,3 +4,8 @@ export const isModalOpenState = atom({ key: "isModalOpenState", default: false, }); + +export const isCandidateSelectingState = atom({ + key: "isCandidateSelectingState", + default: false, +}); diff --git a/src/recoil/vote/candidateList.ts b/src/recoil/vote/candidateList.ts new file mode 100644 index 00000000..6f936349 --- /dev/null +++ b/src/recoil/vote/candidateList.ts @@ -0,0 +1,6 @@ +import { atom } from "recoil"; + +export const selectedCandidatesState = atom>({ + key: "selectedCandidatesState", + default: new Set(), +}); From 30a53bb7fa3d562f0e9f5f8a2154ab1ce2a31798 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Tue, 16 Jan 2024 20:06:32 +0900 Subject: [PATCH 4/7] Design: fix the modal size and baseStyle --- src/chakra/modalCustom.ts | 35 +++++++++++++++---- .../CreatVoteTitleModal.tsx | 24 ++++++------- 2 files changed, 40 insertions(+), 19 deletions(-) diff --git a/src/chakra/modalCustom.ts b/src/chakra/modalCustom.ts index 4fdeca0f..a3314e1e 100644 --- a/src/chakra/modalCustom.ts +++ b/src/chakra/modalCustom.ts @@ -1,33 +1,49 @@ import { modalAnatomy } from "@chakra-ui/anatomy"; -import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system"; +import { + createMultiStyleConfigHelpers, + defineStyle, +} from "@chakra-ui/styled-system"; const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(modalAnatomy.keys); const baseStyle = definePartsStyle({ + //dialog 부모 박스, 가로 사이즈 정하고 가운데 정렬 + dialogContainer: { + width: "100%", + maxWidth: "45rem", + minWidth: "36rem", + left: "50%", + transform: "translateX(-50%)", + }, closeButton: { fontSize: "1.5rem", top: "16px", right: "16px", }, overlay: { - bg: "rgba(20, 20, 20, 0.8)", + bg: "rgba(0, 0, 0, 0.6)", }, }); +const alertSizeForDialog = defineStyle({ + mx: "20px", +}); + const alertModal = definePartsStyle({ dialogContainer: { - width: "45rem", + width: "100%", + maxWidth: "45rem", minWidth: "36rem", left: "50%", transform: "translateX(-50%)", - px: "0", }, dialog: { - w: "31.1rem", + w: "100%", + maxWidth: "45rem", mt: "264px", - mx: "0", - p: "32px 20px", + mx: "32px", + p: "32px 24px", borderRadius: "16px", gap: "24px", @@ -45,7 +61,12 @@ const alertModal = definePartsStyle({ }, }); +const sizes = { + xl: definePartsStyle({ dialog: alertSizeForDialog }), +}; + export const modalTheme = defineMultiStyleConfig({ + sizes, baseStyle, variants: { alertModal }, }); diff --git a/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx index 66c30d87..ca039919 100644 --- a/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx +++ b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx @@ -32,30 +32,31 @@ const CreatVoteTitleModal = () => { 투표 제목을 정해주세요 - + setInputCount(e.target.value.length)} @@ -65,7 +66,6 @@ const CreatVoteTitleModal = () => { variant="flushed" placeholder=" 숙소 정하자, 카페 정하자" fontSize="subTitle" - mt="5%" /> { - + @@ -33,6 +55,7 @@ const DeleteCandidatesButton = () => { 삭제하기 + ); }; diff --git a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx index e77249e0..2293b4a6 100644 --- a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx +++ b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx @@ -1,5 +1,5 @@ -import { useState } from "react"; -import { useSetRecoilState } from "recoil"; +// import { useState } from "react"; +import { useRecoilState, useSetRecoilState } from "recoil"; import styles from "./VoteMeatball.module.scss"; @@ -12,6 +12,7 @@ import TrashIcon from "@/assets/voteIcons/vote_trash.svg?react"; import { isCandidateSelectingState, isModalOpenState, + modalContentState, } from "@/recoil/vote/alertModal"; import { isBottomSlideOpenState } from "@/recoil/vote/bottomSlide"; @@ -26,10 +27,8 @@ import { AlertModalProps, VoteMeatballProps } from "@/types/vote"; const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => { const setIsBTOpen = useSetRecoilState(isBottomSlideOpenState); const setIsModalOpen = useSetRecoilState(isModalOpenState); + const [modalContent, setModalContent] = useRecoilState(modalContentState); const setIsCandidateSelecting = useSetRecoilState(isCandidateSelectingState); - const [modalProps, setModalProps] = useState( - retryVoteContent, - ); const modalConsole = () => { console.log("변경"); @@ -37,7 +36,7 @@ const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => { const showAlertModal = ({ ...content }: AlertModalProps) => { setIsModalOpen(true); - setModalProps({ ...content }); + setModalContent({ ...content }); setIsBTOpen(false); }; @@ -78,16 +77,7 @@ const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => {

투표 제목 수정

- @@ -101,7 +91,7 @@ const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => {

투표 전체 삭제

- {modalProps && } + ); }; diff --git a/src/pages/Vote/Vote.tsx b/src/pages/Vote/Vote.tsx index a9fbf149..7388c27d 100644 --- a/src/pages/Vote/Vote.tsx +++ b/src/pages/Vote/Vote.tsx @@ -1,12 +1,11 @@ import { Button } from "@chakra-ui/react"; import { ReactNode, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import { useRecoilState, useRecoilValue } from "recoil"; +import { useRecoilState, useSetRecoilState } from "recoil"; import styles from "./Vote.module.scss"; import BottomSlide from "@/components/BottomSlide/BottomSlide"; -// import DeleteCadidatesButton from "@/components/Vote/DeleteCadidatesButton/DeleteCadidatesButton"; import VoteMeatball from "@/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball"; import VoteContent from "@/components/Vote/VoteContent/VoteContent"; import VoteContentEmpty from "@/components/Vote/VoteContent/VoteContentEmpty/VoteContentEmpty"; @@ -15,12 +14,16 @@ import VoteHeader from "@/components/Vote/VoteHeader/VoteHeader"; import { getVoteData } from "@/mocks/handlers/vote"; import { isCandidateSelectingState } from "@/recoil/vote/alertModal"; import { isBottomSlideOpenState } from "@/recoil/vote/bottomSlide"; +import { selectedCandidatesState } from "@/recoil/vote/candidateList"; import { VoteListData } from "@/types/vote"; const Vote = () => { const [isBTOpen, setIsBTOpen] = useRecoilState(isBottomSlideOpenState); - const isCandidateSelecting = useRecoilValue(isCandidateSelectingState); + const [isCandidateSelecting, setIsCandidateSelecting] = useRecoilState( + isCandidateSelectingState, + ); + const setSelectedCandidates = useSetRecoilState(selectedCandidatesState); const [showResults, setShowResults] = useState(false); const [bottomSlideContent, setBottomSlideContent] = useState(null); @@ -29,11 +32,16 @@ const Vote = () => { useEffect(() => { getVoteData(param, setData); + setIsCandidateSelecting(false); + setShowResults(false); + setSelectedCandidates(new Set()); }, []); const BottomSlideOpen = (content: ReactNode) => { setBottomSlideContent(content); setIsBTOpen(true); + setSelectedCandidates(new Set()); + setIsCandidateSelecting(false); }; const handleShowResultsClick = () => { diff --git a/src/recoil/vote/alertModal.ts b/src/recoil/vote/alertModal.ts index d6c86025..904911bf 100644 --- a/src/recoil/vote/alertModal.ts +++ b/src/recoil/vote/alertModal.ts @@ -1,5 +1,7 @@ import { atom } from "recoil"; +import { AlertModalProps } from "@/types/vote"; + export const isModalOpenState = atom({ key: "isModalOpenState", default: false, @@ -9,3 +11,14 @@ export const isCandidateSelectingState = atom({ key: "isCandidateSelectingState", default: false, }); + +export const modalContentState = atom({ + key: "modalContentState", + default: { + title: "", + subText: "", + actionButton: "", + isSmallSize: false, + onClickAction: () => {}, + }, +}); diff --git a/src/types/vote.ts b/src/types/vote.ts index 1645d39a..5ccd5ff1 100644 --- a/src/types/vote.ts +++ b/src/types/vote.ts @@ -27,11 +27,11 @@ export interface SSCandidateData { placeId: number; // placeName: string; category: string; - tagline: string; // + tagline: string; //메모? amIVoted: boolean; // //imageURL: string; //location: string; - //voteUserId: string[]; + //voteUserId: string[]; //이거 필요 //voteCounts: number; //memo: string; } From cd943a76178075d399ba50ba8b4045b1606f89d1 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Wed, 17 Jan 2024 01:53:29 +0900 Subject: [PATCH 6/7] Feat: add cancel text in AlertModal --- src/components/AlertModal/AlertModal.tsx | 3 ++- src/types/vote.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/AlertModal/AlertModal.tsx b/src/components/AlertModal/AlertModal.tsx index 5c27aabc..7bded659 100644 --- a/src/components/AlertModal/AlertModal.tsx +++ b/src/components/AlertModal/AlertModal.tsx @@ -29,6 +29,7 @@ import { AlertModalProps } from "@/types/vote"; const AlertModal = ({ title, subText, + cancelText, actionButton, isSmallSize, onClickAction, @@ -57,7 +58,7 @@ const AlertModal = ({ onClick={() => setIsModalOpen(false)} className={styles.buttons__cancel} > - 취소 + {cancelText ? cancelText : "취소"}