From 559742cb86eb68604a489840977b1c31859e95ec Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Mon, 13 May 2024 21:23:18 +0900 Subject: [PATCH 01/16] =?UTF-8?q?style:=20#181=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A1=9C=EA=B3=A0=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/MeeteamLogoLarge.svg | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/assets/MeeteamLogoLarge.svg b/src/assets/MeeteamLogoLarge.svg index ed210a6f..64d862a6 100644 --- a/src/assets/MeeteamLogoLarge.svg +++ b/src/assets/MeeteamLogoLarge.svg @@ -4,14 +4,14 @@ - - + + - + - - + + \ No newline at end of file From 7f9b5b98781b04cedd58778af8f35dff8648e552 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Mon, 13 May 2024 23:04:09 +0900 Subject: [PATCH 02/16] =?UTF-8?q?fix:=20#181=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EC=9A=A9=EC=95=BD?= =?UTF-8?q?=EA=B4=80=20=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/account/signIn/SignInPage.styled.ts | 19 ++++++++++++++++++- src/pages/account/signIn/SignInPage.tsx | 11 +++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/pages/account/signIn/SignInPage.styled.ts b/src/pages/account/signIn/SignInPage.styled.ts index 6dab3943..19a4ae18 100644 --- a/src/pages/account/signIn/SignInPage.styled.ts +++ b/src/pages/account/signIn/SignInPage.styled.ts @@ -24,13 +24,30 @@ const SignInPageLayout = styled(Account.AccountLayout)<{ $callBack?: boolean }>` letter-spacing: 0.0024rem; } - .sign_in__horizon { + .sign-in__horizon { all: unset; display: flex; width: 12.52rem; height: 0.15rem; background: #d9d9d9; } + + .sign-in_tos { + display: flex; + margin-top: 2.4rem; + } + + .sign-in_tos-marker { + color: var(--Form-border-error, #f85858); + } + + small { + /* Text/t4 */ + font-size: 1rem; + font-weight: 500; + line-height: 1.2rem; + letter-spacing: 0.002rem; + } `; const SignInPageButton = styled(Account.AccountButton)``; diff --git a/src/pages/account/signIn/SignInPage.tsx b/src/pages/account/signIn/SignInPage.tsx index 19aead51..843b89c8 100644 --- a/src/pages/account/signIn/SignInPage.tsx +++ b/src/pages/account/signIn/SignInPage.tsx @@ -43,13 +43,20 @@ const SignInPage = () => {
-
+
소셜 계정 로그인 -
+
+
+ + 소셜 계정 로그인으로 가입 시{' '} + 이용약관, 개인정보처리방침, 전자금융거래약관 + 에 동의함으로 처리됩니다 + +
); From 0a8ae7fa1ebb7c848157debcc51bf0c53011a86a Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Mon, 13 May 2024 23:06:41 +0900 Subject: [PATCH 03/16] =?UTF-8?q?fix:=20#181=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=8B=9C,=20alert=20=EC=B0=BD=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/Header.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 612ccd13..a4977358 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -53,12 +53,9 @@ const Header = () => { }; const handleLogOutButtonClick = () => { - const confirm = window.confirm('로그아웃 하시겠습니까?'); - if (confirm) { - signOut(); - navigate('/'); - setOpenDrop(false); - } + signOut(); + navigate('/'); + setOpenDrop(false); }; useEffect(() => { From f03ca1c3ac537ff9d686a10c73ae76d4b3cbb13a Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 14 May 2024 00:44:41 +0900 Subject: [PATCH 04/16] =?UTF-8?q?fix:=20#181=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=99=84=EB=A3=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=82=B4=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Congratulation.svg | 10 +++++----- .../account/complete/CompleteSignUpPage.styled.ts | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/assets/Congratulation.svg b/src/assets/Congratulation.svg index 75fb309f..d7668e07 100644 --- a/src/assets/Congratulation.svg +++ b/src/assets/Congratulation.svg @@ -1,9 +1,9 @@ - - + + - - + + - + diff --git a/src/pages/account/complete/CompleteSignUpPage.styled.ts b/src/pages/account/complete/CompleteSignUpPage.styled.ts index 410ab493..05eff610 100644 --- a/src/pages/account/complete/CompleteSignUpPage.styled.ts +++ b/src/pages/account/complete/CompleteSignUpPage.styled.ts @@ -2,7 +2,7 @@ import styled from 'styled-components'; import Account from '../Account.styled'; const CompleteSignUpLayout = styled(Account.AccountLayout)` - row-gap: 2.5rem; + row-gap: 5rem; `; const S = { CompleteSignUpLayout }; From 42bb144446d20d2b8703529e3117555d5aa93f1c Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 14 May 2024 22:52:46 +0900 Subject: [PATCH 05/16] =?UTF-8?q?fix:=20#181=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=99=84=EB=A3=8C=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=ED=9B=84,=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=20=EC=9D=B4=EB=8F=99=20=ED=8C=9D=EC=97=85=20=EB=9D=84?= =?UTF-8?q?=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/atom.tsx | 5 +++ .../account/complete/CompleteSignUpPage.tsx | 43 ++++++------------- src/pages/recruit/recruitPage/RecruitPage.tsx | 40 ++++++++++++++++- 3 files changed, 58 insertions(+), 30 deletions(-) diff --git a/src/atom.tsx b/src/atom.tsx index 227aba9c..65d022dc 100644 --- a/src/atom.tsx +++ b/src/atom.tsx @@ -242,3 +242,8 @@ export const needLoginModalState = atom({ type: '', }, }); + +export const signupModalState = atom({ + key: 'signupModalState', + default: false, +}); diff --git a/src/pages/account/complete/CompleteSignUpPage.tsx b/src/pages/account/complete/CompleteSignUpPage.tsx index c6e84373..580c28be 100644 --- a/src/pages/account/complete/CompleteSignUpPage.tsx +++ b/src/pages/account/complete/CompleteSignUpPage.tsx @@ -1,34 +1,24 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import S from './CompleteSignUpPage.styled'; -import { Modal, ModalPortal, PrimaryBtn } from '../../../components'; +import { PrimaryBtn } from '../../../components'; import { Congratulation } from '../../../assets'; import { useNavigate } from 'react-router-dom'; -import { fixModalBackground } from '../../../utils'; -import { useRecoilValue } from 'recoil'; -import { userState } from '../../../atom'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { userState, signupModalState } from '../../../atom'; const CompleteSignUpPage = () => { const navigate = useNavigate(); const user = useRecoilValue(userState); + const setSignupModalOpen = useSetRecoilState(signupModalState); - const [modalOpen, setModalOpen] = useState(false); - - useEffect(() => { - fixModalBackground(modalOpen); - }, [modalOpen]); - - const modalProps = { - title: '프로필을 추가해보세요!', - content: - '프로필 입력정보를 추가하면\n팀을 만날 확률이 늘어납니다.\n내 프로필로 이동하시겠습니끼?', - defaultBtn: { - title: '나중에 하기', - handleClick: () => navigate('/'), - }, - primaryBtn: { - title: '프로필로 이동', - handleClick: () => navigate(`/profile/${user?.userId}`), - }, + const handleClick = () => { + setSignupModalOpen(true); + navigate('/', { + state: { + userId: user?.userId, + }, + replace: true, + }); }; return ( @@ -38,12 +28,7 @@ const CompleteSignUpPage = () => { 회원가입을 축하합니다!
- setModalOpen(true)} /> - {modalOpen && ( - - - - )} + handleClick()} />
); diff --git a/src/pages/recruit/recruitPage/RecruitPage.tsx b/src/pages/recruit/recruitPage/RecruitPage.tsx index 8e170c11..238a0ae6 100644 --- a/src/pages/recruit/recruitPage/RecruitPage.tsx +++ b/src/pages/recruit/recruitPage/RecruitPage.tsx @@ -1,5 +1,13 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Dropdown, RecruitCard, Pagination, DetailedInput, NeedLogin } from '../../../components'; +import { + Dropdown, + RecruitCard, + Pagination, + DetailedInput, + NeedLogin, + ModalPortal, + Modal, +} from '../../../components'; import S from './RecruitPage.styled'; import { CancelWhite, @@ -21,6 +29,7 @@ import { pageState, previousLocationState, recruitFilterState, + signupModalState, } from '../../../atom'; import { getPostList } from '../../../service/recruit/board'; import { useQuery } from '@tanstack/react-query'; @@ -31,6 +40,7 @@ import { fixModalBackground } from '../../../utils'; const RecruitPage = () => { const navigate = useNavigate(); const location = useLocation(); + const fieldRef = useRef(null); const dropdownRef = useRef(null); const [searchKeyword, setSearchKeyword] = useState(''); @@ -286,6 +296,29 @@ const RecruitPage = () => { setSearchKeyword(filterState.keyword as any); }, [filterState.keyword]); + // 회원가입 이후 팝업창 띄우기 + const [signupModalOpen, setSignupModalOpen] = useRecoilState(signupModalState); + useEffect(() => { + fixModalBackground(signupModalOpen); + }, [signupModalOpen]); + + const signupModalProps = { + title: '프로필을 추가해보세요!', + content: + '프로필 입력정보를 추가하면\n팀을 만날 확률이 늘어납니다.\n내 프로필로 이동하시겠습니끼?', + defaultBtn: { + title: '나중에 하기', + handleClick: () => setSignupModalOpen(false), + }, + primaryBtn: { + title: '프로필로 이동', + handleClick: () => { + setSignupModalOpen(false); + navigate(`/profile/${location.state?.userId}`); + }, + }, + }; + return ( { )} + {signupModalOpen && ( + + + + )} ); }; From c1952ebba0febe40a66dd2e4c23f0aca6f733ff4 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Wed, 15 May 2024 17:39:36 +0900 Subject: [PATCH 06/16] =?UTF-8?q?fix:=20#181=20=EB=8B=89=EB=84=A4=EC=9E=84?= =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=ED=8F=BC=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?= =?UTF-8?q?=EA=B2=80=EC=82=AC=20UI=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Invalid.svg | 3 +++ src/assets/Valid.svg | 3 +++ src/assets/index.ts | 4 ++++ src/components/input/Input.styled.ts | 3 +++ src/components/input/Input.tsx | 1 + src/pages/account/signUp/SignUpData.ts | 6 ++++++ src/pages/profile/edit/ProfileEditData.ts | 7 +++++++ 7 files changed, 27 insertions(+) create mode 100644 src/assets/Invalid.svg create mode 100644 src/assets/Valid.svg diff --git a/src/assets/Invalid.svg b/src/assets/Invalid.svg new file mode 100644 index 00000000..2d428731 --- /dev/null +++ b/src/assets/Invalid.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/Valid.svg b/src/assets/Valid.svg new file mode 100644 index 00000000..e5a973cf --- /dev/null +++ b/src/assets/Valid.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/index.ts b/src/assets/index.ts index 8b5fbeaa..b2e75685 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -59,6 +59,8 @@ import MeeteamLogoLarge from './MeeteamLogoLarge.svg'; import Congratulation from './Congratulation.svg'; import NaverIcon from './NaverIcon.png'; import Clip from './Clip.svg'; +import Valid from './Valid.svg'; +import Invalid from './Invalid.svg'; export { Exit, @@ -122,4 +124,6 @@ export { Congratulation, NaverIcon, Clip, + Valid, + Invalid, }; diff --git a/src/components/input/Input.styled.ts b/src/components/input/Input.styled.ts index 0937e4bd..24b5d479 100644 --- a/src/components/input/Input.styled.ts +++ b/src/components/input/Input.styled.ts @@ -6,6 +6,7 @@ interface InputStyle { $arrow?: string; disabled?: boolean; invalid?: boolean; + $invalid?: string; } const InputLayout = styled.label<{ $width?: string }>` @@ -94,6 +95,8 @@ const Input = styled.input` }; }`} + ${props => props.invalid && props.$invalid && `background-image: url(${props.$invalid});`} + &::placeholder { color: #8e8e8e; } diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx index 9fba17ce..61ef777e 100644 --- a/src/components/input/Input.tsx +++ b/src/components/input/Input.tsx @@ -14,6 +14,7 @@ export interface Icon { $default: string; $focus?: string; $arrow: string; + $invalid?: string; } interface Input { diff --git a/src/pages/account/signUp/SignUpData.ts b/src/pages/account/signUp/SignUpData.ts index bba2eec1..7a8c795d 100644 --- a/src/pages/account/signUp/SignUpData.ts +++ b/src/pages/account/signUp/SignUpData.ts @@ -1,4 +1,5 @@ import { INPUT_VALIDATION } from '../../../constant'; +import { Valid, Invalid } from '../../../assets'; export interface Account { [key: string]: string; @@ -17,6 +18,11 @@ const SIGN_UP_DATA = [ placeholder: '닉네임을 입력해주세요', required: true, validation: INPUT_VALIDATION.nickname, + icon: { + $default: Valid, + $invalid: Invalid, + $arrow: 'right', + }, }, { label: '이름', diff --git a/src/pages/profile/edit/ProfileEditData.ts b/src/pages/profile/edit/ProfileEditData.ts index 5c294c25..0e21478b 100644 --- a/src/pages/profile/edit/ProfileEditData.ts +++ b/src/pages/profile/edit/ProfileEditData.ts @@ -8,6 +8,8 @@ import { Search, GrayCalendar, BlackCalendar, + Valid, + Invalid, } from '../../../assets'; import { INPUT_VALIDATION, TEXTAREA_VALIDATION } from '../../../constant'; @@ -16,6 +18,11 @@ const nickname = { placeholder: '닉네임', name: 'nickname', validation: INPUT_VALIDATION.nickname, + icon: { + $default: Valid, + $invalid: Invalid, + $arrow: 'right', + }, }; const userName = { From 3fa95d35c68fcd1e3b82c280c150f09702a6e5f3 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Wed, 15 May 2024 17:51:36 +0900 Subject: [PATCH 07/16] =?UTF-8?q?fix:=20#181=20=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=20=ED=8E=B8=EC=A7=91=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4?= =?UTF-8?q?,=20=ED=8F=AC=ED=8A=B8=ED=8F=B4=EB=A6=AC=EC=98=A4=EA=B0=80=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EC=8B=9C=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EB=AA=A9=EB=A1=9D=20UI=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/profile/Profile.styled.ts | 12 ++++++ src/pages/profile/edit/ProfileEditPage.tsx | 44 ++++++++++++---------- 2 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/pages/profile/Profile.styled.ts b/src/pages/profile/Profile.styled.ts index aa7900c9..5c49422a 100644 --- a/src/pages/profile/Profile.styled.ts +++ b/src/pages/profile/Profile.styled.ts @@ -157,6 +157,17 @@ const ProfileGrid = styled.div` } `; +const ProfileEmptyPortfolio = styled.div` + display: flex; + align-items: center; + justify-content: center; + margin: 15rem 0; + + h3 { + color: var(--State-unactive, #8e8e8e); + } +`; + const ProfileDescription = styled.blockquote` display: flex; margin-bottom: 2.4rem; @@ -207,6 +218,7 @@ const S = { ProfileArticle, ProfileRow, ProfileGrid, + ProfileEmptyPortfolio, ProfileDescription, ProfileButtonBox, ProfileTag, diff --git a/src/pages/profile/edit/ProfileEditPage.tsx b/src/pages/profile/edit/ProfileEditPage.tsx index c39e843e..4bab271c 100644 --- a/src/pages/profile/edit/ProfileEditPage.tsx +++ b/src/pages/profile/edit/ProfileEditPage.tsx @@ -578,25 +578,31 @@ const ProfileEditPage = () => { 포트폴리오 {DESCRIPTION.portfolio} - - {portfolioList && - portfolioList?.map( - portfolio => - portfolio && ( - - ) - )} - + {portfolioList?.length ? ( + + {portfolioList && + portfolioList?.map( + portfolio => + portfolio && ( + + ) + )} + + ) : ( + +

아직 작성한 포트폴리오가 없어요

+ + )}
From 1cde23e6633192a43a67564b30d0702fd3b458d5 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Wed, 15 May 2024 18:39:16 +0900 Subject: [PATCH 08/16] =?UTF-8?q?fix:=20#181=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EC=82=AD=EC=A0=9C=20=EC=8B=9C,=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=ED=8C=9D=EC=97=85=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=A4=91=EC=95=99=20=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/Modal.tsx | 12 +---- .../details/PortfolioDetailsPage.tsx | 44 ++++++++++++++++--- src/pages/recruit/recruitPage/RecruitPage.tsx | 2 + 3 files changed, 41 insertions(+), 17 deletions(-) diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx index 4d4ae709..3fb18c00 100644 --- a/src/components/modal/Modal.tsx +++ b/src/components/modal/Modal.tsx @@ -22,18 +22,10 @@ const Modal = ({ title, content, defaultBtn, primaryBtn }: Modal) => { {content}
- +
- +
diff --git a/src/pages/portfolio/details/PortfolioDetailsPage.tsx b/src/pages/portfolio/details/PortfolioDetailsPage.tsx index e1453818..bfa4c0ab 100644 --- a/src/pages/portfolio/details/PortfolioDetailsPage.tsx +++ b/src/pages/portfolio/details/PortfolioDetailsPage.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import S from './PortfolioDetails.styled'; import { DefaultBtn, @@ -7,11 +7,13 @@ import { LinkDetails, PortfolioInformation, PortfolioList, + Modal, + ModalPortal, } from '../../../components'; import { useNavigate, useParams } from 'react-router-dom'; import { useReadPortfolio, useDeletePortfolio } from '../../../hooks'; import { Image, BlobFile } from '../../../types'; -import { unzipFile } from '../../../utils'; +import { fixModalBackground, unzipFile } from '../../../utils'; import { useRecoilState } from 'recoil'; import { uploadImageListState } from '../../../atom'; import { TrashCan } from '../../../assets'; @@ -77,11 +79,34 @@ const PortfolioDetailsPage = () => { const { mutate: deletePortfolio } = useDeletePortfolio(); const handleDeletePortfoilo = () => { - const confirm = window.confirm('포트폴리오를 삭제 하시겠습니까?'); - if (confirm) { - deletePortfolio(portfolioId); - navigate('/portfolio/management'); - } + setModalOpen(true); + }; + + const [modalOpen, setModalOpen] = useState(false); + useEffect(() => { + fixModalBackground(modalOpen); + }, [modalOpen]); + + const modalProps = { + title: '포트폴리오 삭제', + content: + '삭제된 포트폴리오는 더이상\n프로필에서 확인할 수 없습니다.\n해당 포트폴리오를 완전히 삭제할까요?', + defaultBtn: { + title: '취소', + small: true, + handleClick: () => { + setModalOpen(false); + }, + }, + primaryBtn: { + title: '삭제', + small: true, + handleClick: () => { + deletePortfolio(portfolioId); + setModalOpen(false); + navigate('/portfolio/management'); + }, + }, }; return ( @@ -96,6 +121,11 @@ const PortfolioDetailsPage = () => { {portfolio?.isWriter && ( + {modalOpen && ( + + + + )} { '프로필 입력정보를 추가하면\n팀을 만날 확률이 늘어납니다.\n내 프로필로 이동하시겠습니끼?', defaultBtn: { title: '나중에 하기', + small: true, handleClick: () => setSignupModalOpen(false), }, primaryBtn: { title: '프로필로 이동', + small: true, handleClick: () => { setSignupModalOpen(false); navigate(`/profile/${location.state?.userId}`); From caff74f68644edeefdfcdd353060080f6668830d Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Wed, 15 May 2024 18:50:58 +0900 Subject: [PATCH 09/16] =?UTF-8?q?fix:=20#181=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EC=82=AD=EC=A0=9C=20=EC=9D=B4=ED=9B=84,?= =?UTF-8?q?=20=ED=8F=AC=ED=8A=B8=ED=8F=B4=EB=A6=AC=EC=98=A4=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20refetch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePortfolio.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/hooks/usePortfolio.ts b/src/hooks/usePortfolio.ts index 88ed2640..1a6b6a90 100644 --- a/src/hooks/usePortfolio.ts +++ b/src/hooks/usePortfolio.ts @@ -97,7 +97,11 @@ export const usePaginationPortfolioList = (size: number, pageParam: number) => { * @description 포트폴리오 삭제 API를 호출하는 hook입니다. */ export const useDeletePortfolio = () => { + const queryClient = useQueryClient(); return useMutation({ mutationFn: deletePortfolio, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: portfolioKeys.readPaginationPortfolioList(16) }); + }, }); }; From 603dca8e4949f92a821ccfd1548e1d527868d11c Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Thu, 16 May 2024 16:30:27 +0900 Subject: [PATCH 10/16] =?UTF-8?q?fix:=20#181=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?= =?UTF-8?q?=EC=82=AC=20UI(=ED=95=84=EC=88=98=20=EC=97=85=EB=A1=9C=EB=93=9C?= =?UTF-8?q?)=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../portfolio/card/PortfolioCard.tsx | 13 ++++ .../upload/PortfolioImageUpload.styled.ts | 30 ++++++++- .../image/upload/PortfolioImageUpload.tsx | 64 ++++++++++++++----- .../portfolio/edit/PortfolioEditPage.tsx | 6 +- 4 files changed, 93 insertions(+), 20 deletions(-) diff --git a/src/components/portfolio/card/PortfolioCard.tsx b/src/components/portfolio/card/PortfolioCard.tsx index ed5c2b18..7c4fa56a 100644 --- a/src/components/portfolio/card/PortfolioCard.tsx +++ b/src/components/portfolio/card/PortfolioCard.tsx @@ -6,6 +6,7 @@ import { OptionList } from '../..'; import { useRecoilState } from 'recoil'; import { uploadImageListState } from '../../../atom'; import { Image } from '../../../types'; +import { UseFormSetValue, FieldValues } from 'react-hook-form'; interface PortfolioCard { id?: string; @@ -18,6 +19,7 @@ interface PortfolioCard { isImageEditable?: boolean; clickNumber?: number; handleClick?: (id: string) => void; + setValue?: UseFormSetValue; } const MAX_IMAGE_SIZE_BYTES = 30 * 1024 * 1024; // 30MB @@ -34,6 +36,7 @@ const PortfolioCard = ({ isImageEditable, clickNumber, handleClick, + setValue, }: PortfolioCard) => { const navigate = useNavigate(); @@ -75,6 +78,11 @@ const PortfolioCard = ({ const imageList = [...uploadImageList]; imageList.splice((clickNumber as number) - 1, 1, uploadImage); setUploadImageList(imageList); + setValue?.('mainImage', imageList[0], { + shouldValidate: true, + shouldDirty: true, + shouldTouch: true, + }); }; }; @@ -82,6 +90,11 @@ const PortfolioCard = ({ const imageList = [...uploadImageList]; imageList.splice((clickNumber as number) - 1, 1); setUploadImageList(imageList); + setValue?.('mainImage', imageList[0] ?? '', { + shouldValidate: true, + shouldDirty: true, + shouldTouch: true, + }); }; const handleOptionClick = (name: string, optionName: string) => { diff --git a/src/components/portfolio/image/upload/PortfolioImageUpload.styled.ts b/src/components/portfolio/image/upload/PortfolioImageUpload.styled.ts index 53d19307..1d026c83 100644 --- a/src/components/portfolio/image/upload/PortfolioImageUpload.styled.ts +++ b/src/components/portfolio/image/upload/PortfolioImageUpload.styled.ts @@ -13,13 +13,17 @@ const PortfolioImageGrid = styled.div` column-gap: 1.6rem; `; -const PortfolioImageUpload = styled.div` +const PortfolioImageUpload = styled.div<{ $invalid?: boolean }>` position: relative; display: flex; align-items: center; justify-content: center; border-radius: 1rem; - border: 0.1rem solid var(--Form-border-default, #8e8e8e); + border: 0.1rem solid + ${props => + props.$invalid + ? 'var(--ButtonColors-Caution-outline-defaultLine, #F85858)' + : 'var(--Form-border-default, #8e8e8e)'}; background: var(--Grayscale-200, #f6f6f6); color: var(--Text-textColor2, var(--text-color-2, #373f41)); cursor: pointer; @@ -64,6 +68,26 @@ const PortfolioImageInput = styled.input` display: none; `; +const PortfolioImageUploadContainer = styled.div` + position: relative; + display: flex; +`; + +const PortfolioImageUploadErrorMessage = styled.small` + position: absolute; + bottom: -1.6rem; + left: 1rem; + white-space: nowrap; // 줄바꿈 방지 + color: var(--ButtonColors-Caution-outline-defaultLine, #f85858); + + /* Text/t4 */ + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 1.2rem; /* 120% */ + letter-spacing: 0.002rem; +`; + const S = { PortfolioImageUploadLayout, PortfolioImageGrid, @@ -71,6 +95,8 @@ const S = { PortfolioImageUploadRow, PortfolioImageUploadColumn, PortfolioImageInput, + PortfolioImageUploadContainer, + PortfolioImageUploadErrorMessage, }; export default S; diff --git a/src/components/portfolio/image/upload/PortfolioImageUpload.tsx b/src/components/portfolio/image/upload/PortfolioImageUpload.tsx index cc9f374c..597291ce 100644 --- a/src/components/portfolio/image/upload/PortfolioImageUpload.tsx +++ b/src/components/portfolio/image/upload/PortfolioImageUpload.tsx @@ -6,16 +6,27 @@ import { uploadImageListState } from '../../../../atom'; import { PortfolioCard } from '../../..'; import { BlobFile, Image } from '../../../../types'; import { unzipFile } from '../../../../utils'; +import { UseFormRegister, FieldValues, FormState, UseFormSetValue } from 'react-hook-form'; +import { INPUT_VALIDATION } from '../../../../constant'; const MAX_IMAGE_SIZE_BYTES = 30 * 1024 * 1024; // 30MB const MAX_IMAGE_COUNT = 15; interface PortfolioImage { + register: UseFormRegister; + formState: FormState; + setValue: UseFormSetValue; zipFileUrl?: string; fileOrder?: string[]; } -const PortfolioImageUpload = ({ zipFileUrl, fileOrder }: PortfolioImage) => { +const PortfolioImageUpload = ({ + register, + formState, + setValue, + zipFileUrl, + fileOrder, +}: PortfolioImage) => { const inputRef = useRef(null); const addImageList = () => { inputRef.current?.click(); @@ -54,6 +65,11 @@ const PortfolioImageUpload = ({ zipFileUrl, fileOrder }: PortfolioImage) => { reorderedImageList = [...reorderedImageList, reorderedImage]; if (i === fileOrder.length - 1) { setUploadImageList(reorderedImageList); + setValue('mainImage', reorderedImageList[0], { + shouldValidate: true, + shouldDirty: true, + shouldTouch: true, + }); } } } @@ -96,6 +112,13 @@ const PortfolioImageUpload = ({ zipFileUrl, fileOrder }: PortfolioImage) => { file: imageList[i], } as Image; setUploadImageList(prev => [...prev, uploadImage]); + i === 0 && + uploadImageList.length === 0 && + setValue('mainImage', uploadImage, { + shouldValidate: true, + shouldDirty: true, + shouldTouch: true, + }); }; } }; @@ -111,25 +134,32 @@ const PortfolioImageUpload = ({ zipFileUrl, fileOrder }: PortfolioImage) => { isEditable={true} isImageEditable={true} clickNumber={index + 1} + setValue={setValue} /> ))} {/* 이미지 추가 버튼 */} - - - - 포트폴리오 이미지 추가 - 이미지 추가 (최대 15장) - - (1920px X 1080px) - - - + + + + + 포트폴리오 이미지 추가 + 이미지 추가 (최대 15장) + + (1920px X 1080px) + + + + + {formState?.errors['mainImage']?.message as string} + + ); diff --git a/src/pages/portfolio/edit/PortfolioEditPage.tsx b/src/pages/portfolio/edit/PortfolioEditPage.tsx index 5cc35219..f4c24c4a 100644 --- a/src/pages/portfolio/edit/PortfolioEditPage.tsx +++ b/src/pages/portfolio/edit/PortfolioEditPage.tsx @@ -17,7 +17,7 @@ import { } from '../../../components'; import { useParams, useNavigate } from 'react-router-dom'; import { useForm, useFieldArray, SubmitHandler } from 'react-hook-form'; -import { Link, PortfolioPayload, Skill } from '../../../types'; +import { Image, Link, PortfolioPayload, Skill } from '../../../types'; import { useCreatePortfolio, useDebounce, @@ -36,6 +36,7 @@ import { useRecoilValue } from 'recoil'; import { uploadImageListState } from '../../../atom'; interface FormValues { + mainImage?: Image; title?: string; description?: string; field?: string; @@ -285,6 +286,9 @@ const PortfolioEditPage = () => { )} From 840b286b8ea831c9bcef39bb1a0155ad0b6af5b8 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Thu, 16 May 2024 17:01:41 +0900 Subject: [PATCH 11/16] =?UTF-8?q?fix:=20#181=20=ED=95=99=EC=82=AC=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=9E=85=ED=95=99=EB=85=84=EB=8F=84,=20=ED=95=99?= =?UTF-8?q?=EA=B3=BC,=20=ED=95=99=EA=B5=90=20=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=EC=8B=9C=20=EC=9E=90=EB=8F=99=EC=99=84=EC=84=B1=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../schoolCertification/SchoolCertificationPage.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/account/schoolCertification/SchoolCertificationPage.tsx b/src/pages/account/schoolCertification/SchoolCertificationPage.tsx index 5c023fc9..486922e5 100644 --- a/src/pages/account/schoolCertification/SchoolCertificationPage.tsx +++ b/src/pages/account/schoolCertification/SchoolCertificationPage.tsx @@ -9,7 +9,7 @@ import { useDebounce, } from '../../../hooks'; import { ComboBox } from '../../../components'; -import { useForm, SubmitHandler } from 'react-hook-form'; +import { useForm, SubmitHandler, Path } from 'react-hook-form'; import { DevTool } from '@hookform/devtools'; import { Department } from '../../../types'; @@ -105,6 +105,12 @@ const SchoolCertificationPage = () => { } }; + const autoCompleteOptionList = (name: string) => { + return optionList(name) + ?.filter(option => option.name.includes(watch(name as Path))) + .sort(); + }; + const checkExistYear = optionList('year')?.find( (year: { name: string }) => year.name === getValues('year') ); @@ -153,7 +159,7 @@ const SchoolCertificationPage = () => { register={register} setValue={setValue} getValues={getValues} - optionList={optionList(name)} + optionList={autoCompleteOptionList(name)} name={name} {...props} /> From 824d09ae6edfd31ad36490a60d009c8cef8db5d8 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Thu, 16 May 2024 20:50:32 +0900 Subject: [PATCH 12/16] =?UTF-8?q?fix:=20#181=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=EC=9D=B4=ED=9B=84=20=ED=95=99=EA=B5=90=20=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useAuth.ts | 7 ++++++- src/types/response.ts | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts index 01d71c82..bfcb69bf 100644 --- a/src/hooks/useAuth.ts +++ b/src/hooks/useAuth.ts @@ -37,7 +37,12 @@ export const useCheckExist = ({ onSuccess, setUserState }: AuthProps = {}) => { onSuccess: data => { if (data?.accessToken) { localStorage.setItem(ACCESS_TOKEN_KEY, data.accessToken); - setUserState?.({ userId: data.userId, nickname: data.nickname, imageUrl: data.imageUrl }); + setUserState?.({ + userId: data.userId, + nickname: data.nickname, + imageUrl: data.imageUrl, + university: data.university, + }); } if (data?.platformId) { localStorage.setItem(PLATFORM_ID, data.platformId); diff --git a/src/types/response.ts b/src/types/response.ts index b35b286d..3a67bb94 100644 --- a/src/types/response.ts +++ b/src/types/response.ts @@ -4,6 +4,7 @@ export interface UserReponse { userId?: string; nickname?: string; imageUrl?: string; + university?: string; accessToken?: string; refreshToken?: string; platformId?: string; From a1ab7946e8469603f10cd0baa70472ddb30877cc Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Thu, 16 May 2024 21:52:01 +0900 Subject: [PATCH 13/16] =?UTF-8?q?fix:=20#181=20window=20=EA=B0=80=20?= =?UTF-8?q?=EB=8B=A4=EC=8B=9C=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EB=90=A0=20?= =?UTF-8?q?=EB=95=8C=20refetch=20=EB=B0=A9=EC=A7=80=20=EC=A0=84=EC=97=AD?= =?UTF-8?q?=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 20d552ec..d823ff68 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,13 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; import ko from 'date-fns/locale/ko'; -const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + }, + }, +}); function App() { return ( From 9b9ff0eb5dc542d049ffbf8f4f638d225d8705e5 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Thu, 16 May 2024 23:41:14 +0900 Subject: [PATCH 14/16] =?UTF-8?q?fix:=20#181=20=EC=8B=9C=EC=9E=91=EC=9D=BC?= =?UTF-8?q?,=20=EB=A7=88=EA=B0=90=EC=9D=BC=20=EC=9E=85=EB=A0=A5=ED=8F=BC?= =?UTF-8?q?=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20UI(?= =?UTF-8?q?=EC=8B=9C=EC=9E=91=EC=9D=BC=EC=9D=B4=20=EB=A7=88=EA=B0=90?= =?UTF-8?q?=EC=9D=BC=EB=B3=B4=EB=8B=A4=20=EA=B0=99=EA=B1=B0=EB=82=98=20?= =?UTF-8?q?=EB=B9=A0=EB=A6=84)=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/portfolio/edit/PortfolioEditPage.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/pages/portfolio/edit/PortfolioEditPage.tsx b/src/pages/portfolio/edit/PortfolioEditPage.tsx index f4c24c4a..b96d44ab 100644 --- a/src/pages/portfolio/edit/PortfolioEditPage.tsx +++ b/src/pages/portfolio/edit/PortfolioEditPage.tsx @@ -34,6 +34,7 @@ import { Refresh } from '../../../assets'; import type ReactQuill from 'react-quill'; import { useRecoilValue } from 'recoil'; import { uploadImageListState } from '../../../atom'; +import { differenceInDays } from 'date-fns'; interface FormValues { mainImage?: Image; @@ -343,7 +344,17 @@ const PortfolioEditPage = () => { name={`startDate`} control={control} formState={formState} - {...PORTFOLIO_EDIT_DATA.startDate} + rules={{ + required: '시작일을 설정해주세요', + validate: (startDate: string) => { + return ( + differenceInDays( + new Date(watch('endDate') as string), + new Date(startDate) + ) < 0 && '시작일을 종료일보다 빠르게 설정해주세요' + ); + }, + }} /> Date: Thu, 16 May 2024 23:44:38 +0900 Subject: [PATCH 15/16] =?UTF-8?q?fix:=20#181=20=EC=BD=A4=EB=B3=B4=20?= =?UTF-8?q?=EB=B0=95=EC=8A=A4(ComboBox)=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20setValue=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comboBox/ComboBox.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/comboBox/ComboBox.tsx b/src/components/comboBox/ComboBox.tsx index 2fb9937e..3dcc1d2b 100644 --- a/src/components/comboBox/ComboBox.tsx +++ b/src/components/comboBox/ComboBox.tsx @@ -59,7 +59,11 @@ const ComboBox = ({ const clearInput = () => { const inputValue = getValues?.(name as Path); if (!optionList?.find(option => option.name === inputValue)) { - setValue(name as Path, '' as PathValue>); + setValue(name as Path, '' as PathValue>, { + shouldValidate: true, + shouldDirty: true, + shouldTouch: true, + }); } }; @@ -82,7 +86,11 @@ const ComboBox = ({ }; const handleOptionClick = (name: Path, optionName: PathValue>) => { - setValue(name, optionName); + setValue(name, optionName, { + shouldValidate: true, + shouldDirty: true, + shouldTouch: true, + }); clickOption?.(name); }; From 86b2fd1b2b1f55442e6db1e0c8cf1e55399c6f14 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Fri, 17 May 2024 02:59:43 +0900 Subject: [PATCH 16/16] =?UTF-8?q?style:=20footer=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20css=20=ED=95=A8=EC=88=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이전: padding: 8rem 24rem; - 이후: padding: 8rem clamp(10%, 24rem, 20%); --- src/components/footer/Footer.styled.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/footer/Footer.styled.ts b/src/components/footer/Footer.styled.ts index 75bc0480..68752cdb 100644 --- a/src/components/footer/Footer.styled.ts +++ b/src/components/footer/Footer.styled.ts @@ -3,7 +3,8 @@ import styled from 'styled-components'; const Footer = styled.article` display: flex; justify-content: space-between; - padding: 8rem 24rem; + padding: 8rem clamp(10%, 24rem, 20%); + // padding: 8rem 24rem; font-family: Pretendard; background: #f6f6f6; height: 31.7rem;