[refactor] #137/데이터 로딩 시 layout shift 방지

src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx

@@ -25,6 +25,7 @@ export default function DashboardEditSection({
   const setDashboardId = useDashboardStore((state) => state.setDashboardId);
 
   useEffect(() => {
+    if (loading) return;
     setLoading(true);
 
     try {
@@ -83,7 +84,6 @@ export default function DashboardEditSection({
   };
 
   if (!data) return;
-  if (loading) return <p>Loading...</p>;
 
   return (
     <div className="w-full p-4 rounded-lg bg-white tablet:p-6">
@@ -109,7 +109,7 @@ export default function DashboardEditSection({
             onClick={editDashboard}
             disabled={!isFormValid}
           >
-            {!loading && "변경"}
+            변경
           </Button>
         </div>
       </div>

src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx

@@ -23,6 +23,7 @@ export default function InvitationSection({
   const totalPage = Math.ceil(totalCount / PAGE_SIZE);
 
   const handleLoad = async () => {
+    if (loading) return;
     setLoading(true);
 
     try {
@@ -57,8 +58,6 @@ export default function InvitationSection({
     }
   };
 
-  if (loading) return <p>Loading...</p>;
-
   return (
     <div className="flex flex-col gap-[26px] w-full p-4 rounded-lg bg-white tablet:gap-[17px] tablet:p-6">
       <div className="flex justify-between items-center tablet:items-start">

src/components/layout/navbar/UserMenu.tsx

@@ -22,7 +22,7 @@ export default function UserMenu() {
 
   useEffect(() => {
     const getData = async () => {
-      if (!accessToken) return;
+      if (!accessToken || loading) return;
       setLoading(true);
 
       try {
@@ -40,7 +40,6 @@ export default function UserMenu() {
     getData();
   }, [accessToken]);
 
-  if (loading) return <p>Loading...</p>;
   if (!data) return null;
 
   const { nickname, profileImageUrl } = data;

src/components/modal/add-column/AddColumnModal.tsx

@@ -22,7 +22,7 @@ export default function CreateDashboardModal() {
   const accessToken = localStorage.getItem("accessToken") ?? "";
 
   useEffect(() => {
-    if (!dashboardId) return;
+    if (!dashboardId || loading) return;
     setLoading(true);
 
     try {
@@ -77,7 +77,6 @@ export default function CreateDashboardModal() {
   };
 
   if (!dashboardId) return;
-  if (loading) return <p>Loading...</p>;
 
   return (
     <Modal

src/components/modal/edit-task/AssigneeDropdown.tsx

@@ -26,6 +26,7 @@ export default function AssigneeDropdown({
 
   useEffect(() => {
     const getData = async () => {
+      if (loading) return;
       setLoading(true);
 
       try {
@@ -46,8 +47,6 @@ export default function AssigneeDropdown({
     getData();
   }, []);
 
-  if (loading) return <p>Loading...</p>;
-
   const selected = members.find((member) => member.userId === memberId);
 
   return (

src/components/modal/edit-task/ColumnDropdown.tsx

@@ -22,6 +22,7 @@ export default function ColumnDropdown({
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
+    if (loading) return;
     setLoading(true);
 
     try {
@@ -42,7 +43,6 @@ export default function ColumnDropdown({
   }, []);
 
   const selected = columns.find((col) => col.id === columnId);
-  if (loading) return <p>Loading...</p>;
 
   return (
     <div className="relative flex flex-col w-full tablet:min-w-[217px]">

src/components/modal/editColumn/EditColumnModal.tsx

@@ -12,7 +12,7 @@ export interface ColumnListResponse {
   data: DashboardColumn[];
 }
 
-export default function CreateDashboardModal() {
+export default function EditColumnModal() {
   const { selectedColumnId, selectedColumnTitle } = useColumnStore();
   const [columnList, setColumnList] = useState<DashboardColumn[]>([]);
   const [loading, setLoading] = useState(false);
@@ -24,7 +24,7 @@ export default function CreateDashboardModal() {
   const accessToken = localStorage.getItem("accessToken") ?? "";
 
   useEffect(() => {
-    if (!dashboardId) return;
+    if (!dashboardId || loading) return;
     setLoading(true);
 
     try {
@@ -81,7 +81,6 @@ export default function CreateDashboardModal() {
   };
 
   if (!dashboardId) return;
-  if (loading) return <p>Loading...</p>;
 
   return (
     <Modal

src/components/modal/invite/InviteModal.tsx

@@ -31,7 +31,7 @@ export default function InviteModal() {
   };
 
   const buttonClick = async () => {
-    if (!dashboardId) return;
+    if (!dashboardId || loading) return;
     setLoading(true);
 
     try {
@@ -58,22 +58,16 @@ export default function InviteModal() {
         disabled: !isFormValid,
       }}
     >
-      {loading ? (
-        <p>Loading...</p>
-      ) : (
-        <div className="tablet:w-[520px]">
-          <Input
-            label="이메일"
-            placeholder="이메일을 입력해 주세요"
-            value={inputValue}
-            onChange={handleChange}
-            error={isInvalidEmail}
-            errorMessage={
-              isInvalidEmail ? "이메일 형식으로 작성해 주세요." : ""
-            }
-          />
-        </div>
-      )}
+      <div className="tablet:w-[520px]">
+        <Input
+          label="이메일"
+          placeholder="이메일을 입력해 주세요"
+          value={inputValue}
+          onChange={handleChange}
+          error={isInvalidEmail}
+          errorMessage={isInvalidEmail ? "이메일 형식으로 작성해 주세요." : ""}
+        />
+      </div>
     </Modal>
   );
 }

src/components/modal/task-detail/TaskCommentSection.tsx

@@ -29,7 +29,7 @@ export default function TaskCommentSection({
   };
 
   const buttonClick = async () => {
-    if (!dashboardId) return;
+    if (!dashboardId || loading) return;
     setLoading(true);
 
     try {
@@ -51,7 +51,6 @@ export default function TaskCommentSection({
   };
 
   if (!dashboardId) return;
-  if (loading) return <p>Loading...</p>;
 
   return (
     <div className="flex flex-col gap-4 w-[290px] tablet:gap-6 tablet:w-[420px] pc:w-[445px]">

src/components/modal/task-detail/TaskDetailModal.tsx

@@ -14,8 +14,7 @@ export default function TaskDetailModal() {
   const accessToken = localStorage.getItem("accessToken") ?? "";
 
   const handleLoad = async () => {
-    if (!selectedTaskId) return;
-    if (isLoading) return;
+    if (!selectedTaskId || isLoading) return;
     setIsLoading(true);
 
     try {