Merge branch 'develop'

LM-channel-team-project · Sep 4, 2021 · f5c26ef · f5c26ef
2 parents 6defd59 + 208f8d7
commit f5c26ef
Show file tree

Hide file tree

Showing 38 changed files with 573 additions and 219 deletions.
diff --git a/client/src/component/molecules/DetailContent/style.ts b/client/src/component/molecules/DetailContent/style.ts
@@ -8,7 +8,10 @@ export const Title = styled.h2`
   font-size: 1rem;
 `;
 
-export const BodyWrapper = styled.div``;
+export const BodyWrapper = styled.div`
+  font-size: 1.3rem;
+  line-height: 3.2rem;
+`;
 
 export const Paragraph = styled.p`
   font-size: 1rem;

diff --git a/client/src/component/orgamisms/CommentInputBox/index.stories.tsx b/client/src/component/orgamisms/CommentInputBox/index.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import GlobalThemeProvider from 'style/GlobalThemeProvider';
+import CommentInputBox, { ICommentInputBox } from '.';
+
+const props = {
+  list: [{
+    date: new Date(),
+    owner: 'testowner',
+    comment: 'testcomment',
+    name: 'testname',
+  }],
+  removeLabel: () => console.log('remove'),
+};
+
+export default {
+  title: 'Organisms/CommentInputBox',
+  component: CommentInputBox,
+  args: props,
+};
+
+const Templete = (args: ICommentInputBox) => (
+  <GlobalThemeProvider>
+    <CommentInputBox {...args} />
+  </GlobalThemeProvider>
+);
+
+export const Default = (args: ICommentInputBox) => Templete(args);
diff --git a/client/src/component/orgamisms/CommentInputBox/index.tsx b/client/src/component/orgamisms/CommentInputBox/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import getKoreaTime from 'utils/date';
+import { CommentsType } from '../DetailModal/template';
+import * as S from './style';
+
+export interface ICommentInputBox {
+  list: CommentsType[];
+  teamId?: string;
+  myId?: string;
+  value: string;
+  className?: string;
+  maxWidth: number;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  removeLabel: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    itemName: string,
+  ) => void;
+}
+
+const CommentInputBox = ({
+  list = [],
+  teamId,
+  myId,
+  removeLabel,
+  className,
+  ...inputProps
+}: ICommentInputBox) => (
+  <S.Container className={className}>
+    {list.map((item: CommentsType) => (
+      <S.LabelWrapper key={`${item.date + item.owner}`}>
+        <S.TextLabel
+          className="lb-label"
+          text={`작성자: ${item.name}`}
+        />
+        <S.TextLabel
+          className="lb-label"
+          text={`작성일: ${getKoreaTime(item.date)}`}
+        />
+        <S.Paragraph>{item.comment}</S.Paragraph>
+        {(item.owner === myId || teamId === myId)
+          && <S.LabelRemoveBottton
+            onClick={(event) => removeLabel && removeLabel(event, `${item.date + item.owner}`)}
+          >
+            &times;
+          </S.LabelRemoveBottton>
+        }
+      </S.LabelWrapper>
+    ))}
+    {myId
+    && <S.BlockContent title='새 댓글' className="ci-block">
+      <S.InputContainer>
+        <S.Input className="lb-input" type='textarea' autoWidth {...inputProps} />
+      </S.InputContainer>
+    </S.BlockContent>
+    }
+  </S.Container>
+);
+
+export default CommentInputBox;
diff --git a/client/src/component/orgamisms/CommentInputBox/style.ts b/client/src/component/orgamisms/CommentInputBox/style.ts
@@ -0,0 +1,81 @@
+import InputText from 'component/atoms/InputText';
+import DetailContent from 'component/molecules/DetailContent';
+import _TextLabel from 'component/atoms/TextLabel';
+import styled from 'styled-components';
+
+export const Container = styled.div``;
+
+export const LabelWrapper = styled.div`
+  font-size: 1rem;
+  position: relative;
+  border-radius: 1rem;
+  margin-bottom: 2rem;
+`;
+
+export const LabelRemoveBottton = styled.button`
+  position: absolute;
+  right: .5rem;
+  top: .5rem;
+  width: 1em;
+  font-size: 1.2em;
+  line-height: 1em;
+  border-radius: 50%;
+  border: 1px solid black;
+  background-color: white;
+  box-sizing: content-box;
+  z-index: 1;
+  visibility: visible;
+  cursor: pointer;
+  transition: opacity 150ms ease-in;
+`;
+
+export const TextLabel = styled(_TextLabel)`
+  margin-bottom: 0.4em;
+  margin: 0 0.5rem;
+
+  &:not(:last-child) {
+    margin-right: 0.4em;
+  }
+`;
+
+export const Paragraph = styled.p`
+  font-size: 1.2rem;
+  line-height: 1.2em;
+  padding: 0.5rem .5rem;
+  white-space: pre-line;
+  word-break: break-all;
+`;
+
+export const InputContainer = styled.div`
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+`;
+
+export const Input = styled(InputText)`
+  font-size: 1rem;
+  padding: 0.3em 0.5em;
+  border-radius: 1em;
+  border: 2px solid #cdcdcd;
+  outline: none;
+
+  &:focus {
+    border-color: #abdcbd;
+  }
+
+  &:hover {
+    border-color: #bcabef;
+  }
+`;
+
+export const BlockContent = styled(DetailContent)`
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  .dc-title {
+    font-size: 1.6rem;
+    margin-bottom: 0.8em;
+  }
+`;
diff --git a/client/src/component/orgamisms/DetailModal/Mail/index.tsx b/client/src/component/orgamisms/DetailModal/Mail/index.tsx
@@ -4,7 +4,7 @@ import { getTeamDashboard, getUser, getUserById } from 'graphql/queries';
 import { updateUser, updateTeam } from 'graphql/mutations';
 import { gql, useQuery, useMutation } from '@apollo/client';
 import ConfirmModal from 'component/orgamisms/ConfirmModal';
-import DetailModalTemplate, { teamListType } from '../template';
+import DetailModalTemplate, { TeamListType } from '../template';
 import * as S from '../style';
 
 export interface MailModalProps {
@@ -95,9 +95,6 @@ const MailDetailModal = ({ className, data, onCloseModal }: MailModalProps) => {
       if (data?.type === 'accept') {
         return Msg('승인 메시지');
       }
-      if (data?.type === 'notice') {
-        return <S.Title type="personal">공지</S.Title>;
-      }
     }
     return <S.Title type="personal">로딩중</S.Title>;
   };
@@ -119,7 +116,7 @@ const MailDetailModal = ({ className, data, onCloseModal }: MailModalProps) => {
             />
           );
         });
-        const people = teamItems.people.map((person: teamListType) => (
+        const people = teamItems.people.map((person: TeamListType) => (
           <S.Text className="people">{person.name}</S.Text>
         ));
         const inlineContents = (
@@ -167,7 +164,7 @@ const MailDetailModal = ({ className, data, onCloseModal }: MailModalProps) => {
           },
         );
         const team = thatUserItems?.teamList.length > 0 ? (
-          thatUserItems.teamList.map((aTeam: teamListType) => (
+          thatUserItems.teamList.map((aTeam: TeamListType) => (
             <S.Text className="team" key={aTeam.id}>
               {aTeam.name}
             </S.Text>
@@ -293,13 +290,6 @@ const MailDetailModal = ({ className, data, onCloseModal }: MailModalProps) => {
           </>
         );
       }
-      if (data?.type === 'notice') {
-        return (
-          <>
-            <S.ContentsList>{data?.teamId}</S.ContentsList>
-          </>
-        );
-      }
     }
     return (
       <S.LoadingContent>
@@ -487,7 +477,6 @@ const MailDetailModal = ({ className, data, onCloseModal }: MailModalProps) => {
       if (
         data?.type === 'accept'
         || data?.type === 'refuse'
-        || data?.type === 'notice'
       ) {
         return (
           <S.SubmitButton size="medium" color="red" onClick={onClickDelete}>

diff --git a/client/src/component/orgamisms/DetailModal/Personal/index.tsx b/client/src/component/orgamisms/DetailModal/Personal/index.tsx
@@ -6,14 +6,15 @@ import {
   getTeamDashboard,
   listUser,
 } from 'graphql/queries';
+import makeTeamIdByUserId from 'utils/setTeamId';
 import { useHistory } from 'react-router-dom';
 import ConfirmModal from 'component/orgamisms/ConfirmModal';
 import { gql, useQuery, useMutation } from '@apollo/client';
 import { updateUser, updateTeam } from 'graphql/mutations';
 import DetailModalTemplate, {
   QuestionItem,
   MailType,
-  teamListType,
+  TeamListType,
 } from '../template';
 import * as S from '../style';
 
@@ -24,7 +25,7 @@ export interface PersonalModalProps {
     surveyCompleted: boolean;
     question: QuestionItem[];
     personState: string;
-    teamList: teamListType[];
+    teamList: TeamListType[];
     mail: MailType[];
   };
   onCloseModal: () => void;
@@ -52,10 +53,9 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
       ${getTeamDashboard}
     `,
     {
-      variables: { id: userData && userData.getUser.items[0].id },
+      variables: { id: userData && makeTeamIdByUserId(userData.getUser.items[0]?.id) },
     },
   );
-
   const [updateUserData] = useMutation(
     gql`
       ${updateUser}
@@ -82,7 +82,7 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
 
   useEffect(() => {
     data?.teamList.forEach((el: any) => {
-      if (el.id === userData?.getUser.items[0].id) {
+      if (el.id === makeTeamIdByUserId(userData?.getUser.items[0]?.id)) {
         setIsInTeam(true);
       }
     });
@@ -104,7 +104,7 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
     });
 
     const team = data?.teamList.length > 0 ? (
-      data.teamList.map((aTeam: teamListType) => (
+      data.teamList.map((aTeam: TeamListType) => (
         <S.Text className="team" key={aTeam.id}>
           {aTeam.name}
         </S.Text>
@@ -283,7 +283,7 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
     }
   };
   useEffect(() => {
-    if (data?.id === userData?.getUser.items[0].id) {
+    if (data?.id === userData?.getUser.items[0]?.id) {
       const updatePersonState = async () => {
         await updateUserData({
           variables: {
@@ -304,7 +304,7 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
       const userItems = userData?.getUser.items[0];
       const teamFilter = data?.teamList
         .filter((el: any) => {
-          if (el.id === userItems.id) {
+          if (el.id === makeTeamIdByUserId(userItems.id)) {
             return false;
           }
           return true;
@@ -335,7 +335,7 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
       await updateTeamData({
         variables: {
           input: {
-            id: userItems.id,
+            id: makeTeamIdByUserId(userItems.id),
             people: peopleFilter,
           },
         },
@@ -358,7 +358,7 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
         </S.SubmitButton>
       );
     }
-    if (data?.id !== userData?.getUser.items[0].id) {
+    if (data?.id !== userData?.getUser.items[0]?.id && userData?.getUser) {
       if (data?.personState !== '종료') {
         return (
           <S.SubmitButton size="medium" color="yellow" onClick={onClickInvite}>
@@ -368,11 +368,14 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
       }
       return <></>;
     }
-    return (
-      <S.SubmitButton size="medium" color="red" onClick={onClickDelete}>
-        삭제하기
-      </S.SubmitButton>
-    );
+    if (data?.id === userData?.getUser.items[0]?.id) {
+      return (
+        <S.SubmitButton size="medium" color="red" onClick={onClickDelete}>
+          삭제하기
+        </S.SubmitButton>
+      );
+    }
+    return <></>;
   };
 
   return data ? (
@@ -381,7 +384,7 @@ const PersonalDetailModal = ({ data, onCloseModal }: PersonalModalProps) => {
         modalHeader={
           <>
             {userData
-              && (data?.id === userData.getUser.items[0].id ? (
+              && (data?.id === userData.getUser.items[0]?.id ? (
                 <S.ClickPersonState onClick={onClickState} text={personState} />
               ) : (
                 <S.PersonState text={personState} />

diff --git a/client/src/component/orgamisms/DetailModal/Team/index.stories.tsx b/client/src/component/orgamisms/DetailModal/Team/index.stories.tsx
@@ -30,6 +30,14 @@ const props = {
     owner: 'something',
     createdAt: new Date(),
     reponame: 'Team-Auto-Matcher',
+    comments: [
+      {
+        date: new Date(),
+        owner: '123111',
+        comment: 'good day',
+        name: 'testName',
+      },
+    ],
   },
   onCloseModal: () => console.log('close'),
   onClickUpdate: () => console.log('update'),