v1.2.1 업데이트

sentry.client.config.ts

@@ -6,7 +6,7 @@ import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
   dsn: "https://92e2c980bb6bf71c3be5e4f0170006ed@o4508237874462720.ingest.us.sentry.io/4508237875773440",
-  denyUrls: [/https:\/\/www\.freebe\.n-e\.kr/],
+  denyUrls: [/https:\/\/www\.freebe\.n-e\.kr/, /http:\/\/43\.200\.240\.195/],
   // Add optional integrations for additional features
   integrations: [Sentry.replayIntegration()],
 

sentry.server.config.ts

@@ -6,7 +6,7 @@ import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
   dsn: "https://92e2c980bb6bf71c3be5e4f0170006ed@o4508237874462720.ingest.us.sentry.io/4508237875773440",
-  denyUrls: [/https:\/\/www\.freebe\.n-e\.kr/],
+  denyUrls: [/https:\/\/www\.freebe\.n-e\.kr/, /http:\/\/43\.200\.240\.195/],
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,
 

src/app/(customer)/[profileName]/page.tsx

@@ -17,17 +17,26 @@ export async function generateMetadata({
   };
 }
 
-const EXCEPTIONAL_PROFILE_NAME = ".env";
+const EXCEPTIONAL_PROFILE_NAMES = [
+  ".env",
+  "index.php",
+  "resolve",
+  "query",
+  "dns-query",
+];
 
 const CustomerMainPage = async ({
   params,
 }: {
   params: Pick<PageParams, "profileName">;
 }) => {
-  const photographerProfile: Photographer =
-    params.profileName === EXCEPTIONAL_PROFILE_NAME
-      ? { linkInfos: [], message: "", profileName: "" }
-      : await getPhotographerProfile(params.profileName);
+  function isExceptionalName() {
+    return EXCEPTIONAL_PROFILE_NAMES.includes(params.profileName);
+  }
+
+  const photographerProfile: Photographer = isExceptionalName()
+    ? { linkInfos: [], message: "", profileName: "" }
+    : await getPhotographerProfile(params.profileName);
 
   return (
     <div className={mainStyle}>

src/app/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /photographer/, /customer/

src/components/common/bottom-sheet.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import Image from "next/image";
 import { bottomSheetStyles } from "./common.css";
 
 const BottomSheet = ({ children }: { children: React.ReactNode }) => {
@@ -25,13 +26,22 @@ const BottomSheet = ({ children }: { children: React.ReactNode }) => {
             }
       }
     >
-      <div
-        role="presentation"
-        className={bottomSheetStyles.header}
-        onTouchEnd={handleSheetControl}
-        onClick={handleSheetControl}
-      >
-        <div className={bottomSheetStyles.handle} />
+      <div className={bottomSheetStyles.header}>
+        <button
+          type="button"
+          className={bottomSheetStyles.control}
+          onClick={handleSheetControl}
+        >
+          <Image
+            src="/icons/right.svg"
+            alt="메뉴"
+            width={16}
+            height={16}
+            className={
+              isFull ? bottomSheetStyles.closeIcon : bottomSheetStyles.openIcon
+            }
+          />
+        </button>
       </div>
       <div className={bottomSheetStyles.body}>{children}</div>
     </div>

src/components/common/common.css.ts

@@ -28,6 +28,11 @@ export const loaderStyle = style({
   animation: `${rotateAnimation} 2s linear infinite`,
 });
 
+const baseIcon = style({
+  transition: "transform 0.5s ease",
+  paddingLeft: 3,
+});
+
 export const bottomSheetStyles = styleVariants({
   container: {
     display: "flex",
@@ -64,6 +69,24 @@ export const bottomSheetStyles = styleVariants({
     position: "relative",
     height: "100%",
   },
+  control: [
+    sprinkles({ borderColor: "stroke-grey", backgroundColor: "white" }),
+    {
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderRadius: "100%",
+      position: "absolute",
+      top: -10,
+      left: "calc(50% - 19px)",
+      width: 38,
+      height: 38,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+  ],
+  openIcon: [baseIcon, { transform: "rotate(270deg)" }],
+  closeIcon: [baseIcon, { transform: "rotate(90deg)" }],
 });
 
 export const profileStyles = styleVariants({

src/constants/common/common.ts

@@ -9,8 +9,8 @@ export const IMAGE_STACK_SOURCES = [
 
 export const ACCEPTED_IMAGE = {
   file: ".jpeg,.jpg,.png,.bmp,.webp,.tiff,.tif,.ico,.svg",
-  info: "최대 50MB의 이미지 파일만 업로드 가능합니다.",
-  size: 1024 ** 2 * 50,
+  info: "최대 10MB의 이미지 파일만 업로드 가능합니다.",
+  size: 1024 ** 2 * 10,
 };
 
 export const SERVICE_LINKS = {

src/containers/common/notice-banner/notice-banner.css.ts

@@ -6,7 +6,7 @@ export const customedCarouselStyles = styleVariants({
     position: "relative",
     width: "100%",
     minWidth: 700,
-    maxWidth: 950,
+    maxWidth: 800,
     paddingBottom: 30,
 
     "@media": {

src/containers/customer/products/info.tsx

@@ -72,7 +72,13 @@ const ProductInfo = ({
         {images.map((image, index) => {
           return (
             <Carousel.Slide key={index} className={infoStyles.slide}>
-              <Image src={image} alt="" fill style={{ objectFit: "cover" }} />
+              <Image
+                src={image}
+                alt=""
+                fill
+                style={{ objectFit: "cover" }}
+                sizes="450px"
+              />
             </Carousel.Slide>
           );
         })}

src/containers/photographer/main/header.tsx

@@ -5,7 +5,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
 import { LinkType } from "profile-types";
-import { Drawer, Menu } from "@mantine/core";
+import { Drawer, FocusTrap, Menu } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { SERVICE_LINKS } from "@/constants/common/common";
 import CloseButton from "@/components/buttons/close-button";
@@ -141,8 +141,10 @@ const Header = ({
             onClose={close}
             opened={opened || isOnTutorial}
             position="right"
+            autoFocus={false}
             classNames={{ ...customDrawerStyles }}
           >
+            <FocusTrap.InitialFocus />
             <MobileTutorial close={closeTutorial} opened={isOnTutorial} />
             <CloseButton
               onClick={close}

src/containers/photographer/main/index.tsx

@@ -34,24 +34,23 @@ const MainView = ({ tutorialParam }: { tutorialParam: boolean }) => {
 
   return (
     <div className={mainviewStyles.container}>
-      <Tutorial close={closeTutorial} opened={isOnTutorial} />
-      <Controller
-        view={view}
-        setView={setView}
-        selectedProducts={selectedProducts}
-        setSelectedProducts={setSelectedProducts}
-      />
-      {view === "list" && (
-        <ReservationList
+      <div className={mainviewStyles.content}>
+        <Tutorial close={closeTutorial} opened={isOnTutorial} />
+        <Controller
+          view={view}
+          setView={setView}
           selectedProducts={selectedProducts}
-          setDummyData={isOnTutorial}
+          setSelectedProducts={setSelectedProducts}
         />
-      )}
-      {view === "calender" && <Preparing />}
-      <NoticeBanner
-        container={{ marginTop: "auto", alignSelf: "center" }}
-        target="main"
-      />
+        {view === "list" && (
+          <ReservationList
+            selectedProducts={selectedProducts}
+            setDummyData={isOnTutorial}
+          />
+        )}
+        {view === "calender" && <Preparing />}
+      </div>
+      <NoticeBanner container={{ alignSelf: "center" }} target="main" />
     </div>
   );
 };

src/containers/photographer/main/main.css.ts

@@ -6,16 +6,24 @@ import { styleVariants } from "@vanilla-extract/css";
 export const mainviewStyles = styleVariants({
   container: {
     width: "100%",
-    minWidth: 375,
     display: "flex",
     flexDirection: "column",
+    justifyContent: "space-between",
     padding: "32px 40px 80px 40px",
     "@media": {
       [breakpoints.mobile]: {
         padding: "24px 20px 50px 20px",
+        flexDirection: "column-reverse",
+        justifyContent: "flex-end",
       },
     },
   },
+  content: {
+    width: "100%",
+    minWidth: 375,
+    display: "flex",
+    flexDirection: "column",
+  },
   controller: {
     position: "relative",
     display: "flex",
@@ -48,6 +56,6 @@ export const customDrawerStyles = styleVariants({
     },
   },
   body: {
-    padding: "0px 0px 0px 10px",
+    padding: "0px 0px 60px 10px",
   },
 });

src/containers/photographer/main/sidebar/menu-list.tsx

@@ -37,7 +37,16 @@ const MenuList = ({ hasServiceLinks }: { hasServiceLinks?: boolean }) => {
   return (
     <div className={itemStyles.container}>
       <div style={{ position: "relative", overflow: "visible" }}>
-        <span className={itemStyles.title}>메뉴</span>
+        <div className={itemStyles.header}>
+          <span className={itemStyles.title}>메뉴</span>
+          <button
+            type="button"
+            className={itemStyles.caption}
+            onClick={handleOpenTutorial}
+          >
+            튜토리얼 보기
+          </button>
+        </div>
         <Link href="/photographer">
           <MenuItem
             name="메인페이지"

src/containers/photographer/main/sidebar/sidebar.css.ts

@@ -11,9 +11,12 @@ const baseButton = style({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
-  background: "none",
   border: "none",
   gap: 10,
+
+  ":active": {
+    filter: "none",
+  },
 });
 
 export const itemStyles = styleVariants({
@@ -32,6 +35,12 @@ export const itemStyles = styleVariants({
       },
     },
   },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingRight: 50,
+  },
   title: [
     texts["headline-02"],
     sprinkles({ color: "text-01" }),
@@ -61,6 +70,19 @@ export const itemStyles = styleVariants({
       fontWeight: "regular",
     }),
   ],
+  caption: [
+    sprinkles({ color: "text-03", fontSize: "xs", fontWeight: "medium" }),
+    {
+      display: "none",
+      background: "none",
+      border: "none",
+      "@media": {
+        [breakpoints.mobile]: {
+          display: "inline",
+        },
+      },
+    },
+  ],
   mobileDisable: {
     "@media": {
       [breakpoints.mobile]: {

src/containers/photographer/main/tutorial/index.tsx

@@ -183,7 +183,7 @@ const Tutorial = ({
           onClick={handleClose}
         />
         {TUTORIAL_LEVELS[index]?.link && (
-          <Link href={TUTORIAL_LEVELS[index].link}>
+          <Link href={TUTORIAL_LEVELS[index].link} target="_blank">
             <CustomButton title="바로 가기" size="sm" styleType="primary" />
           </Link>
         )}

src/containers/photographer/product/form/field/image-input.tsx

@@ -5,7 +5,11 @@ import { useDisclosure } from "@mantine/hooks";
 import { ACCEPTED_IMAGE } from "@/constants/common/common";
 import InfoCaption from "@/components/common/info-caption";
 import ImageThumbnail from "@/components/images/image-thumbnail";
-import { validatingFiles } from "@/utils/image";
+import {
+  getFormImageFromFiles,
+  resizeImages,
+  validatingFiles,
+} from "@/utils/image";
 import {
   CustomButton,
   FinishButton,
@@ -43,23 +47,34 @@ const ImagesInput = ({ images, setImage, disabled }: ImageInputProps) => {
     return null;
   }
 
-  function handleAddImage(
+  async function handleAddImage(
     e: React.DragEvent | React.ChangeEvent<HTMLInputElement>,
   ) {
     e.preventDefault();
     const selectedFiles = getFileList(e);
-    const { isOver, selectedImages } = validatingFiles(selectedFiles);
+    const { isOver, validatedFiles } = validatingFiles(selectedFiles);
     if (isOver) {
       popToast("10MB 이하의 이미지만 등록할 수 있습니다.");
     }
-    if (selectedImages.length > 0) {
-      setImage((prev) => {
-        const newImages = [...prev, ...selectedImages];
-        if (newImages.length > MAX_IMAGE_COUNT) {
-          popToast("이미지는 최대 10개까지 등록할 수 있습니다.");
-        }
-        return newImages.slice(ARRAY_START_INDEX, MAX_IMAGE_COUNT);
-      });
+    if (validatedFiles.length > 0) {
+      try {
+        const resizedImages = await resizeImages(validatedFiles);
+        setImage((prev) => {
+          const newImages = [...prev, ...getFormImageFromFiles(resizedImages)];
+          console.log(newImages);
+          if (newImages.length > MAX_IMAGE_COUNT) {
+            popToast("이미지는 최대 10개까지 등록할 수 있습니다.");
+          }
+          return newImages.slice(ARRAY_START_INDEX, MAX_IMAGE_COUNT);
+        });
+        console.log(images);
+      } catch {
+        popToast("다시 시도해주세요.", "이미지 업로드에 실패했습니다.", true);
+      }
+    }
+    if (e.type === "change") {
+      const input = e.target as HTMLInputElement;
+      input.value = "";
     }
   }
 
@@ -107,7 +122,7 @@ const ImagesInput = ({ images, setImage, disabled }: ImageInputProps) => {
             information="업로드하기 전, 포트폴리오로 사용할 수 있는 사진인지 확인해주세요.
           도용 및 무단 사용된 이미지는 삭제될 수 있습니다."
           />
-          <InfoCaption information={ACCEPTED_IMAGE.info} />
+          <InfoCaption information="장당 최대 10MB의 이미지 파일만 업로드 가능합니다. 이미지는 10장까지 추가하실 수 있습니다." />
         </>
       )}
       <div