v1.2.1 업데이트

.github/workflows/cd_workflow_dev.yml

@@ -3,7 +3,7 @@ name: Frontend Dev Server CD
 on:
   push:
     branches:
-      - 'release/**'
+      - "release/**"
 
 jobs:
   build:
@@ -28,7 +28,8 @@ jobs:
           echo "NEXT_PUBLIC_KAKAO_DOMAIN=${{ secrets.NEXT_PUBLIC_KAKAO_DOMAIN }}" >> .env
           echo "NEXT_PUBLIC_AUTH_KAKAO_KEY=${{ secrets.NEXT_PUBLIC_AUTH_KAKAO_KEY_DEV }}" >> .env
           echo "NEXT_PUBLIC_DOMAIN=${{ secrets.NEXT_PUBLIC_DOMAIN_DEV }}" >> .env
-
+          echo "NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID }}" >> .env
+
       - name: 압축
         run: zip -r ./frontend_freebe.zip .
 

.github/workflows/cd_workflow_prod.yml

@@ -2,7 +2,7 @@ name: Frontend Prod Server CD
 
 on:
   push:
-    branches: 
+    branches:
       - master
 
 jobs:
@@ -30,6 +30,7 @@ jobs:
           echo "NEXT_PUBLIC_AUTH_KAKAO_KEY=${{ secrets.NEXT_PUBLIC_AUTH_KAKAO_KEY }}" >> .env
           echo "NEXT_PUBLIC_DOMAIN=${{ secrets.NEXT_PUBLIC_DOMAIN }}" >> .env
           echo "NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID }}" >> .env
+          echo "NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID }}" >> .env
 
       - name: 압축
         run: zip -r ./frontend_freebe.zip .

next.config.mjs

@@ -43,7 +43,7 @@ export default withSentryConfig(withVanillaExtract(nextConfig), {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options
 
-  org: "for-u-5h",
+  org: "freebe",
   project: "javascript-nextjs",
 
   // Only print logs for uploading source maps in CI

sentry.client.config.ts

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

sentry.edge.config.ts

@@ -6,7 +6,7 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  dsn: "https://8aa61c4c6bf4aca3fb8552ed092d88ee@o4508070352257024.ingest.us.sentry.io/4508070354616320",
+  dsn: "https://92e2c980bb6bf71c3be5e4f0170006ed@o4508237874462720.ingest.us.sentry.io/4508237875773440",
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,

sentry.server.config.ts

@@ -5,8 +5,8 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  dsn: "https://8aa61c4c6bf4aca3fb8552ed092d88ee@o4508070352257024.ingest.us.sentry.io/4508070354616320",
-
+  dsn: "https://92e2c980bb6bf71c3be5e4f0170006ed@o4508237874462720.ingest.us.sentry.io/4508237875773440",
+  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

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import { PageParams } from "route-parameters";
+import { Photographer } from "profile-types";
 import BackgroundImage from "@/containers/customer/main/background-image";
 import { defaultLinks } from "@/constants/photographer/mypage";
 import InfoSheet from "@/containers/customer/main/info-sheet";
@@ -16,12 +17,26 @@ export async function generateMetadata({
   };
 }
 
+const EXCEPTIONAL_PROFILE_NAMES = [
+  ".env",
+  "index.php",
+  "resolve",
+  "query",
+  "dns-query",
+];
+
 const CustomerMainPage = async ({
   params,
 }: {
   params: Pick<PageParams, "profileName">;
 }) => {
-  const photographerProfile = 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/globals.css

@@ -56,3 +56,12 @@ input:-webkit-autofill:active {
   width: 8px;
   height: 8px;
 }
+
+button {
+  cursor: pointer;
+}
+
+button:hover,
+button:active {
+  filter: brightness(0.92);
+}

src/app/layout.tsx

@@ -7,7 +7,7 @@ import "@mantine/notifications/styles.css";
 import "./globals.css";
 import { ColorSchemeScript, MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
-import { GoogleAnalytics } from "@next/third-parties/google";
+import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";
 import { METADATA } from "@/constants/metadata";
 
 const pretendard = localFont({
@@ -52,6 +52,9 @@ export default function RootLayout({
         className={pretendard.className}
         style={{ overflowX: "hidden", overflowY: "hidden" }}
       >
+        <GoogleTagManager
+          gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID || ""}
+        />
         <GoogleAnalytics
           gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || ""}
         />

src/app/robots.txt

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

src/app/sitemap.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://www.freebe.co.kr/</loc>
+  <lastmod>2024-11-05T07:25:39+00:00</lastmod>
+</url>
+
+
+</urlset>

src/components/buttons/buttons.css.ts

@@ -1,7 +1,7 @@
 import { breakpoints } from "@/styles/breakpoints.css";
 import sprinkles from "@/styles/sprinkles.css";
 import { texts } from "@/styles/text.css";
-import { style, styleVariants } from "@vanilla-extract/css";
+import { keyframes, style, styleVariants } from "@vanilla-extract/css";
 
 const baseTab = style([
   sprinkles({ borderColor: "stroke-grey" }),
@@ -51,6 +51,19 @@ const baseBottomButton = style([
   },
 ]);
 
+const rotateAnimation = keyframes({
+  from: {
+    transform: "rotate(0deg)",
+  },
+  to: {
+    transform: "rotate(360deg)",
+  },
+});
+
+export const loaderStyle = style({
+  animation: `${rotateAnimation} 2s linear infinite`,
+});
+
 const buttonStyles = styleVariants({
   kakao: {
     display: "flex",
@@ -68,9 +81,7 @@ const buttonStyles = styleVariants({
     fontSize: 17,
     fontWeight: 600,
     color: "#1a1a1a",
-    ":hover": {
-      cursor: "pointer",
-    },
+    cursor: "pointer",
   },
   add: [
     texts["button-01"],
@@ -145,6 +156,12 @@ const buttonStyles = styleVariants({
     {
       border: "none",
       cursor: "initial",
+      ":hover": {
+        filter: "none",
+      },
+      ":active": {
+        filter: "none",
+      },
     },
   ],
   primary: [
@@ -174,10 +191,16 @@ const buttonStyles = styleVariants({
       color: "blue",
     }),
     {
-      background: "none",
+      backgroundColor: "transparent",
       borderStyle: "solid",
       borderRadius: 8,
       borderWidth: 1,
+      ":hover": {
+        backgroundColor: "white",
+      },
+      ":active": {
+        backgroundColor: "white",
+      },
     },
   ],
   secondary: [
@@ -203,6 +226,12 @@ const buttonStyles = styleVariants({
     {
       border: "none",
       cursor: "initial",
+      ":hover": {
+        filter: "none",
+      },
+      ":active": {
+        filter: "none",
+      },
     },
   ],
   linkArea: {
@@ -220,11 +249,20 @@ export const closeStyles = styleVariants({
     zIndex: 3,
     display: "flex",
     alignItems: "center",
+    cursor: "pointer",
   },
   grey: [
     sprinkles({
       color: "stroke-grey",
     }),
+    {
+      ":hover": {
+        filter: "brightness(0.7);",
+      },
+      ":active": {
+        filter: "brightness(0.7);",
+      },
+    },
   ],
   white: [
     sprinkles({

src/components/buttons/common-buttons.tsx

@@ -3,9 +3,10 @@ import {
   ButtonHTMLAttributes,
   MouseEventHandler,
 } from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { LinkType } from "profile-types";
-import buttonStyles from "./buttons.css";
+import buttonStyles, { loaderStyle } from "./buttons.css";
 
 interface ButtonProps
   extends DetailedHTMLProps<
@@ -20,6 +21,7 @@ interface ButtonOptions {
   size: "xs" | "sm" | "md" | "lg";
   styleType: "primary" | "secondary" | "line" | "danger";
   link?: string;
+  loading?: boolean;
 }
 
 export const CustomButton = ({
@@ -30,18 +32,29 @@ export const CustomButton = ({
   disabled,
   children,
   link,
+  loading,
   ...props
 }: ButtonProps & ButtonOptions) => {
   return (
     <button
       type="button"
       onClick={onClick}
-      className={`${disabled ? buttonStyles.disabled : buttonStyles[styleType]} ${buttonStyles[size]}`}
-      disabled={disabled}
+      className={`${disabled || loading ? buttonStyles.disabled : buttonStyles[styleType]} ${buttonStyles[size]}`}
+      disabled={disabled || loading}
       {...props}
     >
       {children}
-      {title}
+      {loading ? (
+        <Image
+          src="/icons/loading.svg"
+          width={30}
+          height={30}
+          alt="now loading"
+          className={loaderStyle}
+        />
+      ) : (
+        title
+      )}
       {link && <Link href={link} className={buttonStyles.linkArea} />}
     </button>
   );
@@ -125,16 +138,28 @@ export const BottomButton = ({
   onClick,
   disabled,
   type,
+  loading,
   ...props
-}: ButtonProps) => {
+}: ButtonProps & { loading?: boolean }) => {
   return (
     <button
       type={type === "submit" ? "submit" : "button"}
-      className={`${disabled ? buttonStyles.bottomDisabled : buttonStyles.bottom}`}
-      onClick={disabled ? () => {} : onClick}
+      className={`${disabled || loading ? buttonStyles.bottomDisabled : buttonStyles.bottom}`}
+      onClick={onClick}
+      disabled={disabled || loading}
       {...props}
     >
-      {title}
+      {loading ? (
+        <Image
+          src="/icons/loading.svg"
+          width={30}
+          height={30}
+          alt="now loading"
+          className={loaderStyle}
+        />
+      ) : (
+        title
+      )}
     </button>
   );
 };

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>