Merge branch 'dev' of https://github.com/FE9-2/workroot into feat/oauth

yyezzzy · yyezzzy · commit 405f5549d645 · 2024-12-06T00:42:25.000+09:00
diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -0,0 +1,40 @@
+name: workRoot CI
+
+on:
+  push:
+    branches:
+      - main # main 브랜치에 푸시될 때 실행
+      - dev
+  pull_request:
+    branches:
+      - dev
+
+jobs:
+  lint-and-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20" # 최신 Node.js 20.x.x 버전 사용
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Build project
+        run: npm run build
diff --git a/src/app/(pages)/(addform)/addform/sections/WorkCondition.tsx b/src/app/(pages)/(addform)/addform/sections/WorkCondition.tsx
@@ -56,15 +56,17 @@ export default function WorkCondition({ formData, onUpdate }: WorkConditionProps
     if (start) setValue("workStartDate", start.toISOString());
     if (end) setValue("workEndDate", end.toISOString());
   };
+
   const errorTextStyle =
     "absolute -bottom-[26px] right-1 text-[13px] text-sm font-medium leading-[22px] text-state-error lg:text-base lg:leading-[26px]";
 
   return (
     <div className="relative">
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)} className="my-8 flex flex-col gap-4">
+          {/* 지도 API 연동 */}
           <Label>근무 위치</Label>
-          <LocationInput variant="white" />
+          <LocationInput variant="white" {...register("location", { required: "근무 위치를 작성해주세요." })} />
 
           <div className="relative flex flex-col gap-2">
             <Label>근무 기간</Label>
@@ -94,7 +96,12 @@ export default function WorkCondition({ formData, onUpdate }: WorkConditionProps
           </div>
 
           <Label>시급</Label>
-          <BaseInput variant="white" afterString="원" type="number" />
+          <BaseInput
+            {...register("hourlyWage", { required: "시급을 작성해주세요." })}
+            variant="white"
+            afterString="원"
+            errormessage={errors.hourlyWage?.message}
+          />
 
           <Label>공개 설정</Label>
           <div className="flex px-[14px]">
diff --git a/src/app/api/users/me/route.ts b/src/app/api/users/me/route.ts
@@ -10,7 +10,7 @@ export async function GET() {
     const accessToken = cookies().get("accessToken")?.value;
 
     if (!accessToken) {
-      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+      return new Response(null, { status: 200 });
     }
 
     // 내 정보 조회 요청
@@ -23,7 +23,9 @@ export async function GET() {
     return NextResponse.json(response.data);
   } catch (error: unknown) {
     if (error instanceof AxiosError) {
-      console.error("GET /api/users/me error:", error);
+      if (error.response?.status === 401) {
+        return new Response(null, { status: 200 });
+      }
       if (error.response) {
         return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
       }
@@ -42,7 +44,6 @@ export async function PATCH(request: Request) {
     }
 
     const body = await request.json();
-    console.log("PATCH /users/me request body:", body);
 
     const response = await apiClient.patch("/users/me", body, {
       headers: {
@@ -51,11 +52,6 @@ export async function PATCH(request: Request) {
       },
     });
 
-    console.log("PATCH /users/me response:", {
-      status: response.status,
-      data: response.data,
-    });
-
     if (response.status === 200 && response.data) {
       return NextResponse.json(response.data);
     }
diff --git a/src/app/components/button/default/CheckBtn.tsx b/src/app/components/button/default/CheckBtn.tsx
@@ -6,6 +6,7 @@ interface CheckBtnProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string; // 체크박스의 레이블
   name: string; // 체크박스의 name 속성
   value: string; // 체크박스의 value 속성
+  checked?: boolean; // 체크박스가 선택된 상태인지 여부
   disabled?: boolean; // 체크박스가 비활성화된 상태인지 여부
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
diff --git a/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx b/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx
@@ -43,7 +43,6 @@ const ImageInputwithPlaceHolder = () => {
           name="image"
           onFileAction={handleFileChange}
           size={size}
-          isImage={true}
           placeholder=""
         />
         <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
diff --git a/src/app/components/input/text/LocationInput.tsx b/src/app/components/input/text/LocationInput.tsx
@@ -3,19 +3,24 @@
 import { IoLocationSharp } from "react-icons/io5";
 import BaseInput from "./BaseInput";
 import { BaseInputProps } from "@/types/textInput";
+import { forwardRef } from "react";
 
-const LocationInput = ({ type = "text", variant, errormessage, feedbackMessage, ...props }: BaseInputProps) => {
-  return (
-    <BaseInput
-      type={type}
-      variant={variant || "white"}
-      beforeIcon={<IoLocationSharp className="size-6 text-grayscale-100 lg:size-8" />}
-      placeholder="위치를 입력해주세요."
-      errormessage={errormessage}
-      feedbackMessage={feedbackMessage}
-      {...props}
-    />
-  );
-};
+const LocationInput = forwardRef<HTMLInputElement, BaseInputProps>(
+  ({ type = "text", variant, errormessage, feedbackMessage, ...props }, ref) => {
+    return (
+      <BaseInput
+        type={type}
+        variant={variant || "white"}
+        beforeIcon={<IoLocationSharp className="size-6 text-grayscale-100 lg:size-8" />}
+        placeholder="위치를 입력해주세요."
+        errormessage={errormessage}
+        feedbackMessage={feedbackMessage}
+        {...props}
+      />
+    );
+  }
+);
+
+LocationInput.displayName = "LocationInput";
 
 export default LocationInput;
diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
@@ -5,79 +5,21 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { cn } from "@/lib/tailwindUtil";
 import { useAuth } from "@/hooks/useAuth";
-import { useState, useEffect } from "react";
-import axios from "axios";
-import { UserResponse } from "@/types/response/user";
-import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 import { toast } from "react-hot-toast";
+import { useUser } from "@/hooks/useUser";
 
 export default function Header() {
-  const [user, setUser] = useState<UserResponse | null>(null);
   const { logout } = useAuth();
+  const { user, isLoading } = useUser();
   const pathname = usePathname();
   const router = useRouter();
-  const queryClient = useQueryClient();
   const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
 
   // 인증이 필요없는 공개 경로들
-  const publicPaths = ["/", "/albaList", "/albaTalk", "/login", "/signup", "/signup/applicant", "/signup/owner"];
-
-  // 새로고침 시 토큰 갱신 및 유저 정보 로드
-  useEffect(() => {
-    const initializeAuth = async () => {
-      try {
-        const storedUser = localStorage.getItem("user");
-        const userData: UserResponse | null = storedUser ? JSON.parse(storedUser) : null;
-        setUser(userData);
-
-        if (userData) {
-          await axios.post("/api/auth/refresh");
-          queryClient.setQueryData(["user"], { user: userData });
-        }
-      } catch (error) {
-        console.error("Auth initialization failed:", error);
-        localStorage.removeItem("user");
-        setUser(null);
-        queryClient.setQueryData(["user"], { user: null });
-        if (!publicPaths.includes(pathname)) {
-          router.push("/login");
-        }
-      } finally {
-        setIsInitialized(true);
-      }
-    };
-
-    initializeAuth();
-  }, [pathname, queryClient, router]);
-
-  // React Query 캐시 변경 감지
-  useEffect(() => {
-    // 캐시 구독 설정
-    const unsubscribe = queryClient.getQueryCache().subscribe(() => {
-      const userData = queryClient.getQueryData<{ user: UserResponse | null }>(["user"]);
-      if (userData) {
-        setUser(userData.user);
-      }
-    });
-
-    // 초기 상태 설정
-    const userData = queryClient.getQueryData<{ user: UserResponse | null }>(["user"]);
-    if (userData) {
-      setUser(userData.user);
-    }
-
-    // 클린업 함수
-    return () => {
-      unsubscribe();
-    };
-  }, [queryClient]);
-
   const handleLogout = async () => {
     logout();
     toast.success("로그아웃되었습니다!");
-    setUser(null);
-    queryClient.setQueryData(["user"], { user: null });
     setIsSideMenuOpen(false);
     router.push("/login");
   };
@@ -93,7 +35,7 @@ export default function Header() {
   };
 
   // 로딩 시간이 1초 이상일 때만 스켈레톤 UI 표시
-  if (!isInitialized) {
+  if (isLoading) {
     return (
       <header className="fixed left-0 right-0 top-0 z-50 bg-lime-100 -tracking-widest md:tracking-normal">
         <div className="container mx-auto px-4">
diff --git a/src/app/components/modal/modals/form/EditMyProfileModal.tsx b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
@@ -110,7 +110,6 @@ const EditMyProfileModal = ({ isOpen, onClose, className }: EditMyProfileModalPr
       const updateResponse = await axios.patch("/api/users/me", updateData);
 
       if (updateResponse.status === 200) {
-        localStorage.setItem("user", JSON.stringify(updateResponse.data));
         await refetch(); // React Query 캐시 갱신
         toast.success("프로필이 성공적으로 수정되었습니다.");
         onClose();
diff --git a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
@@ -120,7 +120,6 @@ const EditOwnerProfileModal = ({ isOpen, onClose, className }: EditOwnerProfileM
       const updateResponse = await axios.patch("/api/users/me", updateData);
 
       if (updateResponse.status === 200) {
-        localStorage.setItem("user", JSON.stringify(updateResponse.data));
         await refetch(); // React Query 캐시 갱신
         toast.success("사장님 정보가 성공적으로 수정되었습니다.");
         onClose();
diff --git a/src/app/stories/design-system/components/input/picker/DatePicker.stories.tsx b/src/app/stories/design-system/components/input/picker/DatePicker.stories.tsx
@@ -26,5 +26,5 @@ export default meta;
 type Story = StoryObj<typeof DatePickerInput>;
 
 export const DatePicker: Story = {
-  render: () => <DatePickerInput />,
+  render: () => <DatePickerInput startDateName="startDate" endDateName="endDate" onChange={() => {}} />,
 };
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -50,7 +50,6 @@ export const useAuth = () => {
     },
     onSuccess: (data) => {
       if (data?.user) {
-        localStorage.setItem("user", JSON.stringify(data.user));
         // React Query 캐시 업데이트
         queryClient.setQueryData(["user"], { user: data.user });
 
@@ -71,7 +70,6 @@ export const useAuth = () => {
       return response.data;
     },
     onSuccess: () => {
-      localStorage.removeItem("user");
       queryClient.clear();
       router.push("/");
       router.refresh();
@@ -94,16 +92,8 @@ export const useAuth = () => {
         throw error;
       }
     },
-    onSuccess: (data) => {
-      if (data?.user) {
-        localStorage.setItem("user", JSON.stringify(data.user));
-      } else {
-        localStorage.removeItem("user");
-      }
-    },
     onError: (error: Error) => {
       console.error("Token refresh failed:", error);
-      localStorage.removeItem("user");
     },
   });
 
diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts
@@ -7,6 +7,7 @@ import {
   MyPostListResponse,
   MyCommentListResponse,
 } from "@/types/response/user";
+import toast from "react-hot-toast";
 
 export const useUser = () => {
   // 사용자 정보 조회
@@ -23,18 +24,14 @@ export const useUser = () => {
           user: response.data, // response.data가 이미 UserResponse 형태라고 가정
         };
 
-        // localStorage와 React Query 캐시 동기화
-        if (userData.user) {
-          localStorage.setItem("user", JSON.stringify(userData.user));
-        }
         return userData;
       } catch (error) {
         if (axios.isAxiosError(error)) {
           if (error.response?.status === 401) {
-            localStorage.removeItem("user");
             return { user: null };
+          } else {
+            toast.error("사용자 정보를 불러오는 데 실패했습니다." + error.response?.data.message);
           }
-          throw error;
         }
         throw error;
       }
@@ -172,15 +169,9 @@ export const useUser = () => {
   // 훅의 반환값들
   return {
     user: userQuery.data?.user || null,
+    refetch: userQuery.refetch,
     isLoading: userQuery.isLoading,
     error: userQuery.error,
-    refetch: async () => {
-      const result = await userQuery.refetch();
-      if (result.data?.user) {
-        localStorage.setItem("user", JSON.stringify(result.data.user));
-      }
-      return result;
-    },
     useMyForms,
     useMyApplications,
     useMyPosts,
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -75,15 +75,6 @@ export function decodeJwt(token: string) {
   }
 }
 
-// 토큰 만료 체크 함수
-function isTokenExpired(token: string) {
-  const decodedToken = decodeJwt(token);
-  if (!decodedToken) return true;
-
-  const currentTime = Math.floor(Date.now() / 1000);
-  return decodedToken.exp < currentTime;
-}
-
 export const config = {
   matcher: [
     /*
diff --git a/src/types/textInput.d.ts b/src/types/textInput.d.ts
@@ -30,4 +30,5 @@ export interface BaseFileInputProps {
   placeholder: string;
   onChange?: (event: Event) => void;
   accept?: string;
+  isImage?: boolean;
 }

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ interface CheckBtnProps extends InputHTMLAttributes<HTMLInputElement> {`
`6`	`6`	`label: string; // 체크박스의 레이블`
`7`	`7`	`name: string; // 체크박스의 name 속성`
`8`	`8`	`value: string; // 체크박스의 value 속성`
	`9`	`+ checked?: boolean; // 체크박스가 선택된 상태인지 여부`
`9`	`10`	`disabled?: boolean; // 체크박스가 비활성화된 상태인지 여부`
`10`	`11`	`onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;`
`11`	`12`	`}`