Refactor #198: 사용자 정보 페이지 리팩토링 (#200)

* refactor(#198): userInfoBox 디자인 변경하기 * refactor(#198): lotus 목록 조회에서 보여줄 데이터가 없을 때 처리하기, SuspenseLotusCardList -> SuspenseLotusList로 통일하기 * style(#198): 사용자 Nickname이 정가운데로 위치하도록 수정
boostcampwm-2024 · Dec 3, 2024 · 5422f56 · 5422f56
1 parent 9c1c823
commit 5422f56
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 47 deletions.
diff --git a/...idget/lotusList/SuspenseLotusCardList.tsx → ...rc/widget/lotusList/SuspenseLotusList.tsx b/...idget/lotusList/SuspenseLotusCardList.tsx → ...rc/widget/lotusList/SuspenseLotusList.tsx
@@ -1,4 +1,4 @@
-import { Button, Heading, Skeleton } from '@froxy/design/components';
+import { Button, Heading, Skeleton, Text } from '@froxy/design/components';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import { useQueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query';
 import axios from 'axios';
@@ -13,6 +13,8 @@ export function SuspenseLotusList({ queryOptions }: { queryOptions: LotusLostQue
     data: { lotuses }
   } = useSuspenseQuery(queryOptions);
 
+  if (lotuses.length < 1) return <SuspenseLotusListEmpty />;
+
   return (
     <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 place-items-center">
       {lotuses?.map(({ lotus, author }) => (
@@ -48,7 +50,19 @@ export function SuspenseLotusList({ queryOptions }: { queryOptions: LotusLostQue
   );
 }
 
-function SkeletonLotusCardList() {
+function SuspenseLotusListEmpty() {
+  return (
+    <div className="w-full h-full flex flex-col justify-center items-center">
+      <DotLottieReact src="/json/emptyHistoryAnimation.json" loop autoplay className="w-102" />
+      <Heading className="py-4" size="lg">
+        작성된 Lotus가 없습니다.
+      </Heading>
+      <Text variant="muted">Lotus를 작성해보세요!</Text>
+    </div>
+  );
+}
+
+function SkeletonLotusList() {
   return (
     <div className="w-full grid grid-cols-3 gap-8">
       {range(5).map((value) => (
@@ -69,15 +83,15 @@ function SkeletonLotusCardList() {
   );
 }
 
-SuspenseLotusList.Skeleton = SkeletonLotusCardList;
+SuspenseLotusList.Skeleton = SkeletonLotusList;
 
 interface ErrorProps {
   error: unknown;
   retry: () => void;
   onChangePage: (page?: number) => Promise<void>;
 }
 
-function ErrorLotusCardList({ error, retry, onChangePage }: ErrorProps) {
+function ErrorLotusList({ error, retry, onChangePage }: ErrorProps) {
   const { reset } = useQueryErrorResetBoundary();
 
   if (axios.isAxiosError(error) && error?.status === 401) throw error;
@@ -100,4 +114,4 @@ function ErrorLotusCardList({ error, retry, onChangePage }: ErrorProps) {
   );
 }
 
-SuspenseLotusList.Error = ErrorLotusCardList;
+SuspenseLotusList.Error = ErrorLotusList;
diff --git a/apps/frontend/src/widget/lotusList/index.ts b/apps/frontend/src/widget/lotusList/index.ts
@@ -1,2 +1,2 @@
-export * from './SuspenseLotusCardList';
+export * from './SuspenseLotusList';
 export * from './LotusSearchBar';
diff --git a/apps/frontend/src/widget/user/SuspenseUserInfoBox.tsx b/apps/frontend/src/widget/user/SuspenseUserInfoBox.tsx
@@ -4,6 +4,7 @@ import { Button, Heading, Skeleton } from '@froxy/design/components';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import { useQueryClient, useQueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query';
 import axios from 'axios';
+import { FaGithub } from 'react-icons/fa';
 import { GoPencil } from 'react-icons/go';
 import { UserInfoInputForm } from '@/feature/user/component';
 import { useUserMutation, userQueryOptions } from '@/feature/user/query';
@@ -47,54 +48,49 @@ export function SuspenseUserInfoBox() {
   };
 
   return (
-    <div className="flex items-center gap-16 w-full p-10 border-2 border-slate-200 rounded-xl shadow-sm">
-      {/* TODO: 나중에 프로필 사진 부분 하나의 feature로 합치기 */}
-      <img className="w-44 h-44 rounded-full" src={user.profile} alt="프로필 사진" />
-      <div className="flex items-center gap-10">
-        <div className="grid grid-cols-3 items-end gap-5">
-          <Text size="2xl" className="min-w-64 text-gray-400 font-semibold">
-            NICKNAME
-          </Text>
-          <div className="col-span-2">
-            {isEdit ? (
-              <UserInfoInputForm
-                disabled={isPending}
-                value={user.nickname}
-                onToggleIsEdit={onToggleIsEdit}
-                onEditValue={(value) => onEditUserInfo(value)}
-              />
-            ) : (
-              <div className="flex items-center gap-10">
-                <Text size="3xl" className="font-semibold">
-                  {user.nickname}
-                </Text>
-                <GoPencil className="w-6 h-6" onClick={() => setIsEdit(true)} />
-              </div>
-            )}
-          </div>
-          <Text size="2xl" className="text-gray-400 font-semibold">
-            GIST ADDRESS
-          </Text>
-          <Text size="3xl" className="col-span-2 font-semibold">
-            {user.gistUrl}
-          </Text>
-        </div>
+    <div className="flex flex-col justify-center items-center gap-10 w-full p-4">
+      <div className="relative bg-white p-4 rounded-full shadow-lg">
+        <img className="w-44 h-44 rounded-full" src={user.profile} alt="프로필 사진" />
+        <a
+          href={user.gistUrl}
+          className="absolute bottom-0 right-0 bg-white p-3 rounded-full shadow-lg hover:shadow-neutral-400"
+        >
+          <FaGithub size={30} />
+        </a>
+      </div>
+      <div className="flex items-center gap-5">
+        {isEdit ? (
+          <UserInfoInputForm
+            disabled={isPending}
+            value={user.nickname}
+            onToggleIsEdit={onToggleIsEdit}
+            onEditValue={(value) => onEditUserInfo(value)}
+          />
+        ) : (
+          <>
+            <div className="w-6 h-6"></div>
+            <Text size="3xl" className="font-semibold">
+              {user.nickname}
+            </Text>
+            <GoPencil className="w-6 h-6 cursor-pointer" onClick={() => setIsEdit(true)} />
+          </>
+        )}
       </div>
     </div>
   );
 }
 
 function SkeletonUserInfoBox() {
   return (
-    <div className="flex items-center gap-16 w-full p-10 border-2 border-slate-200 rounded-xl shadow-sm">
-      <Skeleton className="w-44 h-44 rounded-full" />
-      <div className="flex items-center gap-10">
-        <div className="grid grid-cols-3 items-end gap-5">
-          <Skeleton className="min-w-64 h-6" />
-          <Skeleton className="col-span-2 h-10 w-full" />
-          <Skeleton className="h-6" />
-          <Skeleton className="col-span-2 h-10 w-full" />
-        </div>
+    <div className="flex flex-col justify-center items-center gap-10 w-full p-4">
+      <div className="relative bg-white p-4 rounded-full shadow-lg">
+        <Skeleton className="w-44 h-44 rounded-full" />
+        <Skeleton className="absolute bottom-0 right-0 bg-white w-14 h-14 rounded-full shadow-lg hover:shadow-neutral-400" />
+      </div>
+      <div className="flex items-center gap-5">
+        <div className="w-6 h-6"></div>
+        <Skeleton className="w-48 h-6" />
+        <Skeleton className="w-6 h-6" />
       </div>
     </div>
   );