release : v3.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "check-task",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "prepare": "panda codegen",

src/app/(main)/assignment/page.tsx

@@ -1,18 +1,33 @@
 'use client';
 
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { css } from 'styled-system/css';
 import { AssignmentList } from '@/components/AssignmentList';
 import { FolderFilterDropdown } from '@/components/FolderFilterDropdown';
 import { useTaskList } from '@/features/assignment/hooks/useTaskList';
 import { useMyInfo } from '@/hooks/queries/useMyInfo';
 
-export default function AssignmentPage() {
+function AssignmentPageContent() {
+  const searchParams = useSearchParams();
+  const folderIdParam = searchParams.get('folderId');
+  const parsedFolderId = folderIdParam ? Number(folderIdParam) : NaN;
+  const initialFolderId = Number.isSafeInteger(parsedFolderId)
+    ? parsedFolderId
+    : null;
+
   const { data: myInfo } = useMyInfo();
   const folders = myInfo?.folders ?? [];
+  // 마이페이지에서 폴더 클릭 시 넘어온 folderId로 초기 필터 지정
+  const [prevInitialFolderId, setPrevInitialFolderId] = useState(initialFolderId);
   const [selectedFolderIds, setSelectedFolderIds] = useState<number[] | null>(
-    null,
+    () => (initialFolderId != null ? [initialFolderId] : null),
   );
+  // 같은 페이지에서 URL의 folderId만 바뀌는 경우 대비, 렌더 중 동기화
+  if (initialFolderId !== prevInitialFolderId) {
+    setPrevInitialFolderId(initialFolderId);
+    setSelectedFolderIds(initialFolderId != null ? [initialFolderId] : null);
+  }
   // 과제 목록 데이터 가져오기
   const { data = [], isLoading } = useTaskList(selectedFolderIds);
 
@@ -27,6 +42,7 @@ export default function AssignmentPage() {
         <h3 className={titleStyle}>내 과제</h3>
         <FolderFilterDropdown
           folders={folders}
+          initialFolderId={initialFolderId}
           onSelectionChange={setSelectedFolderIds}
         />
       </div>
@@ -39,6 +55,14 @@ export default function AssignmentPage() {
   );
 }
 
+export default function AssignmentPage() {
+  return (
+    <Suspense>
+      <AssignmentPageContent />
+    </Suspense>
+  );
+}
+
 // ======== 스타일 정의 ========
 const headerStyle = css({
   display: 'flex',

src/app/(main)/page.tsx

@@ -21,7 +21,7 @@ export default function Home() {
 
 const pageStyle = css(
   stack.raw({
-    gap: '1.5rem',
+    gap: '1.25rem',
     marginX: 'auto',
     marginTop: '2rem',
     marginBottom: '3.75rem',

src/app/auth/apple/callback/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { css } from 'styled-system/css';
+import axiosInstance from '@/lib/axiosInstance';
+import { SOCIAL_AGREEMENT_REQUIRED_KEY } from '@/features/login/constants/socialAgreement';
+import { useAuthStore } from '@/stores/auth-store';
+
+export default function AppleAuthCallbackPage() {
+  return <CallbackHandler />;
+}
+
+function CallbackHandler() {
+  const router = useRouter();
+  const login = useAuthStore((state) => state.login);
+  const isProcessing = useRef(false);
+
+  const getAccessToken = useCallback(async () => {
+    try {
+      const response = await axiosInstance.post('/auth/refresh');
+      const { accessToken } = response.data.data;
+
+      if (accessToken) {
+        login(accessToken);
+
+        const params = new URLSearchParams(window.location.search);
+        if (params.get('isNewUser') === 'true') {
+          window.sessionStorage.setItem(SOCIAL_AGREEMENT_REQUIRED_KEY, 'true');
+        }
+
+        router.replace('/');
+        return;
+      }
+
+      console.error('accessToken이 응답에 없습니다');
+      router.replace('/login');
+    } catch (error) {
+      console.error('Apple 로그인 토큰 발급 실패:', error);
+      router.replace('/login');
+    }
+  }, [router, login]);
+
+  useEffect(() => {
+    if (isProcessing.current) return;
+    isProcessing.current = true;
+    getAccessToken();
+  }, [getAccessToken]);
+
+  return <div className={loadingStyle}>로그인 처리 중...</div>;
+}
+
+const loadingStyle = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100vh',
+});

src/app/auth/kakao/callback/page.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
 import { css } from 'styled-system/css';
 import axiosInstance from '@/lib/axiosInstance';
 import { useAuthStore } from '@/stores/auth-store';
-import { KAKAO_AGREEMENT_REQUIRED_KEY } from '@/features/login/constants/kakaoAgreement';
+import { SOCIAL_AGREEMENT_REQUIRED_KEY } from '@/features/login/constants/socialAgreement';
 
 export default function AuthCallbackPage() {
   return <CallbackHandler />;
@@ -28,7 +28,7 @@ function CallbackHandler() {
         login(accessToken); // 토큰 저장
         const params = new URLSearchParams(window.location.search);
         if (params.get('isNewUser') === 'true') {
-          window.sessionStorage.setItem(KAKAO_AGREEMENT_REQUIRED_KEY, 'true');
+          window.sessionStorage.setItem(SOCIAL_AGREEMENT_REQUIRED_KEY, 'true');
         }
         router.replace('/');
       } else {

src/components/DatePicker/CalendarModal.tsx

@@ -2,26 +2,30 @@
 
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
-import { css } from 'styled-system/css';
+import { css, cva } from 'styled-system/css';
 import { flex } from 'styled-system/patterns';
 import { RightIcon } from '../icons/RightIcon';
 import { LeftIcon } from '../icons/LeftIcon';
 import { useState } from 'react';
 import { Button } from '../Button';
 import { TimeToggle } from '../TimeToggle';
 import { useAlertStore } from '@/stores/alert-store';
+import { CheckCircleIcon } from '../icons/CheckCircleIcon';
+import { token } from 'styled-system/tokens';
 
 interface CalenderModalProps {
   onClose: () => void;
-  onSave: (date: Date, timeEnabled: boolean) => void;
+  onSave: (date: Date | null, timeEnabled: boolean) => void;
   // 초기 날짜를 받기 위함
-  initialDate: Date;
+  initialDate: Date | null;
   // 세부 목록 날짜 선택시 이후 날짜 제한을 위해 추가
   maxDate?: Date;
   // 시간 추가 토글 초기값
   initialTimeEnabled?: boolean;
   // 시간 추가 토글 상태 변경 콜백
   onTimeToggle?: (enabled: boolean) => void;
+  // 날짜 지정안함 옵션 노출 여부
+  allowUnspecified?: boolean;
 }
 
 export default function CalendarModal({
@@ -31,19 +35,25 @@ export default function CalendarModal({
   maxDate,
   initialTimeEnabled = false,
   onTimeToggle,
+  allowUnspecified = false,
 }: CalenderModalProps) {
   // 선택된 날짜
   const { showAlert } = useAlertStore();
   const [selectedDate, setSelectedDate] = useState<Date | null>(initialDate);
+  const [isUnspecifiedSelected, setIsUnspecifiedSelected] = useState(
+    allowUnspecified && !initialDate,
+  );
   // 시간 추가 토글 상태
-  const [timeEnabled, setTimeEnabled] = useState(initialTimeEnabled);
+  const [timeEnabled, setTimeEnabled] = useState(
+    initialDate ? initialTimeEnabled : false,
+  );
   // 시간 입력 상태 — 모달을 다시 열 때 저장된 시간 복원
   const [period, setPeriod] = useState<'오전' | '오후'>(() => {
-    if (!initialTimeEnabled) return '오전';
+    if (!initialDate || !initialTimeEnabled) return '오전';
     return initialDate.getHours() < 12 ? '오전' : '오후';
   });
   const [timeValue, setTimeValue] = useState(() => {
-    if (!initialTimeEnabled) return '00:00';
+    if (!initialDate || !initialTimeEnabled) return '00:00';
     const h = initialDate.getHours() % 12 || 12;
     const m = initialDate.getMinutes();
     return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
@@ -102,6 +112,7 @@ export default function CalendarModal({
   };
 
   const handleTimeToggle = (enabled: boolean) => {
+    if (!selectedDate) return;
     setTimeEnabled(enabled);
     onTimeToggle?.(enabled);
   };
@@ -113,9 +124,17 @@ export default function CalendarModal({
     // 배열 말고 단일 선택만 고려
     if (value instanceof Date || value === null) {
       setSelectedDate(value);
+      setIsUnspecifiedSelected(false);
     }
   };
 
+  const handleSelectUnspecified = () => {
+    setSelectedDate(null);
+    setIsUnspecifiedSelected(true);
+    setTimeEnabled(false);
+    onTimeToggle?.(false);
+  };
+
   return (
     <div className={modalWrapper}>
       <Calendar
@@ -140,9 +159,32 @@ export default function CalendarModal({
         showFixedNumberOfWeeks={true} // 6주를 보여주는 프롭이 있음
       />
       <div className={timeSection}>
+        {allowUnspecified && (
+          <button
+            type='button'
+            className={unspecifiedDateRow}
+            onClick={handleSelectUnspecified}
+          >
+            <span className={timeToggleLabel()}>날짜 지정안함</span>
+            <CheckCircleIcon
+              size={24}
+              color={
+                isUnspecifiedSelected
+                  ? token('colors.gray.900')
+                  : token('colors.gray.300')
+              }
+            />
+          </button>
+        )}
         <div className={timeToggleRow}>
-          <span className={timeToggleLabel}>시간 추가</span>
-          <TimeToggle checked={timeEnabled} onChange={handleTimeToggle} />
+          <span className={timeToggleLabel({ disabled: !selectedDate })}>
+            시간 추가
+          </span>
+          <TimeToggle
+            checked={timeEnabled}
+            onChange={handleTimeToggle}
+            disabled={!selectedDate}
+          />
         </div>
         {timeEnabled && selectedDate && (
           <div className={dateTimeRow}>
@@ -192,6 +234,13 @@ export default function CalendarModal({
           variant='fillBlue'
           size='small'
           onClick={() => {
+            if (!selectedDate) {
+              if (allowUnspecified) {
+                onSave(null, false);
+              }
+              return;
+            }
+
             if (selectedDate) {
               if (timeEnabled) {
                 const [hStr, mStr] = timeValue.split(':');
@@ -406,19 +455,38 @@ const modalWrapper = css({
 const timeSection = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: '0.5rem',
+  gap: '0.75rem',
   mt: '0.75rem',
 });
 
+const unspecifiedDateRow = flex({
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  bg: 'transparent',
+  border: 'none',
+  p: '0',
+  cursor: 'pointer',
+});
+
 // 시간 추가 토글 행
 const timeToggleRow = flex({
   alignItems: 'center',
   justifyContent: 'space-between',
 });
 
-const timeToggleLabel = css({
-  textStyle: 'body3.m',
-  color: 'gray.900',
+const timeToggleLabel = cva({
+  base: {
+    textStyle: 'body3.m',
+    color: 'gray.900',
+  },
+  variants: {
+    disabled: {
+      true: { color: 'gray.400' },
+    },
+  },
+  defaultVariants: {
+    disabled: false,
+  },
 });
 
 // 날짜 + 시간 입력 행