feat: 우선순위 보여줄 때 참여자 이름 항상 표시하기

dnd-side-project · Jul 31, 2023 · 17bfd94 · 17bfd94
1 parent 99bcc30
commit 17bfd94
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 197 deletions.
diff --git a/src/components/accordion/Accordion.tsx b/src/components/accordion/Accordion.tsx
diff --git a/src/components/accordion/Accordion.styles.ts → src/components/candidate/Candidate.styles.ts b/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};

diff --git a/src/components/candidate/Candidate.tsx b/src/components/candidate/Candidate.tsx
@@ -0,0 +1,48 @@
+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) => {
+  return (
+    <Wrapper>
+      <Content>
+        {count !== null && (
+          <ProportionWrapper>
+            <People isParticipant={false}>{count}명 중</People>
+            <People isParticipant={true}> {participantNames.length}명</People>
+          </ProportionWrapper>
+        )}
+        <TimeWrapper>
+          {startTime && endTime
+            ? `${date.slice(5, 7)}월 ${date.slice(
+                8,
+                10
+              )} (${dayOfWeek}) ${startTime} ~ ${endTime}`
+            : `${date.slice(5, 7)}월 ${date.slice(8, 10)} (${dayOfWeek}) `}
+        </TimeWrapper>
+      </Content>
+
+      <ListItem>
+        {participantNames.map((name: string) => (
+          <Participant key={name}>{name}</Participant>
+        ))}
+      </ListItem>
+    </Wrapper>
+  );
+};
+
+export default Candidate;
diff --git a/src/components/accordion/Accordion.types.ts → src/components/candidate/Candidate.types.ts b/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;

diff --git a/src/pages/result/Result.styles.ts b/src/pages/result/Result.styles.ts
@@ -77,21 +77,21 @@ export const NobodyText = styled.span`
   ${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 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};
+// `;
diff --git 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,
@@ -164,67 +163,29 @@ const Result = () => {
           />
         </SelectWrapper>
 
-        {participants.length === headCount ? (
-          <>
-            {candidateTimes.candidateTimes.map(
-              ({ id, date, dayOfWeek, startTime, endTime, isConfirmed }) => (
-                <TimeWrapper
-                  key={`all ${date} ${dayOfWeek} ${startTime} ${endTime}`}
-                  isConfirmed={isConfirmed}
-                >
-                  {startTime && endTime
-                    ? `${date.slice(5, 7)}월 ${date.slice(
-                        8,
-                        10
-                      )} (${dayOfWeek}) ${startTime} ~ ${endTime}`
-                    : `${date.slice(5, 7)}월 ${date.slice(
-                        8,
-                        10
-                      )} (${dayOfWeek})`}
-                </TimeWrapper>
-              )
-            )}
-          </>
-        ) : (
-          <>
-            <NobodyWrapper>
-              <Nobody>
-                <NobodyRabbit src={nobody} alt="nobody" />
-                <NobodyText>모두가 되는 시간이 없어요</NobodyText>
-              </Nobody>
-            </NobodyWrapper>
-            {candidateTimes.candidateTimes.map(
-              ({ date, dayOfWeek, startTime, endTime, participantNames }) => (
-                <Accordion
-                  key={`part ${date} ${startTime} ${endTime}`}
-                  date={date}
-                  dayOfWeek={dayOfWeek}
-                  startTime={startTime}
-                  endTime={endTime}
-                  participantNames={participantNames}
-                  count={participants.length}
-                />
-              )
-            )}
-          </>
+        {participants.length !==
+        candidateTimes.candidateTimes[0].participantNames.length ? (
+          <NobodyWrapper>
+            <Nobody>
+              <NobodyRabbit src={nobody} alt="nobody" />
+              <NobodyText>모두가 되는 시간이 없어요</NobodyText>
+            </Nobody>
+          </NobodyWrapper>
+        ) : null}
+
+        {candidateTimes.candidateTimes.map(
+          ({ date, dayOfWeek, startTime, endTime, participantNames }) => (
+            <Candidate
+              key={`part ${date} ${startTime} ${endTime}`}
+              date={date}
+              dayOfWeek={dayOfWeek}
+              startTime={startTime}
+              endTime={endTime}
+              participantNames={participantNames}
+              count={participants.length}
+            />
+          )
         )}
-
-        <>
-          {candidateTimes.candidateTimes.map(
-            ({ id, date, dayOfWeek, startTime, endTime, isConfirmed }) => {
-              <TimeWrapper
-                key={`all ${date} ${dayOfWeek} ${startTime} ${endTime}`}
-                isConfirmed={isConfirmed}
-              >
-                {date}
-                {`${date.slice(0, 2)}월 ${date.slice(
-                  3,
-                  5
-                )} (${dayOfWeek}) ${startTime} ~ ${endTime}`}
-              </TimeWrapper>;
-            }
-          )}
-        </>
       </Body>
 
       <ResultButton />