-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
…ersonalRepo [ Fix ] 폴더명 대소문자 인식을 위한 전체 변경
- Loading branch information
Showing
87 changed files
with
583 additions
and
37 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
...mponents/bestMeetTime/AlternativeCard.tsx → ...stMeetTime/components/AlternativeCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
src/pages/BestMeetTime/ChooseBestTime.tsx → ...pages/bestMeetTime_tmp/ChooseBestTime.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 95 additions & 0 deletions
95
src/pages/bestMeetTime_tmp/components_tmp/AlternativeCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import Text from 'components/atomComponents/Text'; | ||
| import { BestDataProps } from 'pages/bestMeetTime/types/meetCardData'; | ||
| import styled from 'styled-components/macro'; | ||
| import { theme } from 'styles/theme'; | ||
|
|
||
| function AlternativeCard({ rank, carddata, chooseMeetime, selected }: BestDataProps) { | ||
| const checkingCheck = () => { | ||
| chooseMeetime(rank); | ||
| }; | ||
|
|
||
| if (carddata) { | ||
| return ( | ||
| <AlternativeCardWrapper $rank={rank} $selected={selected}> | ||
| <Input | ||
| id={`${rank}`} | ||
| type="checkbox" | ||
| checked={rank === selected ? true : false} | ||
| onChange={checkingCheck} | ||
| /> | ||
| <InfoContainer> | ||
| <Label htmlFor={`${rank}`}> | ||
| <Text font={'body1'} color={`${theme.colors.white}`}> | ||
| {carddata.month}월 {carddata.day}일 {carddata.dayOfWeek}요일 | ||
| </Text> | ||
| <Text font={'body1'} color={`${theme.colors.white}`}> | ||
| {carddata.startTime} ~ {carddata.endTime} | ||
| </Text> | ||
| </Label> | ||
|
|
||
| <MemeberContainer> | ||
| {carddata.users.map((member, i) => ( | ||
| <Text key={i + member.name} font={'body4'} color={`${theme.colors.grey5}`}> | ||
| {member.name} | ||
| {i !== carddata.users.length - 1 ? ',' : ''} | ||
| </Text> | ||
| ))} | ||
| </MemeberContainer> | ||
| </InfoContainer> | ||
| </AlternativeCardWrapper> | ||
| ); | ||
| } else { | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| export default AlternativeCard; | ||
|
|
||
| const AlternativeCardWrapper = styled.article<{ $rank: number; $selected: number }>` | ||
| display: flex; | ||
| position: relative; | ||
| flex-direction: row; | ||
| border: 1px solid | ||
| ${({ $rank, $selected, theme }) => | ||
| $rank === $selected ? theme.colors.main1 : theme.colors.grey5}; | ||
| border-radius: 10px; | ||
| padding: 2rem; | ||
| height: fit-content; | ||
| `; | ||
|
|
||
| const InfoContainer = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| color: ${({ theme }) => theme.colors.white}; | ||
| `; | ||
| const Input = styled.input` | ||
| appearance: none; | ||
| margin: 0 2.274rem 0 0; | ||
| background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E%0A"); | ||
| background-repeat: no-repeat; | ||
| cursor: pointer; | ||
| width: 2rem; | ||
| height: 2rem; | ||
| &:checked { | ||
| background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233C49FF'/%3E%3Ccircle cx='9.99965' cy='10.0001' r='3.63636' fill='white'/%3E%3C/svg%3E "); | ||
| } | ||
| &:checked + label { | ||
| color: ${({ theme }) => theme.colors.white}; | ||
| } | ||
| `; | ||
| const Label = styled.label` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| const MemeberContainer = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| margin-top: 1.2rem; | ||
| width: 23rem; | ||
| height: fit-content; | ||
| `; |
172 changes: 172 additions & 0 deletions
172
src/pages/bestMeetTime_tmp/components_tmp/BestMeetTime.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import Button from 'components/atomComponents/Button'; | ||
| import Text from 'components/atomComponents/Text'; | ||
| import { DropdownWhite, DropupWhite } from 'components/Icon/icon'; | ||
| import AlternativeCard from 'pages/bestMeetTime/components/AlternativeCard'; | ||
| import BestTimeCard from 'pages/bestMeetTime/components/BestTimeCard'; | ||
| import ConfirmModal from 'pages/bestMeetTime/components/confirmModal'; | ||
| import GetBestMeetimeListHooks from 'pages/bestMeetTime/hooks/getBestMeetimeList'; | ||
| import { whatisBestMeetime } from 'pages/bestMeetTime/utils/whatisBestMeetime'; | ||
| import LoadingPage from 'pages/errorLoading/LoadingPage'; | ||
| import { useParams } from 'react-router'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import styled from 'styled-components/macro'; | ||
| import { theme } from 'styles/theme'; | ||
|
|
||
| import BlankMeetCard from './BlankMeetCard'; | ||
|
|
||
| function BestMeetTime() { | ||
| const [isalternativeCardOpen, setIsalternativeCardOpen] = useState(false); | ||
| const [selected, setSelected] = useState(0); | ||
| const [showModal, setShowModal] = useState<boolean>(false); | ||
| const { meetingId } = useParams(); | ||
| const { isloading, bestTimeData, isError } = GetBestMeetimeListHooks( | ||
| (meetingId as unknown) as string, | ||
| ); | ||
| const navigate = useNavigate(); | ||
| if (isError) { | ||
| navigate(`/*`); | ||
| } else if (!isloading && bestTimeData) { | ||
| const bestMeetimeObj = whatisBestMeetime(bestTimeData, selected); | ||
| if (bestMeetimeObj) { | ||
| return ( | ||
| <BestMeetTimeWrapper $state={showModal}> | ||
| <TitleSection> | ||
| <HeaderContainer> | ||
| <HeaderTitle> | ||
| <Text font={`head2`} color={`${theme.colors.white}`}> | ||
| 현재까지 모인 | ||
| </Text> | ||
| <Text font={`head2`} color={`${theme.colors.sub1}`}> | ||
| {bestTimeData.data.memberCount} | ||
| </Text> | ||
| <Text font={`head2`} color={`${theme.colors.sub1}`}> | ||
| 명 | ||
| </Text> | ||
| <Text font={`head2`} color={`${theme.colors.white}`}> | ||
| 을 위한 | ||
| </Text> | ||
| </HeaderTitle> | ||
| <Text font={`head2`} color={`${theme.colors.white}`}> | ||
| 최적의 회의시간이에요 | ||
| </Text> | ||
| </HeaderContainer> | ||
| <Text font={'body3'} color={`${theme.colors.grey4}`}> | ||
| 박스를 클릭하여 회의시간을 확정해주세요 | ||
| </Text> | ||
| </TitleSection> | ||
| {bestTimeData.data.bestDateTime ? ( | ||
| <BestTimeCard | ||
| rank={0} | ||
| selected={selected} | ||
| carddata={bestTimeData.data.bestDateTime} | ||
| chooseMeetime={setSelected} | ||
| /> | ||
| ) : null} | ||
|
|
||
| <AnotherTimeBtnSection onClick={() => setIsalternativeCardOpen((prev) => !prev)}> | ||
| <Text font={`body4`} color={`${theme.colors.grey3}`}> | ||
| 다른 시간대 확인하기 | ||
| </Text> | ||
| <BasicIconContainer> | ||
| {isalternativeCardOpen ? <DropupWhite /> : <DropdownWhite />} | ||
| </BasicIconContainer> | ||
| </AnotherTimeBtnSection> | ||
| {isalternativeCardOpen ? ( | ||
| <AlternativeSection> | ||
| {bestTimeData.data.otherDateTimes[0] ? ( | ||
| <AlternativeCard | ||
| rank={1} | ||
| selected={selected} | ||
| carddata={bestTimeData.data.otherDateTimes[0]} | ||
| chooseMeetime={setSelected} | ||
| /> | ||
| ) : ( | ||
| <BlankMeetCard /> | ||
| )} | ||
| {bestTimeData.data.otherDateTimes[1] ? ( | ||
| <AlternativeCard | ||
| rank={2} | ||
| selected={selected} | ||
| carddata={bestTimeData.data.otherDateTimes[1]} | ||
| chooseMeetime={setSelected} | ||
| /> | ||
| ) : null} | ||
| </AlternativeSection> | ||
| ) : ( | ||
| undefined | ||
| )} | ||
| <BtnWrapper> | ||
| <Button typeState={'primaryActive'} onClick={() => setShowModal(true)}> | ||
| <Text font={'title2'}> 확정</Text> | ||
| </Button> | ||
| </BtnWrapper> | ||
| {showModal && ( | ||
| <ConfirmModal | ||
| setIsModalOpen={setShowModal} | ||
| memberCount={bestTimeData.data.memberCount} | ||
| bestTime={bestMeetimeObj} //얘도 데이터에서 애들 이름 지워야됨 | ||
| /> | ||
| )} | ||
| </BestMeetTimeWrapper> | ||
| ); | ||
| } | ||
| } else { | ||
| return ( | ||
| <LoadingWrapper> | ||
| <LoadingPage /> | ||
| </LoadingWrapper> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default BestMeetTime; | ||
|
|
||
| const LoadingWrapper = styled.div` | ||
| position: relative; | ||
| top: 25rem; | ||
| width: 100%; | ||
| `; | ||
| const BestMeetTimeWrapper = styled.div<{ $state: boolean }>` | ||
| width: 100%; | ||
| `; | ||
| const TitleSection = styled.article` | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin: 4rem 10.8rem 3rem 0rem; | ||
| width: 100%; | ||
| `; | ||
| const HeaderContainer = styled.div` | ||
| margin-bottom: 1.2rem; | ||
| `; | ||
|
|
||
| const HeaderTitle = styled.div` | ||
| display: flex; | ||
| `; | ||
|
|
||
| const AnotherTimeBtnSection = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-end; | ||
| margin: 2rem 0 1.6rem 0; | ||
| padding-right: 1rem; | ||
| `; | ||
| const AlternativeSection = styled.section` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
| `; | ||
| const BasicIconContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| cursor: pointer; | ||
| width: 3rem; | ||
| height: 3rem; | ||
| `; | ||
| const BtnWrapper = styled.div` | ||
| position: fixed; | ||
| bottom: 1.2rem; | ||
| border-radius: 50%; | ||
| `; |
Oops, something went wrong.