Merge pull request #74 from KGU-C-Lab/refactor/#71

open-bata 출시 전 UI 개선 완료
kgu-clab · Mar 25, 2024 · adab232 · adab232
2 parents cfa6d46 + 03150fd
commit adab232
Show file tree

Hide file tree

Showing 42 changed files with 436 additions and 250 deletions.
diff --git a/apps/member/.env.production b/apps/member/.env.production
@@ -0,0 +1,2 @@
+VITE_MODE=production
+VITE_API_BASE_URL=https://api.clab.page
diff --git a/apps/member/package.json b/apps/member/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 6002",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --mode production",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

diff --git a/apps/member/src/api/interceptors.ts b/apps/member/src/api/interceptors.ts
@@ -32,6 +32,12 @@ const retryRequest = async (
 
 export const tokenHandler: Interceptor<Response> = async (response, method) => {
   const { status } = response;
+  // 서버 에러인 경우 토큰을 삭제하고 페이지를 새로고침
+  if (status === HTTP_STATUS_CODE.INTERNAL_SERVER_ERROR) {
+    removeTokens();
+    window.location.reload();
+    return response;
+  }
   // 토큰 갱신이 필요 없는 경우 바로 반환
   if (status !== HTTP_STATUS_CODE.UNAUTHORIZED) return response;
   const preRefreshToken = getRefreshToken();

diff --git a/apps/member/src/api/member.ts b/apps/member/src/api/member.ts
@@ -26,11 +26,7 @@ export const patchUserInfo = async ({
 }: PatchUserInfoArgs) => {
   let userInfoData;
   if (multipartFile) {
-    const data = await postUploadedFileProfileImage({
-      memberId: body.id,
-      storagePeriod: 30,
-      multipartFile: multipartFile,
-    });
+    const data = await postUploadedFileProfileImage(multipartFile);
 
     userInfoData = {
       ...body,

diff --git a/apps/member/src/api/uploadedFile.ts b/apps/member/src/api/uploadedFile.ts
@@ -17,12 +17,6 @@ interface postUploadedFileAssignmentArgs {
   files: FormData;
 }
 
-interface postUploadedFileProfileImageArgs {
-  memberId: number;
-  storagePeriod: number;
-  multipartFile: FormData;
-}
-
 /**
  * 회비 증빙 사진 업로드
  */
@@ -72,14 +66,8 @@ export const postUploadedFileAssignment = async ({
 /**
  * 멤버 프로필 사진 업로드
  */
-export const postUploadedFileProfileImage = async ({
-  memberId,
-  storagePeriod,
-  multipartFile,
-}: postUploadedFileProfileImageArgs) => {
-  const url =
-    createPath(END_POINT.UPLOADEDFILE_PROFILES(memberId)) +
-    `?storagePeriod=${storagePeriod}`;
+export const postUploadedFileProfileImage = async (multipartFile: FormData) => {
+  const url = createPath(END_POINT.UPLOADEDFILE_PROFILES, STORAGE_PERIOD(9999));
   const { data } = await server.post<
     FormData,
     BaseResponse<ProfileImageFileType>

diff --git a/apps/member/src/components/common/Comment/Comment.tsx b/apps/member/src/components/common/Comment/Comment.tsx
@@ -34,8 +34,8 @@ const Comment = ({
       />
       <div className="w-full ml-2">
         <p className="text-sm font-semibold">{writer}</p>
-        <p className="text-sm py-2">{children}</p>
-        <div className="flex justify-end text-sm gap-4">
+        <p className="py-2 text-sm whitespace-pre-wrap">{children}</p>
+        <div className="flex justify-end gap-4 text-sm">
           <p className="text-gray-500">{formattedDate('2021-11-22')}</p>
           <button onClick={onClickReport}>신고</button>
           {!isReply && <button onClick={onClickReply}>답글 쓰기</button>}

diff --git a/apps/member/src/components/common/CommentInput/CommentInput.tsx b/apps/member/src/components/common/CommentInput/CommentInput.tsx
@@ -38,10 +38,11 @@ const CommentInput = ({ id, value, onChange, parentId }: CommentInputProps) => {
   };
 
   return (
-    <div className="flex gap-2">
+    <div className="flex items-center gap-2">
       <Textarea
-        className="border p-2 w-full"
+        className="w-full p-2 border"
         placeholder="댓글을 입력해주세요."
+        maxLength={200}
         value={value}
         onChange={onChange}
       />

diff --git a/apps/member/src/components/common/Footer/Footer.tsx b/apps/member/src/components/common/Footer/Footer.tsx
@@ -3,24 +3,24 @@ import { Link } from 'react-router-dom';
 const list = [
   {
     name: '이용약관',
-    path: '/terms'
+    path: '/terms',
   },
   {
     name: '개인정보처리방침',
-    path: '/privacy'
+    path: '/privacy',
   },
   {
     name: '동아리운영규칙',
-    path: '/rules'
-  }
+    path: '/rules',
+  },
 ];
 
 const Footer = () => {
   return (
-    <footer className="border-t bg-white p-10 text-center">
-      <ul className="flex justify-center divide-x text-sm font-semibold">
-        {list.map(({ name, path }) => (
-          <Link key={name} className="px-2" to={path}>
+    <footer className="p-10 text-center bg-white border-t">
+      <ul className="flex justify-center text-sm font-semibold divide-x">
+        {list.map(({ name }) => (
+          <Link key={name} className="px-2" to="">
             {name}
           </Link>
         ))}

diff --git a/apps/member/src/components/common/Header/Header.tsx b/apps/member/src/components/common/Header/Header.tsx
@@ -31,7 +31,7 @@ const Header = ({ title, children }: HeaderProps) => {
   return (
     <div className="flex items-center justify-between px-2 py-4 bg-white border rounded-lg">
       <RenderTitle />
-      <div className="flex items-center gap-4">{children}</div>
+      <div className="flex items-center gap-4 pr-2">{children}</div>
     </div>
   );
 };

diff --git a/apps/member/src/components/common/LoginButton/LoginButton.tsx b/apps/member/src/components/common/LoginButton/LoginButton.tsx
@@ -1,8 +1,10 @@
+import { MODE } from '@constants/environment';
 import Image from '../Image/Image';
 
 const LoginButton = () => {
   const handleClick = () => {
-    window.location.href = 'https://auth.clab.page/?code=dev';
+    const code = MODE === 'production' ? 'play' : 'dev';
+    window.location.href = `https://auth.clab.page/?code=${code}`;
   };
 
   return (
@@ -11,7 +13,7 @@ const LoginButton = () => {
       className="max-w-xs flex items-center border border-black py-2 px-4 bg-[#292d32] gap-4 rounded-md w-full"
     >
       <Image src="/logo.webp" alt="C-Lab" width="w-8" height="h-8" />
-      <span className="text-white font-semibold text-center grow">
+      <span className="font-semibold text-center text-white grow">
         C-Lab Auth로 로그인
       </span>
     </button>

diff --git a/apps/member/src/components/common/Nav/Nav.tsx b/apps/member/src/components/common/Nav/Nav.tsx
@@ -1,48 +1,82 @@
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { PATH } from '@constants/path';
 import { FiSearch } from 'react-icons/fi';
 import { FiUser } from 'react-icons/fi';
 import { FiGrid } from 'react-icons/fi';
 import useModal from '@hooks/common/useModal';
+import { MODE } from '@constants/environment';
 
 const Nav = () => {
+  const location = useLocation();
   const { openModal } = useModal();
 
-  const onClickIsReady = () => {
+  const selected = (path: string) => {
+    if (path === PATH.MAIN && location.pathname.length === 1) {
+      return 'font-semibold text-black';
+    } else if (path !== PATH.MAIN && location.pathname.length !== 1) {
+      return location.pathname.match(path)
+        ? 'font-semibold text-black'
+        : 'text-gray-400 hover:text-black';
+    } else {
+      return 'text-gray-400 hover:text-black';
+    }
+  };
+
+  const onClickNotReady = () => {
     openModal({
       content: '해당 기능은 준비중입니다.',
     });
   };
 
   return (
-    <nav className="fixed left-0 top-0 z-30 w-full border-b bg-white">
+    <nav className="fixed top-0 left-0 z-30 w-full bg-white border-b">
       <div className="section flex h-[61px] items-center justify-between py-1.5">
         <div className="flex items-center gap-10 lg:gap-20">
           <Link className="flex items-center gap-2 text-xl" to={PATH.MAIN}>
             <img src="/favicon.ico" alt="c-lab" className="size-8" />
             <h1 className="font-bold">PLAY</h1>
           </Link>
           <div className="hidden gap-10 text-sm font-semibold sm:flex">
-            <Link to={PATH.MAIN}>홈</Link>
-            <Link to={PATH.CALENDER}>일정</Link>
-            <Link to={PATH.ACTIVITY}>활동</Link>
-            <Link to={PATH.COMMUNITY}>커뮤니티</Link>
-            <Link to={PATH.LIBRARY}>도서관</Link>
-            <Link to={PATH.SUPPORT}>회비</Link>
-            <button className="text-red-500" onClick={onClickIsReady}>
-              관리
-            </button>
+            <Link to={PATH.MAIN} className={selected(PATH.MAIN)}>
+              홈
+            </Link>
+            <Link to={PATH.CALENDER} className={selected(PATH.CALENDER)}>
+              일정
+            </Link>
+            {MODE !== 'production' && (
+              <Link to={PATH.ACTIVITY} className={selected(PATH.ACTIVITY)}>
+                활동
+              </Link>
+            )}
+            <Link to={PATH.COMMUNITY} className={selected(PATH.COMMUNITY)}>
+              커뮤니티
+            </Link>
+            <Link to={PATH.LIBRARY} className={selected(PATH.LIBRARY)}>
+              도서관
+            </Link>
+            <Link to={PATH.SUPPORT} className={selected(PATH.SUPPORT)}>
+              회비
+            </Link>
+            {MODE !== 'production' && (
+              <button className="text-red-500" onClick={onClickNotReady}>
+                관리
+              </button>
+            )}
           </div>
         </div>
         <div className="flex gap-5">
-          <button onClick={onClickIsReady}>
-            <FiSearch className="h-5 w-5" />
-          </button>
-          <button onClick={onClickIsReady}>
-            <FiGrid className="h-5 w-5" />
-          </button>
+          {MODE !== 'production' && (
+            <>
+              <button onClick={onClickNotReady}>
+                <FiSearch size={20} />
+              </button>
+              <button onClick={onClickNotReady}>
+                <FiGrid size={20} />
+              </button>
+            </>
+          )}
           <Link to={PATH.MY}>
-            <FiUser className="h-5 w-5" />
+            <FiUser size={20} />
           </Link>
         </div>
       </div>

diff --git a/apps/member/src/components/common/Post/Post.tsx b/apps/member/src/components/common/Post/Post.tsx
@@ -2,37 +2,49 @@ import { PropsWithChildren } from 'react';
 import Image from '../Image/Image';
 import { formattedDate } from '@utils/date';
 import Share from '../Share/Share';
+import { MODE } from '@constants/environment';
+import { createImageUrl } from '@utils/api';
+import { getProfileRingStyle } from '@utils/style';
+import classNames from 'classnames';
 
 interface PostHeaderProps {
   title: string;
   src?: string;
   writer: string;
+  roleLevel: number;
   createAt: string;
 }
 
 const Post = ({ children }: PropsWithChildren) => {
   return <div className="flex flex-col gap-4">{children}</div>;
 };
 
-Post.Head = ({ title, src, writer, createAt }: PostHeaderProps) => {
+Post.Head = ({ title, src, writer, roleLevel, createAt }: PostHeaderProps) => {
   return (
     <div className="space-y-4">
-      <h2 className="font-semibold text-lg">{title}</h2>
-      <div className="flex justify-between items-center">
+      <h2 className="text-lg font-semibold">{title}</h2>
+      <div className="flex items-center justify-between">
         <div className="flex gap-2">
-          <Image
-            className="rounded-full"
-            width="w-10"
-            height="w-10"
-            src={src}
-            alt="작성자 프로필사진"
-          />
+          <div
+            className={classNames(
+              'rounded-full ring ring-offset-1',
+              getProfileRingStyle(roleLevel),
+            )}
+          >
+            <Image
+              className="rounded-full"
+              width="w-10"
+              height="w-10"
+              src={createImageUrl(src || '')}
+              alt="작성자 프로필사진"
+            />
+          </div>
           <div className="text-sm">
             <p className="font-semibold">{writer}</p>
             <p>{formattedDate(createAt)}</p>
           </div>
         </div>
-        <Share />
+        {MODE !== 'production' && <Share />}
       </div>
       <hr />
     </div>

diff --git a/apps/member/src/components/community/PostCommentSection/PostCommentSection.tsx b/apps/member/src/components/community/PostCommentSection/PostCommentSection.tsx
@@ -6,6 +6,7 @@ import { useCommentList } from '@hooks/queries/useCommentList';
 import CommentInput from '@components/common/CommentInput/CommentInput';
 import { useAccusesMutation } from '@hooks/queries/useAccusesMutation';
 import useModal from '@hooks/common/useModal';
+import { createImageUrl } from '@utils/api';
 
 interface PostCommentSectionProps {
   id: string;
@@ -74,7 +75,11 @@ const PostCommentSection = ({ id }: PostCommentSectionProps) => {
               <div key={commentId} className="space-y-2">
                 {/* ROOT */}
                 <Comment
-                  image={writerImageUrl ? writerImageUrl : getPokemonImage()}
+                  image={
+                    writerImageUrl
+                      ? createImageUrl(writerImageUrl)
+                      : getPokemonImage()
+                  }
                   writer={writer}
                   onClickReport={() => onClickReport(commentId)}
                   onClickReply={() => onClickReComment(commentId)}
@@ -88,7 +93,9 @@ const PostCommentSection = ({ id }: PostCommentSectionProps) => {
                       <Comment
                         key={replyId}
                         image={
-                          writerImageUrl ? writerImageUrl : getPokemonImage()
+                          writerImageUrl
+                            ? createImageUrl(writerImageUrl)
+                            : getPokemonImage()
                         }
                         isReply
                         writer={writer}

diff --git a/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx b/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx
@@ -1,4 +1,3 @@
-import MoreButton from '@components/common/MoreButton/MoreButton';
 import NewsCard from '@components/common/NewsCard/NewsCard';
 import Section from '@components/common/Section/Section';
 import { COMMUNITY_MESSAGE } from '@constants/message';
@@ -9,20 +8,20 @@ import { CommunityPostItem } from '@type/community';
 interface NewsCardSectionProps {
   to: string;
   title: string;
-  data: Array<BlogPostItem | CommunityPostItem>;
+  data?: Array<BlogPostItem | CommunityPostItem>;
 }
 
-const NewsCardSection = ({ to, title, data }: NewsCardSectionProps) => {
+const NewsCardSection = ({ to, title, data = [] }: NewsCardSectionProps) => {
   const post_path = to === PATH.NEWS ? PATH.NEWS : PATH.BLOG;
 
   return (
     <Section>
-      <Section.Header title={title}>
-        <MoreButton to={to} />
-      </Section.Header>
+      <Section.Header title={title}></Section.Header>
       <Section.Body className="flex gap-2 overflow-scroll scrollbar-hide">
         {data.length === 0 ? (
-          <p className="text-gray-500">{COMMUNITY_MESSAGE.NO_ARTICLE}</p>
+          <p className="w-full text-center text-gray-500">
+            {COMMUNITY_MESSAGE.NO_ARTICLE}
+          </p>
         ) : (
           data.map((news, index) => (
             <NewsCard key={index} to={post_path} {...news} />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_MODE=production
		VITE_API_BASE_URL=https://api.clab.page