Skip to content

Commit

Permalink
Merge pull request #115 from softeerbootcamp4th/feature/performance-u…
Browse files Browse the repository at this point in the history
…pper

[feat, chore] 자잘한 것들 수정 및 성능 개선
  • Loading branch information
darkdulgi authored Aug 19, 2024
2 parents ba3a842 + 45fe21c commit c85ff9c
Show file tree
Hide file tree
Showing 23 changed files with 282 additions and 28 deletions.
3 changes: 2 additions & 1 deletion build.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,9 @@ async function injectSSGToHtml(mode) {
await mkdir(dir, { recursive: true });
await writeFile(absolutePath, html);
console.log(`pre-rendered : ${path}`);
} catch {
} catch(e) {
console.log(`pre-rendered failed : ${path}`);
console.error(e);
}
} );
await Promise.allSettled(promises);
Expand Down
10 changes: 10 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"preview-admin": "vite preview --outDir dist/admin"
},
"dependencies": {
"jwt-decode": "^4.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-lottie-player": "^2.1.0",
Expand Down
16 changes: 15 additions & 1 deletion src/adminPage/features/eventEdit/businessLogic/FcfsData.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,15 @@ function verifyItems(map, { startTime, endTime, prevSnapshot = new Map() }) {
return result;
}

function hasDuplicatedDate(newDate, map) {
if (newDate === undefined) return true;
if (newDate === null) return false;
const dateSet = new Set([...map.values()].map(({ date }) => date?.valueOf() ?? null));

if (dateSet.has(newDate.valueOf())) return true;
return false;
}

function getDefaultFcfsArray(
startTime,
endTime,
Expand Down Expand Up @@ -194,12 +203,17 @@ class FcfsData {
modify(key, data, { startTime, endTime }) {
const newData = new FcfsData(this.map);
const oldItem = newData.map.get(key);

const verified = verifyItem(
{ ...oldItem, ...data },
{ startTime, endTime, prevSnapshot: oldItem },
);
if (verified === null) newData.map.delete(key);
else newData.map.set(key, verified);
else {
if (hasDuplicatedDate(verified.date, this.map)) verified.date = oldItem.date;

newData.map.set(key, verified);
}
return newData;
}
modifyAll(data, { startTime, endTime }) {
Expand Down
4 changes: 2 additions & 2 deletions src/mainPage/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import QnA from "./features/qna";
import Footer from "./features/footer";

import Modal from "@common/modal/modal.jsx";
import { initLoginState, logout } from "@main/auth/store.js";
import { logout } from "@main/auth/store.js";
import useLogoutMiddleware from "@common/dataFetch/initLogoutMiddleware";

function App() {
useEffect(() => {
window.scrollTo(0, 0);
history.scrollRestoration = "manual";
initLoginState();
//initLoginState();
}, []);
useLogoutMiddleware(logout);

Expand Down
6 changes: 6 additions & 0 deletions src/mainPage/features/comment/commentForm/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import openModal from "@common/modal/openModal.js";
const submitCommentErrorHandle = {
400: "negative",
401: "unauthorized",
404: "no_participated",
409: "하루에 1번만 기대평을 등록할 수 있습니다.",
offline: "offline",
};
Expand All @@ -32,6 +33,10 @@ function CommentForm() {
setButtonFetchState(submitted ? "disabled" : "enabled");
})
.catch((e) => {
if (e.status === 401) {
setButtonFetchState("enabled");
return;
}
console.error(e);
setButtonFetchState("error");
})
Expand Down Expand Up @@ -70,6 +75,7 @@ function CommentForm() {
case submitCommentErrorHandle[400]:
return openModal(negativeModal);
case submitCommentErrorHandle[401]:
case submitCommentErrorHandle[404]:
return openModal(noUserModal);
case submitCommentErrorHandle["offline"]:
return openModal(noServerModal);
Expand Down
2 changes: 1 addition & 1 deletion src/mainPage/features/comment/mock.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const handlers = [
http.get("/api/v1/comment/info", ({ request }) => {
const token = request.headers.get("authorization");

if (token === null) return HttpResponse.json({ submitted: false });
if (token === null) return HttpResponse.json({ submitted: false }, { status: 401 });
return HttpResponse.json({ submitted: false });
}),
http.get("/api/v1/comment/:eventFrameId", () => {
Expand Down
1 change: 1 addition & 0 deletions src/mainPage/features/detailInformation/DetailItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ function DetailItem({ img, title, description }) {
className="absolute w-full h-full -z-10 top-0 left-0 object-cover"
width="1920"
height="1080"
loading="lazy"
/>
<div className="text-white w-full flex flex-col gap-4">
<h3 className="whitespace-pre-wrap text-title-s font-bold md:text-title-m lg:text-title-l">
Expand Down
2 changes: 2 additions & 0 deletions src/mainPage/features/fcfs/cardGame/Card.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,15 @@ function Card({ index, locked, isFlipped, setFlipped, setGlobalLock, getCardAnsw
srcSet={`${hidden1x} 1x, ${hidden2x} 2x`}
alt="hidden"
draggable="false"
loading="lazy"
/>
<img
className={`${cardFaceBaseStyle} ${style.back}`}
src={answer1x}
srcSet={`${answer1x} 1x, ${answer2x} 2x`}
alt={isCorrect ? "축하합니다, 당첨입니다!" : "아쉽게도 정답이 아니네요!"}
draggable="false"
loading="lazy"
/>
</div>
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/mainPage/features/fcfs/description/DateEventPrize.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function DateEventPrize({ date, title, capacity, image }) {

return (
<div className={`flex gap-6 p-6 ${bgColor} ${opacity}`}>
<img src={image} alt={title} width="130" height="88" />
<img src={image} alt={title} width="130" height="88" loading="lazy" />
<div className="font-bold">
<p
className={`text-body-m ${dateStatus === "ended" ? "text-neutral-500" : "text-blue-400"}`}
Expand Down
4 changes: 2 additions & 2 deletions src/mainPage/features/fcfs/mock.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ const handlers = [
}),
http.get("/api/v1/event/fcfs/:eventFrameId/participated", async ({ request }) => {
const token = request.headers.get("authorization");
if (token === null) return HttpResponse.json({ answerResult: false, winner: false });
if (token === null) return HttpResponse.json(false);

//await delay(10000);

return HttpResponse.json({ answerResult: false, winner: false });
return HttpResponse.json(false);
}),
http.post("/api/v1/event/fcfs/:eventFrameId", async ({ request }) => {
const { eventAnswer } = await request.json();
Expand Down
24 changes: 24 additions & 0 deletions src/mainPage/features/header/Hamburger/Button.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useState } from "react";
import style from "./style.module.css";

function HamburgerButton({ children }) {
const [opened, setOpened] = useState(false);
return (
<>
<button
className="flex md:hidden justify-center items-center size-6 z-10"
aria-label="open-menu"
onClick={() => setOpened((state) => !state)}
>
<div className={style.hamburger} data-opened={opened}>
<div></div>
</div>
</button>
<div className="fixed -z-10 w-full top-0 left-0 bg-white flex md:hidden flex-col justify-center items-center gap-2">
<div className="w-full mt-16 shadow-xl">{opened && children}</div>
</div>
</>
);
}

export default HamburgerButton;
53 changes: 53 additions & 0 deletions src/mainPage/features/header/Hamburger/style.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.hamburger {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 24px;
height: 20px;
}

.hamburger > div,
.hamburger > div::before,
.hamburger > div::after {
width: 100%;
height: 2px;
box-sizing: border-box;
background-color: currentColor;
transition: all 0.3s;
}

.hamburger > div {
position: absolute;
border-color: #24adaf;
}

.hamburger > div::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateY(-10px);
}

.hamburger > div::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateY(10px);
}

.hamburger[data-opened="true"] > div {
transform: rotate(135deg);
}

.hamburger[data-opened="true"] > div::before {
transform: translateY(0px) rotate(180deg);
}

.hamburger[data-opened="true"] > div::after {
transform: translateY(-0px) rotate(-270deg);
}
17 changes: 17 additions & 0 deletions src/mainPage/features/header/index.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import scrollTo from "@main/scroll/scrollTo";
import { useSectionStore } from "@main/scroll/store";
import AuthButtonSection from "./AuthButtonSection.jsx";
import HamburgerButton from "./Hamburger/Button.jsx";

import style from "./index.module.css";

Expand Down Expand Up @@ -52,6 +53,22 @@ export default function Header() {
<div className="hidden md:flex">
<AuthButtonSection />
</div>
<HamburgerButton>
<div className="w-full px-6 py-2 flex flex-col sm:flex-row gap-4 justify-between items-center">
<ul className="flex flex-col sm:flex-row gap-4 lg:gap-8 text-body-s lg:text-body-m relative">
{scrollSectionList.map((scrollSection, index) => (
<li
key={index}
onClick={() => onClickScrollSection(index + 1)}
className={`flex justify-center items-center w-20 lg:w-24 cursor-pointer ${currentSection - 1 === index ? "text-black" : "text-neutral-300"}`}
>
{scrollSection}
</li>
))}
</ul>
<AuthButtonSection />
</div>
</HamburgerButton>
</nav>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function GiftDetail({ contentList }) {
<div className="flex flex-col font-bold">
{contentList.map((content, index) => (
<div key={index} className="bg-neutral-900 p-6 mb-5 flex z-0 relative">
<img src={content.src} alt="경품" />
<img src={content.src} alt="경품" width="130" height="89" loading="lazy" />

<div className="pl-8 flex flex-col">
<span className="text-body-m sm:text-body-l text-white">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,13 @@ export default function InteractionSlide({ interactionDesc, index, isCurrent, sl
<img
src={inactiveImgPath}
alt="inactiveImage"
loading="lazy"
className={`-z-10 absolute transition ease-in-out duration-200 ${isCurrent ? "opacity-0" : "opacity-100"}`}
/>
<img
src={activeImgPath}
alt="activeImage"
loading="lazy"
className={`-z-10 absolute transition ease-in-out duration-200 ${isCurrent ? "opacity-100" : "opacity-30 sm:opacity-0"}`}
/>
</div>
Expand Down
9 changes: 8 additions & 1 deletion src/mainPage/features/simpleInformation/contentSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,14 @@ export default function ContentSection({ content }) {
onAnimationEnd={() => setIsHighlighted(true)}
className={`${isVisible ? style.fadeIn : "opacity-0"} z-0 flex flex-col font-bold`}
>
<img src={content.src} alt={content.title} width="1200" height="456" className="w-full" />
<img
src={content.src}
alt={content.title}
width="1200"
height="456"
className="w-full"
loading="lazy"
/>

<span className="pt-10 text-body-m sm:text-body-l text-neutral-800">{content.title}</span>

Expand Down
7 changes: 5 additions & 2 deletions src/mainPage/shared/auth/mock.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ function isValidInput(name, phoneNumber) {
return name.length >= 2 && phoneNumber.length < 12 && phoneNumber.startsWith("01");
}

const token =
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ0ZWFtLW9yYW5nZSIsImlhdCI6MTcyNDA0NDc5MCwiZXhwIjoxNzI0MDQ4MzkwLCJzdWIiOiJldmVudFVzZXIiLCJ1c2VyTmFtZSI6Iuq5gOyCoeu6qSIsInVzZXJJZCI6ImtpbXBpcHB5YXAiLCJyb2xlIjoiZXZlbnRfdXNlciJ9.m5m_PkwmYz5Mt-kjn28435bQtwgph3WO-2J42X82lCg";

const handlers = [
http.post("/api/v1/event-user/send-auth", async ({ request }) => {
const { name, phoneNumber } = await request.json();
Expand All @@ -22,7 +25,7 @@ const handlers = [
return HttpResponse.json({ error: "응답 내용이 잘못됨" }, { status: 400 });
if (+authCode < 500000 === false)
return HttpResponse.json({ error: "인증번호 일치 안 함" }, { status: 401 });
return HttpResponse.json({ token: "test_token" });
return HttpResponse.json({ token });
}),

http.post("/api/v1/event-user/login", async ({ request }) => {
Expand All @@ -32,7 +35,7 @@ const handlers = [
return HttpResponse.json({ error: "응답 내용이 잘못됨" }, { status: 400 });
if (name !== "오렌지" || phoneNumber !== "01019991999")
return HttpResponse.json({ error: "사용자 없음" }, { status: 404 });
return HttpResponse.json({ token: "test_token" });
return HttpResponse.json({ token });
}),
];

Expand Down
Loading

0 comments on commit c85ff9c

Please sign in to comment.