Merge pull request #134 from ITZipProject/main

refactor: login, recruit

package.json

@@ -13,8 +13,11 @@
     "test:coverage": "react-scripts test --watchAll=false --coverage"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
     "@heroicons/react": "^2.1.5",
     "@hookform/resolvers": "^3.9.0",
+    "@mui/material": "^6.1.8",
     "@prisma/client": "^5.16.1",
     "@react-spring/web": "^9.7.5",
     "@sentry/nextjs": "^8.13.0",
@@ -43,6 +46,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-modal": "^3.16.1",

src/api/mypage/mypage.action.ts

@@ -1,5 +1,8 @@
+import axios from 'axios';
 import instance from '../axiosInstance';
 
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
 export const getUser = async (accessToken: string) => {
   const user = await instance.get('/user', {
     headers: {
@@ -10,22 +13,63 @@ export const getUser = async (accessToken: string) => {
   return user;
 };
 
-export const checkNickname = async () => {
-  const res = await instance.get('/mypage/checkDuplicateNickname');
-  console.log(res);
+export const checkNickname = async (nickname: string, accessToken: string) => {
+  const res = await axios.get(`${BASE_URL}/mypage/checkDuplicateNickname`, {
+    params: {
+      nickname,
+    },
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+  return res;
 };
 
-export const editNickname = async () => {
-  const res = await instance.patch('/mypage/nickname');
-  console.log(res);
+export const editNickname = async (nickname: string, accessToken: string) => {
+  const res = await axios.patch(
+    `${BASE_URL}/mypage/nickname`,
+    { nickname },
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    },
+  );
+  return res.data;
 };
 
-export const editPassword = async () => {
-  const res = await instance.patch('/mypage/password');
-  console.log(res);
+export const editPassword = async (password: string, accessToken: string) => {
+  const res = await axios.patch(
+    `${BASE_URL}/mypage/password`,
+    { password },
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    },
+  );
+  return res.data;
 };
 
-export const editProfileImage = async () => {
-  const res = await instance.patch('/mypage/profileImage');
-  console.log(res);
+export const updateProfileImage = async (file: File, accessToken: string) => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const res = await axios.patch(`${BASE_URL}/api/mypage/profileImage`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+  return res.data;
+};
+
+export const logout = async (accessToken: string) => {
+  const res = await axios.delete(`${BASE_URL}/user/logout`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+  console.log('logout', res.data);
+  return res.data;
 };

src/api/saramin/route.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 import { Job } from '@/components/recruit/job';
 
-const baseUrl = process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, '');
+const baseUrl = process.env.NEXT_PUBLIC_API_URL;
 
 interface FetchJobsParams {
   page: number;
@@ -30,9 +30,7 @@ export async function fetchJobs(
   params: FetchJobsParams,
 ): Promise<{ jobs: Job[]; totalPages: number }> {
   try {
-    console.log('Fetching jobs with params:', params);
-    const response = await axios.get<JobResponse>(`${baseUrl}/job-info`, { params });
-    // console.log('API response:', response.data);
+    const response = await axios.get<JobResponse>(`${baseUrl}job-info`, { params });
     return {
       jobs: response.data.data.content,
       totalPages: response.data.data.totalPages,

src/app/layout.tsx

@@ -8,6 +8,7 @@ import { ModalProvider } from '@/lib/context/ModalContext';
 import './globals.css';
 // eslint-disable-next-line import/order
 import MobileHeader from '@/components/common/mobileHeader';
+import { Toaster } from 'react-hot-toast';
 
 // pretendard 함수 관련 에러로 500이 떠서 일단 주석 처리
 interface RootLayoutProps {
@@ -72,6 +73,16 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <main className={shouldHideHeaderAndFooter ? 'mt-[58px]' : ''}>{children}</main>
           {!shouldHideHeaderAndFooter && <Footer />}
           <Modals />
+          <Toaster
+            position="top-center"
+            toastOptions={{
+              duration: 3000,
+              style: {
+                background: '#363636',
+                color: '#fff',
+              },
+            }}
+          />
         </ModalProvider>
       </body>
     </html>

src/app/profile/page.tsx

@@ -1,53 +1,6 @@
 'use client';
 
-import { useAtom } from 'jotai';
-import Image from 'next/image';
-import { FaRegUserCircle } from 'react-icons/fa';
-
-import { loadingAtom } from '@/atoms/formAtoms';
-import useUser from '@/hooks/mypage/useUser';
-import { useModal } from '@/lib/context/ModalContext';
-import { accessTokenAtom } from '@/store/useTokenStore';
-
+import MyPageContainer from '@/components/mypage/mypageContainer';
 export default function Profile() {
-  const [accessToken] = useAtom(accessTokenAtom);
-  const { openModal } = useModal();
-  const { user, userLogout } = useUser(accessToken ?? '');
-  const [loading] = useAtom(loadingAtom);
-  return (
-    <div className="flex h-screen flex-col bg-[#F9FBFC] p-4">
-      <div className="rounded-lg border-2 border-Blue-500 px-spacing-05 py-spacing-06">
-        <div className="flex items-center justify-between pb-2">
-          <div className="flex gap-4">
-            {user?.imageUrl ? (
-              <Image src={user.imageUrl} alt="profileImage" />
-            ) : (
-              <FaRegUserCircle className="size-16" />
-            )}
-            <div className="flex flex-col justify-center">
-              <span className="font-semibold">{user?.nickname}</span>
-              <span className="text-12 text-[#A3A3A3]">{user?.email}</span>
-            </div>
-          </div>
-          <div>
-            <button
-              onClick={() => openModal('editProfileModal')}
-              className="rounded-md border p-2 text-12 font-normal text-Grey-300 hover:border-Blue-500 hover:text-Blue-400"
-            >
-              프로필 수정
-            </button>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col">
-        <button onClick={() => void userLogout()} disabled={loading.logout}>
-          {loading.logout ? '로그아웃 중...' : '로그아웃'}
-        </button>
-        <button className="text-gray-300" onClick={() => {}} disabled={loading.userOut}>
-          {loading.userOut ? '회원탈퇴 중...' : '회원탈퇴 >'}
-        </button>
-      </div>
-      <div></div>
-    </div>
-  );
+  return <MyPageContainer />;
 }

src/app/recruit/page.tsx

@@ -64,6 +64,7 @@ const RecruitPage: React.FC = () => {
             currentPage={currentPage}
             totalPages={totalPages}
             onPageChange={handlePageChange}
+            isLoading={false}
           />
         </div>
       </div>

src/components/common/Modals.tsx

@@ -3,16 +3,13 @@ import LoginModal from '@/app/(Auth)/login/loginModal';
 import SignUpEmailModal from '@/app/(Auth)/signup/signupEmailModal';
 import SignUpModal from '@/app/(Auth)/signup/signUpModal';
 
-import { EditProfileModal } from '../mypage/editProfileModal';
-
 export const Modals = () => {
   return (
     <>
       <LoginModal modalId="LoginModal" />
       <EmailLoginModal modalId="EmailLoginModal" />
       <SignUpModal modalId="signUpModal" />
       <SignUpEmailModal modalId="signUpEmailModal" />
-      <EditProfileModal modalId="editProfileModal" />
     </>
   );
 };