Merge pull request #35 from SEASONTHON-Wedit/feat/31-invite

fix : 디자인 QA 우선 진행

Author: psm1st

public/icons/Calendar/cake.png

@@ -1,4 +1,3 @@
-// app/(main)/calendar/new/page.tsx
 'use client';
 
 import { STICKER_SRC } from '@/components/calendar/stickers';
@@ -13,33 +12,57 @@ import { useMemo, useState } from 'react';
 
 type StickerKey = keyof typeof STICKER_SRC;
 
+const ICON_CFG: Record<
+  StickerKey,
+  { w: number; h: number; className?: string }
+> = {
+  INVITATION: {
+    w: 60,
+    h: 62,
+    className:
+      'origin-top-left rotate-[-30.22deg] -translate-x-4 translate-y-7',
+  },
+  STUDIO: { w: 50, h: 46 },
+  WEDDING_HALL: { w: 46, h: 46, className: 'translate-y-0.5' },
+  DRESS: { w: 40, h: 50 },
+  PARTY: { w: 51, h: 61 },
+  BRIDAL_SHOWER: { w: 61, h: 61 },
+  MAKEUP: { w: 33, h: 47 },
+};
+
 export default function CalendarNewPage() {
   const router = useRouter();
   const [title, setTitle] = useState('');
   const [titleStarted, setTitleStarted] = useState(false);
   const [memo, setMemo] = useState('');
   const [sticker, setSticker] = useState<StickerKey | null>(null);
+  const [loading, setLoading] = useState(false);
 
   const disabled = !title.trim() || !sticker;
 
   const stickers: StickerKey[] = useMemo(
-    () => ['INVITATION', 'STUDIO', 'WEDDING_HALL', 'DRESS', 'PARTY', 'BRIDAL_SHOWER', 'MAKEUP'],
+    () => [
+      'INVITATION',
+      'STUDIO',
+      'WEDDING_HALL',
+      'DRESS',
+      'PARTY',
+      'BRIDAL_SHOWER',
+      'MAKEUP',
+    ],
     [],
   );
 
-  const [loading, setLoading] = useState(false);
-
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (disabled || !sticker) return;
-  
     try {
       setLoading(true);
       await createCalendarEvent({
         title,
         description: memo,
-        eventCategory: sticker.toUpperCase(), // 서버 enum이 'LETTER' 같은 UPPERCASE라면 변환 필요
-        startDateTime: new Date().toISOString(), // TODO: 날짜 선택 기능 붙이면 교체
+        eventCategory: sticker.toUpperCase(),
+        startDateTime: new Date().toISOString(),
         endDateTime: new Date().toISOString(),
         isAllDay: true,
       });
@@ -54,8 +77,11 @@ export default function CalendarNewPage() {
 
   return (
     <main className="mx-auto w-full max-w-[420px]">
-      <Header showBack onBack={() => router.push('/calendar')} value="일정 등록하기" />
-
+      <Header
+        showBack
+        onBack={() => router.push('/calendar')}
+        value="일정 등록하기"
+      />
       <form onSubmit={onSubmit} className="px-[22px] pb-8">
         <Input
           type={titleStarted ? 'defaultStrong' : 'default'}
@@ -75,33 +101,37 @@ export default function CalendarNewPage() {
           onChange={setMemo}
           placeholder="기억하고 싶은 내용을 적어주세요."
           className="mt-3 w-full"
-          textareaClassName="text-[14px]"
+          textareaClassName="!text-[14px]"
           showCount
         />
         <div className="mt-5 grid grid-cols-4 gap-2">
           {stickers.map((key) => {
             const active = sticker === key;
+            const { w, h, className } = ICON_CFG[key];
             return (
               <button
                 key={key}
                 type="button"
                 onClick={() => setSticker(key)}
+                aria-pressed={active}
+                aria-label={key}
                 className={clsx(
-                  'h-18 w-18 rounded-xl border bg-white transition',
+                  'relative h-20 w-20 rounded-xl border bg-white transition',
                   active
                     ? 'border-primary-400 ring-2 ring-primary-200'
                     : 'border-gray-200 hover:bg-gray-50 active:scale-[0.98]',
                 )}
-                aria-pressed={active}
               >
-                <Image
-                  src={STICKER_SRC[key]}
-                  alt={key}
-                  width={35}
-                  height={35}
-                  className="mx-auto"
-                  draggable={false}
-                />
+                <span className="absolute inset-0 grid place-items-center">
+                  <Image
+                    src={STICKER_SRC[key]}
+                    alt={key}
+                    width={w}
+                    height={h}
+                    draggable={false}
+                    className={clsx('pointer-events-none', className)}
+                  />
+                </span>
               </button>
             );
           })}
@@ -110,9 +140,9 @@ export default function CalendarNewPage() {
           type="submit"
           disabled={disabled || loading}
           className={clsx(
-            'mt-8 h-12 w-full rounded-2xl text-[15px] font-semibold transition',
+            'mt-50 h-12 w-full rounded-2xl text-[15px] font-semibold transition',
             disabled || loading
-              ? 'bg-primary-200 text-rose-300 cursor-not-allowed'
+              ? 'bg-primary-200/40 text-rose-300 cursor-not-allowed'
               : 'bg-primary-500 text-white active:scale-[0.98]',
           )}
         >

public/icons/Calendar/dress.png

@@ -21,7 +21,10 @@ export default function CalendarPage() {
   const [activeYmd, setActiveYmd] = useState<string | null>(null);
   const [mode, setMode] = useState<Mode>('schedule');
 
-  const { maps } = useCalendarRange(base, mode === 'schedule' ? 'USER' : 'ADMIN');
+  const { maps } = useCalendarRange(
+    base,
+    mode === 'schedule' ? 'USER' : 'ADMIN',
+  );
 
   const d = dday(WEDDING_YMD);
   const openDay = (date: Date) => setActiveYmd(toYMD(date));
@@ -70,13 +73,15 @@ export default function CalendarPage() {
             결혼까지 <span className="text-primary-500">D-{d}</span>
           </p>
         </div>
-        <p className="mt-1 !text-sm text-gray-500">끝까지 웨딧이 함께 할게요 :)</p>
+        <p className="mt-1 !text-sm text-gray-500">
+          끝까지 웨딧이 함께 할게요 :)
+        </p>
         <div className="mt-4">
           <SummaryCard />
         </div>
       </section>
 
-      <section className="mt-2 pb-8">
+      <section className="mt-8 pb-8">
         <MonthSlider
           base={base}
           setBase={setBase}
@@ -94,4 +99,4 @@ export default function CalendarPage() {
       />
     </main>
   );
-}
+}

public/icons/Calendar/drink.png

@@ -8,6 +8,7 @@ import Header from '@/components/common/monocules/Header';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useS3MultiUpload } from '@/hooks/useS3MultiUpload';
 import { useQueryClient } from '@tanstack/react-query';
+import LottiePlayer from '@/components/common/atomic/LottiePlayer';
 
 const PER_PAGE = 9;
 const TOTAL = 27;
@@ -207,7 +208,9 @@ export default function Page() {
               <br />
               예쁘게 담는 중이에요
             </div>
-            <div className="absolute left-1/2 -translate-x-1/2 top-[80px] w-36 h-32 bg-zinc-300 rounded-md" />
+            <div className="absolute left-1/2 -translate-x-1/2 top-[80px] w-36 h-32">
+              <LottiePlayer src="/loading.json" className="w-full h-full" />
+            </div>
           </div>
         </div>
       )}