Skip to content

Commit a8c4d05

Browse files
prgmr99prgmr99
authored
refactor: dynamic import enhance (#159)
* remove: 불필요한 옵션 제거 * refactor: dynamic import 제거
1 parent 6734875 commit a8c4d05

File tree

9 files changed

+94
-154
lines changed

9 files changed

+94
-154
lines changed

‎src/app/(protected)/(create)/_components/characterDialog/CharacterDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const CharacterDialog = ({
4444
<DialogDescription className="max-w-[190px] flex-wrap self-center">
4545
{`‘${personaName}’ ${userData.nickname}님!`}
4646
</DialogDescription>
47-
<DialogDescription className="max-w-[190px] flex-wrap self-center">
47+
<DialogDescription className="max-w-[190px] flex-wrap self-center font-semibold">
4848
{task}
4949
</DialogDescription>
5050
<DialogDescription className="max-w-[190px] flex-wrap self-center">

‎src/app/(protected)/(create)/instant-create/page.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
"use client";
22

3+
import BackHeader from "@/components/backHeader/BackHeader";
4+
import Loader from "@/components/loader/Loader";
35
import useMount from "@/hooks/useMount";
46
import type { InstantTaskType, TimePickerType } from "@/types/create";
57
import { useMutation, useQueryClient } from "@tanstack/react-query";
68
import { createFunnelSteps, useFunnel } from "@use-funnel/browser";
79
import dynamic from "next/dynamic";
810
import { useRouter } from "next/navigation";
11+
import TaskInput from "../_components/taskInput/TaskInput";
912
import type { InstantTaskInputType, TaskInputType } from "../context";
1013

11-
const BackHeader = dynamic(() => import("@/components/backHeader/BackHeader"));
12-
const TaskInput = dynamic(
13-
() => import("@/app/(protected)/(create)/_components/taskInput/TaskInput"),
14-
);
1514
const InstantTaskTypeInput = dynamic(
1615
() =>
1716
import(
1817
"@/app/(protected)/(create)/_components/instantTaskTypeInput/InstantTaskTypeInput"
1918
),
19+
{
20+
loading: () => <Loader />,
21+
},
2022
);
2123

2224
type FormState = {

‎src/app/(protected)/(create)/scheduled-create/page.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,16 @@ import dynamic from "next/dynamic";
1818
import { useRouter } from "next/navigation";
1919
import { useEffect, useState } from "react";
2020
import TaskInput from "../_components/taskInput/TaskInput";
21+
import TaskTypeInput from "../_components/taskTypeInput/TaskTypeInput";
2122

2223
const BufferTime = dynamic(
23-
() =>
24-
import(/* webpackPrefetch: true */ "../_components/bufferTime/BufferTime"),
24+
() => import("../_components/bufferTime/BufferTime"),
2525
);
2626
const EstimatedTimeInput = dynamic(
27-
() =>
28-
import(
29-
/* webpackPrefetch: true */ "../_components/estimatedTimeInput/EstimatedTimeInput"
30-
),
27+
() => import("../_components/estimatedTimeInput/EstimatedTimeInput"),
3128
);
3229
const SmallActionInput = dynamic(
33-
() =>
34-
import(
35-
/* webpackPrefetch: true */ "../_components/smallActionInput/SmallActionInput"
36-
),
37-
);
38-
const TaskTypeInput = dynamic(
39-
() =>
40-
import(
41-
/* webpackPrefetch: true */
42-
"../_components/taskTypeInput/TaskTypeInput"
43-
),
30+
() => import("../_components/smallActionInput/SmallActionInput"),
4431
);
4532

4633
type FormState = {

‎src/app/(protected)/(root)/_components/todayTaskTabWrapper/TodayTaskTabWrapper.tsx‎

Lines changed: 8 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,14 @@ import { useRouter } from "next/navigation";
55
import { useState } from "react";
66

77
import dynamic from "next/dynamic";
8-
9-
const IsEmptyScreen = dynamic(
10-
() => import(/* webpackPrefetch: true */ "../isEmptyScreen/IsEmptyScreen"),
11-
);
12-
13-
const HasTodayAndInProgressTasksScreen = dynamic(
14-
() =>
15-
import(
16-
/* webpackPrefetch: true */ "../hasTodayAndInProgressTasksScreen/HasTodayAndInProgressTasksScreen"
17-
),
18-
);
19-
const HasInProgressTasksOnlyScreen = dynamic(
20-
() =>
21-
import(
22-
/* webpackPrefetch: true */ "../hasInProgressTasksOnlyScreen/HasInProgressTasksOnlyScreen"
23-
),
24-
);
25-
const HasTodayTasksOnlyScreen = dynamic(
26-
() =>
27-
import(
28-
/* webpackPrefetch: true */ "../hasTodayTasksOnlyScreen/HasTodayTasksOnlyScreen"
29-
),
30-
);
31-
const HasWeeklyTasksOnlyScreen = dynamic(
32-
() =>
33-
import(
34-
/* webpackPrefetch: true */ "../hasWeeklyTasksOnlyScreen/HasWeeklyTasksOnlyScreen"
35-
),
36-
);
37-
const HasAllTasksOnlyScreen = dynamic(
38-
() =>
39-
import(
40-
/* webpackPrefetch: true */ "../hasAllTasksOnlyScreen/HasAllTasksOnlyScreen"
41-
),
42-
);
43-
const ExpiredTaskDrawer = dynamic(
44-
() =>
45-
import(
46-
/* webpackPrefetch: true */ "../expiredTaskDrawer/ExpiredTaskDrawer"
47-
),
48-
);
8+
import ExpiredTaskDrawer from "../expiredTaskDrawer/ExpiredTaskDrawer";
9+
import HasAllTasksOnlyScreen from "../hasAllTasksOnlyScreen/HasAllTasksOnlyScreen";
10+
import HasInProgressTasksOnlyScreen from "../hasInProgressTasksOnlyScreen/HasInProgressTasksOnlyScreen";
11+
import HasTodayAndInProgressTasksScreen from "../hasTodayAndInProgressTasksScreen/HasTodayAndInProgressTasksScreen";
12+
import HasTodayTasksOnlyScreen from "../hasTodayTasksOnlyScreen/HasTodayTasksOnlyScreen";
13+
import HasWeeklyTasksOnlyScreen from "../hasWeeklyTasksOnlyScreen/HasWeeklyTasksOnlyScreen";
14+
15+
const IsEmptyScreen = dynamic(() => import("../isEmptyScreen/IsEmptyScreen"));
4916

5017
interface TodayTaskTabWrapperProps {
5118
taskType: string;

‎src/app/(protected)/(root)/page.tsx‎

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,40 +9,15 @@ import Loader from "@/components/loader/Loader";
99
import useTaskFiltering from "@/hooks/useTaskFilter";
1010
import useTaskStatus from "@/hooks/useTaskStatus";
1111
import { useAuthStore } from "@/store";
12-
import dynamic from "next/dynamic";
12+
import CharacterDialog from "../(create)/_components/characterDialog/CharacterDialog";
13+
import FailedDialog from "../(create)/_components/failedDialog/FailedDialog";
14+
import CreateTaskSheet from "./_components/CreateTaskSheet";
15+
import TaskDetailSheet from "./_components/TaskDetailSheet";
16+
import AllTaskTabWrapper from "./_components/allTaskTabWrapper/AllTaskTabWrapper";
1317
import Footer from "./_components/footer/Footer";
1418
import Header from "./_components/header/Header";
1519
import TodayTaskTabWrapper from "./_components/todayTaskTabWrapper/TodayTaskTabWrapper";
1620

17-
const AllTaskTabWrapper = dynamic(
18-
() =>
19-
import(
20-
/* webpackPrefetch: true */ "./_components/allTaskTabWrapper/AllTaskTabWrapper"
21-
),
22-
);
23-
24-
const TaskDetailSheet = dynamic(
25-
() => import(/* webpackPrefetch: true */ "./_components/TaskDetailSheet"),
26-
);
27-
28-
const CreateTaskSheet = dynamic(
29-
() => import(/* webpackPrefetch: true */ "./_components/CreateTaskSheet"),
30-
);
31-
32-
const FailedDialog = dynamic(
33-
() =>
34-
import(
35-
/* webpackPrefetch: true */ "../(create)/_components/failedDialog/FailedDialog"
36-
),
37-
);
38-
39-
const CharacterDialog = dynamic(
40-
() => import("../(create)/_components/characterDialog/CharacterDialog"),
41-
{
42-
ssr: false,
43-
},
44-
);
45-
4621
const HomePageContent = () => {
4722
const router = useRouter();
4823
const { data: homeData, isPending } = useHomeData();

‎src/app/(protected)/my-page/characters/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ const CharactersPageContent = () => {
8585
width={13}
8686
height={12}
8787
className="absolute top-8 left-[81px]"
88+
priority
8889
/>
8990
<p className="absolute b2 text-white top-10 left-0 px-4 py-3 rounded-[12px] bg-component-gray-tertiary backdrop-blur-[7px]">
9091
할 일 추가 시, 마감 유형과 분위기에 맞춘 캐릭터가 만들어져요

‎src/app/(protected)/my-page/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export default function MyPage() {
2525
queryKey: ["my-page"],
2626
queryFn: async () => await fetch("/api/my-page").then((res) => res.json()),
2727
enabled: !!userData.memberId,
28+
staleTime: 1000 * 60 * 5,
29+
gcTime: 1000 * 60 * 60,
2830
});
2931

3032
const handlePersonaClick = (id: number) => {

‎src/app/(protected)/retrospection/[taskId]/_components/RetrospectCommentContent.tsx‎

Lines changed: 66 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,78 @@
11
import { useState } from "react";
22

33
const RetrospectCommentContent = ({
4-
retrospectContent,
5-
setRetrospectContent,
6-
} : RetrospectContentProps) => {
7-
const MAX_LENGTH = 100;
4+
retrospectContent,
5+
setRetrospectContent,
6+
}: RetrospectContentProps) => {
7+
const MAX_LENGTH = 100;
88

9-
const [isFocused, setIsFocused] = useState(false);
10-
const [isOverMaxLength, setIsOverMaxLength] = useState(false);
9+
const [isFocused, setIsFocused] = useState(false);
10+
const [isOverMaxLength, setIsOverMaxLength] = useState(false);
1111

12-
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
13-
const value = e.target.value;
14-
if (value.length <= MAX_LENGTH) {
15-
setRetrospectContent((prev) => ({
16-
...prev,
17-
comment: value,
18-
}));
19-
setIsOverMaxLength(false);
20-
} else {
21-
setIsOverMaxLength(true);
22-
}
23-
}
12+
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
13+
const value = e.target.value;
14+
if (value.length <= MAX_LENGTH) {
15+
setRetrospectContent((prev) => ({
16+
...prev,
17+
comment: value,
18+
}));
19+
setIsOverMaxLength(false);
20+
} else {
21+
setIsOverMaxLength(true);
22+
}
23+
};
2424

25-
const setUnfocused = () => {
26-
setIsFocused(false);
27-
setIsOverMaxLength(false);
28-
}
25+
const setUnfocused = () => {
26+
setIsFocused(false);
27+
setIsOverMaxLength(false);
28+
};
2929

30-
const commentBoxBorder = () => {
31-
if (isOverMaxLength) {
32-
return commentBoxBorders.error;
33-
}
34-
if (isFocused) {
35-
return commentBoxBorders.focused;
36-
}
37-
return commentBoxBorders.default;
38-
}
39-
const commentBoxBorders = {
40-
default: "",
41-
focused: "outline outline-line-accent",
42-
error: "outline outline-line-error",
43-
}
30+
const commentBoxBorder = () => {
31+
if (isOverMaxLength) {
32+
return commentBoxBorders.error;
33+
}
34+
if (isFocused) {
35+
return commentBoxBorders.focused;
36+
}
37+
return commentBoxBorders.default;
38+
};
39+
const commentBoxBorders = {
40+
default: "",
41+
focused: "outline outline-line-accent",
42+
error: "outline outline-line-error",
43+
};
4444

45-
const commentBoxInfoTextColor = () => {
46-
if (isOverMaxLength) {
47-
return "text-component-accent-red";
48-
}
49-
return "text-gray-alternative";
50-
}
45+
const commentBoxInfoTextColor = () => {
46+
if (isOverMaxLength) {
47+
return "text-component-accent-red";
48+
}
49+
return "text-gray-alternative";
50+
};
5151

52-
return (
53-
<div className={`flex flex-col w-full gap-3 px-4 py-3 bg-component-gray-tertiary rounded-[11.25px] ${commentBoxBorder()}`}>
54-
<textarea
55-
value={retrospectContent.comment}
56-
onChange={handleChange}
57-
onFocus={() => setIsFocused(true)}
58-
onBlur={() => setUnfocused()}
59-
placeholder="좋았던 점과 개선할 점을 간단히 작성해주세요."
60-
className="w-full h-20 bg-component-gray-tertiary b3 text-gray-normal placeholder-text-gray-normal
52+
return (
53+
<div
54+
className={`flex flex-col w-full gap-3 px-4 py-3 bg-component-gray-tertiary rounded-[11.25px] ${commentBoxBorder()}`}
55+
>
56+
<textarea
57+
value={retrospectContent.comment}
58+
onChange={handleChange}
59+
onFocus={() => setIsFocused(true)}
60+
onBlur={() => setUnfocused()}
61+
placeholder="좋았던 점과 개선할 점을 간단히 작성해주세요."
62+
className="w-full h-20 bg-component-gray-tertiary b2 text-gray-normal placeholder-text-gray-normal
6163
resize-none focus:outline-none"
62-
/>
64+
/>
6365

64-
<div className={`flex justify-between c2 text-right ${commentBoxInfoTextColor()}`}>
65-
<span>{isOverMaxLength ? "100자 이내로 입력할 수 있어요." : ""}</span>
66-
<span>{retrospectContent.comment.length} / {MAX_LENGTH}자</span>
67-
</div>
68-
</div>
69-
)
70-
}
66+
<div
67+
className={`flex justify-between c2 text-right ${commentBoxInfoTextColor()}`}
68+
>
69+
<span>{isOverMaxLength ? "100자 이내로 입력할 수 있어요." : ""}</span>
70+
<span>
71+
{retrospectContent.comment.length} / {MAX_LENGTH}자
72+
</span>
73+
</div>
74+
</div>
75+
);
76+
};
7177

72-
export default RetrospectCommentContent;
78+
export default RetrospectCommentContent;

‎src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function RootLayout({
3030
<head>
3131
<meta
3232
name="viewport"
33-
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
33+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
3434
/>
3535
</head>
3636
<body

0 commit comments

Comments
 (0)