Skip to content

Commit f5c830d

Browse files
seroakseroak
committed
LCP 향상 Performance score 향샹
1 parent 9447bd7 commit f5c830d

File tree

18 files changed

+344
-241
lines changed

18 files changed

+344
-241
lines changed

‎__tests__/pages/home/components/RightSection/renderingCodeFlowUnitTest.test.tsx‎

Lines changed: 0 additions & 112 deletions
This file was deleted.

‎src/App.tsx‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useEffect } from "react";
1+
import { useEffect, lazy, Suspense } from "react";
22
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
3-
import Visualization from "./pages/Visualization/Visualization";
4-
import VisualizationClassroom from "./pages/Visualization/VisualizationClassroom";
3+
// import Visualization from "./pages/Visualization/Visualization";
4+
// import VisualizationClassroom from "./pages/Visualization/VisualizationClassroom";
55
import Signup from "./pages/Signup/Signup";
66
import Login from "./pages/Login/Login";
77
import Home from "./pages/Home/Home";
@@ -10,6 +10,10 @@ import ClassroomDashboard from "./pages/ClassroomDashboard/ClassroomDashboard";
1010
import Assignment from "./pages/Assignment/Assignment";
1111
import Classroom from "./pages/Classroom/Classroom";
1212
import AuthEmail from "./pages/AuthEmail/AuthEmail";
13+
import StaticVisualization from "./pages/Visualization/components/StaticVisualization";
14+
15+
const Visualization = lazy(() => import("./pages/Visualization/Visualization"));
16+
const VisualizationClassroom = lazy(() => import("./pages/Visualization/VisualizationClassroom"));
1317

1418
import { useMswReadyStore } from "@/store/mswReady";
1519
import "./App.css";
@@ -34,13 +38,13 @@ function App() {
3438
if (typeof window !== "undefined") {
3539
// 환경변수에 따라 MSW 활성화 여부 결정
3640
const shouldUseMSW = import.meta.env.VITE_APP_USE_MSW === "true";
37-
41+
3842
if (shouldUseMSW) {
3943
await setupMSW();
4044
} else {
4145
console.log("MSW disabled - Using real API server");
4246
}
43-
47+
4448
setIsMswReady(true);
4549
}
4650
}
@@ -69,8 +73,22 @@ function App() {
6973
<Router>
7074
<Routes>
7175
<Route path="/" element={<Home />} />
72-
<Route path="/viz" element={<Visualization />} />
73-
<Route path="/classroomdashboard/classroom/viz/:classroomId" element={<VisualizationClassroom />} />
76+
<Route
77+
path="/viz"
78+
element={
79+
<Suspense fallback={<StaticVisualization />}>
80+
<Visualization />
81+
</Suspense>
82+
}
83+
/>
84+
<Route
85+
path="/classroomdashboard/classroom/viz/:classroomId"
86+
element={
87+
<Suspense fallback={<StaticVisualization />}>
88+
<VisualizationClassroom />
89+
</Suspense>
90+
}
91+
/>
7492
<Route path="/signup" element={<Signup />} />
7593
<Route path="/login" element={<Login />} />
7694
<Route path="/classroomdashboard/classroom/manage/:classroomId" element={<Manage />} />

‎src/pages/Visualization/Visualization.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -144,15 +144,7 @@ export default function Visualization() {
144144
<LeftSection onboardingStep={onboardingStep} setTutorialPosition={setTutorialPosition} />
145145
<RightSection onboardingStep={onboardingStep} setTutorialPosition={setTutorialPosition} />
146146
</Split>
147-
<div className="floating-buttons">
148-
<div className="btn btn-manual">
149-
<img
150-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3z'%3E%3C/path%3E%3Cpath d='M8 4v16M16 4v16'%3E%3C/path%3E%3C/svg%3E"
151-
alt="완료 아이콘"
152-
/>
153-
사용법
154-
</div>
155-
</div>
147+
156148
{isTutorialVisible && (
157149
<>
158150
<div

‎src/pages/Visualization/VisualizationClassroom.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,13 +176,13 @@ const VisualizationClassroom = () => {
176176
const guestActionMutation = useGuestActionMutation();
177177

178178
const handelIngRequest = () => {
179-
guestActionMutation.mutate({ classroomId: classroomId, action: 1, code: code });
179+
guestActionMutation.mutate({ classroomId: classroomId, action: "1", code: code });
180180
};
181181
const handleHelpRequest = () => {
182-
guestActionMutation.mutate({ classroomId: classroomId, action: 2, code: code });
182+
guestActionMutation.mutate({ classroomId: classroomId, action: "2", code: code });
183183
};
184184
const handleCompleteRequest = () => {
185-
guestActionMutation.mutate({ classroomId: classroomId, action: 3, code: code });
185+
guestActionMutation.mutate({ classroomId: classroomId, action: "3", code: code });
186186
};
187187
return (
188188
<CodeContext.Provider value={{ code, setCode }}>

src/pages/Visualization/components/RightSection/renderingCodeFlow.tsx renamed to src/pages/Visualization/components/RightSection/CodeFlowRenderer.tsx

Lines changed: 31 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { useRef, ReactNode } from "react";
2-
import { AnimatePresence, motion } from "framer-motion";
1+
import { memo } from "react";
32
import { ReactElement } from "react";
3+
import { AnimatePresence, motion } from "framer-motion";
4+
5+
// Components
46
import PrintBox from "./components/PrintBox/PrintBox";
57
import ForBox from "./components/ForBox/ForBox";
68
import IfBox from "./components/IfBox/IfBox";
@@ -14,39 +16,28 @@ import CallUserFuncBox from "./components/CallUserFuncBox/CallUserFuncBox";
1416
import ReturnBox from "./components/ReturnBox/ReturnBox";
1517
import FlowControlBox from "./components/FlowControlBox/FlowControlBox";
1618
import InputBox from "./components/InputBox/InputBox";
17-
// type import
18-
import { ElseItem } from "@/pages/Visualization/types/codeFlow/elseItem";
19-
import { ForItem } from "@/pages/Visualization/types/codeFlow/forItem";
19+
import CodeFlowItem from "./components/CodeFlowItem";
20+
21+
// Types
22+
import { CodeFlowItem as CodeFlowItemType } from "./types";
2023
import { PrintItem } from "@/pages/Visualization/types/codeFlow/printItem";
24+
import { ForItem } from "@/pages/Visualization/types/codeFlow/forItem";
2125
import { ConditionItem } from "@/pages/Visualization/types/codeFlow/conditionItem";
26+
import { ElseItem } from "@/pages/Visualization/types/codeFlow/elseItem";
2227
import { CodeFlowVariableItem } from "@/pages/Visualization/types/codeFlow/codeFlowVariableItem";
2328
import { CodeFlowListItem } from "@/pages/Visualization/types/codeFlow/codeFlowListItem";
2429
import { CodeFlowTupleItem } from "@/pages/Visualization/types/codeFlow/codeFlowTupleItem";
2530
import { WhileItem } from "@/pages/Visualization/types/codeFlow/whileItem";
2631
import { CallUserFuncItem } from "@/pages/Visualization/types/codeFlow/callUserFuncItem";
2732
import { ReturnItem } from "@/pages/Visualization/types/codeFlow/returnItem";
33+
import { FlowControlItem } from "@/pages/Visualization/types/codeFlow/flowControlItem";
2834
import { InputItem } from "@/pages/Visualization/types/codeFlow/inputItem";
29-
//zustand
30-
31-
import { FlowControlItem } from "@/pages/Visualization/types/codeFlow/flowControlItem.ts";
32-
33-
import { CodeFlowItem as CodeFlowItemType } from "./types";
3435

35-
interface Props {
36-
codeFlow: CodeFlowItemType;
37-
children?: ReactNode;
36+
interface CodeFlowRendererProps {
37+
codeFlows: CodeFlowItemType[];
3838
}
39-
const CodeFlowItem = ({ codeFlow, children }: Props) => {
40-
const ref = useRef<HTMLDivElement>(null);
4139

42-
return (
43-
<div style={{ width: "fit-content" }} ref={ref} id={codeFlow.isLight ? "highlighted-code-flow" : undefined}>
44-
{children}
45-
</div>
46-
);
47-
};
48-
49-
export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number, height: number): ReactElement => {
40+
const CodeFlowRenderer = memo(({ codeFlows }: CodeFlowRendererProps): ReactElement => {
5041
return (
5142
<>
5243
{codeFlows.map((codeFlow, index) => {
@@ -57,16 +48,16 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
5748
return (
5849
<CodeFlowItem key={printItem.id} codeFlow={codeFlow}>
5950
<PrintBox key={printItem.id} printItem={printItem} />
60-
{renderingCodeFlow(codeFlow.child, width, height)}
51+
<CodeFlowRenderer codeFlows={codeFlow.child} />
6152
</CodeFlowItem>
6253
);
6354
}
6455
case "for": {
6556
const forItem = codeFlow as ForItem;
6657
return (
6758
<div key={forItem.id}>
68-
<ForBox key={forItem.id} forItem={forItem} width={width} height={height}>
69-
{renderingCodeFlow(codeFlow.child, width, height)}
59+
<ForBox key={forItem.id} forItem={forItem}>
60+
<CodeFlowRenderer codeFlows={codeFlow.child} />
7061
</ForBox>
7162
</div>
7263
);
@@ -78,7 +69,7 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
7869
<motion.div key={ifItem.id} layout>
7970
<CodeFlowItem key={index} codeFlow={codeFlow}>
8071
<IfBox isLight={codeFlow.isLight} ifItem={ifItem}>
81-
{renderingCodeFlow(codeFlow.child, width, height)}
72+
<CodeFlowRenderer codeFlows={codeFlow.child} />
8273
</IfBox>
8374
</CodeFlowItem>
8475
</motion.div>
@@ -91,7 +82,7 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
9182
<motion.div key={elifItem.id} layout>
9283
<CodeFlowItem key={index} codeFlow={codeFlow}>
9384
<ElifBox isLight={codeFlow.isLight} elifItem={elifItem}>
94-
{renderingCodeFlow(codeFlow.child, width, height)}
85+
<CodeFlowRenderer codeFlows={codeFlow.child} />
9586
</ElifBox>
9687
</CodeFlowItem>
9788
</motion.div>
@@ -104,7 +95,7 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
10495
<motion.div key={elseItem.id} layout>
10596
<CodeFlowItem key={index} codeFlow={codeFlow}>
10697
<ElseBox isLight={codeFlow.isLight} elseItem={elseItem}>
107-
{renderingCodeFlow(codeFlow.child, width, height)}
98+
<CodeFlowRenderer codeFlows={codeFlow.child} />
10899
</ElseBox>
109100
</CodeFlowItem>
110101
</motion.div>
@@ -114,26 +105,21 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
114105
const variableItem = codeFlow as CodeFlowVariableItem;
115106
return (
116107
<CodeFlowItem key={variableItem.id} codeFlow={codeFlow}>
117-
<CodeFlowVariableBox
118-
key={variableItem.id}
119-
codeFlowVariableItem={variableItem}
120-
width={width}
121-
height={height}
122-
/>
108+
<CodeFlowVariableBox key={variableItem.id} codeFlowVariableItem={variableItem} />
123109
</CodeFlowItem>
124110
);
125111
case "list":
126112
const listItem = codeFlow as CodeFlowListItem;
127113
return (
128114
<CodeFlowItem key={listItem.id} codeFlow={codeFlow}>
129-
<CodeFlowListWrapper codeFlowListItem={listItem} width={width} height={height} />
115+
<CodeFlowListWrapper codeFlowListItem={listItem} />
130116
</CodeFlowItem>
131117
);
132118
case "tuple":
133119
const tupleItem = codeFlow as CodeFlowTupleItem;
134120
return (
135121
<CodeFlowItem key={tupleItem.id} codeFlow={codeFlow}>
136-
<CodeFlowTupleWrapper codeFlowTupleItem={tupleItem} width={width} height={height} />
122+
<CodeFlowTupleWrapper codeFlowTupleItem={tupleItem} />
137123
</CodeFlowItem>
138124
);
139125
case "while":
@@ -142,7 +128,7 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
142128
<div key={whileItem.id}>
143129
<CodeFlowItem key={index} codeFlow={codeFlow}>
144130
<WhileBox key={index} whileItem={whileItem}>
145-
{renderingCodeFlow(codeFlow.child, width, height)}
131+
<CodeFlowRenderer codeFlows={codeFlow.child} />
146132
</WhileBox>
147133
</CodeFlowItem>
148134
</div>
@@ -153,7 +139,7 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
153139
<div key={callUserFuncItem.id}>
154140
<CodeFlowItem key={index} codeFlow={codeFlow}>
155141
<CallUserFuncBox key={index} callUserFuncItem={callUserFuncItem}>
156-
{renderingCodeFlow(codeFlow.child, width, height)}
142+
<CodeFlowRenderer codeFlows={codeFlow.child} />
157143
</CallUserFuncBox>
158144
</CodeFlowItem>
159145
</div>
@@ -168,11 +154,11 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
168154
</div>
169155
);
170156
case "flowcontrol":
171-
const FlowControlItem = codeFlow as FlowControlItem;
157+
const flowControlItem = codeFlow as FlowControlItem;
172158
return (
173-
<div key={FlowControlItem.id}>
159+
<div key={flowControlItem.id}>
174160
<CodeFlowItem key={index} codeFlow={codeFlow}>
175-
<FlowControlBox key={index} flowControlItem={FlowControlItem} />
161+
<FlowControlBox key={index} flowControlItem={flowControlItem} />
176162
</CodeFlowItem>
177163
</div>
178164
);
@@ -192,4 +178,6 @@ export const renderingCodeFlow = (codeFlows: CodeFlowItemType[], width: number,
192178
})}
193179
</>
194180
);
195-
};
181+
});
182+
183+
export default CodeFlowRenderer;

‎src/pages/Visualization/components/RightSection/RightSection.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@ const RightSection = ({ onboardingStep, setTutorialPosition }: RightSectionProps
124124
direction="horizontal"
125125
cursor="col-resize"
126126
style={{ display: "flex", flexDirection: "row", height: "100%", flex: 1, overflow: "hidden" }}
127-
className="split-container"
128127
>
129128
<CodeFlowView
130129
codeFlowList={codeFlowList}

0 commit comments

Comments
 (0)