From c5565eba0a693cb33fd4dd7d132d9fa309f93f10 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 7 May 2024 17:26:00 +0900 Subject: [PATCH 1/8] =?UTF-8?q?style:=20#163=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/Modal.styled.ts | 60 ++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/components/modal/Modal.styled.ts diff --git a/src/components/modal/Modal.styled.ts b/src/components/modal/Modal.styled.ts new file mode 100644 index 00000000..23aa85e6 --- /dev/null +++ b/src/components/modal/Modal.styled.ts @@ -0,0 +1,60 @@ +import styled from 'styled-components'; + +const ModalLayout = styled.div` + position: fixed; + left: 0; + top: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background: rgba(21, 21, 21, 0.4); +`; + +const ModalContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + padding: 1.8rem 2rem; + border-radius: 1rem; + border: 0.1rem solid var(--box_stroke, #e3e3e3); + background: var(--Grayscale-100, #f8fafb); +`; + +const ModalTitle = styled.h3` + display: flex; + margin-bottom: 2.8rem; + color: var(--text-color, #151515); + + /* Headline/h3 */ + font-size: 2rem; + font-weight: 600; + line-height: 2.4rem; /* 120% */ + letter-spacing: 0.004rem; +`; + +const ModalContent = styled.pre` + display: flex; + margin-bottom: 3.4rem; + text-align: center; + white-space: pre-wrap; // 줄바꿈 + + /* Body/body2/medium */ + font-size: 1.4rem; + font-weight: 500; + line-height: 2.4rem; + letter-spacing: 0.0028rem; +`; + +const ModalRow = styled.div<{ $gap?: string }>` + flex: 1; + display: flex; + flex-direction: row; + column-gap: ${props => props.$gap}; + align-items: center; +`; + +const S = { ModalLayout, ModalContainer, ModalTitle, ModalContent, ModalRow }; + +export default S; From f51ea505b3a5758037fc584afa0e2b7b5cb96bbe Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 7 May 2024 17:26:17 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20#163=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/index.ts | 2 ++ src/components/modal/Modal.tsx | 44 ++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 src/components/modal/Modal.tsx diff --git a/src/components/index.ts b/src/components/index.ts index c9903aea..6685592c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -147,6 +147,7 @@ import RefuseModal from './recruit/applicants/modal/RefuseModal'; import ApproveModal from './recruit/applicants/modal/ApproveModal'; import TabMenu from './tabMenu/TabMenu'; import PostingDelete from './recruit/recruitDetail/modal/postingDelete/PostingDelete'; +import Modal from './modal/Modal'; export { Header, @@ -289,4 +290,5 @@ export { ApproveModal, TabMenu, PostingDelete, + Modal, }; diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx new file mode 100644 index 00000000..4d4ae709 --- /dev/null +++ b/src/components/modal/Modal.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import S from './Modal.styled'; +import { DefaultBtn, PrimaryBtn } from '../index'; + +interface Modal { + title: string; + content: string; + defaultBtn: Button; + primaryBtn: Button; +} + +interface Button { + title: string; + handleClick: () => void; +} + +const Modal = ({ title, content, defaultBtn, primaryBtn }: Modal) => { + return ( + + + {title} + {content} + +
+ +
+
+ +
+ + + + ); +}; + +export default Modal; From 0261e9d8383b825ef7b522faa8e3779aaabaaeec Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 7 May 2024 17:26:41 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20#163=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?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=ED=8C=9D=EC=97=85=20=EB=9D=84=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account/complete/CompleteSignUpPage.tsx | 35 +++++++++++++++++-- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/src/pages/account/complete/CompleteSignUpPage.tsx b/src/pages/account/complete/CompleteSignUpPage.tsx index 813e435e..c6e84373 100644 --- a/src/pages/account/complete/CompleteSignUpPage.tsx +++ b/src/pages/account/complete/CompleteSignUpPage.tsx @@ -1,11 +1,35 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import S from './CompleteSignUpPage.styled'; -import { PrimaryBtn } from '../../../components'; +import { Modal, ModalPortal, 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'; const CompleteSignUpPage = () => { const navigate = useNavigate(); + const user = useRecoilValue(userState); + + 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}`), + }, + }; return ( @@ -14,7 +38,12 @@ const CompleteSignUpPage = () => { 회원가입을 축하합니다!
- navigate('/')} /> + setModalOpen(true)} /> + {modalOpen && ( + + + + )}
); From 05c2cf44edc8e6aa53037cc789b581f876e67cfc Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 7 May 2024 17:28:42 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20#163=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=EC=A4=91=EB=B3=B5=20=EC=8A=A4=ED=82=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=8B=9C=20=EC=A4=91=EB=B3=B5=20=EC=8A=A4=ED=82=AC?= =?UTF-8?q?=20=ED=8F=AC=ED=95=A8=EB=90=98=EB=8A=94=20=EC=9D=B4=EC=8A=88=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/profile/edit/ProfileEditPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/profile/edit/ProfileEditPage.tsx b/src/pages/profile/edit/ProfileEditPage.tsx index 25a3f203..32685a0b 100644 --- a/src/pages/profile/edit/ProfileEditPage.tsx +++ b/src/pages/profile/edit/ProfileEditPage.tsx @@ -233,6 +233,7 @@ const ProfileEditPage = () => { if (skillList.find(skill => newSkill.name === skill.name)) { alert('이미 추가한 스킬입니다.'); // 디자인 요청 setValue('skills', ''); + return; } setSkillList(prev => [...prev, newSkill]); setValue('skills', ''); @@ -254,7 +255,6 @@ const ProfileEditPage = () => { const addLink = () => { if (links.length === 10) { - alert('링크은 최대 10개까지 입력할 수 있습니다.'); // 디자인 요청 return; } prependLink({ description: 'Link', url: '' }); @@ -513,7 +513,7 @@ const ProfileEditPage = () => { 수상/활동 {DESCRIPTION.awards} addAward()} /> - + {awards?.map((award, index) => ( @@ -557,7 +557,7 @@ const ProfileEditPage = () => { 링크 {DESCRIPTION.links} addLink()} /> - + {links?.map((link, index) => ( Date: Tue, 7 May 2024 17:28:59 +0900 Subject: [PATCH 5/8] =?UTF-8?q?fix:=20#163=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=EB=A7=81=ED=81=AC=20=EC=B6=94=EA=B0=80=20=EC=8B=9C,=20aler?= =?UTF-8?q?t=20=EB=82=B4=20=EC=98=A4=ED=83=80=20=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/profile/edit/ProfileEditPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/profile/edit/ProfileEditPage.tsx b/src/pages/profile/edit/ProfileEditPage.tsx index 32685a0b..c39e843e 100644 --- a/src/pages/profile/edit/ProfileEditPage.tsx +++ b/src/pages/profile/edit/ProfileEditPage.tsx @@ -255,6 +255,7 @@ const ProfileEditPage = () => { const addLink = () => { if (links.length === 10) { + alert('링크는 최대 10개까지 입력할 수 있습니다.'); // 디자인 요청 return; } prependLink({ description: 'Link', url: '' }); From 40ff1944e0c7b11ef188c984cc908d417e33cc52 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 7 May 2024 17:29:14 +0900 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20#163=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EC=9E=91=EC=84=B1/=ED=8E=B8=EC=A7=91=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4,=20=EC=97=AD=ED=95=A0?= =?UTF-8?q?=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20UI=20?= =?UTF-8?q?=EB=AC=B8=EA=B5=AC=20=EC=98=A4=ED=83=80=20=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constant/validation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constant/validation.ts b/src/constant/validation.ts index e05ac976..ee7b5568 100644 --- a/src/constant/validation.ts +++ b/src/constant/validation.ts @@ -89,7 +89,7 @@ export const INPUT_VALIDATION = { required: '분야를 선택해주세요', }, role: { - required: '역할를 선택해주세요', + required: '역할을 선택해주세요', }, startDate: { required: '시작일을 설정해주세요', From 8a05b60fd87400f7789024e66d225593215975e2 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 7 May 2024 17:29:31 +0900 Subject: [PATCH 7/8] =?UTF-8?q?fix:=20#163=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EC=9E=91=EC=84=B1/=ED=8E=B8=EC=A7=91=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4,=20=EC=8A=A4=ED=82=AC,?= =?UTF-8?q?=20=EB=A7=81=ED=81=AC=20=EC=B6=94=EA=B0=80=20=EB=A1=9C=EC=A7=81?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../portfolio/edit/PortfolioEditPage.tsx | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/pages/portfolio/edit/PortfolioEditPage.tsx b/src/pages/portfolio/edit/PortfolioEditPage.tsx index b0af7809..5cc35219 100644 --- a/src/pages/portfolio/edit/PortfolioEditPage.tsx +++ b/src/pages/portfolio/edit/PortfolioEditPage.tsx @@ -191,14 +191,22 @@ const PortfolioEditPage = () => { const [skillList, setSkillList] = useState(portfolio?.skills ? portfolio?.skills : []); const addSkill = () => { + if (skillList.length === 10) { + alert('스킬은 최대 10개까지 입력할 수 있습니다.'); // 디자인 요청 + setValue('skills', ''); + return; + } const newSkill = { id: skills?.find(skill => skill.name === getValues('skills'))?.id, name: getValues('skills'), } as Skill; if (getValues('skills')?.length === 0) return; - if (!skillList.find(skill => newSkill.name === skill.name)) { - setSkillList(prev => [...prev, newSkill]); + if (skillList.find(skill => newSkill.name === skill.name)) { + alert('이미 추가한 스킬입니다.'); // 디자인 요청 + setValue('skills', ''); + return; } + setSkillList(prev => [...prev, newSkill]); setValue('skills', ''); }; @@ -216,10 +224,12 @@ const PortfolioEditPage = () => { control: control, }); - const addLink = (index: number) => { - if (index === -1 || getValues(`links.0.url`)) { - prependLink({ description: 'Link', url: '' }); + const addLink = () => { + if (links.length === 10) { + alert('링크는 최대 10개까지 입력할 수 있습니다.'); // 디자인 요청 + return; } + prependLink({ description: 'Link', url: '' }); }; // 상세 내용 @@ -416,7 +426,7 @@ const PortfolioEditPage = () => { 링크 - addLink(links.length - 1)} /> + addLink()} /> {links?.map((link, index) => ( { - navigate(`/portfolio/${portfolioId}`)} - /> + navigate(-1)} /> Date: Tue, 7 May 2024 18:26:28 +0900 Subject: [PATCH 8/8] =?UTF-8?q?fix:=20#163=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=EA=B8=B0=EC=A1=B4=EC=9D=98=20=EB=8C=80=ED=91=9C=20=EB=A9=94?= =?UTF-8?q?=EC=9D=BC=EC=9D=B4=20=EC=84=A0=ED=83=9D=EC=9D=B4=20=EC=95=88?= =?UTF-8?q?=EB=90=98=EC=96=B4=EC=9E=88=EB=8A=94=20=EC=9D=B4=EC=8A=88=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/radio/Radio.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/radio/Radio.tsx b/src/components/radio/Radio.tsx index 8a8795c7..a1ff1eb1 100644 --- a/src/components/radio/Radio.tsx +++ b/src/components/radio/Radio.tsx @@ -20,7 +20,7 @@ const Radio = ({ register, name, id, validation, state, handleClick, children }: type='radio' name={name} id={id} - defaultChecked={state} + checked={state} value={id} onClick={() => handleClick?.(id)} />