Merge pull request #58 from PoolC/feature

room reservation calendar

apps/web-client/package.json

@@ -19,12 +19,14 @@
     "axios": "0.21.2",
     "classnames": "2.3.2",
     "codemirror": "5.65.15",
+    "date-fns": "^3.0.6",
     "dayjs": "1.11.9",
     "dotenv": "8.2.0",
     "form-data": "4.0.0",
     "qs": "6.9.7",
     "react": "17.0.2",
     "react-activity-calendar": "2.0.2",
+    "react-big-calendar": "^1.8.5",
     "react-dom": "17.0.2",
     "react-icons": "4.10.1",
     "react-redux": "7.2.2",
@@ -42,6 +44,7 @@
     "@types/node": "18.15.3",
     "@types/qs": "6.9.7",
     "@types/react": "17.0.2",
+    "@types/react-big-calendar": "^1.8.7",
     "@types/react-dom": "17.0.2",
     "@types/react-redux": "7.1.25",
     "@types/react-router-dom": "5.3.3",

apps/web-client/src/App.tsx

@@ -18,6 +18,7 @@ import localeData from 'dayjs/plugin/localeData';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import weekYear from 'dayjs/plugin/weekYear';
+import isBetween from 'dayjs/plugin/isBetween';
 
 dayjs.extend(customParseFormat);
 dayjs.extend(advancedFormat);
@@ -26,6 +27,7 @@ dayjs.extend(localeData);
 dayjs.extend(weekOfYear);
 dayjs.extend(weekYear);
 dayjs.extend(objectSupport);
+dayjs.extend(isBetween);
 
 const useStyles = createStyles(({ css }) => ({
   appContainer: css`

apps/web-client/src/components/admin/AdminBadge/AdminBadgeManagement.tsx

@@ -27,6 +27,7 @@ import { queryClient } from '~/lib/utils/queryClient';
 import { UploadChangeParam } from 'antd/es/upload';
 import { createStyles } from 'antd-style';
 import { useMessage } from '~/hooks/useMessage';
+import getFileUrl from '~/lib/utils/getFileUrl';
 
 /* ---------------------------
  * BADGE MANAGEMENT TABLE
@@ -102,7 +103,7 @@ export default function AdminBadgeManagement() {
     {
       key: 'image',
       title: '이미지',
-      render: (_, { imageUrl }) => <Avatar src={imageUrl} />,
+      render: (_, { imageUrl }) => <Avatar src={getFileUrl(imageUrl)} />,
     },
     {
       key: 'category',
@@ -247,8 +248,8 @@ function BadgeGenerateModal({
       ? [
           {
             uid: 'SOME_UID',
-            url: form.values.imageUrl,
-            name: form.values.imageUrl,
+            url: getFileUrl(form.values.imageUrl),
+            name: decodeURI(form.values.imageUrl),
           },
         ]
       : [];
@@ -357,8 +358,8 @@ function BadgeEditModal({
       ? [
           {
             uid: 'SOME_UID',
-            url: form.values.imageUrl,
-            name: form.values.imageUrl,
+            url: getFileUrl(form.values.imageUrl),
+            name: decodeURI(form.values.imageUrl),
           },
         ]
       : [];

apps/web-client/src/components/board/BoardList.tsx

@@ -74,6 +74,12 @@ const useStyles = createStyles(({ css }) => ({
     height: 35px;
     border: 1px solid #47be9b;
   `,
+  clamp: css`
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  `,
 }));
 
 export default function BoardList({
@@ -140,7 +146,7 @@ export default function BoardList({
             <Space direction={'vertical'} size={0}>
               <Typography.Title level={5}>{post.title}</Typography.Title>
               {post?.body && (
-                <Typography.Text>
+                <Typography.Text className={styles.clamp}>
                   {getInnerTextFromHtml(post.body)}
                 </Typography.Text>
               )}

apps/web-client/src/lib/api-v2/queryKey.ts

@@ -25,4 +25,7 @@ export const queryKey = {
   project: {
     all: ['project.all'] as const,
   },
+  room: {
+    range: (start: any, end: any) => ['room.range', start, end] as const,
+  },
 };

apps/web-client/src/pages/board/BoardDetailPage.tsx

@@ -119,6 +119,7 @@ const useStyles = createStyles(({ css }) => ({
   comment: css`
     border-bottom: 1px solid #eee;
     width: 100%;
+    padding-bottom: 16px;
   `,
   divider: css`
     margin: 0;
@@ -286,10 +287,11 @@ export default function BoardDetailPage() {
                   />
                 )}
               </Space>
-              <Typography.Text type={'secondary'}>
-                {dayjs(post.createdAt).format('YYYY. MM. DD')}
-              </Typography.Text>
             </Space>
+            <Divider type="vertical" className={styles.divider} />
+            <Typography.Text type={'secondary'}>
+              {dayjs(post.createdAt).format('YYYY. MM. DD')}
+            </Typography.Text>
           </Space>
           <Space direction={'vertical'} size={0}>
             {post.boardType === 'JOB' ? (
@@ -452,26 +454,25 @@ function CommentBox({
           align={'start'}
           key={comment.commentId}
           className={styles.comment}
+          direction={'vertical'}
         >
-          <Space direction={'vertical'}>
-            <Space direction={'vertical'} size={3}>
-              <Space>
-                <Typography.Text>{comment.writerName}</Typography.Text>
-                {comment.badge && (
-                  <Avatar
-                    src={getFileUrl(comment.badge.imageUrl)}
-                    className={styles.badge}
-                  />
-                )}
-              </Space>
-              <Typography.Text type={'secondary'}>
-                {dayjs(comment.createdAt).format('YYYY. MM. DD')}
-              </Typography.Text>
+          <Space direction={'vertical'} size="large">
+            <Space>
+              <Typography.Text>{comment.writerName}</Typography.Text>
+              {comment.badge && (
+                <Avatar
+                  src={getFileUrl(comment.badge.imageUrl)}
+                  className={styles.badge}
+                />
+              )}
             </Space>
-            <Typography.Paragraph className={styles.commentBody}>
-              {comment.body}
-            </Typography.Paragraph>
           </Space>
+          <Typography.Paragraph className={styles.commentBody}>
+            {comment.body}
+          </Typography.Paragraph>
+          <Typography.Text type={'secondary'}>
+            {dayjs(comment.createdAt).format('YYYY. MM. DD')}
+          </Typography.Text>
         </Space>
       ))}
       {isLogin ? (

apps/web-client/src/pages/my-page/MyPage.tsx

@@ -104,6 +104,9 @@ const useStyles = createStyles(({ css }) => ({
       border-color: #47be9b;
     }
   `,
+  badge: css`
+    border: 2px solid #47be9b;
+  `,
 }));
 
 export default function MyPage() {
@@ -195,7 +198,12 @@ export default function MyPage() {
                   {me?.name}님
                 </Typography.Text>
                 {me?.badge && (
-                  <Avatar src={getFileUrl(me?.badge.imageUrl)} alt={me?.name} />
+                  <Avatar
+                    src={getFileUrl(me?.badge.imageUrl)}
+                    alt={me?.name}
+                    size={40}
+                    className={styles.badge}
+                  />
                 )}
               </Space>
               <Typography.Text>{me?.introduction}</Typography.Text>
@@ -265,7 +273,11 @@ export default function MyPage() {
                       active: me?.badge?.id === el.id,
                     })}
                   >
-                    <Avatar src={getFileUrl(el.imageUrl)} alt={el.name} />
+                    <Avatar
+                      src={getFileUrl(el.imageUrl)}
+                      alt={el.name}
+                      size={40}
+                    />
                   </Button>
                 ))}
               </Space>

apps/web-client/src/pages/my-page/MyPageBadgeListPage.tsx

@@ -67,6 +67,12 @@ const useStyles = createStyles(({ css }) => ({
     display: flex;
     gap: 24px;
   `,
+  owned: css`
+    border: 2px solid #47be9b;
+  `,
+  notOwned: css`
+    border: 2px solid #eee;
+  `,
 }));
 
 export default function MyPageBadgeListPage() {
@@ -167,7 +173,14 @@ export default function MyPageBadgeListPage() {
               ?.filter((badge) => badge.category === 'ATTENDANCE')
               .map((badge) => (
                 <Tooltip key={badge.id} title={renderBadgeTooltipTitle(badge)}>
-                  <Avatar src={getFileUrl(badge.imageUrl)} alt={badge.name} />
+                  <Avatar
+                    src={getFileUrl(badge.imageUrl)}
+                    alt={badge.name}
+                    size={40}
+                    className={classNames(
+                      badge.own ? styles.owned : styles.notOwned,
+                    )}
+                  />
                 </Tooltip>
               ))}
           </div>
@@ -196,7 +209,14 @@ export default function MyPageBadgeListPage() {
           <div className={styles.badgeWrap}>
             {baekjoonSuccessiveSolveBadges.map((badge) => (
               <Tooltip key={badge.id} title={renderBadgeTooltipTitle(badge)}>
-                <Avatar src={getFileUrl(badge.imageUrl)} alt={badge.name} />
+                <Avatar
+                  src={getFileUrl(badge.imageUrl)}
+                  alt={badge.name}
+                  size={40}
+                  className={classNames(
+                    badge.own ? styles.owned : styles.notOwned,
+                  )}
+                />
               </Tooltip>
             ))}
           </div>
@@ -214,7 +234,14 @@ export default function MyPageBadgeListPage() {
           <div className={styles.badgeWrap}>
             {baekjoonTierBadges.map((badge) => (
               <Tooltip key={badge.id} title={renderBadgeTooltipTitle(badge)}>
-                <Avatar src={getFileUrl(badge.imageUrl)} alt={badge.name} />
+                <Avatar
+                  src={getFileUrl(badge.imageUrl)}
+                  alt={badge.name}
+                  size={40}
+                  className={classNames(
+                    badge.own ? styles.owned : styles.notOwned,
+                  )}
+                />
               </Tooltip>
             ))}
           </div>