From cab41966c423e02ce5566f67ad5ef5430203617b Mon Sep 17 00:00:00 2001 From: Joohyun Kim Date: Wed, 2 Aug 2023 23:17:42 +0900 Subject: [PATCH] =?UTF-8?q?fix:=205=EC=B0=A8=20QA=20=EC=A7=84=ED=96=89=20(?= =?UTF-8?q?#112)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 확정 기능 제외 * feat: 우선순위 보여줄 때 참여자 이름 항상 표시하기 * fix: 이메일 등록 기능 제거 * hotfix: 아무도 일정 등록하지 않았을 때 발생하는 에러 해결 * fix: 24시간제로 변경 시 표에서 발생하는 시간 표시 에러 해결 * chore: 불필요한 주석 제거 * chore: console.log 제거 --- src/assets/data/currentTime.json | 95 ------------------- src/assets/data/result.json | 49 ---------- src/assets/icons/collapse.svg | 3 - src/assets/icons/emailDefault.svg | 12 --- src/assets/icons/emailRegistered.svg | 14 --- src/assets/icons/expand.svg | 3 - src/atoms/emailAtoms.ts | 6 -- src/components/accordion/Accordion.tsx | 83 ---------------- .../Candidate.styles.ts} | 39 ++------ src/components/candidate/Candidate.tsx | 52 ++++++++++ .../Candidate.types.ts} | 2 +- src/components/header/Header.tsx | 14 +-- src/components/popup/Popup.styles.ts | 82 ---------------- src/components/popup/Popup.tsx | 74 --------------- src/components/popup/Popup.types.ts | 5 - src/components/table/Table.tsx | 15 +-- src/pages/result/Result.styles.ts | 41 -------- src/pages/result/Result.tsx | 68 ++++--------- 18 files changed, 90 insertions(+), 567 deletions(-) delete mode 100644 src/assets/data/currentTime.json delete mode 100644 src/assets/data/result.json delete mode 100644 src/assets/icons/collapse.svg delete mode 100644 src/assets/icons/emailDefault.svg delete mode 100644 src/assets/icons/emailRegistered.svg delete mode 100644 src/assets/icons/expand.svg delete mode 100644 src/atoms/emailAtoms.ts delete mode 100644 src/components/accordion/Accordion.tsx rename src/components/{accordion/Accordion.styles.ts => candidate/Candidate.styles.ts} (68%) create mode 100644 src/components/candidate/Candidate.tsx rename src/components/{accordion/Accordion.types.ts => candidate/Candidate.types.ts} (79%) delete mode 100644 src/components/popup/Popup.styles.ts delete mode 100644 src/components/popup/Popup.tsx delete mode 100644 src/components/popup/Popup.types.ts diff --git a/src/assets/data/currentTime.json b/src/assets/data/currentTime.json deleted file mode 100644 index 2b23946..0000000 --- a/src/assets/data/currentTime.json +++ /dev/null @@ -1,95 +0,0 @@ -{ - "availableDateTimes": [ - { - "availableDate": "2023-02-20", - "availableTimeInfos": { - "time": null, - "count": 5 - } - }, - { - "availableDate": "2023-02-21", - "availableTimeInfos": { - "time": null, - "count": 0 - } - }, - { - "availableDate": "2023-02-22", - "availableTimeInfos": { - "time": null, - "count": 0 - } - }, - { - "availableDate": "2023-02-23", - "availableTimeInfos": { - "time": null, - "count": 1 - } - }, - { - "availableDate": "2023-02-24", - "availableTimeInfos": { - "time": null, - "count": 5 - } - }, - { - "availableDate": "2023-02-25", - "availableTimeInfos": { - "time": null, - "count": 6 - } - }, - { - "availableDate": "2023-02-26", - "availableTimeInfos": { - "time": null, - "count": 6 - } - }, - { - "availableDate": "2023-02-27", - "availableTimeInfos": { - "time": null, - "count": 2 - } - }, - { - "availableDate": "2023-02-28", - "availableTimeInfos": { - "time": null, - "count": 2 - } - }, - { - "availableDate": "2023-03-06", - "availableTimeInfos": { - "time": null, - "count": 4 - } - }, - { - "availableDate": "2023-03-07", - "availableTimeInfos": { - "time": null, - "count": 3 - } - }, - { - "availableDate": "2023-03-08", - "availableTimeInfos": { - "time": null, - "count": 5 - } - }, - { - "availableDate": "2023-03-09", - "availableTimeInfos": { - "time": null, - "count": 5 - } - } - ] -} diff --git a/src/assets/data/result.json b/src/assets/data/result.json deleted file mode 100644 index e5e1c5a..0000000 --- a/src/assets/data/result.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "candidateTimes": [ - { - "id": 1, - "date": "02-11", - "dayOfWeek": "금", - "startTime": "18:00", - "endTime": "20:00", - "participantNames": ["김동호", "이수진", "이세희"], - "isConfirmed": true - }, - { - "id": 2, - "date": "02-12", - "dayOfWeek": "토", - "startTime": "17:00", - "endTime": "20:00", - "participantNames": ["김동호", "이수진", "이세희"], - "isConfirmed": false - }, - { - "id": 3, - "date": "02-13", - "dayOfWeek": "금", - "startTime": "18:00", - "endTime": "20:00", - "participantNames": ["김동호", "이수진", "이세희"], - "isConfirmed": false - }, - { - "id": 4, - "date": "02-14", - "dayOfWeek": "금", - "startTime": "18:00", - "endTime": "20:00", - "participantNames": ["김동호", "이수진", "이세희"], - "isConfirmed": false - }, - { - "id": 5, - "date": "02-15", - "dayOfWeek": "금", - "startTime": "18:00", - "endTime": "20:00", - "participantNames": ["김동호", "이수진", "이세희"], - "isConfirmed": false - } - ] -} diff --git a/src/assets/icons/collapse.svg b/src/assets/icons/collapse.svg deleted file mode 100644 index f0a9fbe..0000000 --- a/src/assets/icons/collapse.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/emailDefault.svg b/src/assets/icons/emailDefault.svg deleted file mode 100644 index a15ad35..0000000 --- a/src/assets/icons/emailDefault.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/icons/emailRegistered.svg b/src/assets/icons/emailRegistered.svg deleted file mode 100644 index 1b3c0af..0000000 --- a/src/assets/icons/emailRegistered.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/assets/icons/expand.svg b/src/assets/icons/expand.svg deleted file mode 100644 index 141ddd5..0000000 --- a/src/assets/icons/expand.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/atoms/emailAtoms.ts b/src/atoms/emailAtoms.ts deleted file mode 100644 index e803a7e..0000000 --- a/src/atoms/emailAtoms.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const emailState = atom({ - key: 'emailState', - default: false, -}); diff --git a/src/components/accordion/Accordion.tsx b/src/components/accordion/Accordion.tsx deleted file mode 100644 index 7c3fc10..0000000 --- a/src/components/accordion/Accordion.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { useState, useRef } from 'react'; - -import expand from '../../assets/icons/expand.svg'; -import collapse from '../../assets/icons/collapse.svg'; - -import { - Content, - DefaultWrapper, - ListItem, - ListWrapper, - Participant, - People, - PeopleWrapper, - TimeSpan, - TimeWrapper, - Wrapper, - Icon, -} from './Accordion.styles'; -import { AccordionTypes } from './Accordion.types'; - -const Accordion = ({ - date, - dayOfWeek, - startTime, - endTime, - participantNames, - count, -}: AccordionTypes) => { - const [isCollapse, setIsCollapse] = useState(false); - - const parentRef = useRef(null); - const childRef = useRef(null); - - const handleCollapse = () => { - if (parentRef.current === null || childRef.current === null) { - return; - } - - if (parentRef.current.clientHeight > 0) { - parentRef.current.style.height = '0px'; - } else if (parentRef.current.clientHeight === 0) { - parentRef.current.style.height = `${childRef.current.clientHeight}px`; - } - setIsCollapse(!isCollapse); - }; - - return ( - - - - {count !== null && ( - - {count}명 중 - {participantNames.length}명 - - )} - - - {startTime && endTime - ? `${date.slice(5, 7)}월 ${date.slice( - 8, - 10 - )} (${dayOfWeek}) ${startTime} ~ ${endTime}` - : `${date.slice(5, 7)}월 ${date.slice(8, 10)} (${dayOfWeek}) `} - - - - - - - - - - {participantNames.map((name: string) => ( - {name} - ))} - - - - ); -}; - -export default Accordion; diff --git a/src/components/accordion/Accordion.styles.ts b/src/components/candidate/Candidate.styles.ts similarity index 68% rename from src/components/accordion/Accordion.styles.ts rename to src/components/candidate/Candidate.styles.ts index 0e4b954..232d997 100644 --- a/src/components/accordion/Accordion.styles.ts +++ b/src/components/candidate/Candidate.styles.ts @@ -5,6 +5,7 @@ export const Wrapper = styled.div` width: 100%; max-width: 412px; margin-top: 10px; + padding: 15px 17px; border-radius: 7px; background: ${theme.colors.purple01}; @@ -14,20 +15,8 @@ export const Wrapper = styled.div` justify-content: center; `; -export const DefaultWrapper = styled.section` - width: 100%; - - display: flex; - align-items: center; - justify-content: center; - - cursor: pointer; -`; - export const Content = styled.div` width: 100%; - height: 73px; - padding: 15px 19px 15px 17px; display: flex; flex-direction: column; @@ -35,7 +24,7 @@ export const Content = styled.div` justify-content: space-between; `; -export const PeopleWrapper = styled.div` +export const ProportionWrapper = styled.div` width: 100%; `; @@ -52,31 +41,14 @@ export const TimeWrapper = styled.div` display: flex; justify-content: space-between; -`; -export const TimeSpan = styled.span` color: ${theme.colors.gray06}; ${theme.typography.semibold03}; `; -export const Icon = styled.img` - width: 21px; - height: 21px; - - cursor: pointer; -`; - -export const ListWrapper = styled.div` - width: 100%; - height: 0px; - - overflow: hidden; - transition: height 0.35s ease, background 0.35s ease; -`; - export const ListItem = styled.div` width: 100%; - padding: 17px; + margin-top: 14px; display: flex; flex-flow: wrap; @@ -86,9 +58,10 @@ export const ListItem = styled.div` `; export const Participant = styled.div` - width: 44px; - height: 24px; + min-width: 44px; + border-radius: 3px; + padding: 4px 5px; ${theme.typography.medium05}; color: ${theme.colors.gray05}; diff --git a/src/components/candidate/Candidate.tsx b/src/components/candidate/Candidate.tsx new file mode 100644 index 0000000..59e65be --- /dev/null +++ b/src/components/candidate/Candidate.tsx @@ -0,0 +1,52 @@ +import { + Content, + ListItem, + Participant, + People, + ProportionWrapper, + TimeWrapper, + Wrapper, +} from './Candidate.styles'; +import { CandidateTypes } from './Candidate.types'; + +const Candidate = ({ + date, + dayOfWeek, + startTime, + endTime, + participantNames, + count, +}: CandidateTypes) => { + const convertDateFormat = () => { + if (startTime && endTime) { + return `${date.slice(5, 7)}월 ${date.slice( + 8, + 10 + )} (${dayOfWeek}) ${startTime} ~ ${endTime}`; + } else { + return `${date.slice(5, 7)}월 ${date.slice(8, 10)} (${dayOfWeek}) `; + } + }; + + return ( + + + {count !== null && ( + + {count}명 중 + {participantNames.length}명 + + )} + {convertDateFormat()} + + + + {participantNames.map((name: string) => ( + {name} + ))} + + + ); +}; + +export default Candidate; diff --git a/src/components/accordion/Accordion.types.ts b/src/components/candidate/Candidate.types.ts similarity index 79% rename from src/components/accordion/Accordion.types.ts rename to src/components/candidate/Candidate.types.ts index c1c9307..0e99387 100644 --- a/src/components/accordion/Accordion.types.ts +++ b/src/components/candidate/Candidate.types.ts @@ -1,4 +1,4 @@ -export interface AccordionTypes { +export interface CandidateTypes { date: string; dayOfWeek: string; startTime: string; diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 7a44b35..fb110ec 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -1,13 +1,11 @@ import { Icon, IconWrapper, Title, Wrapper } from './Header.styles'; import share from '../../assets/icons/share.svg'; -import emailDefault from '../../assets/icons/emailDefault.svg'; -import emailRegistered from '../../assets/icons/emailRegistered.svg'; + import headerMenu from '../../assets/icons/headerMenu.svg'; import headerInfo from '../../assets/icons/headerInfo.svg'; import { useRecoilState } from 'recoil'; -import { emailState } from '../../atoms/emailAtoms'; import { isTooltipShownState } from '../../atoms/isTooltipShownAtoms'; import { useParams } from 'react-router-dom'; @@ -19,7 +17,6 @@ import { useState } from 'react'; const Header = ({ pageName, title }: { pageName: string; title: string }) => { const { roomUUID } = useParams(); - const [isEmailRegistered] = useRecoilState(emailState); const [, setIsTooltipShown] = useRecoilState(isTooltipShownState); const [isMenuOpened, setIsMenuOpened] = useState(false); @@ -47,14 +44,7 @@ const Header = ({ pageName, title }: { pageName: string; title: string }) => { /> )} - {pageName === 'result' && ( - - )} - - {pageName === 'current' && ( + {(pageName === 'current' || pageName === 'result') && ( alert('클립보드에 복사되었습니다.')} diff --git a/src/components/popup/Popup.styles.ts b/src/components/popup/Popup.styles.ts deleted file mode 100644 index afbdeb1..0000000 --- a/src/components/popup/Popup.styles.ts +++ /dev/null @@ -1,82 +0,0 @@ -import styled from '@emotion/styled'; -import theme from '../../styles/theme'; - -export const Overlay = styled.div` - width: 100%; - height: 100%; - - position: fixed; - z-index: 4; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.45); -`; - -export const Wrapper = styled.div` - width: 305px; - height: 198px; - padding: 48px 22px 28px 22px; - - border-radius: 10px; - background: ${theme.colors.gray01}; - - position: absolute; - z-index: 4; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - display: flex; - flex-direction: column; - align-items: center; -`; - -export const Title = styled.span` - color: ${theme.colors.gray07}; - ${theme.typography.semibold02}; -`; - -export const Subtitle = styled.span` - margin-top: 7px; - color: ${theme.colors.gray06}; - ${theme.typography.regular02}; -`; - -export const ButtonWrapper = styled.div` - width: 100%; - height: 44px; - margin-top: 27px; - - display: flex; - justify-content: space-between; -`; - -export const NoButton = styled.button` - width: 99px; - height: 100%; - - display: flex; - align-items: center; - justify-content: center; - - border-radius: 6px; - ${theme.typography.semibold04}; - color: ${theme.colors.purple06}; - border: 1px solid ${theme.colors.purple06}; -`; - -export const ConfirmButton = styled.button` - width: 154px; - height: 100%; - - display: flex; - align-items: center; - justify-content: center; - - border-radius: 6px; - ${theme.typography.semibold04}; - color: ${theme.colors.gray01}; - background: ${theme.colors.purple06}; -`; diff --git a/src/components/popup/Popup.tsx b/src/components/popup/Popup.tsx deleted file mode 100644 index 2245a57..0000000 --- a/src/components/popup/Popup.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { useNavigate, useParams } from 'react-router-dom'; -import { API } from '../../utils/API'; -import { - ButtonWrapper, - ConfirmButton, - NoButton, - Overlay, - Subtitle, - Title, - Wrapper, -} from './Popup.styles'; -import { PopupTypes } from './Popup.types'; - -const Popup = ({ - selectedTimeId, - setIsPopupOpened, - setIsConfirmed, -}: PopupTypes) => { - const { roomUUID } = useParams(); - const navigate = useNavigate(); - const userName = localStorage.getItem('userName'); - - const closePopup = () => { - setIsPopupOpened(false); - }; - - const handleConfirmButtonClick = () => { - setIsPopupOpened(false); - setIsConfirmed(true); - - const payload = { - candidateDateTimeId: parseInt(selectedTimeId), - participantName: localStorage.getItem('name'), - }; - - console.log(payload); - - const makeConfirm = async () => { - const savedUserName = localStorage.getItem('name'); - const savedRoomUUID = localStorage.getItem('uuid'); - - if ((savedUserName === '' || savedUserName === null) && userName === '') { - navigate(`/login/${roomUUID}`); - } else { - if (roomUUID === savedRoomUUID) { - await API.post( - `/api/room/${roomUUID}/adjustment-result/confirmation`, - JSON.stringify(payload) - ); - } else navigate(`/login/${roomUUID}`); - } - }; - - makeConfirm(); - }; - - return ( - <> - - - 약속을 확정할까요? - 확정하면 일정 등록과 수정은 할 수 없어요 - - 아니오 - - 네. 확정할게요 - - - - - ); -}; - -export default Popup; diff --git a/src/components/popup/Popup.types.ts b/src/components/popup/Popup.types.ts deleted file mode 100644 index 7c0b5cd..0000000 --- a/src/components/popup/Popup.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface PopupTypes { - selectedTimeId: string; - setIsPopupOpened: React.Dispatch>; - setIsConfirmed: React.Dispatch>; -} diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx index a973285..545c6c4 100644 --- a/src/components/table/Table.tsx +++ b/src/components/table/Table.tsx @@ -15,7 +15,7 @@ import { useEffect, useState } from 'react'; import { AvailableDateTimeTypes } from '../../types/current'; import { API } from '../../utils/API'; import { useParams } from 'react-router-dom'; -import { getRange } from '../../utils/getRange'; +import { getTimeRange } from '../../utils/getTimeRange'; interface TableTypes { dates: string[]; @@ -26,7 +26,7 @@ interface TableTypes { const Table = ({ dates, startTime, endTime, participants }: TableTypes) => { const { roomUUID } = useParams(); - const timeRange = getRange(parseInt(startTime), parseInt(endTime)); + const timeRange = getTimeRange(parseInt(startTime), parseInt(endTime)); const [currentTableInfo, setCurrentTableInfo] = useState< AvailableDateTimeTypes[] @@ -44,6 +44,10 @@ const Table = ({ dates, startTime, endTime, participants }: TableTypes) => { getCurrentTableInfo(); }, []); + const convertDateFormat = (date: string) => { + return `${date.slice(5, 7)}월 ${date.slice(8, 10)}일`; + }; + return ( @@ -53,10 +57,9 @@ const Table = ({ dates, startTime, endTime, participants }: TableTypes) => { date.slice(0, 5) === 'blank' ? ( ) : ( - {`${date.slice( - 5, - 7 - )}월 ${date.slice(8, 10)}일`} + + {convertDateFormat(date)} + ) )} diff --git a/src/pages/result/Result.styles.ts b/src/pages/result/Result.styles.ts index 863ae29..d67d5ee 100644 --- a/src/pages/result/Result.styles.ts +++ b/src/pages/result/Result.styles.ts @@ -76,44 +76,3 @@ export const NobodyText = styled.span` color: ${theme.colors.gray04}; ${theme.typography.semibold03}; `; - -export const TimeWrapper = styled.div<{ isConfirmed: boolean }>` - width: 100%; - height: 64px; - padding: 0 20px; - margin-top: 10px; - - display: flex; - align-items: center; - justify-content: space-between; - - background: ${({ isConfirmed }) => - isConfirmed ? `${theme.colors.purple06}` : `${theme.colors.purple01}`}; - color: ${({ isConfirmed }) => - isConfirmed ? `${theme.colors.gray01}` : `${theme.colors.gray06}`}; - - border-radius: 7px; - ${theme.typography.semibold03}; -`; - -export const ConfirmButton = styled.div<{ isConfirmed: boolean }>` - height: 28px; - padding: 0 8px; - - display: flex; - align-items: center; - justify-content: center; - - border-radius: 4px; - ${theme.typography.medium04}; - - color: ${({ isConfirmed }) => - isConfirmed ? `${theme.colors.gray01}` : `${theme.colors.purple06}`}; - - border: ${({ isConfirmed }) => - isConfirmed - ? `1px solid ${theme.colors.gray01}` - : `1px solid ${theme.colors.purple06}`}; - - cursor: pointer; -`; diff --git a/src/pages/result/Result.tsx b/src/pages/result/Result.tsx index aec37ad..7ccd800 100644 --- a/src/pages/result/Result.tsx +++ b/src/pages/result/Result.tsx @@ -3,11 +3,11 @@ import { useParams } from 'react-router-dom'; import Header from '../../components/header/Header'; import SelectBox from '../../components/selectBox/SelectBox'; -import Accordion from '../../components/accordion/Accordion'; import ResultButton from '../../components/resultButton/ResultButton'; import BottomSheet from '../../components/bottomSheet/BottomSheet'; import SelectParticipants from '../../components/option/participantsOption/participantsOption'; import SortTimes from '../../components/option/sortOption/SortTimes'; +import Candidate from '../../components/candidate/Candidate'; import { Body, @@ -16,7 +16,6 @@ import { NobodyText, NobodyWrapper, SelectWrapper, - TimeWrapper, Title, TitleWrapper, Wrapper, @@ -91,7 +90,7 @@ const Result = () => { getRoomInfo(); }, []); - const { title, participants, headCount } = room; + const { title, participants } = room; const [participantsList, setParticipantsList] = useState([]); @@ -164,38 +163,28 @@ const Result = () => { /> - {participants.length === headCount ? ( - <> - {candidateTimes.candidateTimes.map( - ({ date, dayOfWeek, startTime, endTime, isConfirmed }) => ( - - {startTime && endTime - ? `${date.slice(5, 7)}월 ${date.slice( - 8, - 10 - )} (${dayOfWeek}) ${startTime} ~ ${endTime}` - : `${date.slice(5, 7)}월 ${date.slice( - 8, - 10 - )} (${dayOfWeek})`} - - ) - )} - + {candidateTimes.candidateTimes.length === 0 ? ( + + + + 모두가 되는 시간이 없어요 + + ) : ( <> - - - - 모두가 되는 시간이 없어요 - - + {participants.length !== + candidateTimes.candidateTimes[0].participantNames.length ? ( + + + + 모두가 되는 시간이 없어요 + + + ) : null} + {candidateTimes.candidateTimes.map( ({ date, dayOfWeek, startTime, endTime, participantNames }) => ( - { )} )} - - <> - {candidateTimes.candidateTimes.map( - ({ date, dayOfWeek, startTime, endTime, isConfirmed }) => { - - {date} - {`${date.slice(0, 2)}월 ${date.slice( - 3, - 5 - )} (${dayOfWeek}) ${startTime} ~ ${endTime}`} - ; - } - )} -