Merge pull request #23 from YAPP-Github/refactor/YS-176

[YS-176] 회원가입 로직 리팩토링 (연구자)

Author: rbgksqkr

src/apis/login.ts

@@ -49,12 +49,27 @@ export interface ResearcherResponse {
   univName: string;
 }
 
+export interface NaverLoginParams {
+  code: string;
+  role: string;
+  state: string;
+}
+
 export const googleLogin = async (code: string, role: string) => {
   const res = await API.post<LoginResponse>(API_URL.google(role), { authorizationCode: code });
 
   return res.data;
 };
 
+export const naverLogin = async ({ code, role, state }: NaverLoginParams) => {
+  const res = await API.post<LoginResponse>(API_URL.naver(role), {
+    authorizationCode: code,
+    state,
+  });
+
+  return res.data;
+};
+
 export const sendUnivAuthCode = async (univEmail: string) => {
   const res = await API.post<UnivAuthCodeResponse>(API_URL.send, { univEmail });
 

src/apis/post.ts

@@ -4,7 +4,13 @@ import { Area } from '@/app/home/home.types';
 import { API_URL } from '@/constants/url';
 import { Post } from '@/types/post';
 
-type PostResponse = Post[];
+interface PostResponse {
+  content: Post[];
+  isLast: boolean;
+  page: number;
+  size: number;
+  totalCount: number;
+}
 
 export type AreaResponse = PostAreaResponse | PostSubAreaResponse;
 
@@ -24,7 +30,7 @@ interface PostArea {
 }
 
 export interface PostListParams {
-  recruitDone: boolean;
+  recruitStatus: 'ALL' | 'OPEN';
   matchType?: 'ONLINE' | 'OFFLINE' | 'ALL';
   gender?: '' | 'MALE' | 'FEMALE' | 'ALL';
   age?: number;
@@ -34,7 +40,7 @@ export interface PostListParams {
   count?: number;
 }
 
-export const fetchPostList = async (params: PostListParams) => {
+export const fetchPostList = async (params: PostListParams = { recruitStatus: 'ALL' }) => {
   const queryParams = new URLSearchParams();
 
   Object.entries(params).forEach(([key, value]) => {

src/app/home/components/PostCard/PostCard.tsx

@@ -16,7 +16,6 @@ import {
 } from './PostCard.styles';
 
 import Icon from '@/components/Icon';
-import theme from '@/styles/theme';
 import { Post } from '@/types/post';
 
 interface PostCardProps {
@@ -30,9 +29,6 @@ const PostCard = ({ post }: PostCardProps) => {
         href={`/post/${post.postInfo.experimentPostId}`}
         key={post.postInfo.experimentPostId}
         css={postCardLayout}
-        style={{
-          backgroundColor: post.recruitDone ? theme.colors.field01 : theme.colors.field01,
-        }}
       >
         <div css={postHeader}>
           <div css={postCardHeader}>
@@ -45,7 +41,7 @@ const PostCard = ({ post }: PostCardProps) => {
           <h3 css={postTitle}>{post.postInfo.title}</h3>
         </div>
         <div>
-          {post.recruitDone ? (
+          {post.recruitStatus ? (
             <div css={contactedPostTag}>
               <span>모집 완료</span>
             </div>

src/app/home/components/PostContainer/PostContainer.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+
 import usePostListQuery from '../../hooks/usePostListQuery';
 import PostCardList from '../PostCardList/PostCardList';
 import FilterContainer from './FilterContainer/FilterContainer';
@@ -11,20 +12,16 @@ import {
   postContainerTitle,
   totalPostCount,
 } from './PostContainer.styles';
-import JoinCheckbox from '@/app/join/components/JoinCheckboxContainer/JoinCheckbox/JoinCheckbox';
+
 import { PostListParams } from '@/apis/post';
+import JoinCheckbox from '@/app/join/components/JoinEmailStep/JoinCheckboxContainer/JoinCheckbox/JoinCheckbox';
 
 const PostContainer = () => {
   const [filters, setFilters] = useState<PostListParams>({
-    matchType: 'ALL' as 'ALL' | 'ONLINE' | 'OFFLINE',
-    gender: '' as '' | 'ALL' | 'MALE' | 'FEMALE',
-    region: '',
-    areas: '',
-    age: 20,
-    recruitDone: false,
+    recruitStatus: 'ALL',
   });
 
-  const { data: postList } = usePostListQuery(filters);
+  const { data } = usePostListQuery(filters);
 
   const handleFilterChange = (key: string, value: string | number | boolean) => {
     setFilters((prev) => ({
@@ -33,9 +30,11 @@ const PostContainer = () => {
     }));
   };
 
-  // TODO: 개선 필요.
+  const isRecruiting = filters.recruitStatus === 'OPEN';
+
   const handleChange = () => {
-    handleFilterChange('recruitDone', !filters.recruitDone);
+    const toggleChecked = isRecruiting ? 'ALL' : 'OPEN';
+    handleFilterChange('recruitStatus', toggleChecked);
   };
 
   return (
@@ -45,14 +44,14 @@ const PostContainer = () => {
         <FilterContainer handleFilterChange={handleFilterChange} />
         <JoinCheckbox
           label="모집 중인 공고만 보기"
-          isChecked={filters.recruitDone}
+          isChecked={isRecruiting}
           onChange={handleChange}
           isArrow={false}
         />
       </div>
       <div css={postCardContainer}>
-        <span css={totalPostCount}>총 {postList?.length}개</span>
-        <PostCardList postList={postList} />
+        <span css={totalPostCount}>총 {data?.content.length}개</span>
+        <PostCardList postList={data?.content} />
       </div>
     </div>
   );

src/app/home/hooks/usePostListQuery.ts

@@ -4,10 +4,10 @@ import { fetchPostList, PostListParams } from '@/apis/post';
 import { QUERY_KEY } from '@/constants/queryKey';
 
 const usePostListQuery = (params: PostListParams) => {
-  const { matchType, gender, age, region, areas, recruitDone } = params;
+  const { matchType, gender, age, region, areas, recruitStatus } = params;
 
   return useQuery({
-    queryKey: [QUERY_KEY.post, matchType, gender, age, region, areas, recruitDone],
+    queryKey: [QUERY_KEY.post, matchType, gender, age, region, areas, recruitStatus],
     queryFn: () => fetchPostList(params),
   });
 };

src/app/home/hooks/useResearcherInfoQuery.ts

@@ -1,14 +1,15 @@
-import { getResearcherInfo } from '@/apis/login';
 import { useQuery } from '@tanstack/react-query';
 
+import { getResearcherInfo } from '@/apis/login';
+
 export const useResearcherInfoQuery = () => {
   const role = sessionStorage.getItem('role');
   const userRole = role === 'RESEARCHER' ? 'researchers' : 'participants';
 
   return useQuery({
     queryKey: ['researcherInfo'],
     queryFn: getResearcherInfo,
-    enabled: !!role,
+    enabled: !!userRole,
     retry: 1,
   });
 };