From 8cf9e15d379c53ff3789884635ab07c8f3bf2db2 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Thu, 17 Oct 2024 13:52:04 +0900 Subject: [PATCH 1/9] =?UTF-8?q?fix:=20firebase=20init=20=EC=A1=B0=EA=B1=B4?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/utils/checkCanUseFirebase.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/utils/checkCanUseFirebase.ts b/frontend/src/utils/checkCanUseFirebase.ts index 5f46a45cb..db504ca33 100644 --- a/frontend/src/utils/checkCanUseFirebase.ts +++ b/frontend/src/utils/checkCanUseFirebase.ts @@ -1,6 +1,6 @@ export default function checkCanUseFirebase() { if (location.hostname === 'localhost') return true; - if (location.protocol !== 'https') return false; + if (location.protocol !== 'https:') return false; if (navigator.userAgent.indexOf('KAKAO') >= 0) return false; return true; } From d1b58eb51d33adac6ac06264b06d71b83deb96e5 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Thu, 17 Oct 2024 13:56:28 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=83=81=ED=83=9C,?= =?UTF-8?q?=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Mypage/hook/useMyPage.ts | 116 ++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 frontend/src/pages/Mypage/hook/useMyPage.ts diff --git a/frontend/src/pages/Mypage/hook/useMyPage.ts b/frontend/src/pages/Mypage/hook/useMyPage.ts new file mode 100644 index 000000000..d16a59e8b --- /dev/null +++ b/frontend/src/pages/Mypage/hook/useMyPage.ts @@ -0,0 +1,116 @@ +import useEditMyInfo from '@_hooks/mutaions/useEditMyInfo'; +import useMyInfo from '@_hooks/queries/useMyInfo'; +import { useState, useRef, useEffect, ChangeEvent } from 'react'; +import { validateNickName } from '../validate'; + +export default function useMyPage() { + const { myInfo } = useMyInfo(); + const { mutate } = useEditMyInfo(); + const fileInput = useRef(null); + const [profile, setProfile] = useState(myInfo?.profile || ''); + const [nickname, setNickname] = useState(myInfo?.nickname || ''); + const [description, setDescription] = useState(myInfo?.description || ''); + const [selectedFile, setSelectedFile] = useState(''); + const [isEditing, setIsEditing] = useState(false); + const [isReset, setIsReset] = useState('false'); + const [isShownRest, setIsShownRest] = useState(false); + + useEffect(() => { + if (myInfo) { + setNickname(myInfo.nickname || ''); + setDescription(myInfo.description || ''); + setProfile(myInfo.profile || ''); + setSelectedFile(myInfo.profile || ''); + myInfo.profile && setIsShownRest(true); + } + }, [myInfo]); + + const handleEditClick = () => { + setIsEditing((prev) => !prev); + setSelectedFile(''); + }; + + const onChange = (e: ChangeEvent) => { + if (e.target.files && e.target.files[0]) { + setSelectedFile(e.target.files[0]); // 선택한 파일을 상태에 저장 + setIsShownRest(true); + setIsReset('false'); + } else { + setProfile(myInfo?.profile ?? ''); + return; + } + + const reader = new FileReader(); + reader.onload = () => { + if (reader.readyState === 2 && typeof reader.result === 'string') { + setProfile(reader.result); + } + }; + reader.readAsDataURL(e.target.files[0]); + }; + + const onUpload = async () => { + const formData = new FormData(); + + // 파일 추가 + formData.append('file', selectedFile); + + // 문자열 데이터 추가 + formData.append('nickname', nickname ?? ''); + formData.append('description', description ?? ''); + formData.append('isReset', isReset); + + try { + // 서버로 파일 및 데이터 전송 + mutate(formData); // FormData 객체 자체를 전달 + handleEditClick(); // 편집 모드 비활성화 + } catch (error) { + console.error('파일 업로드 실패', error); + } + }; + + const handleProfileClick = () => { + fileInput.current?.click(); // ProfileFrame 클릭 시 파일 선택창 열기 + }; + + const handleCancel = () => { + // 편집 취소시 기존 데이터 복구 + setProfile(myInfo?.profile || ''); + setNickname(myInfo?.nickname || ''); + setDescription(myInfo?.description || ''); + setIsEditing(false); + setIsReset('false'); + myInfo?.profile && setIsShownRest(false); + }; + + const handleDefaultProfile = () => { + setProfile(''); + setSelectedFile(''); + setIsReset('true'); + setIsShownRest(false); + }; + + const isValidMyInfo = validateNickName(nickname); + + return { + fileInput, + myInfo, + profile, + nickname, + description, + selectedFile, + isEditing, + isReset, + isShownRest, + isValidMyInfo, + setNickname, + setDescription, + setIsEditing, + handleEditClick, + onChange, + onUpload, + handleProfileClick, + handleCancel, + handleDefaultProfile, + }; +} From ba0dca0435f2bdcb097e8533b4ead91dbb8fd1cb Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Thu, 17 Oct 2024 13:59:28 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=EC=B5=9C=EB=8C=80,=EC=B5=9C?= =?UTF-8?q?=EC=86=8C=20=EB=8B=89=EB=84=A4=EC=9E=84=20=EC=A0=95=EC=B1=85=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 --- frontend/src/constants/poclies.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/constants/poclies.ts b/frontend/src/constants/poclies.ts index 43f7a5dd4..878f9087a 100644 --- a/frontend/src/constants/poclies.ts +++ b/frontend/src/constants/poclies.ts @@ -25,7 +25,8 @@ const POLICES = { maxDarakbangName: 40, - maxNicknameLength: 10, + minNicknameLength: 1, + maxNicknameLength: 12, entranceCodeLength: 7, }; From 8387772556cf0c73ab5840a400307a4199829e29 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Thu, 17 Oct 2024 14:00:59 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=EB=8B=89=EB=84=A4=EC=9E=84=20?= =?UTF-8?q?=EA=B8=B8=EC=9D=B4=20validate=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Mypage/validate.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 frontend/src/pages/Mypage/validate.ts diff --git a/frontend/src/pages/Mypage/validate.ts b/frontend/src/pages/Mypage/validate.ts new file mode 100644 index 000000000..1f785d500 --- /dev/null +++ b/frontend/src/pages/Mypage/validate.ts @@ -0,0 +1,8 @@ +import POLICIES from '@_constants/poclies'; + +export const validateNickName = (nickName: string) => { + return ( + POLICIES.minNicknameLength <= nickName.length && + nickName.length <= POLICIES.maxNicknameLength + ); +}; From 05e058a729073182125263892a14403e3e0ffdc6 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Thu, 17 Oct 2024 14:02:34 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20input=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=9C=EB=A0=A5=EC=9D=84=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20LabeledInput=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MineInfoCard/MineInfoCard.style.ts | 1 - .../Mypage/components/MineInfoCard/MineInfoCard.tsx | 11 +++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Mypage/components/MineInfoCard/MineInfoCard.style.ts b/frontend/src/pages/Mypage/components/MineInfoCard/MineInfoCard.style.ts index 76d66fd1c..313d46d0f 100644 --- a/frontend/src/pages/Mypage/components/MineInfoCard/MineInfoCard.style.ts +++ b/frontend/src/pages/Mypage/components/MineInfoCard/MineInfoCard.style.ts @@ -35,5 +35,4 @@ export const editSVG = () => css` export const input = (props: { theme: Theme }) => css` ${props.theme.typography.h5} - max-width: 60%; `; diff --git a/frontend/src/pages/Mypage/components/MineInfoCard/MineInfoCard.tsx b/frontend/src/pages/Mypage/components/MineInfoCard/MineInfoCard.tsx index 508d778c6..f09472646 100644 --- a/frontend/src/pages/Mypage/components/MineInfoCard/MineInfoCard.tsx +++ b/frontend/src/pages/Mypage/components/MineInfoCard/MineInfoCard.tsx @@ -2,6 +2,9 @@ import * as S from './MineInfoCard.style'; import ProfileFrame from '@_components/ProfileFrame/ProfileFrame'; import { useTheme } from '@emotion/react'; import Edit from '@_common/assets/edit.svg?url'; +import LabeledInput from '@_components/Input/MoimInput'; +import { ChangeEvent } from 'react'; +import { validateNickName } from '@_pages/Mypage/validate'; interface MineInfoCardProps { myInfo: { @@ -33,10 +36,14 @@ export default function MineInfoCard({ {isEditing && Edit} {isEditing ? ( - setNickname(e.target.value)} + onChange={(e: ChangeEvent) => + setNickname(e.target.value) + } + placeholder="닉네임을 1자에서 12자이하로 지어주세요" + validateFun={validateNickName} /> ) : ( {nickname} From c96a4b0cc910214be9a0c7bb3d87bc8562267fe1 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Thu, 17 Oct 2024 14:03:19 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20LabeldInput=EC=97=90=EC=84=9C=20tit?= =?UTF-8?q?le=EC=9D=84=20=EC=98=B5=EC=85=98=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Input/MoimInput.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Input/MoimInput.tsx b/frontend/src/components/Input/MoimInput.tsx index f29123f3a..dcf26050d 100644 --- a/frontend/src/components/Input/MoimInput.tsx +++ b/frontend/src/components/Input/MoimInput.tsx @@ -6,7 +6,7 @@ import { useTheme } from '@emotion/react'; export interface LabeledInputProps extends HTMLProps { - title: string; + title?: string; validateFun?: (value: T) => boolean; } @@ -49,10 +49,12 @@ export default function LabeledInput( return (