커스텀 캘린더 구현

.github/workflows/frontend-dev-deploy.yml

@@ -0,0 +1,26 @@
+name: frontend-dev-deploy
+
+on:
+  workflow_dispatch: # 직접 실행 시에만 동작
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy to EC2
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SSH_DEV_HOST }}
+          username: ${{ secrets.SSH_DEV_USERNAME }}
+          key: ${{ secrets.SSH_DEV_KEY }}
+          port: ${{ secrets.SSH_DEV_PORT }}
+          script: |
+            cd ${{ secrets.EC2_DEV_DEPLOY_DIR }}
+            source ~/.bashrc
+            source ~/.nvm/nvm.sh
+            nvm use 22.16.0
+            git pull origin develop
+            yarn install
+            yarn build
+            pm2 restart ecosystem.config.js --env development --update-env

.github/workflows/frontend-prod-deploy.yml

@@ -26,4 +26,4 @@ jobs:
             git pull origin main
             yarn install
             yarn build
-            pm2 restart ecosystem.config.js --update-env
+            pm2 restart ecosystem.config.js --env production --update-env

client/ecosystem.config.js

@@ -11,6 +11,13 @@ module.exports = {
       env: {
         NODE_ENV: 'production',
       },
+
+      env_development: {
+        NODE_ENV: 'development',
+      },
+      env_production: {
+        NODE_ENV: 'production',
+      },
     },
   ],
 };

client/next.config.ts

@@ -1,3 +1,4 @@
+import {withSentryConfig} from '@sentry/nextjs';
 import type {NextConfig} from 'next';
 import {URLS} from '@constants/urls';
 
@@ -33,4 +34,31 @@ const nextConfig: NextConfig = {
   ],
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: 'crew-wiki',
+
+  project: 'crew-wiki',
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  // tunnelRoute: "/monitoring",
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+  sourcemaps: {deleteSourcemapsAfterUpload: true},
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+});

client/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.11",
+    "@sentry/nextjs": "10",
     "@toast-ui/react-editor": "^3.2.3",
     "dayjs": "^1.11.13",
     "framer-motion": "^11.15.0",

client/sentry.server.config.ts

@@ -0,0 +1,18 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || '',
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

client/src/app/global-error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import Button from '@components/common/Button';
+import {URLS} from '@constants/urls';
+import * as Sentry from '@sentry/nextjs';
+import {useRouter} from 'next/navigation';
+import {useEffect} from 'react';
+
+export default function GlobalError({error}: {error: Error & {digest?: string}}) {
+  const router = useRouter();
+
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  const goToMain = () => {
+    router.push(`${URLS.wiki}/${URLS.daemoon}`);
+  };
+
+  return (
+    <html>
+      <body>
+        <h1 className="font-bm text-2xl text-grayscale-800">{error.message}</h1>
+        <Button style="primary" size="xs" onClick={goToMain}>
+          메인으로
+        </Button>
+      </body>
+    </html>
+  );
+}

client/src/components/common/CustomCalendar/CustomCalendar.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import {formatDate} from '@utils/date';
+import Image from 'next/image';
+import {JSX, useEffect, useMemo, useRef, useState} from 'react';
+import {twMerge} from 'tailwind-merge';
+
+type CustomCalendarProps = {
+  value: Date | null;
+  className?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  onChange: (date: Date | null) => void;
+};
+
+const CustomCalendar = ({value, className, placeholder, invalid, onChange}: CustomCalendarProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [displayDate, setDisplayDate] = useState(value || new Date());
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleDateChange = (day: number) => {
+    const newDate = new Date(displayDate.getFullYear(), displayDate.getMonth(), day);
+
+    if (value && formatDate(newDate) === formatDate(value)) {
+      onChange(null);
+    } else {
+      onChange(newDate);
+    }
+
+    setIsOpen(false);
+  };
+
+  const changeMonth = (offset: number) => {
+    setDisplayDate(prev => {
+      const newDate = new Date(prev.getFullYear(), prev.getMonth() + offset, 1);
+      return newDate;
+    });
+  };
+
+  const toggleCalendar = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  const calendarDays = useMemo(() => {
+    const year = displayDate.getFullYear();
+    const month = displayDate.getMonth();
+    const firstDayOfMonth = new Date(year, month, 1).getDay();
+    const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
+    const days: JSX.Element[] = [];
+
+    for (let i = 0; i < firstDayOfMonth; i++) {
+      days.push(<div key={`prev-${i}`} className="h-10 w-10" />);
+    }
+
+    for (let day = 1; day <= lastDateOfMonth; day++) {
+      const date = new Date(year, month, day);
+      const isToday = formatDate(date) === formatDate(new Date());
+      const isSelected = value && value.getFullYear() === year && value.getMonth() === month && value.getDate() === day;
+
+      const baseClasses = 'flex items-center justify-center h-10 w-10 text-sm rounded-full cursor-pointer select-none';
+      const todayClasses = isToday ? 'font-bold bg-grayscale-50' : '';
+      const selectedClasses = isSelected
+        ? 'bg-primary text-white font-bold bg-primary-primary'
+        : 'text-grayscale-700 active:bg-primary-container md:hover:bg-primary-container';
+      const finalClasses = `${baseClasses} ${isSelected ? selectedClasses : `${todayClasses} ${selectedClasses}`}`;
+
+      days.push(
+        <div key={day} onClick={() => handleDateChange(day)} className={finalClasses}>
+          {day}
+        </div>,
+      );
+    }
+
+    return days;
+  }, [displayDate, value]);
+
+  return (
+    <div ref={wrapperRef} className="relative w-full">
+      <div className="relative">
+        <input
+          type="text"
+          value={value ? formatDate(value) : ''}
+          placeholder={placeholder}
+          readOnly
+          onClick={toggleCalendar}
+          className={twMerge(
+            'w-full font-pretendard text-base font-normal text-grayscale-800 outline-none placeholder:text-grayscale-lightText focus:border-secondary-400 disabled:border-grayscale-200 disabled:text-grayscale-400',
+            className,
+            invalid ? 'border-error-error hover:border-error-error focus:border-error-error' : '',
+          )}
+        />
+        <button
+          onClick={toggleCalendar}
+          className="absolute inset-y-0 right-0 flex items-center pr-3"
+          aria-label="달력 열기"
+        >
+          <Image
+            src={`${process.env.NEXT_PUBLIC_CDN_DOMAIN}/images/calendar-icon.svg`}
+            width={24}
+            height={24}
+            alt="calendar icon"
+            className="h-6 w-6"
+          />
+        </button>
+      </div>
+
+      {isOpen && (
+        <div className="absolute top-full z-10 mt-2 w-full rounded-xl bg-white p-4 shadow-lg max-[768px]:p-6">
+          <div className="mb-4 flex items-center justify-between">
+            <button
+              onClick={() => changeMonth(-1)}
+              className="rounded-full p-2 transition-colors active:bg-primary-container md:hover:bg-primary-container"
+              aria-label="이전 달"
+            >
+              <Image
+                src={`${process.env.NEXT_PUBLIC_CDN_DOMAIN}/images/chevron-left-icon.svg`}
+                width={24}
+                height={24}
+                alt="chevron left icon"
+                className="h-6 w-6"
+              />
+            </button>
+            <h2 className="text-center text-lg font-bold text-grayscale-800 max-[768px]:text-sm">
+              {`${displayDate.getFullYear()}년 ${displayDate.getMonth() + 1}월`}
+            </h2>
+            <button
+              onClick={() => changeMonth(1)}
+              className="rounded-full p-2 transition-colors active:bg-primary-container md:hover:bg-primary-container"
+              aria-label="다음 달"
+            >
+              <Image
+                src={`${process.env.NEXT_PUBLIC_CDN_DOMAIN}/images/chevron-right-icon.svg`}
+                width={24}
+                height={24}
+                alt="chevron right icon"
+                className="h-6 w-6"
+              />
+            </button>
+          </div>
+
+          <div>
+            <div className="mb-2 grid grid-cols-7 gap-1 text-center font-pretendard text-sm text-grayscale-500">
+              {['일', '월', '화', '수', '목', '금', '토'].map((day, i) => (
+                <div key={day} className={`${i === 0 ? 'text-error-error' : ''} ${i === 6 ? 'text-primary-700' : ''}`}>
+                  {day}
+                </div>
+              ))}
+            </div>
+            <div className="grid grid-cols-7 place-items-center gap-1">{calendarDays}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomCalendar;

client/src/instrumentation-client.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The added config here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || '',
+
+  // Add optional integrations for additional features
+  integrations: [Sentry.replayIntegration()],
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Define how likely Replay events are sampled.
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

client/src/instrumentation.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('../sentry.server.config');
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;

client/src/utils/date.ts

@@ -0,0 +1,6 @@
+export const formatDate = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}.${month}.${day}`;
+};