Merge branch 'dev' into release

codesquad-members-2023-team6 · Jun 2, 2023 · 1d8b48a · 1d8b48a
2 parents e35f6d9 + 8c2c840
commit 1d8b48a
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 32 deletions.
diff --git a/frontend/src/components/Empty/Empty.jsx b/frontend/src/components/Empty/Empty.jsx
@@ -0,0 +1,9 @@
+import styles from './Empty.module.css';
+import classNames from 'classnames/bind';
+
+const cx = classNames.bind(styles);
+
+export const Empty = ({ children }) => {
+  const emptyClassNames = cx('empty');
+  return <div className={emptyClassNames}>{children}</div>;
+};
diff --git a/frontend/src/components/Empty/Empty.module.css b/frontend/src/components/Empty/Empty.module.css
@@ -0,0 +1,9 @@
+.empty {
+  background-color: var(--color-light-neutral-background-strong);
+  padding: 36px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0px 0px 16px 16px;
+  border-top: 1px solid var(--color-light-neutral-border);
+}
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
@@ -14,6 +14,7 @@ import { TextInput } from './TextInput/TextInput';
 import { TextInputNormal } from './TextInputNormal/TextInputNormal';
 import { Progress } from './Progress/Progress';
 import { FileButton } from './FileButton/FileButton';
+import { Empty } from './Empty/Empty';
 
 export {
   Dropdown,
@@ -32,4 +33,5 @@ export {
   TextInputNormal,
   Progress,
   FileButton,
+  Empty,
 };
diff --git a/frontend/src/containers/IssueDetailPage/DetailHeader/DetailHeader.module.css b/frontend/src/containers/IssueDetailPage/DetailHeader/DetailHeader.module.css
@@ -2,7 +2,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid var(--color-light-neutral-text-weak);
+  border-bottom: 1px solid var(--color-light-neutral-border);
   padding: 0px 0px 25px 0px;
 }
 .issue-element {

diff --git a/frontend/src/containers/IssuePage/IssueList/IssueList.jsx b/frontend/src/containers/IssuePage/IssueList/IssueList.jsx
@@ -5,6 +5,7 @@ import {
   IssueListCheckingHeader,
   IssueListHeader,
 } from '@containers/index';
+import { Empty } from '@components/index';
 import { useEffect, useState } from 'react';
 import { checkContext } from '@src/services/issue';
 
@@ -16,11 +17,11 @@ export const IssueList = ({
   milestoneList,
   labelList,
   issueCount,
+  loading,
 }) => {
   const cx = classNames.bind(styles);
   const containerClassNames = cx('container');
   const contentsClassNames = cx('contents');
-  const emptyClassNames = cx('empty');
 
   const [checkStateObject, setCheckStateObject] = useState([]);
 
@@ -33,9 +34,8 @@ export const IssueList = ({
     setCheckStateObject(initialCheckState);
   }, [issueData]);
 
-  const isCheckedStateNumber = checkStateObject?.filter(
-    (item) => item.isChecked === true
-  ).length;
+  const isCheckedStateNumber =
+    checkStateObject?.filter((item) => item.isChecked === true).length ?? 0;
 
   const [isCheckedHeader, setIsCheckedHeader] = useState(false);
 
@@ -52,31 +52,34 @@ export const IssueList = ({
     setIsCheckedHeader(false);
   }, [issueData]);
 
+  const isReusltEmpty = issueData?.length !== 0;
+
   return (
     <checkContext.Provider value={[checkStateObject, setCheckStateObject]}>
       <div className={containerClassNames}>
-        {issueData &&
-          (isCheckedStateNumber === 0 ? (
-            <IssueListHeader
-              userList={userList}
-              assigneeList={assigneeList}
-              milestoneList={milestoneList}
-              issueCount={issueCount}
-              labelList={labelList}
-              isCheckedHeader={isCheckedHeader}
-              handleHeaderCheckState={handleHeaderCheckState}
-            ></IssueListHeader>
-          ) : (
-            <IssueListCheckingHeader
-              isCheckedStateNumber={isCheckedStateNumber}
-              isCheckedHeader={isCheckedHeader}
-              handleHeaderCheckState={handleHeaderCheckState}
-              setIssueData={setIssueData}
-              checkStateObject={checkStateObject}
-            ></IssueListCheckingHeader>
-          ))}
+        {isCheckedStateNumber === 0 ? (
+          <IssueListHeader
+            userList={userList}
+            assigneeList={assigneeList}
+            milestoneList={milestoneList}
+            issueCount={issueCount}
+            labelList={labelList}
+            isCheckedHeader={isCheckedHeader}
+            handleHeaderCheckState={handleHeaderCheckState}
+          ></IssueListHeader>
+        ) : (
+          <IssueListCheckingHeader
+            isCheckedStateNumber={isCheckedStateNumber}
+            isCheckedHeader={isCheckedHeader}
+            handleHeaderCheckState={handleHeaderCheckState}
+            setIssueData={setIssueData}
+            checkStateObject={checkStateObject}
+          ></IssueListCheckingHeader>
+        )}
         <ul className={contentsClassNames}>
-          {issueData?.length !== 0 ? (
+          {loading ? (
+            <Empty>로딩중</Empty>
+          ) : isReusltEmpty ? (
             issueData?.map((issue) => {
               const title = issue.title;
               const label = issue.labelList[0];
@@ -104,9 +107,7 @@ export const IssueList = ({
               );
             })
           ) : (
-            <div className={emptyClassNames}>
-              검색과 일치하는 결과가 없습니다.
-            </div>
+            <Empty>검색 결과가 없습니다.</Empty>
           )}
         </ul>
       </div>

diff --git a/...nd/src/containers/IssuePage/IssueList/IssueListCheckingHeader/IssueListCheckingHeader.jsx b/...nd/src/containers/IssuePage/IssueList/IssueListCheckingHeader/IssueListCheckingHeader.jsx
@@ -76,7 +76,7 @@ export const IssueListCheckingHeader = ({
         </div>
         <div className={cx('header-right')}>
           <span className={cx('checked-issue')}>
-            {isCheckedStateNumber}개 이슈 선택
+            {isCheckedStateNumber ?? 0}개 이슈 선택
           </span>
           <Dropdown
             width={dropdownWidth}

diff --git a/frontend/src/containers/IssuePage/IssueList/IssueListHeader/IssueElement/IssueElement.jsx b/frontend/src/containers/IssuePage/IssueList/IssueListHeader/IssueElement/IssueElement.jsx
@@ -20,7 +20,7 @@ export const IssueElement = ({
   const [checkStateObject, setCheckStateObject] = useContext(checkContext);
 
   const isCheckedValue =
-    checkStateObject.find((item) => item.issueId === issueId)?.isChecked ||
+    checkStateObject?.find((item) => item.issueId === issueId)?.isChecked ||
     false;
 
   const handleElementChecked = () => {

diff --git a/frontend/src/containers/IssuePage/IssuePage.jsx b/frontend/src/containers/IssuePage/IssuePage.jsx
@@ -23,13 +23,14 @@ export const IssuePage = () => {
   const CTAbtn = '이슈 작성';
 
   const [filters, setFilters] = useState(initialFilter);
-  const [issueData, setIssueData] = useState([]);
+  const [issueData, setIssueData] = useState(null);
   const [assigneeList, setAssigneeList] = useState([]);
   const [labelList, setLabelList] = useState([]);
   const [userList, setUserList] = useState([]);
   const [milestoneList, setMilestoneList] = useState([]);
   const [labelAndMilestoneInfo, setLabelAndMilestoneInfo] = useState(tabDatas);
   const [issueCount, setIssueCounts] = useState({ open: 0, closed: 0 });
+  const [loading, setLoading] = useState(true);
 
   const navigate = useNavigate();
 
@@ -74,6 +75,7 @@ export const IssuePage = () => {
     };
 
     (async () => {
+      setLoading(true);
       const queries = {
         ...filters,
       };
@@ -107,6 +109,7 @@ export const IssuePage = () => {
           milestoneList.length
         )
       );
+      setLoading(false);
     })();
   }, [filters]);
 
@@ -156,6 +159,7 @@ export const IssuePage = () => {
             milestoneList={milestoneList}
             labelList={labelList}
             issueCount={issueCount}
+            loading={loading}
           ></IssueList>
         </div>
       </div>