Merge branch 'dev' into release

codesquad-members-2023-team6 · Jun 1, 2023 · 2a771f3 · 2a771f3
2 parents b775f6d + 3a81508
commit 2a771f3
Show file tree

Hide file tree

Showing 18 changed files with 197 additions and 169 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -9,6 +9,7 @@ import {
 import { routes } from '@constants/routes';
 import { getToken } from '@services/login';
 import { removeToken } from '@services/login';
+import { StoreProvider } from './stores/StoreProvider';
 
 const RequireAuth = ({ children }) => {
   const navigate = useNavigate();
@@ -22,31 +23,28 @@ const RequireAuth = ({ children }) => {
 };
 
 function App() {
-  // if (process.env.NODE_ENV === 'development') {
-  //   const { worker } = require('./mocks/browser');
-  //   worker.start();
-  // }
-
   return (
     <div className="App">
-      <BrowserRouter>
-        <Routes>
-          {routes.map((route) => {
-            const { path, element, auth, hideNavbar } = route;
-            return (
-              <Route
-                key={path}
-                path={path}
-                element={
-                  <Layout hideNavbar={hideNavbar}>
-                    {auth ? <RequireAuth>{element}</RequireAuth> : element}
-                  </Layout>
-                }
-              />
-            );
-          })}
-        </Routes>
-      </BrowserRouter>
+      <StoreProvider>
+        <BrowserRouter>
+          <Routes>
+            {routes.map((route) => {
+              const { path, element, auth, hideNavbar } = route;
+              return (
+                <Route
+                  key={path}
+                  path={path}
+                  element={
+                    <Layout hideNavbar={hideNavbar}>
+                      {auth ? <RequireAuth>{element}</RequireAuth> : element}
+                    </Layout>
+                  }
+                />
+              );
+            })}
+          </Routes>
+        </BrowserRouter>
+      </StoreProvider>
     </div>
   );
 }

diff --git a/frontend/src/Test.jsx b/frontend/src/Test.jsx
@@ -1,77 +1,25 @@
-import { Dropdown, Tab, Button, InformationTag } from '@components/index';
-import { IssuePage, IssueElement } from '@containers/index';
-import { useState } from 'react';
+import { useReducer } from 'react';
 
-export function Test() {
-  const [isDropdownOpen, setDropdownOpen] = useState(false);
-  const [selected, setSelected] = useState('selected option1');
-  const handleDropdown = (isOpen) => {
-    return () => setDropdownOpen(isOpen);
-  };
-  const [active, setActive] = useState(null);
+const initialState = { count: 0 };
 
-  return (
-    <div>
-      <Dropdown
-        isOpen={isDropdownOpen}
-        btnText={selected}
-        hasRadioBtn={true}
-        toggleOpen={handleDropdown(!isDropdownOpen)}
-        options={[
-          {
-            id: 'test',
-            profile:
-              'https://s3.ap-northeast-2.amazonaws.com/image.themiilk.com/production/reporters/183650d33f1/e5c5004c6e_1663847761.png',
-            contents: 'selected option1',
-          },
-          {
-            id: 'test2',
-            profile: 'https://assets.themiilk.com/test/test-profile1.png',
-            contents: 'selected option2',
-          },
-        ]}
-        header={'헤더'}
-        selected={selected}
-        optionOnClick={({ currentTarget }) =>
-          setSelected(currentTarget.innerText)
-        }
-      ></Dropdown>
+function reducer(state, action) {
+  switch (action.type) {
+    case 'increment':
+      return { count: state.count + 1 };
+    case 'decrement':
+      return { count: state.count - 1 };
+    default:
+      throw new Error();
+  }
+}
 
-      <Tab
-        buttonDatas={[
-          { text: 'LEFT', icon: 'plus' },
-          { text: 'RIGHT', icon: 'plus' },
-        ]}
-        active={active}
-        _onClick={({ currentTarget }) => setActive(currentTarget.innerText)}
-      ></Tab>
-      <Button iconName="plus" text="BUTTON" btnSize="l" color="blue"></Button>
-      <Button text="BUTTON" btnSize="m" color="black"></Button>
-      <Button text="BUTTON" btnSize="s" color="black"></Button>
-      <InformationTag
-        iconName="alertCircle"
-        text="Label"
-        bgColor="#007AFF"
-        mode="light"
-      ></InformationTag>
-      <InformationTag
-        iconName="archive"
-        text="Label"
-        bgColor="red"
-        mode="light"
-      ></InformationTag>
-      <InformationTag text="Label" mode="neutral"></InformationTag>
-      <IssuePage></IssuePage>
-      <IssueElement
-        iconName="alertCircle"
-        title="이슈제목"
-        label="레이블 이름"
-        issueNumber="#3"
-        timeStamp="2023-05-15"
-        writer="sarang_daddy"
-        mileStone="마일스톤"
-        profile="https://assets.themiilk.com/test/test-profile1.png"
-      ></IssueElement>
-    </div>
+export function Test() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return (
+    <>
+      Count: {state.count}
+      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
+      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
+    </>
   );
 }
diff --git a/frontend/src/components/Layout/Layout.jsx b/frontend/src/components/Layout/Layout.jsx
@@ -17,7 +17,7 @@ export const Layout = ({ children, hideNavbar }) => {
 
   return (
     <>
-      {!hideNavbar && <Navbar user={MY_USER_DATA}></Navbar>}
+      {!hideNavbar && <Navbar></Navbar>}
       <div className={contentsClassNames} style={contentsInlineStyles}>
         {children}
       </div>

diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
@@ -3,17 +3,20 @@ import classNames from 'classnames/bind';
 import imagefiles from '@assets/images/index';
 import { Dropdown, Profile } from '@components/index';
 import { useNavigate } from 'react-router-dom';
-import { useState } from 'react';
+import { useContext, useEffect, useReducer, useState } from 'react';
 import { logout } from '@services/login';
+import { storeContext } from '@stores/index';
 
-export const Navbar = ({ user = { profile: false } }) => {
+export const Navbar = () => {
   const navigate = useNavigate();
   const cx = classNames.bind(styles);
   const navClassNames = cx('navbar');
   const containerClassNames = cx('container');
   const LogoComponent = imagefiles['logoType'];
   const logoHeight = 40;
 
+  const [user, userDispatch] = useContext(storeContext).user;
+
   const handleLogoClick = () => {
     navigate('/');
   };
@@ -35,9 +38,8 @@ export const Navbar = ({ user = { profile: false } }) => {
           onClick={handleLogoClick}
           height={logoHeight}
         ></LogoComponent>
-
         <Dropdown
-          btnComponent={<Profile url={user.profileImageUrl}></Profile>}
+          btnComponent={<Profile url={user?.profileImageUrl}></Profile>}
           options={[{ index: 0, contents: '로그아웃' }]}
           toggleOpen={handleProfileOpen}
           isOpen={profileOpen}

diff --git a/frontend/src/constants/user.js b/frontend/src/constants/user.js
@@ -1,5 +1,5 @@
 export const MY_USER_DATA = {
-  index: 1,
+  memberIdx: 1,
   id: 'realsnoopso',
   profileImageUrl:
     'https://ca.slack-edge.com/T74H5245A-U04FHDY4DFV-1a828514d33d-512',

diff --git a/frontend/src/containers/AuthPage/AuthPage.jsx b/frontend/src/containers/AuthPage/AuthPage.jsx
@@ -1,28 +1,16 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 import { getLoginToken, removeToken } from '@services/login';
-import { useEffect } from 'react';
 
 export const AuthPage = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const queryCode = new URLSearchParams(location.search).get('code');
 
   const runGetLoginTokenAPI = async () => {
-    try {
-      const data = await getLoginToken(queryCode);
-      const token = data.token;
-      if (!token) {
-        throw Error('로그인 실패');
-      }
-
-      window.localStorage.setItem('loginToken', token);
-      navigate('/');
-    } catch (error) {
-      alert(error);
-      removeToken();
-      navigate('/login');
-      console.error(error);
-    }
+    const data = await getLoginToken(queryCode);
+    const token = data.token;
+    window.localStorage.setItem('loginToken', token);
+    navigate('/');
   };
 
   runGetLoginTokenAPI();

diff --git a/frontend/src/containers/IssueDetailPage/DetailBody/CommentElement/CommentElement.jsx b/frontend/src/containers/IssueDetailPage/DetailBody/CommentElement/CommentElement.jsx
@@ -51,7 +51,7 @@ export const CommentElement = ({
         </div>
       </div>
       <div className={bodyClassNames}>
-        <span>{contents}</span>
+        <span>{contents}ddd</span>
       </div>
     </div>
   );

diff --git a/frontend/src/containers/IssueDetailPage/DetailBody/DetailBody.jsx b/frontend/src/containers/IssueDetailPage/DetailBody/DetailBody.jsx
@@ -6,39 +6,32 @@ import { useEffect } from 'react';
 export const DetailBody = ({ writer, comment }) => {
   const cx = classNames.bind(styles);
 
-  useEffect(() => {
-    console.log(comment);
-  }, [comment]);
-
   const commentList = comment;
   const issueWriterId = writer?.id;
 
-  const addCommentElement = () => {
-    return commentList?.map((comment, index) => {
-      const commentWriterId = comment?.writer.id;
-      const writerProfile = comment?.writer.profileImageUrl;
-      const writerName = comment?.writer.name;
-      const wroteTime = comment?.createdAt;
-      const contents = comment?.contents;
-
-      return (
-        <CommentElement
-          key={index}
-          issueWriterId={issueWriterId}
-          commentWriterId={commentWriterId}
-          writerProfile={writerProfile}
-          writerName={writerName}
-          wroteTime={wroteTime}
-          contents={contents}
-        ></CommentElement>
-      );
-    });
-  };
-
   return (
     <div className={cx('detail-body')}>
       <div className={cx('detail-comment')}>
-        {addCommentElement()}
+        {commentList?.map((comment, index) => {
+          const commentWriterId = comment?.writer.id;
+          const writerProfile = comment?.writer.profileImageUrl;
+          const writerName = comment?.writer.name;
+          const wroteTime = comment?.createdAt;
+          const contents = comment?.contents;
+
+          return (
+            <CommentElement
+              key={index}
+              issueWriterId={issueWriterId}
+              commentWriterId={commentWriterId}
+              writerProfile={writerProfile}
+              writerName={writerName}
+              wroteTime={wroteTime}
+              contents={contents}
+            ></CommentElement>
+          );
+        })}
+
         <div className="add-comment"></div>
       </div>
       <div className="detail-option"></div>

diff --git a/frontend/src/containers/IssueDetailPage/IssueDetailPage.jsx b/frontend/src/containers/IssueDetailPage/IssueDetailPage.jsx
@@ -31,11 +31,19 @@ export const IssueDetailPage = () => {
   useEffect(() => {
     setSelectedAssignee(issueDetail?.assignee);
     setSelectedLabel(issueDetail?.labelList?.[0]);
-    setSelectedMilstone(issueDetail?.milestoneList?.[0]);
+    setSelectedMilstone(issueDetail?.milestone);
   }, [issueDetail]);
 
   const getDetailDatasByComponent = (issueDetail, componentName) => {
-    const { index, status, createdAt, writer, commentList } = issueDetail;
+    const {
+      index,
+      status,
+      createdAt,
+      writer,
+      commentList,
+      contents,
+      milestone,
+    } = issueDetail;
     if (componentName === 'header') {
       return {
         index,
@@ -46,7 +54,20 @@ export const IssueDetailPage = () => {
       };
     }
     if (componentName === 'body') {
-      return { writer, comment: commentList };
+      const writersComment = {
+        commentIdx: -1,
+        contents,
+        writer,
+        createdAt,
+        editedAt: null,
+      };
+
+      return {
+        writer,
+        comment: [writersComment, ...commentList],
+        contents,
+        milestone,
+      };
     }
   };
   return (

diff --git a/frontend/src/containers/IssuePage/IssuePage.jsx b/frontend/src/containers/IssuePage/IssuePage.jsx
@@ -11,8 +11,11 @@ import {
 import { IssueList } from '@containers/index';
 import { isFilterApplied } from '@services/issue';
 import { useNavigate } from 'react-router-dom';
-import jwtDecode from 'jwt-decode';
+
 import { getToken } from '@src/services/login';
+import { storeContext } from '@stores/index';
+import { useContext, useReducer } from 'react';
+import jwtDecode from 'jwt-decode';
 
 export const IssuePage = () => {
   const cx = classNames.bind(styles);
@@ -32,11 +35,25 @@ export const IssuePage = () => {
   const [issueCount, setIssueCounts] = useState({ open: 0, closed: 0 });
 
   const navigate = useNavigate();
+  const [user, userDispatch] = useContext(storeContext).user;
 
-  useEffect(() => {
+  const setLoginUserData = () => {
     const token = getToken();
     const { userprofile } = jwtDecode(token);
-    console.log(userprofile);
+    if (!userprofile) return;
+
+    const loginUserProfile = {
+      memberIdx: userprofile.memberIdx,
+      id: userprofile.id,
+      profileImageUrl: userprofile.profileImageUrl,
+      name: userprofile.login,
+    };
+
+    userDispatch({ type: 'SET_USER', payload: loginUserProfile });
+  };
+
+  useEffect(() => {
+    setLoginUserData();
   }, []);
 
   useEffect(() => {