Merge remote-tracking branch 'origin/master' into fix/todo

Author: kimhyunjee

app/routes/mypage.tsx

@@ -5,12 +5,12 @@ export default function MyPage() {
   const { logout } = useLogout();
 
   return (
-    <div className="px-30 py-10">
-      <h1 className="text-[32px] font-bold text-main2 mb-8">
+    <div className="px-30 py-10 ">
+      <h1 className="text-[32px] font-bold text-main2 mb-8 ">
         안녕하세요, {nickname}님!
       </h1>
       <div className="flex items-center justify-center">
-        <div className="max-w-155 bg-white rounded-[10px] shadow-[0_2px_12px_rgba(0,0,0,0.08)] px-8 py-5 flex items-center justify-between">
+        <div className="flex justify-between max-w-155 bg-white rounded-[10px] shadow-[0_2px_12px_rgba(0,0,0,0.08)] px-8 py-5 w-full">
           <div className="flex items-center gap-6">
             <span className="text-[20px] font-bold text-main2">{nickname}</span>
             <span className="text-[16px] text-sub1">{loginId}</span>

features/auth/api/index.ts

@@ -1,2 +1,4 @@
 export { REGISTER_MUTATION } from './register.mutation';
 export { LOGIN_MUTATION } from './login.mutaiton';
+export { ME_QUERY } from './me.query';
+export type { MeQueryResult } from './me.query';

features/auth/api/me.query.ts

@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client';
+
+export const ME_QUERY = gql`
+  query Me {
+    me {
+      id
+      loginId
+      nickname
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
+export interface MeQueryResult {
+  me: {
+    id: number;
+    loginId: string;
+    nickname: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+}

features/auth/model/useMe.ts

@@ -1,14 +1,17 @@
+import { useQuery } from '@apollo/client/react';
 import { tokenStorage } from 'shared/utils';
-
-interface TokenPayload {
-  nickname: string;
-  loginId: string;
-}
+import { ME_QUERY } from '../api/me.query';
+import type { MeQueryResult } from '../api/me.query';
 
 export function useMe() {
-  const payload = tokenStorage.parse<TokenPayload>();
+  const isLoggedIn = !!tokenStorage.get();
+
+  const { data } = useQuery<MeQueryResult>(ME_QUERY, {
+    skip: !isLoggedIn,
+  });
+
   return {
-    nickname: payload?.nickname ?? '',
-    loginId: payload?.loginId ?? '',
+    nickname: data?.me.nickname ?? '',
+    loginId: data?.me.loginId ?? '',
   };
 }

features/history/model/useMyReviews.ts

@@ -9,7 +9,7 @@ interface MyReviewsResponse {
 export function useMyReviews(filter: ReviewFilter) {
   const { data, loading, error } = useQuery<MyReviewsResponse>(
     MY_REVIEWS_QUERY,
-    { variables: { filter } }
+    { variables: { filter }, fetchPolicy: 'cache-and-network' }
   );
 
   const myReviews: Review[] =

features/review/ui/GuidePanel.tsx

@@ -7,7 +7,7 @@ interface GuidePanelProps {
 
 export function GuidePanel({ steps, stepIndex }: GuidePanelProps) {
   return (
-    <aside className="w-84.25 shrink-0 pt-4">
+    <aside className="min-w-7.5 shrink-0 pt-4">
       <h2 className="text-[25px] font-semibold text-main2 mb-4">가이드라인</h2>
       <div className="border border-main1 rounded-[10px] bg-white p-6">
         {steps.map((step, i) => {

features/review/ui/ProgressBar.tsx

@@ -8,7 +8,7 @@ interface ProgressBarProps {
 
 export function ProgressBar({ steps, stepIndex }: ProgressBarProps) {
   return (
-    <div className="px-54.5 pt-6 pb-2 shrink-0">
+    <div className="px-54.5 pt-6 pb-2 shrink-0 min-w-325">
       <div className="flex gap-2">
         {steps.map((step, i) => {
           const { bar, label } = colorMap[step.color];

features/review/ui/WritePanel.tsx

@@ -33,6 +33,7 @@ export function WritePanel({
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key !== 'Enter') return;
+    if (e.nativeEvent.isComposing) return;
 
     const textarea = textareaRef.current!;
     const { value, selectionStart, selectionEnd } = textarea;
@@ -59,17 +60,24 @@ export function WritePanel({
 
     if (isEmptyItem) {
       // 빈 항목에서 Enter → 리스트 종료, 접두사 제거
-      newValue = value.substring(0, lineStart) + value.substring(selectionStart);
+      newValue =
+        value.substring(0, lineStart) + value.substring(selectionStart);
       newCursor = lineStart;
     } else if (unorderedMatch) {
       const [, indent, bullet] = unorderedMatch;
       const insertion = `\n${indent}${bullet} `;
-      newValue = value.substring(0, selectionStart) + insertion + value.substring(selectionEnd);
+      newValue =
+        value.substring(0, selectionStart) +
+        insertion +
+        value.substring(selectionEnd);
       newCursor = selectionStart + insertion.length;
     } else {
       const [, indent, numStr] = orderedMatch!;
       const insertion = `\n${indent}${parseInt(numStr) + 1}. `;
-      newValue = value.substring(0, selectionStart) + insertion + value.substring(selectionEnd);
+      newValue =
+        value.substring(0, selectionStart) +
+        insertion +
+        value.substring(selectionEnd);
       newCursor = selectionStart + insertion.length;
     }
 
@@ -83,7 +91,7 @@ export function WritePanel({
   };
 
   return (
-    <section className="flex-1 flex flex-col gap-4 pt-4 min-w-0">
+    <section className="flex-1 flex flex-col gap-4 pt-4 min-w-[300px]">
       <h2 className="text-[25px] font-semibold text-main2">
         {currentStep.title}
       </h2>

features/todo/todo.tsx

@@ -17,9 +17,8 @@ import { ReviewStartModal } from 'features/review';
 export const Todo = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());
-  const dateString = selectedDate.toISOString().split('T')[0];
 
-  const { myReviews } = useMyReviews({ date: dateString });
+  const { myReviews } = useMyReviews({ date: formatDateToYYYYMMDD(selectedDate) });
   const todayReview = myReviews[0] ?? null;
   const [isAddGoalOpen, setIsAddGoalOpen] = useState(false);
 
@@ -93,6 +92,18 @@ export const Todo = () => {
     [goals, hiddenGoalIds]
   );
 
+  const allTasksDone = useMemo(
+    () => todos.length > 0 && todos.every((t) => t.total > 0 && t.completed === t.total),
+    [todos]
+  );
+
+  const isPast10pmKST =
+    new Date(
+      new Date().toLocaleString('en-US', { timeZone: 'Asia/Seoul' })
+    ).getHours() >= 22;
+
+  const canStartReview = allTasksDone || isPast10pmKST;
+
   const handlePrevDate = () => {
     setSelectedDate((prev) => {
       const next = new Date(prev);
@@ -371,8 +382,13 @@ export const Todo = () => {
           ) : (
             <div className="flex justify-center">
               <button
-                onClick={() => setIsModalOpen(true)}
-                className="w-full max-w-215 mt-30 py-4 bg-main1 text-white rounded-[10px] text-[20px] font-medium cursor-pointer"
+                onClick={() => canStartReview && setIsModalOpen(true)}
+                disabled={!canStartReview}
+                className={`w-full max-w-215 mt-30 py-4 rounded-[10px] text-[20px] font-medium transition-colors ${
+                  canStartReview
+                    ? 'bg-main1 text-white cursor-pointer'
+                    : 'bg-sub3 text-sub2 cursor-not-allowed'
+                }`}
               >
                 오늘 하루 회고로 마무리하기
               </button>

package.json

@@ -12,13 +12,13 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
+    "@apollo/client": "^4.1.6",
     "@base-ui/react": "^1.2.0",
     "@fontsource-variable/geist": "^5.2.8",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "@apollo/client": "^4.1.6",
     "@react-router/node": "7.12.0",
     "@react-router/serve": "7.12.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "graphql": "^16.13.1",
     "isbot": "^5.1.31",
     "lucide-react": "^0.577.0",