Skip to content

Feat/80 스켈레톤UI #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yubal9 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Feat/80 스켈레톤UI #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions Syncly/src/components/Files/FileList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { GetFolderFileList, GetRootFolder } from "../../shared/api/Folder/get";
import { useParams } from "react-router-dom";
import { useFileContext } from "../../context/FileContext";
import { useEffect } from "react";
import TeamFileSkeleton from "../../shared/ui/Skeleton/TeamFileSkeleton";

interface IFileListProps {
searchValue: string;
Expand All @@ -30,7 +31,7 @@ const FileList = ({

const isSpaceIdReady = typeof spaceId === "number" && !Number.isNaN(spaceId);

const { data: rootFolder, isPending } = useQuery({
const { data: rootFolder, isPending:rootFolderIsPending} = useQuery({
queryKey: ["rootFolder", spaceId],
queryFn: () => GetRootFolder({ workspaceId: spaceId }),
enabled: isSpaceIdReady,
Expand All @@ -47,7 +48,7 @@ const FileList = ({

const currentFolderId = Array.from(folderPath.keys()).pop();

const { data: folderList, refetch: folderListRefetch } = useQuery({
const { data: folderList, refetch: folderListRefetch, isPending: folderListIsPending} = useQuery({
queryKey: ["folderList", spaceId, currentFolderId],
queryFn: () =>
GetFolderFileList({
Expand Down Expand Up @@ -97,9 +98,10 @@ const FileList = ({
<p className="text-[16px] font-semibold">Date</p>
<p className="text-[16px] font-semibold pr-[80px]">User</p>
</div>
{isPending && (
//나중에 스켈레톤 UI (컴포넌트 제작) 삽입
<div className="w-full h-[56px] bg-gray-200 flex items-center gap-[63px] border-t border-t-[#E0E0E0]"></div>
{folderListIsPending && (
<div>
<TeamFileSkeleton />
</div>
)}
{sort ? (
<div>
Expand Down
2 changes: 2 additions & 0 deletions Syncly/src/pages/My/MyFilesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const MyFilesPage = () => {
const useDebouncedValue = useDebounce(mq, 500);
const [isLoading, setIsLoading] = useState(true);



useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1000);
return () => clearTimeout(timer);
Expand Down
11 changes: 1 addition & 10 deletions Syncly/src/pages/Team/TeamFilesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,16 @@ import useDebounce from "../../hooks/useDebounce";
import TrashFileList from "../../components/Files/TrashFileList";
import TeamNavigate from "../../components/TeamNavigate";
import { FileProvider } from "../../context/FileContext";
import { useEffect } from "react";
import TeamFileSkeleton from "../../shared/ui/Skeleton/TeamFileSkeleton";

const TeamFilesPage = () => {
const [showInput, setShowInput] = useState(false);
const [sort, setSort] = useState(false);
const [trash, setTrash] = useState(false);
const [mq, setMq] = useState("");
const useDebouncedValue = useDebounce(mq, 500);
const [isLoading, setIsLoading] = useState(true);


useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1000);
return () => clearTimeout(timer);
}, []);

if (isLoading) {
return <TeamFileSkeleton />;
}


return (
Expand Down
2 changes: 1 addition & 1 deletion Syncly/src/shared/ui/Skeleton/Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Skeleton({
}: SkeletonProps) {
return (
<div
className={`bg-#DEE4ED dark:bg-[#abb9ce] ${width} ${height} ${rounded} animate-pulse ${className}`}
className={`bg-gray-200 dark:bg-[#DEE4ED] ${width} ${height} ${rounded} animate-pulse ${className}`}
/>
);
}
53 changes: 3 additions & 50 deletions Syncly/src/shared/ui/Skeleton/TeamFileSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,59 +3,12 @@ import Skeleton from "./Skeleton";

export default function MyFilesSkeleton() {
return (
<div className="w-full mx-[74px] flex flex-col items-center gap-5">
{/* 상단 탭 + 버튼 */}
<div className="w-full flex justify-between mt-5">
{/* url, file 선택 버튼 */}
<div className="flex items-center gap-0 mb-5">
<Skeleton width="w-44" height="h-8" rounded="rounded-md" />
<Skeleton width="w-44" height="h-8" rounded="rounded-md" />
<Skeleton width="w-44" height="h-8" rounded="rounded-md" />
</div>
</div>

<div className="w-full flex flex-col gap-5">
{/* 맨 위 + 버튼 */}
<div className="w-full flex justify-end"><Skeleton width="w-12" height="h-10" rounded="rounded-lg" /></div>


</div>

{/* Search / Filter / Delete */}
<div className="w-full flex items-center gap-3">
<Skeleton width="w-59" height="h-10" rounded="rounded-md" /> {/* Search files... */}
<Skeleton width="w-23" height="h-10" rounded="rounded-md" /> {/* Filter */}
<Skeleton width="w-11.5" height="h-10" rounded="rounded-md" /> {/* Delete */}
</div>

<div className="w flex flex-col items-center gap-5">

{/* 파일 영역 */}
<div className="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div className="flex items-center px-3 h-8 gap-3">
{/* Type */}
<div className="w-14">
<Skeleton width="w-10" height="h-4" rounded="rounded-sm" />
</div>

{/* Title (가장 넓음) */}
<div className="flex-1 min-w-0">
<Skeleton width="w-40" height="h-4" rounded="rounded-sm" />
</div>

{/* Date (우측 정렬) */}
<div className="w-24 ml-auto text-right">
<Skeleton width="w-16" height="h-4" rounded="rounded-sm" />
</div>

{/* User */}
<div className="w-24 text-center">
<Skeleton width="w-14" height="h-4" rounded="rounded-sm" />
</div>


</div>
<div className="border-t border-neutral-200" />


{/* 파일 부분 */}
<div className="p-4">
<Skeleton
Expand All @@ -66,10 +19,10 @@ export default function MyFilesSkeleton() {
</div>



</div>



</div>
);
}