From 7a83e4831a1299b7d36299a3265cd854d2ae6af5 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Fri, 16 May 2025 16:58:41 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=EC=9E=90=EC=9E=98=ED=95=9C=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=EC=88=98=EC=A0=95,=20userPage=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CareersComponent.styled.ts | 2 +- .../CommentComponentLayout.tsx | 6 +- .../commentComponent/CommentComponent.tsx | 8 +- .../commentInput/CommentInput.styled.ts | 2 +- .../comment/commentInput/CommentInput.tsx | 2 +- .../comment/replyComponent/ReplyComponent.tsx | 4 +- .../customerService/CustomerServiceHeader.tsx | 7 +- .../user/customerService/inquiry/Inquiry.tsx | 9 +- .../noticeDetail/NoticeDetailBundle.styled.ts | 5 +- .../content/NoticeDetailContent.tsx | 2 +- src/components/user/home/banner/Banner.tsx | 2 +- .../projectCardLists/ProjectCardLists.tsx | 4 +- .../projectCardLists/cardList/CardList.tsx | 2 +- .../filteringContents/FilteringContents.tsx | 4 +- .../filteringContents/filtering/Filtering.tsx | 8 +- .../user/manageProjects/CardList.tsx | 3 +- .../passNonPassList/DeleteButton.styled.ts | 2 + .../SendResultButton.styled.ts | 2 +- src/components/user/mypage/ContentTab.tsx | 2 +- src/components/user/mypage/Spinner.styled.ts | 10 +- src/components/user/mypage/Spinner.tsx | 4 +- .../activityLog/inquiries/Inquiries.tsx | 2 +- .../activityLog/inquiries/inquiry/Inquiry.tsx | 4 +- .../mypage/joinedProject/MyJoinProjects.tsx | 3 +- .../user/mypage/joinedProject/Project.tsx | 2 +- .../user/mypage/myProfile/MyProfile.tsx | 4 +- .../user/mypage/myProfile/profile/Profile.tsx | 63 +++++++--- .../PositionComponent.styled.ts | 2 +- .../user/userPage/userProfile/UserProfile.tsx | 119 +++++------------- src/constants/sidebarItems.tsx | 2 +- src/constants/user/authConstants.ts | 8 +- src/constants/user/myPageProfile.ts | 15 ++- src/pages/login/Login.tsx | 9 +- src/pages/login/LoginSuccess.tsx | 4 +- src/pages/user/apply/ApplyStep.styled.ts | 2 +- .../user/changePassword/ChangePassword.tsx | 2 +- .../user/customerService/faq/FAQ.styled.ts | 5 +- .../customerService/notice/Notice.styled.ts | 5 +- src/pages/user/main/Create.tsx | 2 +- src/pages/user/main/HeroSection.tsx | 4 +- src/pages/user/main/Manage.tsx | 2 +- src/pages/user/main/Project.tsx | 2 +- src/pages/user/main/Result.tsx | 2 +- .../MyProjectVolunteersPass.styled.ts | 1 + .../MyProjectVolunteersPass.tsx | 2 +- .../MyProjectVolunteer.styled.ts | 1 + .../myProjectVolunteer/MyProjectVolunteer.tsx | 2 +- src/pages/user/mypage/MyPage.tsx | 2 +- .../projectDetail/ProjectDetail.styled.ts | 2 +- src/pages/user/register/Register.tsx | 2 +- src/pages/user/userpage/UserPage.tsx | 9 +- src/routes/AppRoutes.tsx | 1 + 52 files changed, 181 insertions(+), 194 deletions(-) diff --git a/src/components/user/applyComponents/careersComponent/CareersComponent.styled.ts b/src/components/user/applyComponents/careersComponent/CareersComponent.styled.ts index a2bf796d..5a17e4cc 100644 --- a/src/components/user/applyComponents/careersComponent/CareersComponent.styled.ts +++ b/src/components/user/applyComponents/careersComponent/CareersComponent.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Button from '../../common/Button/Button'; +import Button from '../../../common/Button/Button'; export const Container = styled.div` width: 100%; diff --git a/src/components/user/comment/commentComponent/CommentComponentLayout.tsx b/src/components/user/comment/commentComponent/CommentComponentLayout.tsx index 1668babf..b4ae4294 100644 --- a/src/components/user/comment/commentComponent/CommentComponentLayout.tsx +++ b/src/components/user/comment/commentComponent/CommentComponentLayout.tsx @@ -2,11 +2,11 @@ import * as S from './CommentComponentLayout.styled'; import DropDown from '../../../common/dropDown/DropDown'; import DropDownItem from '../DropDownItem'; import { CommentType } from '../../../../models/comment'; -import dropdownButton from '../../../assets/dropdownButton.svg'; +import dropdownButton from '../../../../assets/dropdownButton.svg'; import useComment from '../../../../hooks/user/CommentHooks/useComment'; import ReplyComponent from '../replyComponent/ReplyComponent'; -import ArrowDown from '../../../assets/ArrowDown.svg'; -import ArrowUp from '../../../assets/ArrowUp.svg'; +import ArrowDown from '../../../../assets/ArrowDown.svg'; +import ArrowUp from '../../../../assets/ArrowUp.svg'; import CommentComponent from './commentComponent/CommentComponent'; interface CommentLayoutProps { diff --git a/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx b/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx index f3bd34b7..b83490b4 100644 --- a/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx +++ b/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx @@ -1,10 +1,10 @@ import { Dispatch, SetStateAction } from 'react'; import * as S from './CommentComponent.styled'; -import Avatar from '../../../common/avatar/Avatar'; -import { CommentType } from '../../../../models/comment'; -import chat from '../../../../assets/chat.svg'; +import Avatar from '../../../../common/avatar/Avatar'; +import { CommentType } from '../../../../../models/comment'; +import chat from '../../../../../assets/chat.svg'; import { Link } from 'react-router-dom'; -import { ROUTES } from '../../../../constants/routes'; +import { ROUTES } from '../../../../../constants/user/routes'; import CommentInput from '../../commentInput/CommentInput'; interface CommentComponentProps { diff --git a/src/components/user/comment/commentInput/CommentInput.styled.ts b/src/components/user/comment/commentInput/CommentInput.styled.ts index 52c9a482..a609ddbe 100644 --- a/src/components/user/comment/commentInput/CommentInput.styled.ts +++ b/src/components/user/comment/commentInput/CommentInput.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Button from '../../common/Button/Button'; +import Button from '../../../common/Button/Button'; export const InputContainer = styled.div` display: flex; diff --git a/src/components/user/comment/commentInput/CommentInput.tsx b/src/components/user/comment/commentInput/CommentInput.tsx index 068e5da9..6e39312d 100644 --- a/src/components/user/comment/commentInput/CommentInput.tsx +++ b/src/components/user/comment/commentInput/CommentInput.tsx @@ -2,7 +2,7 @@ import * as S from './CommentInput.styled'; import { Dispatch, SetStateAction, useEffect } from 'react'; import { useMyProfileInfo } from '../../../../hooks/user/useMyInfo'; import { formatImgPath } from '../../../../util/formatImgPath'; -import DefaultImg from '../../../assets/defaultImg.png'; +import DefaultImg from '../../../../assets/defaultImg.png'; import Avatar from '../../../common/avatar/Avatar'; import { useForm } from 'react-hook-form'; import useInputFocus from '../../../../hooks/user/useInputFocus'; diff --git a/src/components/user/comment/replyComponent/ReplyComponent.tsx b/src/components/user/comment/replyComponent/ReplyComponent.tsx index 401bafba..be5d6dc5 100644 --- a/src/components/user/comment/replyComponent/ReplyComponent.tsx +++ b/src/components/user/comment/replyComponent/ReplyComponent.tsx @@ -1,10 +1,10 @@ import Avatar from '../../../common/avatar/Avatar'; import * as S from './ReplyComponent.styled'; -import DefaultImg from '../../../assets/defaultImg.png'; +import DefaultImg from '../../../../assets/defaultImg.png'; import useComment from '../../../../hooks/user/CommentHooks/useComment'; import DropDown from '../../../common/dropDown/DropDown'; import DropDownItem from '../DropDownItem'; -import dropdownButton from '../../../assets/dropdownButton.svg'; +import dropdownButton from '../../../../assets/dropdownButton.svg'; import CommentInput from '../commentInput/CommentInput'; import useGetReply from '../../../../hooks/user/CommentHooks/useGetReply'; import LoadingSpinner from '../../../common/loadingSpinner/LoadingSpinner'; diff --git a/src/components/user/customerService/CustomerServiceHeader.tsx b/src/components/user/customerService/CustomerServiceHeader.tsx index 47a14493..5d3e9939 100644 --- a/src/components/user/customerService/CustomerServiceHeader.tsx +++ b/src/components/user/customerService/CustomerServiceHeader.tsx @@ -1,7 +1,4 @@ -import { - ArrowUturnLeftIcon, - MagnifyingGlassIcon, -} from '@heroicons/react/24/outline'; +import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/outline'; import * as S from './CustomerServiceHeader.styled'; import MovedInquiredLink from './MoveInquiredLink'; import { Outlet } from 'react-router-dom'; @@ -55,7 +52,7 @@ export default function CustomerServiceHeader({ aria-label='show all result' onClick={handleReset} > - + )} diff --git a/src/components/user/customerService/inquiry/Inquiry.tsx b/src/components/user/customerService/inquiry/Inquiry.tsx index 3ede44c3..af49aef4 100644 --- a/src/components/user/customerService/inquiry/Inquiry.tsx +++ b/src/components/user/customerService/inquiry/Inquiry.tsx @@ -65,6 +65,8 @@ export default function Inquiry() { content: form.content.trim() !== '', }; + console.log(isCategoryOpen); + if (!isValid.category) { return handleModalOpen(INQUIRY_MESSAGE.selectCategory); } @@ -188,12 +190,7 @@ export default function Inquiry() { - setIsCategoryOpen((prev) => !prev)} - > - 제출 - + 제출 diff --git a/src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts b/src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts index b8dfa27e..c9b9e6aa 100644 --- a/src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts +++ b/src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts @@ -1,8 +1,7 @@ import styled from 'styled-components'; +import { SpinnerWrapperStyled } from '../../mypage/Spinner.styled'; -export const SpinnerWrapper = styled.div` - height: 60vh; -`; +export const SpinnerWrapper = styled(SpinnerWrapperStyled)``; export const Container = styled.section` width: 75%; diff --git a/src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx b/src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx index 45581300..d85e94a2 100644 --- a/src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx +++ b/src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx @@ -1,7 +1,7 @@ import { EyeIcon } from '@heroicons/react/24/outline'; import { formatDate } from '../../../../../util/format'; import * as S from './NoticeDetailContent.styled'; -import logo from '../../../../assets/mainlogo.svg'; +import logo from '../../../../../assets/mainlogo.svg'; import ContentBorder from '../../../../common/contentBorder/ContentBorder'; interface NoticeDetailContentProps { diff --git a/src/components/user/home/banner/Banner.tsx b/src/components/user/home/banner/Banner.tsx index 25e7107f..7f0afc22 100644 --- a/src/components/user/home/banner/Banner.tsx +++ b/src/components/user/home/banner/Banner.tsx @@ -1,5 +1,5 @@ import * as S from './Banner.styled'; -import banner from '../../../assets/banner.svg'; +import banner from '../../../../assets/banner.svg'; export default function Banner() { return ( diff --git a/src/components/user/home/projectCardLists/ProjectCardLists.tsx b/src/components/user/home/projectCardLists/ProjectCardLists.tsx index 06ee8194..71090e5d 100644 --- a/src/components/user/home/projectCardLists/ProjectCardLists.tsx +++ b/src/components/user/home/projectCardLists/ProjectCardLists.tsx @@ -26,7 +26,9 @@ export default function ProjectCardLists() { return; } setDisplay('flex'); - }, [projectListsData]); + console.log(searchFilters); + console.log(projectListsData); + }, [projectListsData, searchFilters]); if (isLoading) return ( diff --git a/src/components/user/home/projectCardLists/cardList/CardList.tsx b/src/components/user/home/projectCardLists/cardList/CardList.tsx index c31912ce..f85546ca 100644 --- a/src/components/user/home/projectCardLists/cardList/CardList.tsx +++ b/src/components/user/home/projectCardLists/cardList/CardList.tsx @@ -1,6 +1,6 @@ import PositionButton from '../../../../common/positionButton/PositionButton'; import * as S from './CardList.styled'; -import beginner from '../../../../assets/beginner.svg'; +import beginner from '../../../../../assets/beginner.svg'; import Avatar from '../../../../common/avatar/Avatar'; import { EyeIcon } from '@heroicons/react/24/outline'; import type { ProjectList } from '../../../../../models/mainProjectLists'; diff --git a/src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx b/src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx index 30398fd2..9288dbcd 100644 --- a/src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx +++ b/src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx @@ -1,13 +1,13 @@ import Filtering from './filtering/Filtering'; import * as S from './FilteringContents.styled'; -import beginner from '../../../../assets/beginner.svg'; +import beginner from '../../../../../assets/beginner.svg'; import { ChevronDownIcon } from '@heroicons/react/24/outline'; -import SkillTagBox from '../../../../common/skillTagBox/SkillTagBox'; import React, { useState } from 'react'; import { useSearchFilteringSkillTag } from '../../../../../hooks/user/useSearchFilteringSkillTag'; import { useOutsideClick } from '../../../../../hooks/user/useOutsideClick'; import { useSaveSearchFiltering } from '../../../../../hooks/user/useSaveSearchFiltering'; import { SEARCH_FILTERING_DEFAULT_VALUE } from '../../../../../constants/user/homeConstants'; +import SkillTagBox from '../../../../common/skillTagBox/SkillTagBox'; export default function FilteringContents() { const { positionTagsData, methodTagsData } = useSearchFilteringSkillTag(); diff --git a/src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx b/src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx index 585c7f94..e1ff06db 100644 --- a/src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx +++ b/src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx @@ -1,10 +1,10 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline'; import * as S from './Filtering.styled'; import { useEffect, useState } from 'react'; -import type { MethodTag, PositionTag } from '../../../../../models/tags'; -import { useOutsideClick } from '../../../../../hooks/useOutsideClick'; -import { useSaveSearchFiltering } from '../../../../../hooks/useSaveSearchFiltering'; -import { SEARCH_FILTERING_DEFAULT_VALUE } from '../../../../../constants/homeConstants'; +import type { MethodTag, PositionTag } from '../../../../../../models/tags'; +import { useOutsideClick } from '../../../../../../hooks/user/useOutsideClick'; +import { useSaveSearchFiltering } from '../../../../../../hooks/user/useSaveSearchFiltering'; +import { SEARCH_FILTERING_DEFAULT_VALUE } from '../../../../../../constants/user/homeConstants'; interface FilteringProps { selects: PositionTag[] | MethodTag[]; diff --git a/src/components/user/manageProjects/CardList.tsx b/src/components/user/manageProjects/CardList.tsx index a0976f6d..544775b4 100644 --- a/src/components/user/manageProjects/CardList.tsx +++ b/src/components/user/manageProjects/CardList.tsx @@ -1,8 +1,7 @@ import * as S from './CardList.styled'; - import type { ManagedProject } from '../../../models/manageMyProject'; import Card from './Card'; -import CreateButton from '../../assets/createProjectButton.svg'; +import CreateButton from '../../../assets/createProjectButton.svg'; import { ROUTES } from '../../../constants/user/routes'; interface CardListProps { diff --git a/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts b/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts index 77027c7b..89526f05 100644 --- a/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts +++ b/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts @@ -5,6 +5,8 @@ export const DeleteButton = styled.button` color: #e69191; width: 1.2rem; height: 1.2rem; + background: ${({ theme }) => theme.color.white}; + border-radius: 50%; } &:disabled { diff --git a/src/components/user/manageProjects/passNonPassList/SendResultButton.styled.ts b/src/components/user/manageProjects/passNonPassList/SendResultButton.styled.ts index f36e72fe..927d382f 100644 --- a/src/components/user/manageProjects/passNonPassList/SendResultButton.styled.ts +++ b/src/components/user/manageProjects/passNonPassList/SendResultButton.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Button from '../../common/Button/Button'; +import Button from '../../../common/Button/Button'; export const Wrapper = styled.div` width: 100%; diff --git a/src/components/user/mypage/ContentTab.tsx b/src/components/user/mypage/ContentTab.tsx index 623075ec..35b32858 100644 --- a/src/components/user/mypage/ContentTab.tsx +++ b/src/components/user/mypage/ContentTab.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import * as S from './ContentTab.styled'; import { Link, Outlet, useLocation } from 'react-router-dom'; -import { ROUTES } from '../../constants/routes'; +import { ROUTES } from '../../../constants/user/routes'; import ScrollWrapper from './ScrollWrapper'; import MovedInquiredLink from '../customerService/MoveInquiredLink'; diff --git a/src/components/user/mypage/Spinner.styled.ts b/src/components/user/mypage/Spinner.styled.ts index 3af3c123..db3608d0 100644 --- a/src/components/user/mypage/Spinner.styled.ts +++ b/src/components/user/mypage/Spinner.styled.ts @@ -10,7 +10,7 @@ const spin = keyframes` } `; -export const SpinnerWrapper = styled.div` +export const SpinnerContainer = styled.div` display: flex; justify-content: center; align-items: center; @@ -25,3 +25,11 @@ export const Circle = styled.div<{ $size: string; $color: string }>` border-radius: 50%; animation: ${spin} 1s linear infinite; `; + +export const SpinnerWrapperStyled = styled.div` + width: 100vw; + height: 60vh; + display: flex; + justify-content: center; + align-items: center; +`; diff --git a/src/components/user/mypage/Spinner.tsx b/src/components/user/mypage/Spinner.tsx index 1a44dcc0..9ee09bcc 100644 --- a/src/components/user/mypage/Spinner.tsx +++ b/src/components/user/mypage/Spinner.tsx @@ -7,9 +7,9 @@ interface SpinnerProps { const Spinner = ({ size = '50px', color = '#3e5879' }: SpinnerProps) => { return ( - + - + ); }; diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx index 046e1a36..ecb5ba25 100644 --- a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx +++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx @@ -9,7 +9,7 @@ export default function Inquiries() { const { myInquiriesData, isLoading } = useGetMyInquiries(); if (isLoading) { - return ; + return ; } if (!myInquiriesData || myInquiriesData?.length === 0) diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx index f59cf02d..e7a5168b 100644 --- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx +++ b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; -import type { MyInquiries } from '../../../../../models/activityLog'; +import type { MyInquiries } from '../../../../../../models/activityLog'; import * as S from './Inquiry.styled'; -import { My_INQUIRIES_MESSAGE } from '../../../../../constants/customerService'; +import { My_INQUIRIES_MESSAGE } from '../../../../../../constants/user/customerService'; interface InquiryProps { list: MyInquiries; diff --git a/src/components/user/mypage/joinedProject/MyJoinProjects.tsx b/src/components/user/mypage/joinedProject/MyJoinProjects.tsx index a7d2bdc2..b0e57953 100644 --- a/src/components/user/mypage/joinedProject/MyJoinProjects.tsx +++ b/src/components/user/mypage/joinedProject/MyJoinProjects.tsx @@ -11,8 +11,9 @@ const MyJoinProjects = () => { const { myJoinedProjectListData, isLoading } = useMyJoinedProjectList(); if (isLoading) { - return ; + return ; } + if (!myJoinedProjectListData) return; return ( diff --git a/src/components/user/mypage/joinedProject/Project.tsx b/src/components/user/mypage/joinedProject/Project.tsx index 920c8fa9..ebe89026 100644 --- a/src/components/user/mypage/joinedProject/Project.tsx +++ b/src/components/user/mypage/joinedProject/Project.tsx @@ -1,5 +1,5 @@ import * as S from './Project.styled'; -import BeginnerIcon from '../../../assets/beginner.svg'; +import BeginnerIcon from '../../../../assets/beginner.svg'; import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline'; import { JoinedProject } from '../../../../models/userProject'; diff --git a/src/components/user/mypage/myProfile/MyProfile.tsx b/src/components/user/mypage/myProfile/MyProfile.tsx index 0178e634..39a98518 100644 --- a/src/components/user/mypage/myProfile/MyProfile.tsx +++ b/src/components/user/mypage/myProfile/MyProfile.tsx @@ -36,7 +36,9 @@ const MyProfile = () => { - + diff --git a/src/components/user/mypage/myProfile/profile/Profile.tsx b/src/components/user/mypage/myProfile/profile/Profile.tsx index 27e74e4e..c13d5f4b 100644 --- a/src/components/user/mypage/myProfile/profile/Profile.tsx +++ b/src/components/user/mypage/myProfile/profile/Profile.tsx @@ -1,8 +1,8 @@ import * as S from './Profile.styled'; -import BeginnerIcon from '../../../../assets/beginner.svg'; +import BeginnerIcon from '../../../../../assets/beginner.svg'; import 'chart.js/auto'; import { ChartOptions } from 'chart.js'; -import { Link, useOutletContext } from 'react-router-dom'; +import { Link, useLocation, useOutletContext } from 'react-router-dom'; import { Radar } from 'react-chartjs-2'; import { useEffect } from 'react'; import MyProfileWrapper from '../MyProfileWrapper'; @@ -12,24 +12,27 @@ import { ROUTES } from '../../../../../constants/user/routes'; export default function Profile() { const { - myData, + userInfoData, scrollRef, - }: { myData: UserInfo; scrollRef: React.RefObject } = + }: { userInfoData: UserInfo; scrollRef: React.RefObject } = useOutletContext(); + const location = useLocation(); + const myPage = location.pathname.includes('mypage') ? true : false; useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTop = 0; } - }, [scrollRef]); + console.log(userInfoData); + }, [scrollRef, userInfoData]); return ( - {myData.nickname} - {Boolean(myData.beginner) && ( + {userInfoData.nickname} + {Boolean(userInfoData.beginner) && ( beginner @@ -40,8 +43,8 @@ export default function Profile() {
    - {myData.skills.length > 0 ? ( - myData.skills.map((skill) => ( + {userInfoData.skills.length > 0 ? ( + userInfoData.skills.map((skill) => (
  • )) ) : ( -
  • {PROFILE_DEFAULT_MESSAGE.skills}
    • +
  • + {myPage + ? PROFILE_DEFAULT_MESSAGE.mySkills + : PROFILE_DEFAULT_MESSAGE.skills} +
    • )}
@@ -62,14 +69,18 @@ export default function Profile() {
- {myData.skills.length > 0 ? ( - myData.positions + {userInfoData.skills.length > 0 ? ( + userInfoData.positions .sort() .map((position) => ( {position.name} )) ) : ( - {PROFILE_DEFAULT_MESSAGE.positions} + + {myPage + ? PROFILE_DEFAULT_MESSAGE.myPositions + : PROFILE_DEFAULT_MESSAGE.positions} + )}
@@ -77,15 +88,20 @@ export default function Profile() { - {myData.github || PROFILE_DEFAULT_MESSAGE.github} + + {userInfoData.github || + (myPage + ? PROFILE_DEFAULT_MESSAGE.myGithub + : PROFILE_DEFAULT_MESSAGE.github)} +
    - {myData.career?.length ? ( - myData.career?.map((career) => ( + {userInfoData.career?.length ? ( + userInfoData.career?.map((career) => (
  • {career.name} ({career.periodStart.slice(0, 10)}{' '} ~ {career.periodEnd.slice(0, 10)}{' '} @@ -93,7 +109,11 @@ export default function Profile() {
    • )) ) : ( -
  • {PROFILE_DEFAULT_MESSAGE.career}
    • +
  • + {myPage + ? PROFILE_DEFAULT_MESSAGE.myCareer + : PROFILE_DEFAULT_MESSAGE.career} +
    • )}
@@ -101,7 +121,12 @@ export default function Profile() { - {myData.bio || PROFILE_DEFAULT_MESSAGE.bio} + + {userInfoData.bio || + (myPage + ? PROFILE_DEFAULT_MESSAGE.myBio + : PROFILE_DEFAULT_MESSAGE.bio)} + @@ -123,7 +148,7 @@ export default function Profile() { - 비밀번호 재설정 + {myPage && 비밀번호 재설정} ); } diff --git a/src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts b/src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts index 51b088fa..35d4340c 100644 --- a/src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts +++ b/src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import PositionButton from '../../../common/positionButton/PositionButton'; +import PositionButton from '../../../../common/positionButton/PositionButton'; export const Container = styled.div``; diff --git a/src/components/user/userPage/userProfile/UserProfile.tsx b/src/components/user/userPage/userProfile/UserProfile.tsx index e3a2a9cb..5b0397c1 100644 --- a/src/components/user/userPage/userProfile/UserProfile.tsx +++ b/src/components/user/userPage/userProfile/UserProfile.tsx @@ -1,94 +1,43 @@ -import * as S from '../../../mypage/myProfile/MyProfile.styled'; -import BeginnerIcon from '../../../assets/beginner.svg'; -import { useParams } from 'react-router-dom'; +import * as S from '../../../user/mypage/myProfile/MyProfile.styled'; +import { Outlet, useLocation, useParams } from 'react-router-dom'; import { useUserProfileInfo } from '../../../../hooks/user/useUserInfo'; -import Title from '../../../common/title/Title'; +import { useModal } from '../../../../hooks/useModal'; +import { useRef } from 'react'; +import NoMyInfo from '../../mypage/myProfile/NoMyInfo'; +import Spinner from '../../mypage/Spinner'; +import ScrollWrapper from '../../mypage/ScrollWrapper'; +import Modal from '../../../common/modal/Modal'; const UserProfile = () => { const { userId } = useParams(); - const { userData } = useUserProfileInfo(Number(userId)); + const { userData, isLoading } = useUserProfileInfo(Number(userId)); + const { isOpen, message, handleModalOpen, handleModalClose } = useModal(); + const scrollRef = useRef(null); + + if (isLoading) { + return ; + } + + if (!userData) { + return ; + } return ( - <> - - 유저 정보 - - - - - - - {userData?.nickname} - - {userData?.beginner === true ? ( - beginner - ) : ( - '' - )} - - - - - - -
    - {userData?.skills.map((skill) => ( -
  • - {skill.name} - {skill.name} -
    • - ))} -
- - - - - - {userData?.positions.map((position) => ( - {position.name} - ))} - - - - - - {userData?.github} - - - - - -
    - {userData?.career?.map((career) => ( -
  • - {career.name} ( - {career.periodStart.slice(0, 10)} ~{' '} - {career.periodEnd.slice(0, 10)}{' '} - - {career.role}) -
    • - ))} -
- - - - - - {userData?.bio} - - - - - + + + 유저정보 + + + + + + + + {message} + + ); }; diff --git a/src/constants/sidebarItems.tsx b/src/constants/sidebarItems.tsx index dd76a964..ee3a9571 100644 --- a/src/constants/sidebarItems.tsx +++ b/src/constants/sidebarItems.tsx @@ -1,4 +1,4 @@ -import { ROUTES } from './routes'; +import { ROUTES } from './user/routes'; import { UserGroupIcon, PencilSquareIcon, diff --git a/src/constants/user/authConstants.ts b/src/constants/user/authConstants.ts index ac9b25a6..e64d3ef9 100644 --- a/src/constants/user/authConstants.ts +++ b/src/constants/user/authConstants.ts @@ -1,7 +1,7 @@ -import kakao from '../assets/kakao.svg'; -import naver from '../assets/naver.svg'; -import google from '../assets/google.svg'; -import github from '../assets/github.svg'; +import kakao from '../../assets/kakao.svg'; +import naver from '../../assets/naver.svg'; +import google from '../../assets/google.svg'; +import github from '../../assets/github.svg'; export const AUTH_MESSAGE = { isNotToken: '로그인 토큰이 존재하지 않습니다.', diff --git a/src/constants/user/myPageProfile.ts b/src/constants/user/myPageProfile.ts index d9ea3c55..9d35c905 100644 --- a/src/constants/user/myPageProfile.ts +++ b/src/constants/user/myPageProfile.ts @@ -1,7 +1,12 @@ export const PROFILE_DEFAULT_MESSAGE = { - github: '깃허브를 공유하세요.', - positions: '포지션을 선택해주세요.', - skills: '스킬을 선택해주세요.', - career: '경력을 기록하세요.', - bio: '소개를 적어주세요.', + myGithub: '깃허브를 공유하세요.', + myPositions: '포지션을 선택해주세요.', + mySkills: '스킬을 선택해주세요.', + myCareer: '경력을 기록하세요.', + myBio: '소개를 적어주세요.', + github: '깃허브 링크가 없습니다.', + positions: '선택한 포지션이 없습니다.', + skills: '선택한 스킬이 없습니다.', + career: '기록한 경력이 없습니다.', + bio: '소개가 없습니다', }; diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index c2f2a2ce..632497bb 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -2,17 +2,20 @@ import { Link } from 'react-router-dom'; import * as S from './Login.styled'; import Mainlogo from '../../assets/mainlogo.svg'; import { EnvelopeIcon, KeyIcon } from '@heroicons/react/24/outline'; -import InputText from '../../components/auth/InputText'; import Title from '../../components/common/title/Title'; import { z } from 'zod'; import { Controller, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import Button from '../../components/common/Button/Button'; -import { ERROR_MESSAGES, OAUTH_PROVIDERS } from '../../constants/authConstants'; +import { + ERROR_MESSAGES, + OAUTH_PROVIDERS, +} from '../../constants/user/authConstants'; import { useAuth } from '../../hooks/useAuth'; -import { ROUTES } from '../../constants/routes'; +import { ROUTES } from '../../constants/user/routes'; import { useModal } from '../../hooks/useModal'; import Modal from '../../components/common/modal/Modal'; +import InputText from '../../components/user/auth/InputText'; const loginSchema = z.object({ email: z diff --git a/src/pages/login/LoginSuccess.tsx b/src/pages/login/LoginSuccess.tsx index 125171ac..53a33a2b 100644 --- a/src/pages/login/LoginSuccess.tsx +++ b/src/pages/login/LoginSuccess.tsx @@ -1,12 +1,12 @@ import { useEffect } from 'react'; import { useNavigate, useSearchParams } from 'react-router-dom'; import useAuthStore from '../../store/authStore'; -import { ROUTES } from '../../constants/routes'; +import { ROUTES } from '../../constants/user/routes'; import * as S from './Login.styled'; import { Spinner } from '../../components/common/loadingSpinner/LoadingSpinner.styled'; import Modal from '../../components/common/modal/Modal'; import { useModal } from '../../hooks/useModal'; -import { AUTH_MESSAGE } from '../../constants/authConstants'; +import { AUTH_MESSAGE } from '../../constants/user/authConstants'; function LoginSuccess() { const [searchParams] = useSearchParams(); diff --git a/src/pages/user/apply/ApplyStep.styled.ts b/src/pages/user/apply/ApplyStep.styled.ts index 36f685eb..c98ce78a 100644 --- a/src/pages/user/apply/ApplyStep.styled.ts +++ b/src/pages/user/apply/ApplyStep.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Button from '../../components/common/Button/Button'; +import Button from '../../../components/common/Button/Button'; export const Container = styled.div` max-width: 100%; diff --git a/src/pages/user/changePassword/ChangePassword.tsx b/src/pages/user/changePassword/ChangePassword.tsx index 41e5327b..2f58dc4f 100644 --- a/src/pages/user/changePassword/ChangePassword.tsx +++ b/src/pages/user/changePassword/ChangePassword.tsx @@ -1,5 +1,5 @@ import { Link } from 'react-router-dom'; -import Mainlogo from '../../assets/mainlogo.svg'; +import Mainlogo from '../../../assets/mainlogo.svg'; import { z } from 'zod'; import { Controller, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; diff --git a/src/pages/user/customerService/faq/FAQ.styled.ts b/src/pages/user/customerService/faq/FAQ.styled.ts index 2efc6015..cebc2b9a 100644 --- a/src/pages/user/customerService/faq/FAQ.styled.ts +++ b/src/pages/user/customerService/faq/FAQ.styled.ts @@ -1,8 +1,7 @@ import styled from 'styled-components'; +import { SpinnerWrapperStyled } from '../../../../components/user/mypage/Spinner.styled'; -export const SpinnerWrapper = styled.div` - height: 60vh; -`; +export const SpinnerWrapper = styled(SpinnerWrapperStyled)``; export const Container = styled.section` margin-top: 2rem; diff --git a/src/pages/user/customerService/notice/Notice.styled.ts b/src/pages/user/customerService/notice/Notice.styled.ts index 60578597..42c0d321 100644 --- a/src/pages/user/customerService/notice/Notice.styled.ts +++ b/src/pages/user/customerService/notice/Notice.styled.ts @@ -1,9 +1,8 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; +import { SpinnerWrapperStyled } from '../../../../components/user/mypage/Spinner.styled'; -export const SpinnerWrapper = styled.div` - height: 60vh; -`; +export const SpinnerWrapper = styled(SpinnerWrapperStyled)``; export const Container = styled.section` margin-top: 2rem; diff --git a/src/pages/user/main/Create.tsx b/src/pages/user/main/Create.tsx index 233ff70d..038e74b3 100644 --- a/src/pages/user/main/Create.tsx +++ b/src/pages/user/main/Create.tsx @@ -1,5 +1,5 @@ import * as S from './About.styled'; -import createImg from '../../assets/create.svg'; +import createImg from '../../../assets/create.svg'; import { forwardRef } from 'react'; interface CreateProps { ref?: React.Ref; diff --git a/src/pages/user/main/HeroSection.tsx b/src/pages/user/main/HeroSection.tsx index 9ad2ebd7..a0a5e5c0 100644 --- a/src/pages/user/main/HeroSection.tsx +++ b/src/pages/user/main/HeroSection.tsx @@ -1,6 +1,6 @@ import * as S from './HeroSection.styled'; -import landimg from '../../assets/landing.svg'; -import DownArrow from '../../assets/arrow.svg'; +import landimg from '../../../assets/landing.svg'; +import DownArrow from '../../../assets/arrow.svg'; import { Link } from 'react-router-dom'; import { ROUTES } from '../../../constants/user/routes'; import Button from '../../../components/common/Button/Button'; diff --git a/src/pages/user/main/Manage.tsx b/src/pages/user/main/Manage.tsx index 1f0401da..7fbbcb74 100644 --- a/src/pages/user/main/Manage.tsx +++ b/src/pages/user/main/Manage.tsx @@ -1,5 +1,5 @@ import * as S from './About.styled'; -import manageImg from '../../assets/manage_project.svg'; +import manageImg from '../../../assets/manage_project.svg'; import { forwardRef } from 'react'; interface ManageProps { ref?: React.Ref; diff --git a/src/pages/user/main/Project.tsx b/src/pages/user/main/Project.tsx index 56dd61e5..6add8af6 100644 --- a/src/pages/user/main/Project.tsx +++ b/src/pages/user/main/Project.tsx @@ -1,5 +1,5 @@ import { forwardRef } from 'react'; -import ProjectImg from '../../assets/project.svg'; +import ProjectImg from '../../../assets/project.svg'; import * as S from './About.styled'; interface ProjectProps { diff --git a/src/pages/user/main/Result.tsx b/src/pages/user/main/Result.tsx index 2fa7bcb6..74aeeb45 100644 --- a/src/pages/user/main/Result.tsx +++ b/src/pages/user/main/Result.tsx @@ -1,5 +1,5 @@ import * as S from './About.styled'; -import resultImg from '../../assets/result_project.svg'; +import resultImg from '../../../assets/result_project.svg'; import { forwardRef } from 'react'; interface ResultProps { ref?: React.Ref; diff --git a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts index 712e8ed2..2990927e 100644 --- a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts +++ b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts @@ -5,6 +5,7 @@ export const Container = styled.div` justify-content: center; align-items: center; margin-top: 24px; + padding: 0 60px; `; export const Title = styled.h1` diff --git a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx index 50c61948..b60bf2d1 100644 --- a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx +++ b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx @@ -1,6 +1,6 @@ import * as S from './MyProjectVolunteersPass.styled'; import { useParams } from 'react-router-dom'; -import MainLogo from '../../../assets/mainlogo.svg'; +import MainLogo from '../../../../assets/mainlogo.svg'; import { Suspense, useMemo } from 'react'; import useGetProjectData from '../../../../hooks/user/useGetProjectData'; import { usePassNonPassList } from '../../../../hooks/user/usePassNonPassList'; diff --git a/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts b/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts index 24c116a3..e1d189db 100644 --- a/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts +++ b/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts @@ -3,6 +3,7 @@ import styled from 'styled-components'; export const Container = styled.div` display: flex; margin-top: 24px; + padding: 0 60px; `; export const ContentWrapper = styled.div` diff --git a/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.tsx b/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.tsx index f725c37e..d65bc856 100644 --- a/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.tsx +++ b/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.tsx @@ -1,6 +1,6 @@ import { useParams } from 'react-router-dom'; import * as S from './MyProjectVolunteer.styled'; -import MainLogo from '../../../assets/mainlogo.svg'; +import MainLogo from '../../../../assets/mainlogo.svg'; import { useMemo } from 'react'; import useGetProjectData from '../../../../hooks/user/useGetProjectData'; import { useModal } from '../../../../hooks/useModal'; diff --git a/src/pages/user/mypage/MyPage.tsx b/src/pages/user/mypage/MyPage.tsx index b70c6dda..b1b6d72f 100644 --- a/src/pages/user/mypage/MyPage.tsx +++ b/src/pages/user/mypage/MyPage.tsx @@ -6,7 +6,7 @@ import { PencilSquareIcon, BellIcon, } from '@heroicons/react/24/outline'; -import loadingImg from '../../assets/loadingImg.svg'; +import loadingImg from '../../../assets/loadingImg.svg'; import { ROUTES } from '../../../constants/user/routes'; import { useMyProfileInfo } from '../../../hooks/user/useMyInfo'; import Sidebar from '../../../components/common/sidebar/Sidebar'; diff --git a/src/pages/user/projectDetail/ProjectDetail.styled.ts b/src/pages/user/projectDetail/ProjectDetail.styled.ts index efe0746f..afcda36c 100644 --- a/src/pages/user/projectDetail/ProjectDetail.styled.ts +++ b/src/pages/user/projectDetail/ProjectDetail.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Button from '../../components/common/Button/Button'; +import Button from '../../../components/common/Button/Button'; export const Container = styled.div` width: 100%; diff --git a/src/pages/user/register/Register.tsx b/src/pages/user/register/Register.tsx index c1e32dfc..912db98a 100644 --- a/src/pages/user/register/Register.tsx +++ b/src/pages/user/register/Register.tsx @@ -1,6 +1,6 @@ import * as S from '../../login/Login.styled'; import { Link } from 'react-router-dom'; -import Mainlogo from '../../assets/mainlogo.svg'; +import Mainlogo from '../../../assets/mainlogo.svg'; import { z } from 'zod'; import { Controller, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; diff --git a/src/pages/user/userpage/UserPage.tsx b/src/pages/user/userpage/UserPage.tsx index 4fddff39..53e54e45 100644 --- a/src/pages/user/userpage/UserPage.tsx +++ b/src/pages/user/userpage/UserPage.tsx @@ -1,11 +1,10 @@ import { Outlet, useParams } from 'react-router-dom'; import * as S from '../mypage/MyPage.styled'; import { DocumentTextIcon, UserIcon } from '@heroicons/react/24/outline'; -import loadingImg from '../../assets/loadingImg.svg'; +import loadingImg from '../../../assets/loadingImg.svg'; import { ROUTES } from '../../../constants/user/routes'; import { useUserProfileInfo } from '../../../hooks/user/useUserInfo'; import Sidebar from '../../../components/common/sidebar/Sidebar'; -import ScrollWrapper from '../../../components/user/mypage/ScrollWrapper'; const UserPage = () => { const { userId } = useParams(); @@ -17,7 +16,7 @@ const UserPage = () => { icon: , }, { - label: '참여한 프로젝트 현황', + label: '참여 프로젝트', path: `${ROUTES.userpage}/${userId}/${ROUTES.userJoinedProject}`, icon: , }, @@ -32,9 +31,7 @@ const UserPage = () => { profileImage={isLoading ? loadingImg : userData?.profileImg} /> - - - + ); diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx index f26e47b3..e83c68c1 100644 --- a/src/routes/AppRoutes.tsx +++ b/src/routes/AppRoutes.tsx @@ -319,6 +319,7 @@ const AppRoutes = () => { { path: '', element: , + children: [{ index: true, element: }], }, { path: ROUTES.userJoinedProject, From 94b379d87a6c52a927bb20dc0b0a26e041c5574e Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Fri, 16 May 2025 17:11:56 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C,=20?= =?UTF-8?q?=EC=9E=90=EC=9E=98=ED=95=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/mypage/myProfile/profile/Profile.styled.ts | 4 ++++ src/components/user/mypage/myProfile/profile/Profile.tsx | 7 +++---- src/components/user/userPage/userProfile/UserProfile.tsx | 2 +- src/constants/user/myPageProfile.ts | 2 +- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/user/mypage/myProfile/profile/Profile.styled.ts b/src/components/user/mypage/myProfile/profile/Profile.styled.ts index 23176798..17e46c7d 100644 --- a/src/components/user/mypage/myProfile/profile/Profile.styled.ts +++ b/src/components/user/mypage/myProfile/profile/Profile.styled.ts @@ -88,6 +88,10 @@ export const IconWrapper = styled.div` border: 1px solid #f0f0f0; `; +export const PositionWrapper = styled.div` + flex-wrap: wrap; +`; + export const Bio = styled.p` white-space: pre-line; word-break: break-word; diff --git a/src/components/user/mypage/myProfile/profile/Profile.tsx b/src/components/user/mypage/myProfile/profile/Profile.tsx index c13d5f4b..85ab6adb 100644 --- a/src/components/user/mypage/myProfile/profile/Profile.tsx +++ b/src/components/user/mypage/myProfile/profile/Profile.tsx @@ -23,8 +23,7 @@ export default function Profile() { if (scrollRef.current) { scrollRef.current.scrollTop = 0; } - console.log(userInfoData); - }, [scrollRef, userInfoData]); + }, [scrollRef]); return ( @@ -68,7 +67,7 @@ export default function Profile() { -
+ {userInfoData.skills.length > 0 ? ( userInfoData.positions .sort() @@ -82,7 +81,7 @@ export default function Profile() { : PROFILE_DEFAULT_MESSAGE.positions} )} -
+ diff --git a/src/components/user/userPage/userProfile/UserProfile.tsx b/src/components/user/userPage/userProfile/UserProfile.tsx index 5b0397c1..fb30315d 100644 --- a/src/components/user/userPage/userProfile/UserProfile.tsx +++ b/src/components/user/userPage/userProfile/UserProfile.tsx @@ -1,5 +1,5 @@ import * as S from '../../../user/mypage/myProfile/MyProfile.styled'; -import { Outlet, useLocation, useParams } from 'react-router-dom'; +import { Outlet, useParams } from 'react-router-dom'; import { useUserProfileInfo } from '../../../../hooks/user/useUserInfo'; import { useModal } from '../../../../hooks/useModal'; import { useRef } from 'react'; diff --git a/src/constants/user/myPageProfile.ts b/src/constants/user/myPageProfile.ts index 9d35c905..eff0d123 100644 --- a/src/constants/user/myPageProfile.ts +++ b/src/constants/user/myPageProfile.ts @@ -8,5 +8,5 @@ export const PROFILE_DEFAULT_MESSAGE = { positions: '선택한 포지션이 없습니다.', skills: '선택한 스킬이 없습니다.', career: '기록한 경력이 없습니다.', - bio: '소개가 없습니다', + bio: '소개가 없습니다.', }; From a20620c4bdb5314c0dc27d2f64cee2c2c169ceb1 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Fri, 16 May 2025 18:22:11 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EA=B3=B5=EA=B3=A0=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=EC=A7=80=EC=9B=90=EC=9E=90=20=ED=95=A9/=EB=B6=88?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20click=20=EB=B2=94=EC=9C=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/projectCardLists/ProjectCardLists.tsx | 4 ++-- .../passNonPassList/DeleteButton.styled.ts | 8 +++++++- .../passNonPassList/DeleteButton.tsx | 12 +++++++++--- .../passNonPassList/PassNonPassItem.styled.ts | 2 +- .../passNonPassList/PassNonPassItem.tsx | 15 ++++++++------- .../passNonPassList/PassNonPassList.tsx | 2 +- .../MyProjectVolunteersPass.tsx | 2 +- 7 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/components/user/home/projectCardLists/ProjectCardLists.tsx b/src/components/user/home/projectCardLists/ProjectCardLists.tsx index 71090e5d..26cc365f 100644 --- a/src/components/user/home/projectCardLists/ProjectCardLists.tsx +++ b/src/components/user/home/projectCardLists/ProjectCardLists.tsx @@ -12,9 +12,9 @@ import Pagination from '../../../common/pagination/Pagination'; export type Display = 'flex' | 'grid'; export default function ProjectCardLists() { + const [display, setDisplay] = useState('grid'); const { projectListsData, isLoading } = useProjectCardListData(); const { searchFilters, handleUpdateFilters } = useSaveSearchFiltering(); - const [display, setDisplay] = useState('grid'); const handleChangePagination = (page: number) => { handleUpdateFilters('page', page); @@ -23,11 +23,11 @@ export default function ProjectCardLists() { useEffect(() => { if (projectListsData && Boolean(projectListsData.projects.length)) { setDisplay('grid'); + console.log(projectListsData); return; } setDisplay('flex'); console.log(searchFilters); - console.log(projectListsData); }, [projectListsData, searchFilters]); if (isLoading) diff --git a/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts b/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts index 89526f05..f5d6aa2a 100644 --- a/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts +++ b/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts @@ -5,10 +5,16 @@ export const DeleteButton = styled.button` color: #e69191; width: 1.2rem; height: 1.2rem; - background: ${({ theme }) => theme.color.white}; border-radius: 50%; } + &:hover { + transform: scale(1.1); + svg { + color: ${({ theme }) => theme.color.white}; + } + } + &:disabled { cursor: not-allowed; opacity: 0.9; diff --git a/src/components/user/manageProjects/passNonPassList/DeleteButton.tsx b/src/components/user/manageProjects/passNonPassList/DeleteButton.tsx index b1f6bbb8..9847456e 100644 --- a/src/components/user/manageProjects/passNonPassList/DeleteButton.tsx +++ b/src/components/user/manageProjects/passNonPassList/DeleteButton.tsx @@ -1,6 +1,6 @@ import { ButtonHTMLAttributes } from 'react'; import * as S from './DeleteButton.styled'; -import { XCircleIcon } from '@heroicons/react/24/outline'; +import { XMarkIcon } from '@heroicons/react/24/outline'; interface DeleteButtonProps extends ButtonHTMLAttributes { onClick: () => void; disabled: boolean; @@ -8,8 +8,14 @@ interface DeleteButtonProps extends ButtonHTMLAttributes { function DeleteButton({ onClick, disabled }: DeleteButtonProps) { return ( - - + ) => { + e.stopPropagation(); + onClick(); + }} + disabled={disabled} + > + ); } diff --git a/src/components/user/manageProjects/passNonPassList/PassNonPassItem.styled.ts b/src/components/user/manageProjects/passNonPassList/PassNonPassItem.styled.ts index f34d2d24..42dea82b 100644 --- a/src/components/user/manageProjects/passNonPassList/PassNonPassItem.styled.ts +++ b/src/components/user/manageProjects/passNonPassList/PassNonPassItem.styled.ts @@ -6,6 +6,7 @@ export const ItemWrapper = styled.li` align-items: center; width: 100%; padding: 1rem; + cursor: pointer; border: 1px solid ${({ theme }) => theme.color.grey}; border-radius: ${({ theme }) => theme.borderRadius.primary}; transition: all 0.2s ease; @@ -23,7 +24,6 @@ export const ItemWrapper = styled.li` export const NickName = styled.p` font-size: ${({ theme }) => theme.heading.small.fontSize}; font-weight: 400; - cursor: pointer; @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading.small.tabletFontSize}; diff --git a/src/components/user/manageProjects/passNonPassList/PassNonPassItem.tsx b/src/components/user/manageProjects/passNonPassList/PassNonPassItem.tsx index 78476d23..7ffed7c8 100644 --- a/src/components/user/manageProjects/passNonPassList/PassNonPassItem.tsx +++ b/src/components/user/manageProjects/passNonPassList/PassNonPassItem.tsx @@ -7,25 +7,26 @@ import * as S from './PassNonPassItem.styled'; interface PassNonPassItemProps { userInfo: ApplicantInfo; projectData: ProjectDetailPlusExtended; - hanldeStatus: ({ status, userId }: useMutationParams) => void; + handleStatus: ({ status, userId }: useMutationParams) => void; handleUserInfo: (userId: number) => void; } function PassNonPassItem({ userInfo, - hanldeStatus, + handleStatus, projectData, handleUserInfo, }: PassNonPassItemProps) { return ( - - handleUserInfo(userInfo.userId)}> - {userInfo.user.nickname} - + handleUserInfo(userInfo.userId)} + aria-label='지원자 이력보기' + > + {userInfo.user.nickname} - hanldeStatus({ status: 'WAITING', userId: userInfo.userId }) + handleStatus({ status: 'WAITING', userId: userInfo.userId }) } /> diff --git a/src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx b/src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx index 8571f160..d5d8b87a 100644 --- a/src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx +++ b/src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx @@ -27,7 +27,7 @@ function PassNonPassList({ diff --git a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx index b60bf2d1..bd59d00a 100644 --- a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx +++ b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx @@ -59,7 +59,7 @@ const MyProjectVolunteersPass = () => { )} - 불 합격자 리스트 + 불합격자 리스트 {projectData && ( Date: Fri, 16 May 2025 18:37:04 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94?= =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/home/projectCardLists/ProjectCardLists.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/user/home/projectCardLists/ProjectCardLists.tsx b/src/components/user/home/projectCardLists/ProjectCardLists.tsx index 26cc365f..3c62ab01 100644 --- a/src/components/user/home/projectCardLists/ProjectCardLists.tsx +++ b/src/components/user/home/projectCardLists/ProjectCardLists.tsx @@ -23,12 +23,10 @@ export default function ProjectCardLists() { useEffect(() => { if (projectListsData && Boolean(projectListsData.projects.length)) { setDisplay('grid'); - console.log(projectListsData); return; } setDisplay('flex'); - console.log(searchFilters); - }, [projectListsData, searchFilters]); + }, [projectListsData]); if (isLoading) return (