마이페이지, 유저페이지 조회가능+새싹기능 toggle추가 (#issue 237)

src/api/auth.api.ts

@@ -1,4 +1,4 @@
-import { VerifyEmail, VerifyNickname } from '../models/auth';
+import { ApiVerifyNickname, VerifyEmail } from '../models/auth';
 import { httpClient } from './http.api';
 import { registerFormValues } from '../pages/register/Register';
 import { changePasswordFormValues } from '../pages/changePassword/ChangePassword';
@@ -24,16 +24,16 @@ export const postVerifyEmailCode = async (data: VerifyEmail) => {
   }
 };
 
-export const postCheckNickname = async (nickname: string) => {
+export const getCheckNickname = async (nickname: string) => {
   try {
-    const response = await httpClient.post<VerifyNickname>(
+    const response = await httpClient.get<ApiVerifyNickname>(
       '/user/nickname-check',
-      { nickname }
+      { params: { nickname } }
     );
-    return response;
+
+    return response.data.message;
   } catch (error) {
     console.error('checkNickname:', error);
-    throw error;
   }
 };
 

src/api/mypage.api.ts

@@ -1,26 +1,25 @@
-import { EditMyInfo, UserInfo } from '../models/userInfo';
-import {
-  MyAppliedProjectStatusList,
-  MyJoinedProjectList,
-} from '../models/userProject';
+import { ApiUserInfo, ApiUserInfoImg, EditMyInfo } from '../models/userInfo';
+import { ApiAppliedProject, ApiJoinedProject } from '../models/userProject';
 import { httpClient } from './http.api';
 
 export const getMyInfo = async () => {
   try {
-    const response = await httpClient.get<UserInfo>('/user');
+    const response = await httpClient.get<ApiUserInfo>('/user');
+
     return response.data;
   } catch (error) {
-    console.error('mypage-myinfo:', error);
+    console.error('내 정보 조회: ', error);
     throw error;
   }
 };
 
 export const putMyInfo = async (data: EditMyInfo) => {
   try {
-    const response = await httpClient.put('/user/me', data);
-    return response;
+    const response = await httpClient.put<ApiUserInfo>('/user', data);
+
+    return response.data.data;
   } catch (error) {
-    console.error('mypage-myinfoedit:', error);
+    console.error('내 정보 수정: ', error);
     throw error;
   }
 };
@@ -30,38 +29,43 @@ export const patchMyProfileImg = async (file: File) => {
   formData.append('file', file);
 
   try {
-    const response = await httpClient.patch('/user/me/profile-img', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    });
-    return response;
+    const response = await httpClient.patch<ApiUserInfoImg>(
+      '/user/profile-img',
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+    );
+
+    return response.data.data;
   } catch (error) {
-    console.error('myprofile upload:', error);
+    console.error('프로필 이미지 업데이트: ', error);
     throw error;
   }
 };
 
 export const getMyJoinedProjectList = async () => {
   try {
-    const response = await httpClient.get<MyJoinedProjectList>(
-      '/user/me/project'
-    );
+    const response = await httpClient.get<ApiJoinedProject>('/user/project');
+
     return response.data;
   } catch (error) {
-    console.error('myJoinedProjectList:', error);
+    console.error('내 프로젝트 리스트: ', error);
     throw error;
   }
 };
 
 export const getMyAppliedStatusList = async () => {
   try {
-    const response = await httpClient.get<MyAppliedProjectStatusList>(
-      '/user/me/applications'
+    const response = await httpClient.get<ApiAppliedProject>(
+      '/user/applications'
     );
+
     return response.data;
   } catch (error) {
-    console.error('myAppliedProjectList:', error);
+    console.error('내가 지원한 프로젝트 리스트: ', error);
     throw error;
   }
 };

src/api/projectLists.api.ts

@@ -1,8 +1,6 @@
 import type {
   ApiProjectLists,
   ApiProjectStatistic,
-  ProjectLists,
-  ProjectStatistic,
 } from '../models/mainProjectLists';
 import { SearchFilters } from '../models/SearchFilters';
 import { httpClient } from './http.api';

src/api/userpage.api.ts

@@ -1,25 +1,27 @@
-import { UserInfo } from '../models/userInfo';
-import { UserJoinedProjectList } from '../models/userProject';
+import type { ApiUserInfo } from '../models/userInfo';
+import type { ApiSelectUserProject } from '../models/userProject';
 import { httpClient } from './http.api';
 
 export const getUserInfo = async (id: number) => {
   try {
-    const response = await httpClient.get<UserInfo>(`/user/${id}`);
+    const response = await httpClient.get<ApiUserInfo>(`/user/${id}`);
+
     return response.data;
   } catch (error) {
-    console.error('userpage-userinfo:', error);
+    console.error('다른 유저 정보 조회: ', error);
     throw error;
   }
 };
 
 export const getUserJoinedProjectList = async (id: number) => {
   try {
-    const response = await httpClient.get<UserJoinedProjectList>(
+    const response = await httpClient.get<ApiSelectUserProject>(
       `/user/${id}/project`
     );
+
     return response.data;
   } catch (error) {
-    console.error('userJoinedProjectList:', error);
+    console.error('다른 유저 참여 프로젝트 조회: ', error);
     throw error;
   }
 };

src/components/auth/InputText.styled.ts

@@ -30,7 +30,7 @@ export const Input = styled.input`
   border: none;
   outline: none;
   font-size: 0.9em;
-  width: 85%;
+  width: 100%;
   color: ${({ theme }) => theme.color.primary}
 
   &::placeholder {

src/components/common/sidebar/Sidebar.styled.ts

@@ -23,7 +23,7 @@ export const LogoContainer = styled.div`
   }
 `;
 
-export const AvartarContainer = styled.div`
+export const AvatarContainer = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -39,7 +39,7 @@ export const AvartarContainer = styled.div`
   }
 `;
 
-export const AvartarWrapper = styled.div`
+export const AvatarWrapper = styled.div`
   position: relative;
 `;
 export const MenuList = styled.div`

src/components/common/sidebar/Sidebar.tsx

@@ -26,16 +26,15 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
   const isManagePage = location.pathname.includes('/manage');
 
   const isMyProfile = isLoggedIn && !isUserPage && !isManagePage;
-
   const getActiveIndex = useCallback(() => {
     const currentPath = location.pathname;
     return menuItems.findIndex((item) => currentPath === item.path) ?? 0;
   }, [location.pathname, menuItems]);
 
   return (
     <S.Container>
-      <S.AvartarContainer>
-        <S.AvartarWrapper>
+      <S.AvatarContainer>
+        <S.AvatarWrapper>
           {profileImage === MainLogo ? (
             <S.LogoContainer>
               <img src={MainLogo} alt='main logo' loading='eager' />
@@ -44,9 +43,9 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
             <Avatar size='120px' image={profileImage} />
           )}
           {isMyProfile && <EditMyProfileImg />}
-        </S.AvartarWrapper>
+        </S.AvatarWrapper>
         <span>{nickname ? nickname : ''}</span>
-      </S.AvartarContainer>
+      </S.AvatarContainer>
       <S.MenuList>
         {menuItems.map(({ label, path, icon, isDone = false }, index) => {
           return (

src/components/home/projectCardLists/cardList/CardList.tsx

@@ -11,8 +11,6 @@ interface CardListProps {
 }
 
 export default function CardList({ list }: CardListProps) {
-  console.log('리스트*-*-*-*-*-*-*', list);
-
   const listPositionTag = list.positions.slice(0, 2);
   const listSkillTag = list.skills.slice(0, 4);
   const othersPosition = list.positions.length - 2;

src/components/mypage/appliedProject/MyApplyProject.tsx

@@ -21,9 +21,9 @@ const MyApplyProject = () => {
       </S.TitleWrapper>
       {myAppliedStatusListData && myAppliedStatusListData?.length > 0 ? (
         <S.Container>
-          {myAppliedStatusListData?.map((status) => (
-            <Link key={status.id} to={`${ROUTES.projectDetail}/${status.id}`}>
-              <MyStatus status={status} />
+          {myAppliedStatusListData?.map((data) => (
+            <Link key={data.id} to={`${ROUTES.projectDetail}/${data.id}`}>
+              <MyStatus list={data} />
             </Link>
           ))}
         </S.Container>

src/components/mypage/appliedProject/MyStatus.tsx

@@ -1,17 +1,17 @@
 import { MY_STATUS } from '../../../constants/authConstants';
-import { MyAppliedProjectStatus } from '../../../models/userProject';
+import type { AppliedProject } from '../../../models/userProject';
 import * as S from './MyStatus.styled';
 
 interface StatusProps {
-  status: MyAppliedProjectStatus;
+  list: AppliedProject;
 }
 
-const MyStatus = ({ status }: StatusProps) => {
+const MyStatus = ({ list }: StatusProps) => {
   return (
     <S.Container>
-      <S.Title>{status.projectTitle}</S.Title>
-      <S.Status $isAccepted={status.status === MY_STATUS.ACCEPTED}>
-        <span>{status.status}</span>
+      <S.Title>{list.title}</S.Title>
+      <S.Status $isAccepted={list.status === MY_STATUS.ACCEPTED}>
+        <span>{list.status}</span>
       </S.Status>
     </S.Container>
   );

src/components/mypage/joinedProject/MyJoinProjects.tsx

@@ -13,6 +13,7 @@ const MyJoinProjects = () => {
   if (isLoading) {
     return <Spinner size='50px' color='#3e5879;' />;
   }
+  if (!myJoinedProjectListData) return;
 
   return (
     <>
@@ -22,11 +23,8 @@ const MyJoinProjects = () => {
       {myJoinedProjectListData && myJoinedProjectListData?.length > 0 ? (
         <S.Container>
           {myJoinedProjectListData?.map((project) => (
-            <Link
-              key={project.projectId}
-              to={`${ROUTES.projectDetail}/${project.projectId}`}
-            >
-              <Project key={project.projectId} project={project} />
+            <Link key={project.id} to={`${ROUTES.projectDetail}/${project.id}`}>
+              <Project project={project} />
             </Link>
           ))}
         </S.Container>

src/components/mypage/joinedProject/Project.tsx

@@ -1,25 +1,23 @@
-import { UserJoinedProject } from '../../../models/userProject';
+import type { JoinedProject } from '../../../models/userProject';
 import * as S from './Project.styled';
 import BeginnerIcon from '../../../assets/beginner.svg';
-import { formatDate } from '../../../util/formatDate';
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
 
 interface ProjectProps {
-  project: UserJoinedProject;
+  project: JoinedProject;
 }
 
 const Project = ({ project }: ProjectProps) => {
-  const startProjectDate = formatDate(project.startDate);
   const maxSkills = 4;
-  const skillsShow = project.ProjectSkillTag.slice(0, maxSkills);
+  const skillsShow = project.skills.slice(0, maxSkills);
   return (
     <S.Container>
       <S.Title>{project.title}</S.Title>
       <S.Date>
         <S.DateWrapper>
-          <span>프로젝트 시작</span>
+          <span>시작일</span>
         </S.DateWrapper>
-        <span>{startProjectDate}</span>
+        <span>{project.recruitmentEndDate}</span>
       </S.Date>
       <S.Member>
         <S.Wrapper>
@@ -36,9 +34,9 @@ const Project = ({ project }: ProjectProps) => {
       </S.Member>
       <S.Skill>
         {skillsShow.map((skill) => (
-          <img key={skill.SkillTag.id} src={skill.SkillTag.img} />
+          <img key={skill.id} src={skill.img} />
         ))}
-        {project.ProjectSkillTag.length > maxSkills && (
+        {project.skills.length > maxSkills && (
           <EllipsisHorizontalIcon width='20' height='20' />
         )}
       </S.Skill>