chore: 브랜치 머지

src/components/accordion/Accordion.styles.ts → 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,28 +15,16 @@ 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;
  align-items: center;
  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};

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 (
+ <Wrapper>
+ <Content>
+ {count !== null && (
+ <ProportionWrapper>
+ <People isParticipant={false}>{count}명 중</People>
+ <People isParticipant={true}> {participantNames.length}명</People>
+ </ProportionWrapper>
+ )}
+ <TimeWrapper>{convertDateFormat()}</TimeWrapper>
+ </Content>
+
+ <ListItem>
+ {participantNames.map((name: string) => (
+ <Participant key={name}>{name}</Participant>
+ ))}
+ </ListItem>
+ </Wrapper>
+ );
+};
+
+export default Candidate;

src/components/accordion/Accordion.types.ts → src/components/candidate/Candidate.types.ts

@@ -1,4 +1,4 @@
-export interface AccordionTypes {
+export interface CandidateTypes {
  date: string;
  dayOfWeek: string;
  startTime: string;

src/components/table/Table.tsx

@@ -12,10 +12,10 @@ import {
 } from './Table.styles';
 
 import { useParams } from 'react-router-dom';
-import { getRange } from '../../utils/getRange';
 import { useGetAvailableTimesByGroup } from '../../queries/availableTimes/useGetAvailableTimesByGroup';
 import { useEffect, useState } from 'react';
 import { AvailableDateTimesTypes } from '../../types/current';
+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() as { roomUUID: string };
- const timeRange = getRange(parseInt(startTime), parseInt(endTime));
+ const timeRange = getTimeRange(parseInt(startTime), parseInt(endTime));
 
  const { data } = useGetAvailableTimesByGroup(roomUUID);
  const [availableDateTimes, setAvailableDateTimes] = useState<
@@ -39,7 +39,7 @@ const Table = ({ dates, startTime, endTime, participants }: TableTypes) => {
  }
  }, [data]);
 
- const getDateFormat = (date: string) => {
+ const convertDateFormat = (date: string) => {
  return `${date.slice(5, 7)}월 ${date.slice(8, 10)}일`;
  };
 
@@ -53,7 +53,7 @@ const Table = ({ dates, startTime, endTime, participants }: TableTypes) => {
  <Date key={date} isBlank={true}></Date>
  ) : (
  <Date key={date} isBlank={false}>
- {getDateFormat(date)}
+ {convertDateFormat(date)}
  </Date>
  )
  )}

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;
-`;