Merge pull request #97 from PoolC/dev

master 반영
PoolC · Jul 3, 2024 · c3a9b67 · c3a9b67
2 parents 816c729 + b6c2729
commit c3a9b67
Show file tree

Hide file tree

Showing 22 changed files with 268 additions and 257 deletions.
diff --git a/.github/workflows/web-client-deploy-development.yml b/.github/workflows/web-client-deploy-development.yml
@@ -32,5 +32,5 @@ jobs:
           key: ${{ secrets.SSH_PEM_KEY }}
           port: ${{ secrets.SSH_PORT }}
           source: ./apps/web-client/build/*
-          target: ~/dialga/apps/web-client/build
+          target: ~/k8s/dialga/build
           strip_components: 3
diff --git a/apps/web-client/src/components/board/BoardJobWriteSection.tsx b/apps/web-client/src/components/board/BoardJobWriteSection.tsx
@@ -1,4 +1,4 @@
-import { FormEventHandler, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Editor } from '@toast-ui/react-editor';
 import { useForm, zodResolver } from '@mantine/form';
 import { z } from 'zod';
@@ -8,6 +8,7 @@ import { Link, useHistory } from 'react-router-dom';
 import { stringify } from 'qs';
 import { createStyles } from 'antd-style';
 import { UploadOutlined } from '@ant-design/icons';
+import { useQueryClient } from '@tanstack/react-query';
 import { ApiError, CustomApi, PostControllerService, PostCreateRequest, queryKey, useAppMutation, useAppQuery } from '~/lib/api-v2';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import { MENU } from '~/constants/menus';
@@ -57,6 +58,7 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
   const { styles } = useStyles();
   const message = useMessage();
   const history = useHistory();
+  const queryClient = useQueryClient();
 
   const editorRef = useRef<Editor | null>(null);
   const form = useForm<z.infer<typeof schema>>({
@@ -113,8 +115,7 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
   const fields: { value: string }[] = [{ value: '웹' }, { value: '모바일' }, { value: '인공지능' }, { value: '데이터사이언스' }, { value: '블록체인' }, { value: '시스템' }, { value: '기타' }];
 
   // methods
-  // NOTE 에디터에서 값을 직접 가져올 수 없어서 이벤트 버블링 이용
-  const onEditorInput: FormEventHandler = () => {
+  const onEditorChange = () => {
     form.setValues({
       body: editorRef.current?.getInstance().getHTML(),
     });
@@ -165,7 +166,11 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
         {
           onSuccess() {
             message.success('글이 수정되었습니다.');
-            history.push(`/${MENU.BOARD}/${postId}`);
+            queryClient
+              .invalidateQueries({
+                queryKey: queryKey.post.post(postId),
+              })
+              .then(() => history.push(`/${MENU.BOARD}/${postId}`));
           },
         },
       );
@@ -190,7 +195,11 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
         {
           onSuccess() {
             message.success('글이 작성되었습니다.');
-            history.push(`/${MENU.BOARD}?${stringify({ boardType: 'JOB' })}`);
+            queryClient
+              .invalidateQueries({
+                queryKey: queryKey.post.all('JOB', 0),
+              })
+              .then(() => history.push(`/${MENU.BOARD}?${stringify({ boardType: 'JOB' })}`));
           },
         },
       );
@@ -267,8 +276,8 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
               <Form.Item label="마감일자">
                 <DatePicker value={dayjs(form.values.deadline)} onChange={(_, date) => date && form.setFieldValue('deadline', date)} />
               </Form.Item>
-              <div onInput={onEditorInput}>
-                <Editor initialEditType="wysiwyg" ref={editorRef} />
+              <div>
+                <Editor initialEditType="wysiwyg" ref={editorRef} onChange={onEditorChange} />
               </div>
               <Space direction="horizontal" align="start" className={styles.buttonWrap}>
                 <Upload beforeUpload={() => false} onChange={onUploadChange} fileList={getUploadFileList()}>

diff --git a/apps/web-client/src/components/board/BoardNormalWriteSection.tsx b/apps/web-client/src/components/board/BoardNormalWriteSection.tsx
@@ -1,4 +1,4 @@
-import { FormEventHandler, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Editor } from '@toast-ui/react-editor';
 import { useForm, zodResolver } from '@mantine/form';
 import { z } from 'zod';
@@ -9,6 +9,7 @@ import { stringify } from 'qs';
 import { createStyles } from 'antd-style';
 import { match } from 'ts-pattern';
 import { UploadOutlined } from '@ant-design/icons';
+import { useQueryClient } from '@tanstack/react-query';
 import { ApiError, CustomApi, PostControllerService, queryKey, useAppMutation, useAppQuery } from '~/lib/api-v2';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import { MENU } from '~/constants/menus';
@@ -55,6 +56,7 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
   const history = useHistory();
   const message = useMessage();
   const loginId = useAppSelector((state) => state.auth.user.memberId);
+  const queryClient = useQueryClient();
 
   const editorRef = useRef<Editor | null>(null);
 
@@ -96,8 +98,7 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
   });
 
   // methods
-  // NOTE 에디터에서 값을 직접 가져올 수 없어서 이벤트 버블링 이용
-  const onEditorInput: FormEventHandler = () => {
+  const onEditorChange = () => {
     form.setValues({
       body: editorRef.current?.getInstance().getMarkdown(),
     });
@@ -119,7 +120,11 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
         {
           onSuccess() {
             message.success('글이 수정되었습니다.');
-            history.push(`/${MENU.BOARD}/${postId}`);
+            queryClient
+              .invalidateQueries({
+                queryKey: queryKey.post.post(postId),
+              })
+              .then(() => history.push(`/${MENU.BOARD}/${postId}`));
           },
         },
       );
@@ -140,7 +145,11 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
         {
           onSuccess() {
             message.success('글이 작성되었습니다.');
-            history.push(`/${MENU.BOARD}?${stringify({ boardType })}`);
+            queryClient
+              .invalidateQueries({
+                queryKey: queryKey.post.all(boardType, 0),
+              })
+              .then(() => history.push(`/${MENU.BOARD}?${stringify({ boardType })}`));
           },
         },
       );
@@ -225,8 +234,8 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
                 <Form.Item label="제목">
                   <Input placeholder="제목을 입력해주세요." {...form.getInputProps('title')} />
                 </Form.Item>
-                <div onInput={onEditorInput} className={styles.editorWrap}>
-                  <Editor initialEditType="wysiwyg" ref={editorRef} />
+                <div className={styles.editorWrap}>
+                  <Editor initialEditType="wysiwyg" ref={editorRef} onChange={onEditorChange} />
                 </div>
                 <Space direction="horizontal" align="start" className={styles.buttonWrap}>
                   <Upload beforeUpload={() => false} onChange={onUploadChange} fileList={getUploadFileList()}>

diff --git a/apps/web-client/src/components/members/MemberCard/MemberCard.jsx b/apps/web-client/src/components/members/MemberCard/MemberCard.jsx
diff --git a/...s/members/MemberCard/MemberCard.styles.js → ...s/members/MemberCard/MemberCard.styles.ts b/...s/members/MemberCard/MemberCard.styles.js → ...s/members/MemberCard/MemberCard.styles.ts
diff --git a/apps/web-client/src/components/members/MemberCard/MemberCard.tsx b/apps/web-client/src/components/members/MemberCard/MemberCard.tsx
@@ -0,0 +1,39 @@
+import colors from '~/lib/styles/colors';
+import { randomNumber } from '~/lib/utils/random';
+import { getProfileImageUrl } from '~/lib/utils/getProfileImageUrl';
+
+import { MemberCardBlock, MemberCardMajor, MemberCardName, MemberCardStatus, MemberCardText, MemberCardThumbnail, MemberItem, StyledLink } from './MemberCard.styles';
+import { MENU } from '~/constants/menus';
+
+const MemberCard = ({
+  member: { loginID, name, department, isAdmin, profileImageURL },
+}: {
+  member: {
+    loginID: string;
+    name: string;
+    department: string;
+    isAdmin: boolean;
+    profileImageURL: string;
+  };
+}) => (
+  <StyledLink to={`/${MENU.MEMBER}/${loginID}`}>
+    <MemberCardBlock>
+      <MemberItem
+        style={{
+          background: colors.mint[randomNumber(colors.mint.length)],
+        }}
+      >
+        <MemberCardThumbnail src={getProfileImageUrl(profileImageURL)} alt="member_thumbnail" />
+        <MemberCardText>
+          <MemberCardName>
+            {name}
+            {isAdmin && <MemberCardStatus>PoolC 임원</MemberCardStatus>}
+          </MemberCardName>
+          <MemberCardMajor>{department}</MemberCardMajor>
+        </MemberCardText>
+      </MemberItem>
+    </MemberCardBlock>
+  </StyledLink>
+);
+
+export default MemberCard;
diff --git a/apps/web-client/src/components/members/MemberDetail/MemberDetail.jsx b/apps/web-client/src/components/members/MemberDetail/MemberDetail.jsx
diff --git a/apps/web-client/src/components/members/MemberDetail/MemberDetail.tsx b/apps/web-client/src/components/members/MemberDetail/MemberDetail.tsx
@@ -0,0 +1,21 @@
+import { Suspense } from 'react';
+import { useParams } from 'react-router';
+import { Block, WhiteBlock } from '../../../styles/common/Block.styles';
+import Spinner from '~/components/common/Spinner/Spinner';
+import MemberDetailContent from './MemberDetailContent';
+
+const MemberDetail = () => {
+  const { memberID } = useParams<{ memberID: string }>();
+
+  return (
+    <Block>
+      <WhiteBlock>
+        <Suspense fallback={<Spinner />}>
+          <MemberDetailContent loginId={memberID} />
+        </Suspense>
+      </WhiteBlock>
+    </Block>
+  );
+};
+
+export default MemberDetail;
diff --git a/...mbers/MemberDetail/MemberDetail.styles.js → ...emberDetail/MemberDetailContent.styles.ts b/...mbers/MemberDetail/MemberDetail.styles.js → ...emberDetail/MemberDetailContent.styles.ts