LG Shield

const getRouteMetaRecord = (routes: ExpandedRouteConfigEntry[], parentPath = "") => {
  const record: Record<string, { id: ROUTE_IDS; label?: string; description?: string }> = {};
  for (const route of routes) {
    const path = joinRoutePath(parentPath, route.path, route.index);
    record[path] = { id: route.id, label: route.label, description: route.description };
    if (route.children?.length) _.assign(record, getRouteMetaRecord(route.children, path));
  }
  return record;
};

// /news-room-manage/latest-news/12 → params의 값과 같은 조각을 :id로 바꿔 트리에서 찾는다
const breadcrumbItems = _.map(_.compact(pathname.split("/")), (segment) => {
  let segmentKey = segment;
  for (const [key, value] of _.entries(params)) if (segment === value) segmentKey = `:${key}`;
  currentPath = currentPath ? `${currentPath}/${segmentKey}` : `/${segmentKey}`;
  const meta = routeMetaRecord[currentPath];
  return { key: currentPath, title: meta?.label || segmentKey, description: meta?.description };
});

// 마지막 조각의 label과 description이 화면 제목과 설명이 된다
const lastItem = _.last(items);
const pageTitle = lastItem?.title;
const pageDescription = lastItem?.description;

const getMenuItems = (routes: ExpandedRouteConfigEntry[], parentPath = "") => {
  const items: Required<MenuProps>["items"] = [];
  for (const route of routes) {
    const fullPath = joinRoutePath(parentPath, route.path, route.index);
    // 관리자 계정 메뉴는 최고 관리자에게만 보인다. 경로 진입 자체를 막지는 않는다
    if (fullPath === "/admin-manage" && userStore.authorities !== "SUPER_ADMIN") continue;
    const childItems = route.children?.length ? getMenuItems(route.children, fullPath) : [];
    if (route.menu) items.push({ key: fullPath, label: route.label, children: childItems.length > 0 ? childItems : undefined });
    else items.push(...childItems); // 레이아웃처럼 메뉴가 아닌 항목은 자식만 올린다
  }
  return items;
};

const apiTechnologies = {
  getTechnologies: {
    // 조건 없이 부르면 상위 키를 돌려줘 조건과 상관없이 목록 전체를 무효화할 수 있다
    key: (query?: UndefinedToNull<Admin.GetTechnologies.RequestQuery>) => {
      const baseKey = [KEY.SOLUTION, KEY.TECHNOLOGIES];
      return _.isNil(query) ? baseKey : [...baseKey, query];
    },
    fetch: async () => {
      const response: AxiosResponse<RequiredDeep<Admin.GetTechnologies.ResponseBody>> = await apiClient.request({
        method: "GET",
        url: "admin/solution/technologies",
      });
      return response.data.body;
    },
  },
};

// 수정 뒤에는 목록 전체와 해당 상세만 다시 받는다
await Promise.all([
  queryClient.invalidateQueries({ queryKey: apiNewsrooms.searchNewsrooms.key() }),
  queryClient.invalidateQueries({ queryKey: apiNewsrooms.getNewsroomDetail.key({ id: _.toNumber(id) }) }),
]);

// 서버 컴포넌트: URL query를 파싱해 같은 키로 미리 받아 둔다
const seriesSearchParams = await seriesSearchParamsCache.parse(searchParams);
const queryClient = getQueryClient();
await queryClient.prefetchQuery({
  queryKey: apiNewsrooms.searchNewsrooms.key(seriesSearchParams),
  queryFn: () => apiNewsrooms.searchNewsrooms.fetch(seriesSearchParams),
});
return <HydrationBoundary state={dehydrate(queryClient)}>{/* 목록, 페이지네이션 */}</HydrationBoundary>;

// 클라이언트 컴포넌트: 같은 URL query, 같은 키로 서버가 받아 둔 캐시를 이어받는다
const [searchParams, setSearchParams] = useQueryStates(seriesSearchParams);
const { data } = useQuery({
  queryKey: apiNewsrooms.searchNewsrooms.key(searchParams),
  queryFn: () => apiNewsrooms.searchNewsrooms.fetch(searchParams),
});

// API 클라이언트: 요청마다 현재 언어를 실어 보낸다
config.headers["Accept-Language"] = await getCookieValue("NEXT_LOCALE");

// 적용된 조건: URL query. 조회 키이자 공유 주소가 된다
const [qsFilters, setQsFilters] = useQueryStates({
  visible: parseAsBoolean,
  categoryId: parseAsInteger,
  createdStartDate: parseAsString,
  createdEndDate: parseAsString,
  searchOption: parseAsStringEnum<SEARCH_OPTION>(_.values(SEARCH_OPTION)),
  searchKeyword: parseAsString,
});
const [qsPagination, setQsPagination] = useQueryStates({ page: parseAsInteger.withDefault(1), size: parseAsInteger.withDefault(10) });

// 입력 중인 조건: 화면 상태. 상세에서 돌아오면 history state의 조건으로 시작한다
const [filters, setFilters] = useState<typeof qsFilters>(location.state ? _.omit(location.state, ["page", "size"]) : qsFilters);
useEffect(() => {
  if (location.state) {
    setQsFilters({ ..._.omit(location.state, ["page", "size"]) });
    setQsPagination({ ..._.pick(location.state, ["page", "size"]) });
  }
}, []);

// 조회 버튼을 눌러야 입력값이 URL로 넘어가고 페이지는 1로 돌아간다
const handleSearchButtonClick = async () => {
  await setQsFilters(filters);
  await setQsPagination({ page: 1, size: 10 });
};

const handleRowDragEnd = ({ active, over }: DragEndEvent) => {
  if (active.id !== over?.id) {
    const activeIndex = dataSource.findIndex((record) => record.key === active.id);
    const overIndex = dataSource.findIndex((record) => record.key === over?.id);
    setDataSource(arrayMove(dataSource, activeIndex, overIndex)); // 화면에서만 바뀐다
  }
};

const mutationChangeMenuSequence = useMutation({
  mutationFn: (query: Admin.ChangeSequence1.RequestQuery) => apiTechnologies.changeSequence.fetch(query),
  onError: () => message.open(toastCommonErrorProps()),
  onSuccess: () => queryClient.invalidateQueries({ queryKey: apiTechnologies.getTechnologies.key() }), // 서버 순서를 다시 받는다
});

const handleModalOnOk = () => {
  mutationChangeMenuSequence.mutate({ ids: _.map(dataSource, (record) => _.toNumber(record.key)) });
};

const selectedCategoryId = Form.useWatch(["categoryId"], form);

useEffect(() => {
  if (_.isNil(categories) || _.isNil(selectedCategoryId)) return;
  const selectedCategory = categories.find((category) => category.id === selectedCategoryId);
  if (!selectedCategory) return;
  if (!selectedCategory.visible) {
    form.setFieldValue("visible", "closed"); // 공개 여부를 비공개로 바꾸고 선택을 잠근다
    setIsClosedCategory(true);
    return;
  }
  setIsClosedCategory(false);
}, [selectedCategoryId, categories, form]);

<FormItemBasic<FormValues> label={"제목(국문)"} name={["titleKo"]} rules={[{ required: true, message: "" }]}>
  <InputTextArea maxLength={57} placeholder={"제목을 입력해주세요."} />
</FormItemBasic>
<FormItemBasic<FormValues> label={"제목(영문)"} name={["titleEn"]}
  rules={[{ required: true, message: "" }, { pattern: ENGLISH_REGEX, message: "영문으로 입력해주세요." }]}>
  <InputTextArea maxLength={84} placeholder={"Enter the title"} />
</FormItemBasic>

// 본문: 빈 문단과 글자 수 초과를 직접 검사한다
rules={[{ required: true, message: "" }, {
  validator: (_, value) => {
    if (isEditorBlank(value)) return Promise.reject(new Error(""));
    if (contentKoEditorRef.current && contentKoEditorRef.current.getLength() - 1 > EDITOR_KO_MAX_LENGTH) return Promise.reject(new Error(""));
    return Promise.resolve();
  },
}]}

// 폼 오류를 국문과 영문 에디터의 테두리 상태로 옮긴다
const handleFieldsChange: Callbacks<FormValues>["onFieldsChange"] = (_changedFields, allFields) => {
  const errorKo = allFields.find((field) => field.name.includes("contentKo"));
  const errorEn = allFields.find((field) => field.name.includes("contentEn"));
  setContentKoEditorError(_.size(errorKo?.errors) > 0);
  setContentEnEditorError(_.size(errorEn?.errors) > 0);
};

export const isEditorBlank = (content: string | undefined): boolean => {
  if (content === undefined) return false;
  if (/<img\s+[^>]*src=["'][^"']+["'][^>]*>/i.test(content)) return false; // 이미지만 있어도 비어 있지 않다
  return content.replace(/<[^>]*>/g, "").trim() === "";
};

instance.root.addEventListener("paste", async (e: ClipboardEvent) => {
  if (!e.clipboardData) return;
  let handled = false;
  const items = e.clipboardData.items;

  // 1) 클립보드에 이미지 파일이 있으면 올리고 Quill이 넣은 base64 이미지를 CDN 주소로 바꾼다
  for (let i = 0; i < items.length; i++) {
    const file = items[i].type.indexOf("image") !== -1 ? items[i].getAsFile() : null;
    if (!file) continue;
    e.preventDefault(); e.stopImmediatePropagation(); handled = true;
    const presignedData = await mutationRequestPresignedUrl.mutateAsync({ type: presignedType, fileName: file.name || "pasted-image.png" });
    await mutationUploadFile.mutateAsync({ presignedUrl: presignedData.presignedUrl, file });
    const pastedImg = instance.root.querySelector('img[src^="data:"]');
    const range = instance.getSelection(true);
    if (pastedImg) pastedImg.setAttribute("src", presignedData.cdnUrl);           // base64 이미지를 CDN 주소로 교체
    else instance.insertEmbed(range.index, "image", presignedData.cdnUrl);      // 없으면 새로 삽입
    break; // 한 번 처리하고 끝낸다
  }

  // 2) 파일 항목이 없으면 HTML 안의 base64 이미지를 찾아 File로 바꾼 뒤 같은 업로드를 거친다
  if (!handled) {
    const img = new DOMParser().parseFromString(e.clipboardData.getData("text/html"), "text/html").querySelector('img[src^="data:"]');
    if (!img) return;
    e.preventDefault(); e.stopImmediatePropagation();
    const blob = dataUrlToBlob(img.getAttribute("src")!);
    const presignedData = await mutationRequestPresignedUrl.mutateAsync({ type: presignedType, fileName: "pasted-image.png" });
    await mutationUploadFile.mutateAsync({ presignedUrl: presignedData.presignedUrl, file: new File([blob], "pasted-image.png", { type: blob.type }) });
    // 이후 base64 이미지 교체 또는 새 삽입은 1)과 같다
  }
  // 실제 코드는 두 분기의 업로드를 try/catch로 감싸고 실패는 console.error로만 남긴다
});

customRequest: async ({ file, onProgress, onSuccess, onError }) => {
  try {
    if (!(file instanceof File)) throw new Error("유효한 파일이 아닙니다.");
    if (file.name.length > 100) throw new Error("파일 이름은 100자 이하만 가능합니다.");
    if (file.size > maxFileSize) throw new Error(`파일 크기가 ${MaxFileSizeLabel}를 초과합니다.`);
    onProgress?.({ percent: 50 });
    const presignedData = await mutationRequestPresignedUrl.mutateAsync({ type: presignedType, fileName: file.name });
    onProgress?.({ percent: 100 });
    await mutationUploadFile.mutateAsync({ presignedUrl: presignedData.presignedUrl, file });
    onSuccess?.({ url: presignedData.cdnUrl } as unknown as T, file);
  } catch (error) {
    if (!isModalDisplayed.current) { modal.error(modalUploadImageErrorProps()); isModalDisplayed.current = true; } // 여러 파일이 실패해도 모달은 한 번
    onError?.(error as Error);
  }
},

onError: (error, variables) => {
  const { code, body } = error.cause as { code: number; body: { lockCount?: string; authorizationValue?: string } };
  if (code === ERROR.FIRST_LOGIN) {
    tokenStore.setLoginId(variables.loginId);
    tokenStore.setAuthorizationValue(body.authorizationValue ?? "");
    navigate(getPathById(ROUTE_IDS.PASSWORD_SETTING_PAGE));
    return;
  }
  if (code === ERROR.PASSWORD_CHANGE_REQUIRED) {
    modal.info(modalChangePasswordProps({ onOk: () => { /* 같은 값을 저장하고 비밀번호 설정 화면으로 */ } }));
    return;
  }
  if (code === ERROR.INACTIVE_ACCOUNT) return setErrorMessage("비활성 처리된 계정입니다. 관리자에게 문의하세요.");
  if (code === ERROR.LOGIN_FAILED) return setErrorMessage("아이디 또는 비밀번호를 잘못 입력했습니다.");
  if (code === ERROR.LOGIN_FAILED_WITH_COUNT) {
    return setErrorMessage(`아이디 또는 비밀번호(${body.lockCount}/5)를 잘못 입력했습니다.`); // 5회면 서버가 잠근다
  }
  setErrorMessage(error.message);
},

useEffect(() => {
  const handleContextMenu = (e: MouseEvent) => { e.preventDefault(); return false; };
  document.addEventListener("contextmenu", handleContextMenu);
  return () => document.removeEventListener("contextmenu", handleContextMenu);
}, []);

export default function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;

  // 크롤러 파일은 locale 리다이렉트에서 뺀다. robots.txt는 3월, 사이트맵 두 파일은 5월에 추가
  if (pathname === "/robots.txt" || pathname === "/sitemap.xml" || pathname === "/sitemap-0.xml") {
    return NextResponse.next();
  }

  // 이하 정적 경로 통과, Accept-Language 기반 locale 감지와 리다이렉트, next-intl 처리(퍼블리셔 작성)
}

export const config = {
  // health check 같은 API 경로는 미들웨어를 거치지 않는다
  matcher: ["/((?!api/).*)"],
};

module.exports = {
  siteUrl: "https://lgshield.lge.com",
  generateRobotsTxt: true,
  generateIndexSitemap: true,
  exclude: ["/api/*", "/404", "/500", "/search"],
  alternateRefs: [
    { href: "https://lgshield.lge.com/ko", hreflang: "ko" },
    { href: "https://lgshield.lge.com/en", hreflang: "en" },
  ],
  robotsTxtOptions: {
    policies: [{ userAgent: "*", allow: "/", disallow: ["/api/*", "/search"] }],
    additionalSitemaps: ["https://lgshield.lge.com/sitemap.xml"],
  },
};

http {
  server_tokens off;
  error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 /error/custom_4xx.html;
  error_page 500 501 502 503 504 505 /error/custom_5xx.html;
  server {
    listen 80;
    location / { proxy_pass http://front:3000; }   # 앱이 돌려준 404는 여기서 바뀌지 않는다
    location = /error/custom_4xx.html { root /usr/share/nginx/html; internal; }
    location = /error/custom_5xx.html { root /usr/share/nginx/html; internal; }
  }
}

"use client";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  const t = useTranslations("NotFound"); // not-found 페이지와 같은 번역 키
  return (
    <main id="notfound">
      <div className="notfound">
        <img src="/images/ico/ic-not-found.svg" alt="" />
        <h2>{t("title")}</h2>
        <p>{t("desc")}</p>
        <Link href="/">{t("link")}</Link>
      </div>
    </main>
  );
}

# dev.compose.yml: Next.js 컨테이너가 80번 포트를 바로 받는다
services:
  next-app:
    image: ${APP_NAME}:${VERSION}
    environment: { NODE_ENV: development }
    ports: ["80:3000"]

# prod.compose.yml: Next.js는 내부 포트만 열고 Nginx 컨테이너가 앞에 선다
services:
  next-app:
    image: ${APP_NAME}:${VERSION}
    environment: { NODE_ENV: production }
    expose: ["3000"]
  nginx:
    image: nginx:stable-alpine
    ports: ["80:80", "443:443"]
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro   # 기본 설정의 http 블록 안에 포함된다
      - ./nginx-logs:/var/log/nginx
    depends_on: [next-app]

FROM node:20-alpine AS builder
WORKDIR /app
ARG VERSION
LABEL version=$VERSION
COPY package.json package-lock.json* ./
RUN npm ci
COPY . .
RUN npm run build:prod

FROM node:20-alpine AS runner
WORKDIR /app
RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
USER nextjs
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

const [searchParams, setSearchParams] = useQueryStates(seriesSearchParams);
const { data } = useQuery({ queryKey: apiNewsrooms.searchNewsrooms.key(searchParams), queryFn: () => apiNewsrooms.searchNewsrooms.fetch(searchParams) });
const { page: currentPage, size: pageSize } = searchParams;
const totalCount = data?.totalCount || 0;
const totalPages = _.ceil(totalCount / pageSize);
const groupSize = 5;
const [displayGroup, setDisplayGroup] = useState(_.floor((currentPage - 1) / groupSize)); // 조기 반환보다 먼저 호출
const groupStart = displayGroup * groupSize + 1;
const groupEnd = _.min([totalPages, groupStart + groupSize - 1]) || 0;
const hasPrevGroup = displayGroup > 0;
const hasNextGroup = groupEnd < totalPages;
const showGroupButtons = totalPages > 5; // 페이지가 6개 이상일 때만 그룹 버튼

// 이전과 다음은 그룹만 옮긴다. 페이지는 번호 버튼에서만 바뀐다
return totalCount <= 12 ? null : (
  <div className="pagination">
    {showGroupButtons && <button className="prev" disabled={!hasPrevGroup} onClick={() => hasPrevGroup && setDisplayGroup(displayGroup - 1)} />}
    {pages.map((page) => (
      <button key={page} className={page === currentPage ? "active" : ""} onClick={() => setSearchParams({ page })}>{page}</button>
    ))}
    {showGroupButtons && <button className="next" disabled={!hasNextGroup} onClick={() => hasNextGroup && setDisplayGroup(displayGroup + 1)} />}
  </div>
);