From 5422f567bb0e6c82fd3fef85f193b2662b2e2b8d Mon Sep 17 00:00:00 2001
From: naarang <93020785+naarang@users.noreply.github.com>
Date: Tue, 3 Dec 2024 12:08:09 +0900
Subject: [PATCH] =?UTF-8?q?Refactor=20#198:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81=20(#200)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(#198): userInfoBox 디자인 변경하기

* refactor(#198): lotus 목록 조회에서 보여줄 데이터가 없을 때 처리하기, SuspenseLotusCardList -> SuspenseLotusList로 통일하기

* style(#198): 사용자 Nickname이 정가운데로 위치하도록 수정
---
 ...otusCardList.tsx => SuspenseLotusList.tsx} | 24 ++++--
 apps/frontend/src/widget/lotusList/index.ts   |  2 +-
 .../src/widget/user/SuspenseUserInfoBox.tsx   | 78 +++++++++----------
 3 files changed, 57 insertions(+), 47 deletions(-)
 rename apps/frontend/src/widget/lotusList/{SuspenseLotusCardList.tsx => SuspenseLotusList.tsx} (82%)

diff --git a/apps/frontend/src/widget/lotusList/SuspenseLotusCardList.tsx b/apps/frontend/src/widget/lotusList/SuspenseLotusList.tsx
similarity index 82%
rename from apps/frontend/src/widget/lotusList/SuspenseLotusCardList.tsx
rename to apps/frontend/src/widget/lotusList/SuspenseLotusList.tsx
index 8896505d..2ba478ca 100644
--- a/apps/frontend/src/widget/lotusList/SuspenseLotusCardList.tsx
+++ b/apps/frontend/src/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,7 +83,7 @@ function SkeletonLotusCardList() {
   );
 }
 
-SuspenseLotusList.Skeleton = SkeletonLotusCardList;
+SuspenseLotusList.Skeleton = SkeletonLotusList;
 
 interface ErrorProps {
   error: unknown;
@@ -77,7 +91,7 @@ interface ErrorProps {
   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
index 1aa32679..941bda33 100644
--- 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
index 8d0838f4..bf524338 100644
--- 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,38 +48,33 @@ 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>
   );
@@ -86,15 +82,15 @@ export function SuspenseUserInfoBox() {
 
 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>
   );