[#52] Refactor: store.ts 분리

fe/src/components/Issues/IssueItemLeft.tsx

@@ -7,7 +7,7 @@ import { Checkbox } from '@material-ui/core';
 import Label from 'components/common/Label';
 import { useHistory } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { clickedIssueIdAtom } from 'store';
+import { clickedIssueIdAtom } from 'stores/issueStore';
 
 const IssueItemLeft = ({
   id,

fe/src/components/Issues/IssueList.tsx

@@ -1,11 +1,11 @@
 import { useRecoilValue } from 'recoil';
-import { issuesQuery } from 'store';
+import { issuesQuery } from 'stores/issueStore';
 import styled from 'styled-components';
 import IssueItem from './IssueItem';
 
 export const IssueList = () => {
   const IssuesArray = useRecoilValue(issuesQuery);
-  
+
   return (
     <StyledIssueList>
       {IssuesArray.map((issue, idx) => (

fe/src/components/Issues/IssuesHeader.tsx

@@ -4,7 +4,7 @@ import { ReactComponent as Open } from 'icons/openIssue.svg';
 import { ReactComponent as Close } from 'icons/closeIssue.svg';
 import Filter from 'components/common/Filter';
 import { useRecoilValue, useRecoilState } from 'recoil';
-import { issuesStateAtom, totalCountOfIssue } from 'store';
+import { issuesStateAtom, totalCountOfIssue } from 'stores/issueStore';
 import { MouseEvent } from 'react';
 
 const IssuesHeader = () => {
@@ -44,7 +44,7 @@ const IssuesButton = styled(Button)`
   color: ${({ theme }) => theme.color.grayscale.label};
   stroke: ${({ theme }) => theme.color.grayscale.label};
 
-  &[aria-checked='true'] { 
+  &[aria-checked='true'] {
     font-weight: 700;
     stroke: ${({ theme }) => theme.color.grayscale.titleActive};
     color: ${({ theme }) => theme.color.grayscale.titleActive};

fe/src/components/common/CommentTextarea.tsx

@@ -1,20 +1,13 @@
-import { ChangeEvent, ChangeEventHandler, useState } from 'react';
 import styled from 'styled-components';
 import { Box } from '@material-ui/core';
 import { ReactComponent as FileUploadIconSvg } from 'icons/file-upload.svg';
-import { SetterOrUpdater } from 'recoil';
 
 interface CommentTextareaProps {
   value: string;
   handleChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
-const CommentTextarea = ({
-  value,
-  handleChange,
-}: CommentTextareaProps) => {
-
-
+const CommentTextarea = ({ value, handleChange }: CommentTextareaProps) => {
   return (
     <Wrapper>
       <StyledCommentTextarea>

fe/src/components/common/Filter.tsx

@@ -7,15 +7,20 @@ import { ReactComponent as PlusIconSvg } from 'icons/plus.svg';
 import Popover from '@material-ui/core/Popover';
 import { FilterPropsType } from 'types/filterType';
 import { useRecoilValue } from 'recoil';
-import { filterSelector } from 'store';
+import { filterSelector } from 'stores/filterStore';
 import { getTitle } from 'utils/util';
 
-export default function Filter({ isPlus, filterType,value,clickHandler,setState }: FilterPropsType) {
+export default function Filter({
+  isPlus,
+  filterType,
+  value,
+  clickHandler,
+  setState,
+}: FilterPropsType) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
-
 
   const handleClose = () => {
     setAnchorEl(null);

fe/src/components/header/Header.tsx

@@ -1,7 +1,7 @@
 import AuthorAvatar from 'components/common/AuthorAvatar';
 import Logo from 'components/common/Logo';
 import { useRecoilValue } from 'recoil';
-import { decodedUserDataAtom } from 'store';
+import { decodedUserDataAtom } from 'stores/userStore';
 import styled from 'styled-components';
 import { DecodedUserDataType } from 'types/storeTypes';
 

fe/src/components/issue-detail/Comment.tsx

@@ -5,7 +5,7 @@ import { ReactComponent as EditSvg } from 'icons/edit.svg';
 import { ReactComponent as EmojiSvg } from 'icons/emoji.svg';
 import { CommentType } from 'types/issueType';
 import { useRecoilValue } from 'recoil';
-import { decodedUserDataAtom } from 'store';
+import { decodedUserDataAtom } from 'stores/userStore';
 import { detailIssueAuthorIdAtom } from 'stores/detailIssueStore';
 
 const Comment = ({ commentData }: { commentData: CommentType }) => {

fe/src/components/issue-detail/IssueDetailBody.tsx

@@ -1,20 +1,23 @@
+import axios from 'axios';
 import { Box } from '@material-ui/core';
-import AuthorAvatar from 'components/common/AuthorAvatar';
-import Comment from 'components/issue-detail/Comment';
 import styled from 'styled-components';
-import CommentTextarea from 'components/common/CommentTextarea';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { clickedIssueIdAtom, decodedUserDataAtom } from 'store';
-import { CommentType } from 'types/issueType';
+
+import AuthorAvatar from 'components/common/AuthorAvatar';
 import CreateButton from 'components/buttons/CreateButton';
+import Comment from 'components/issue-detail/Comment';
 import { ReactComponent as PlusSvg } from 'icons/plus.svg';
+import CommentTextarea from 'components/common/CommentTextarea';
+
+import { clickedIssueIdAtom } from 'stores/issueStore';
+import { decodedUserDataAtom } from 'stores/userStore';
 import {
   commentDesctiptionAtom,
   commentsQuery,
   detailIssueAuthorIdAtom,
   issueDetailQuery,
 } from 'stores/detailIssueStore';
-import axios from 'axios';
+import { CommentType } from 'types/issueType';
 
 const IssueDetailBody = () => {
   const clickedIssueId = useRecoilValue(clickedIssueIdAtom);
@@ -55,7 +58,7 @@ const IssueDetailBody = () => {
     })();
   };
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
-  setCommentDesctiption(e.target.value);
+    setCommentDesctiption(e.target.value);
 
   return (
     <Box display="flex">

fe/src/components/labels/Labels.tsx

@@ -1,6 +1,6 @@
 import { Wrapper, Upper, Lower } from 'components/common/Table';
 import { useRecoilValue } from 'recoil';
-import { labelQuery, totalCountOfLabels } from 'store';
+import { labelQuery, totalCountOfLabels } from 'stores/labelStore';
 import styled from 'styled-components';
 import LabelsItem from './LabelsItem';
 

fe/src/components/labels/LabelsItemInput.tsx

@@ -9,7 +9,7 @@ import LabelTextColorInput from './LabelTextColorInput';
 import LabelColorInput from './LabelColorInput';
 import { LabelItemType } from 'types/issueType';
 import { useReducer } from 'react';
-import { labelUpdateAtom } from 'store';
+import { labelUpdateAtom } from 'stores/labelStore';
 import { useSetRecoilState } from 'recoil';
 import axios from 'axios';
 import { labelReducer } from 'utils/reducer';

fe/src/components/labels/LabelsItemRight.tsx

@@ -1,13 +1,13 @@
+import { useState, useEffect, MouseEvent } from 'react';
+import { useSetRecoilState } from 'recoil';
 import { Button } from '@material-ui/core';
 import styled from 'styled-components';
+
+import useAxios from 'hook/useAxios';
 import { ReactComponent as EditSvg } from 'icons/edit.svg';
 import { ReactComponent as DeleteSvg } from 'icons/delete.svg';
-import { MouseEvent } from 'react';
-import useAxios from 'hook/useAxios';
-import { useState, useEffect } from 'react';
-import { labelUpdateAtom } from 'store';
-import { useSetRecoilState } from 'recoil';
 
+import { labelUpdateAtom } from 'stores/labelStore';
 
 const LabelsItemRight = ({
   clickHandler,

fe/src/components/labels/NewLabelsItemInput.tsx

@@ -1,19 +1,18 @@
+import { useReducer, ChangeEvent } from 'react';
+import axios from 'axios';
+import styled from 'styled-components';
+import { useSetRecoilState } from 'recoil';
+
 import Input from 'components/common/Input';
 import Label from 'components/common/Label';
 import CreateButton from 'components/buttons/CreateButton';
-import { ReactComponent as PlusSvg } from 'icons/plus.svg';
-import { ReactComponent as XSvg } from 'icons/Xicon.svg';
-import { ChangeEvent } from 'react';
-import styled from 'styled-components';
 import LabelTextColorInput from './LabelTextColorInput';
 import LabelColorInput from './LabelColorInput';
-import { LabelItemType } from 'types/issueType';
-import { useReducer } from 'react';
-import { labelUpdateAtom } from 'store';
-import { useSetRecoilState } from 'recoil';
-import axios from 'axios';
+import { ReactComponent as PlusSvg } from 'icons/plus.svg';
+
 import { labelReducer } from 'utils/reducer';
 import { labelParser } from 'utils/util';
+import { labelUpdateAtom } from 'stores/labelStore';
 
 const NewLabelsItemInput = ({
   setPopup,

fe/src/components/milestones/NewMilestone.tsx

@@ -1,15 +1,15 @@
-import Input from 'components/common/Input';
 import { ChangeEvent, useReducer } from 'react';
+import { useSetRecoilState } from 'recoil';
+import axios from 'axios';
 import styled from 'styled-components';
+
+import Input from 'components/common/Input';
 import CreateButton from 'components/buttons/CreateButton';
-import { ReactComponent as EditSvg } from 'icons/edit.svg';
-import { ReactComponent as XSvg } from 'icons/Xicon.svg';
 import { ReactComponent as PlusSvg } from 'icons/plus.svg';
+
 import { milestoneReducer } from 'utils/reducer';
-import { milestoneUpdateAtom } from 'stores/milestoneStore';
-import axios from 'axios';
-import { useSetRecoilState } from 'recoil';
 import { milestoneParser } from 'utils/util';
+import { milestoneUpdateAtom } from 'stores/milestoneStore';
 
 const NewMilestone = ({
   setPopup,

fe/src/components/navbar/NavbarButtons.tsx

@@ -6,7 +6,7 @@ import { NavType } from 'types/issueType';
 import styled from 'styled-components';
 import { getNavButtonTitle } from 'utils/util';
 import { useRecoilValue } from 'recoil';
-import { totalCountOfLabels } from 'store';
+import { totalCountOfLabels } from 'stores/labelStore';
 import { Link, useHistory } from 'react-router-dom';
 import { MouseEvent } from 'react';
 import { totalCountOfMilestone } from 'stores/milestoneStore';

fe/src/components/new-issue/NewIssueLeft.tsx

@@ -1,10 +1,12 @@
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import styled from 'styled-components';
+
 import AuthorAvatar from 'components/common/AuthorAvatar';
 import CommentTextarea from 'components/common/CommentTextarea';
 import IssueTitleInput from 'components/common/IssueTitleInput';
-import React, { useReducer } from 'react';
-import { useRecoilState } from 'recoil';
-import { newIssuesContentAtom } from 'store';
-import styled from 'styled-components';
+
+import { newIssuesContentAtom } from 'stores/issueStore';
 
 const NewIssueLeft = () => {
   const [newIssuesContent, setNewIssuesContent] =
@@ -20,7 +22,7 @@ const NewIssueLeft = () => {
       ...state,
       title: e.target.value,
     }));
-  }; 
+  };
   return (
     <StyledNewIssueLeft>
       <NewIssueTitle>

fe/src/components/new-issue/NewIssueRight.tsx

@@ -1,13 +1,16 @@
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
 import { Divider } from '@material-ui/core';
+
 import AuthorAvatar from 'components/common/AuthorAvatar';
 import Label from 'components/common/Label';
 import MilestoneBar from 'components/milestones/MilestoneBar';
-import { useRecoilValue } from 'recoil';
-import { assigneeQuery, labelQuery } from 'store';
+import { labelQuery } from 'stores/labelStore';
+import SidebarList from 'components/new-issue/SidebarList';
+
 import { openedMilestoneQuery } from 'stores/milestoneStore';
 import { NewIssuesIdQuery } from 'stores/NewIssuesSideStore';
-import styled from 'styled-components';
-import SidebarList from './SidebarList';
+import { assigneeQuery } from 'stores/userStore';
 
 const NewIssueRight = () => {
   const newIssueId = useRecoilValue(NewIssuesIdQuery);
@@ -53,9 +56,9 @@ const NewIssueRight = () => {
 export default NewIssueRight;
 const MileStoneSpan = styled.span`
   line-height: 3;
-  font-weight: 700; 
+  font-weight: 700;
   color: ${({ theme }) => theme.color.grayscale.label};
-`; 
+`;
 const StyledFlex = styled.div`
   display: flex;
   width: 100%;

fe/src/pages/IssuesPage.tsx

@@ -2,7 +2,7 @@ import Wrapper from 'components/Issues/Issues';
 import Navbar from 'components/navbar/Navbar';
 import { useRecoilState } from 'recoil';
 import { useHistory } from 'react-router-dom';
-import { decodedUserDataAtom } from 'store';
+import { decodedUserDataAtom } from 'stores/userStore';
 import decode from 'jwt-decode';
 import { DecodedUserDataType } from 'types/storeTypes';
 

fe/src/pages/NewIssuePage.tsx

@@ -1,17 +1,19 @@
+import { useEffect } from 'react';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
+import styled from 'styled-components';
 import { Divider } from '@material-ui/core';
 import { instanceWithAuth } from 'api';
+import { useHistory } from 'react-router-dom';
+
 import CustomButton from 'components/buttons/CustomButton';
 import NewIssueLeft from 'components/new-issue/NewIssueLeft';
 import NewIssueRight from 'components/new-issue/NewIssueRight';
-import { useEffect } from 'react';
-import { useHistory } from 'react-router-dom';
 
-import { useRecoilValue, useResetRecoilState } from 'recoil';
-import { newIssuesContentAtom } from 'store';
+import { newIssuesContentAtom } from 'stores/issueStore';
 import { NewIssuesIdQuery } from 'stores/NewIssuesSideStore';
-import styled from 'styled-components';
+
 const NewIssuePage = () => {
-  const history = useHistory()
+  const history = useHistory();
   const IdReset = useResetRecoilState(NewIssuesIdQuery);
   const contentReset = useResetRecoilState(newIssuesContentAtom);
   const IssuesId = useRecoilValue(NewIssuesIdQuery);
@@ -27,7 +29,7 @@ const NewIssuePage = () => {
           assignee: IssuesId.assigneeList[0],
           label_ids: IssuesId.labelList,
           milestone_id: IssuesId.milestoneList[0],
-        } 
+        }
       );
     })();
     history.push('/issues');