Merge 버그들 수정

[FE] 버그들 수정
codesquad-members-2021 · Jun 24, 2021 · 3b6ea99 · 3b6ea99
2 parents 8c8ddcb + fcad256
commit 3b6ea99
Show file tree

Hide file tree

Showing 18 changed files with 128 additions and 22,973 deletions.
diff --git a/FE/issue-tracker/package-lock.json b/FE/issue-tracker/package-lock.json
diff --git a/FE/issue-tracker/src/components/common/CommonTextArea.tsx b/FE/issue-tracker/src/components/common/CommonTextArea.tsx
@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
 import { Textarea } from '@chakra-ui/textarea';
-import { contentsInput } from '@components/newIssue/style';
+import { contentsInputStyle } from '@components/newIssue/style';
 import { ReactComponent as FileIcon } from '@assets/file.svg';
 
 function CommonTextArea() {
   return (
     <Description>
-      <Textarea {...contentsInput} />
+      <Textarea {...contentsInputStyle} />
       <Span>띄어쓰기 포함 \d\d 자</Span>
       <ImageUploadWrap>
         <FileIcon />

diff --git a/FE/issue-tracker/src/components/issueDetail/CommentBox.tsx b/FE/issue-tracker/src/components/issueDetail/CommentBox.tsx
@@ -12,7 +12,7 @@ import { issueDetailComment } from '@store/atoms/issueDetail';
 import type { Param } from '@pages/IssueDetail';
 
 import { completeButton } from '@components/common/CompleteBtn';
-import { contentsInput } from '@components/newIssue/style';
+import { contentsInputStyle } from '@components/newIssue/style';
 import Comment from './Comment';
 import { useHistory } from 'react-router-dom';
 
@@ -28,7 +28,6 @@ function CommentBox() {
   };
 
   const handleClickCommentUpload = () => {
-    console.log(newComment);
     const uploadComment = async () => {
       const url = `${issueAPI}/${id}/comments`;
       await fetchWithAuth(url, '코멘트 업로드 오류', {
@@ -53,7 +52,7 @@ function CommentBox() {
           <Textarea
             value={newComment}
             onChange={handleOnChangeText}
-            {...contentsInput}
+            {...contentsInputStyle}
           />
           <Span>띄어쓰기 포함 \d\d 자</Span>
           <ImageUploadWrap>

diff --git a/FE/issue-tracker/src/components/issueDetail/TextArea.tsx b/FE/issue-tracker/src/components/issueDetail/TextArea.tsx
@@ -6,7 +6,7 @@ import { Button, Textarea } from '@chakra-ui/react';
 import { ReactComponent as FileIcon } from '@assets/file.svg';
 
 import type { Param } from '@pages/IssueDetail';
-import { contentsInput } from '@components/newIssue/style';
+import { contentsInputStyle } from '@components/newIssue/style';
 import { fetchWithAuth } from '@utils/fetchWithAuth';
 import { issueAPI } from '@const/var';
 
@@ -45,7 +45,7 @@ function TextArea({ value, commentID, toggleState, setCommentValue }: Prop) {
         <Textarea
           value={value}
           onChange={handleOnChangeText}
-          {...contentsInput}
+          {...contentsInputStyle}
           background="gr_offWhite"
         />
         <Span>띄어쓰기 포함 {value.length}자</Span>
@@ -72,8 +72,8 @@ const Description = styled.div`
   margin-bottom: 12px;
   position: relative;
   background: ${({ theme }) => theme.colors.gr_offWhite};
-  border-radius: 0 0 ${({ theme }) => theme.radii['2xl']}
-    ${({ theme }) => theme.radii['2xl']};
+  border-radius: 0 0 ${({ theme }) => theme.radii['2xl']};
+  ${({ theme }) => theme.radii['2xl']};
   border: 1px solid ${({ theme }) => theme.colors.gr_line};
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.bl_initial};

diff --git a/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx
@@ -31,7 +31,6 @@ function AuthorFilter() {
     const target = e.target as HTMLInputElement;
     const checkNumber = target.id;
     if (checkNumber === '') return;
-    console.log('hi');
 
     const toggleBoolean = isChecked[checkNumber] === true ? false : true;
     if (toggleBoolean)

diff --git a/FE/issue-tracker/src/components/issues/tableMain/IssueList.tsx b/FE/issue-tracker/src/components/issues/tableMain/IssueList.tsx
@@ -1,7 +1,15 @@
-import { useRecoilValue, useRecoilValueLoadable } from 'recoil';
+import { useEffect } from 'react';
+import {
+  useRecoilValue,
+  useRecoilValueLoadable,
+  useSetRecoilState,
+} from 'recoil';
 
-import { queryString, wholeIssueLists } from '@store/atoms/issueList';
-import { useReRender } from '@utils/query';
+import {
+  formerDataKey,
+  queryString,
+  wholeIssueLists,
+} from '@store/atoms/issueList';
 
 import { IssueSkeleton } from '@components/common/Skeleton';
 import Issue from './Issue';
@@ -11,12 +19,20 @@ import NoIssue from './NoIssue';
 function IssueList() {
   const query = useRecoilValue(queryString);
   const { state, contents } = useRecoilValueLoadable(wholeIssueLists);
+  const setReRenderKeyUpdate = useSetRecoilState(formerDataKey);
   const renderNoIssue = (contents: any): JSX.Element | undefined => {
     if (typeof contents === 'string' || contents.length === 0) {
       return <NoIssue isSearched={false} />;
     }
   };
-  useReRender(query);
+
+  useEffect(() => {
+    const currentQuery = window.location.search;
+    if (`?${query}` === currentQuery) return;
+
+    window.history.pushState({ query }, query, `?${query}`);
+    setReRenderKeyUpdate((num) => num + 1);
+  }, [query, setReRenderKeyUpdate]);
 
   return (
     <>
@@ -56,3 +72,6 @@ type Person = {
   name: string;
   avatar_url: string;
 };
+function setReRenderKeyUpdat(arg0: (num: any) => any) {
+  throw new Error('Function not implemented.');
+}
diff --git a/FE/issue-tracker/src/components/login/LoginMain.tsx b/FE/issue-tracker/src/components/login/LoginMain.tsx
@@ -24,8 +24,6 @@ function LoginMain() {
   const [isLoginActive, setIsActiveLogin] = useState(false);
   const [isInputtedID, setIsInputtedID] = useState(false);
   const [isInputtedPW, setIsInputtedPW] = useState(false);
-  const [isLogin, setIsLogin] = useRecoilState(isLoginState);
-  const setLoginInfo = useSetRecoilState(loginInfoState);
   const [password, setPassword] = useState('');
   const history = useHistory();
 
@@ -50,8 +48,8 @@ function LoginMain() {
   useEffect(() => {
     const { code } = queryString.parse(window.location.search);
     if (!code) return;
-    else if (typeof code === 'string' && !isLogin) {
-      fetchToken({ setIsLogin, setLoginInfo, code, history });
+    else if (typeof code === 'string') {
+      fetchToken({ code, history });
     }
   }, []);
 

diff --git a/FE/issue-tracker/src/components/login/fetchToken.ts b/FE/issue-tracker/src/components/login/fetchToken.ts
@@ -1,6 +1,5 @@
 import jwt_decode from 'jwt-decode';
 import { TOKEN_URL } from '@const/var';
-import { loginInfoType } from '@store/atoms/login';
 
 type decodedType = {
   avatar_url: string;
@@ -20,20 +19,17 @@ const getDecodedOauthToken = (jwt: string) => {
 };
 
 type Arg = {
-  setIsLogin: (state: boolean) => void;
-  setLoginInfo: (state: loginInfoType) => void;
   code: string;
   history: any;
 };
 
-const fetchToken = async ({ setIsLogin, setLoginInfo, code, history }: Arg) => {
+const fetchToken = async ({ code, history }: Arg) => {
   try {
     const response = await fetch(TOKEN_URL + code);
     const { jwt } = await response.json();
     const decodedOauthToken = getDecodedOauthToken(jwt);
     localStorage.setItem('oauth_login_token', jwt);
-    setLoginInfo(decodedOauthToken);
-    setIsLogin(true);
+    localStorage.setItem('login_info', JSON.stringify(decodedOauthToken));
     history.push('/issues');
   } catch (error) {
     console.error('getAccessToken Error');

diff --git a/FE/issue-tracker/src/components/newIssue/ButtonBox.tsx b/FE/issue-tracker/src/components/newIssue/ButtonBox.tsx
@@ -11,13 +11,13 @@ import { fetchWithAuth } from '@utils/fetchWithAuth';
 import {
   isInputtedTitleAtom,
   isClickedCompleteBtnAtom,
-  newIssueContentsAtom,
+  newIssueTitleAtom,
 } from '@store/atoms/newIssue';
 import { getNewIssueBody } from '@store/selectors/newIssue';
 
 function ButtonBox() {
   const isInputtedTitle = useRecoilValue(isInputtedTitleAtom);
-  const newIssueContents = useRecoilValue(newIssueContentsAtom);
+  const newIssueTitle = useRecoilValue(newIssueTitleAtom);
   const newIssueHeaderBody = useRecoilValue(getNewIssueBody);
   const [isClickedCompleteBtn, setIsClickedCompleteBtn] = useRecoilState(
     isClickedCompleteBtnAtom
@@ -32,18 +32,18 @@ function ButtonBox() {
     const postIssue = async () => {
       try {
         await fetchWithAuth(`${baseURL}/issues`, '🤯이슈 생성 에러', header);
-        history.push('/issues');
         setIsClickedCompleteBtn(false);
+        history.push('/issues');
       } catch (error) {
         console.error(error);
       }
     };
     postIssue();
-  }, [newIssueContents]);
+  }, [newIssueTitle]);
 
   return (
     <ButtonBoxWrap>
-      <Link to="issues">
+      <Link to="/issues">
         <CancelBtn>
           <CancelIcon className="cancel_icon" />
           <span>작성취소</span>

diff --git a/FE/issue-tracker/src/components/newIssue/ContentsTextArea.tsx b/FE/issue-tracker/src/components/newIssue/ContentsTextArea.tsx
@@ -1,44 +1,24 @@
-import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { Textarea } from '@chakra-ui/textarea';
 
-import {
-  isClickedCompleteBtnAtom,
-  newIssueContentsAtom,
-} from '@store/atoms/newIssue';
+import { newIssueContentsAtom } from '@store/atoms/newIssue';
 import { contentsInputStyle } from './style';
 
 function ContentsTextArea() {
-  const [numOfChars, setNumOfChars] = useState(0);
-  const isClickedCompleteBtn = useRecoilValue(isClickedCompleteBtnAtom);
   const [newIssueContents, setNewIssueContents] =
     useRecoilState(newIssueContentsAtom);
-  const contentsInput = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (isClickedCompleteBtn && contentsInput.current != null)
-      setNewIssueContents({
-        ...newIssueContents,
-        description: contentsInput.current.value,
-      });
-  }, [isClickedCompleteBtn]);
 
   const handleChangeTextArea = (e: React.ChangeEvent) => {
     const target = e.target as HTMLInputElement;
-    const length = target.value.length;
-    if (numOfChars === length) return;
-    setNumOfChars(length);
+    const contents = target.value;
+    setNewIssueContents(contents);
   };
 
   return (
     <>
-      <Textarea
-        {...contentsInputStyle}
-        ref={contentsInput}
-        onChange={handleChangeTextArea}
-      />
-      <Span>띄어쓰기 포함 {numOfChars} 자</Span>
+      <Textarea {...contentsInputStyle} onChange={handleChangeTextArea} />
+      <Span>띄어쓰기 포함 {newIssueContents.length} 자</Span>
     </>
   );
 }

diff --git a/FE/issue-tracker/src/components/newIssue/SelectBox.tsx b/FE/issue-tracker/src/components/newIssue/SelectBox.tsx
@@ -1,10 +1,36 @@
+import { useEffect } from 'react';
 import styled from 'styled-components';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
 
 import SelectAssignee from './select/SelectAssignee';
 import SelectLabel from './select/SelectLabel';
 import SelectMilestone from './select/SelectMilestone';
+import {
+  checkedAssigneesAtom,
+  checkedLabelsAtom,
+  checkedMilestoneAtom,
+} from '@store/atoms/checkedThings';
+import { isClickedCompleteBtnAtom } from '@store/atoms/newIssue';
 
 function SelectBox() {
+  const setCheckedAssignees = useSetRecoilState(checkedAssigneesAtom);
+  const setCheckedLabels = useSetRecoilState(checkedLabelsAtom);
+  const setCheckedMilestone = useSetRecoilState(checkedMilestoneAtom);
+  const isClickedCompleteBtn = useRecoilValue(isClickedCompleteBtnAtom);
+
+  useEffect(() => {
+    if (!isClickedCompleteBtn) {
+      setCheckedAssignees([]);
+      setCheckedLabels([]);
+      setCheckedMilestone(null);
+    }
+  }, [
+    isClickedCompleteBtn,
+    setCheckedAssignees,
+    setCheckedLabels,
+    setCheckedMilestone,
+  ]);
+
   return (
     <SelectBoxWrap>
       <SelectAssignee />

diff --git a/FE/issue-tracker/src/components/newIssue/TitleInput.tsx b/FE/issue-tracker/src/components/newIssue/TitleInput.tsx
@@ -1,28 +1,24 @@
 import { useEffect, useRef } from 'react';
 import { Input } from '@chakra-ui/input';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
 
 import {
   isInputtedTitleAtom,
   isClickedCompleteBtnAtom,
-  newIssueContentsAtom,
+  newIssueTitleAtom,
 } from '@store/atoms/newIssue';
 import { titleInputStyle } from './style';
 
 function TitleInput() {
   const [isInputtedTitle, setIsInputtedTitle] =
     useRecoilState(isInputtedTitleAtom);
   const isClickedCompleteBtn = useRecoilValue(isClickedCompleteBtnAtom);
-  const [newIssueContents, setNewIssueContents] =
-    useRecoilState(newIssueContentsAtom);
+  const setNewIssueTitle = useSetRecoilState(newIssueTitleAtom);
   const titleInput = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (isClickedCompleteBtn && titleInput.current != null)
-      setNewIssueContents({
-        ...newIssueContents,
-        title: titleInput.current.value,
-      });
+      setNewIssueTitle(titleInput.current.value);
   }, [isClickedCompleteBtn]);
 
   const handleChangeTitle = (e: React.ChangeEvent) => {

diff --git a/FE/issue-tracker/src/components/newIssue/select/SelectAssignee.tsx b/FE/issue-tracker/src/components/newIssue/select/SelectAssignee.tsx
@@ -15,11 +15,6 @@ function SelectAssignee() {
   const [errorMsg, setErrorMsg] = useState('No Error');
   const checkedAssignees = useRecoilValue(checkedAssigneesAtom);
 
-  const checkedAssigneesInfo = checkedAssignees.map((id) => {
-    if (assignees !== null)
-      return assignees.find((assignee) => assignee.user_id === id);
-  }) as assigneeType[];
-
   const handleClickAssignee = () => {
     fetchModal({
       path: 'assignees',
@@ -28,6 +23,13 @@ function SelectAssignee() {
     });
   };
 
+  const checkedAssigneesInfo =
+    assignees == null
+      ? []
+      : (checkedAssignees.map((id) =>
+          assignees.find((assignee) => assignee.user_id === id)
+        ) as assigneeType[]);
+
   return (
     <Wrap>
       <Menu>
@@ -44,7 +46,7 @@ function SelectAssignee() {
         <AssigneeModal assignees={assignees} errorMsg={errorMsg} />
       </Menu>
       <AddList>
-        {checkedAssigneesInfo &&
+        {checkedAssigneesInfo.length > 0 &&
           checkedAssigneesInfo.map(({ user_id, name, avatar_url }) => {
             return (
               <li key={user_id}>