diff --git a/.gitignore b/.gitignore index cd73c34..15a8dde 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ config npm-debug.log* yarn-debug.log* yarn-error.log* + +.idea \ No newline at end of file diff --git a/src/assets/imgs/profile/Empty.svg b/src/assets/imgs/profile/Empty.svg new file mode 100644 index 0000000..c69a8db --- /dev/null +++ b/src/assets/imgs/profile/Empty.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/imgs/profile/Lock.svg b/src/assets/imgs/profile/Lock.svg new file mode 100644 index 0000000..1f2c576 --- /dev/null +++ b/src/assets/imgs/profile/Lock.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/imgs/profile/delete.svg b/src/assets/imgs/profile/delete.svg new file mode 100644 index 0000000..5d14021 --- /dev/null +++ b/src/assets/imgs/profile/delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/imgs/profile/write.svg b/src/assets/imgs/profile/write.svg new file mode 100644 index 0000000..04d8c5f --- /dev/null +++ b/src/assets/imgs/profile/write.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/home/profile/index.tsx b/src/components/home/profile/index.tsx index ab26524..ea0a9ff 100644 --- a/src/components/home/profile/index.tsx +++ b/src/components/home/profile/index.tsx @@ -1,10 +1,34 @@ -import React from "react"; - -const Profile =()=>{ -return( - <> - - -) -} -export default Profile; \ No newline at end of file +import React, { useState } from "react"; +import Profile from "src/components/home/profile/profile"; +import ProfileEdit from "src/components/home/profile/profileEdit"; +import ProfileSetting from "src/components/home/profile/profileSetting"; +import Layout from "src/components/common/layout/layout"; + +const MainProfile: React.FC = () => { + const [isEditing, setIsEditing] = useState(false); + const [isSetting, setIsSetting] = useState(false); + + const handleEditToggle = () => { + setIsEditing(!isEditing); + setIsSetting(false); + }; + + const handleSettingToggle = () => { + setIsSetting(!isSetting); + setIsEditing(false); + }; + + return ( + + {isEditing ? ( + + ) : isSetting ? ( + + ) : ( + + )} + + ); +}; + +export default MainProfile; diff --git a/src/components/home/profile/profile/index.tsx b/src/components/home/profile/profile/index.tsx new file mode 100644 index 0000000..9d38b8b --- /dev/null +++ b/src/components/home/profile/profile/index.tsx @@ -0,0 +1,60 @@ +import React, { useState } from "react"; +import * as S from "./style"; +import AvatarImg from "src/assets/imgs/header/AvatarImg.svg"; +import Pencil from "src/assets/imgs/profile/write.svg"; +import Empty from "src/assets/imgs/profile/Empty.svg"; +import { useGetProfileList } from "src/queries/profile/profile.query"; +import { renderEmptyMessage } from "src/utils/profile/renderEmptyMessage"; + +interface ProfileProps { + onEdit: () => void; + onSetting: () => void; +} + +const Profile: React.FC = ({ onEdit, onSetting }) => { + const [selected, setSelected] = useState(0); + const { data } = useGetProfileList(); + + const handleSelect = (index: number) => { + setSelected(index); + }; + + return ( + + + + + + + + + + + {data?.data.memberName} + + 프로필 수정 + 프로필 설정 + + + + + {["선배가 후배에게", "포트폴리오", "대회", "북마크"].map((text, index) => ( + handleSelect(index)} + > + {text} + + ))} + + + 빈 이미지 + {renderEmptyMessage(selected)} + + + + ); +}; + +export default Profile; diff --git a/src/components/home/profile/profile/style.ts b/src/components/home/profile/profile/style.ts new file mode 100644 index 0000000..b90210f --- /dev/null +++ b/src/components/home/profile/profile/style.ts @@ -0,0 +1,151 @@ +import styled from 'styled-components'; + +export const profileWrap = styled.main` + display: flex; + flex-direction: column; + margin-top: 4.44vh; + width: 100%; + height: calc(100% - 4.44vh); + align-items: center; + justify-content: center; +`; + +export const mainWrap = styled.main` + width: 72vw; + height: 80vh; + border-radius: 13px; + background: #fff; + box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12); + display: flex; + flex-direction: column; + align-items: center; + padding: 15px; +`; + +export const TitleWrap = styled.div` + display: flex; + align-items: center; + width: 100%; + height: 10vh; + margin-top: 4vh; + padding-left: 5vw; +`; + +export const AvatarContainer = styled.div` + position: relative; + margin-right: 1.25rem; +`; + +export const Avatar = styled.img` + width: 5rem; + height: 5rem; + border-radius: 50%; +`; + +export const ProfileInfo = styled.div` + display: flex; + flex-direction: column; +`; + +export const UserName = styled.h2` + font-size: 1.5em; + font-weight: bold; + margin: 0; +`; + +export const ButtonContainer = styled.div` + margin-top: 0.5rem; + display: flex; + gap: 0.5rem; +`; + +export const EditButton = styled.button` + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + padding: 0.5rem 1rem; + cursor: pointer; + + &:hover { + background-color: #45a049; + } +`; + +export const SettingsButton = styled.button` + background-color: #F3F3F3; + color: #1A9A18; + border: none; + border-radius: 5px; + padding: 0.5rem 1rem; + cursor: pointer; + + &:hover { + background-color: #EEEEEE; + } +`; + +export const PencilIconContainer = styled.div` + background-color: #178415; + width: 1.7rem; + height: 1.7rem; + border-radius: 50%; + position: absolute; + bottom: 0.18rem; + right: 0; + display: flex; + align-items: center; + justify-content: center; +`; + +export const PencilIcon = styled.img` + width: 1rem; + height: 1rem; + cursor: pointer; + z-index: 1; +`; + +export const SelectWrap = styled.div` + width: 100%; + height: 10vh; + display: flex; + align-items: center; + padding-left: 0.1vw; +`; + +export const Span = styled.span<{ isSelected: boolean }>` + cursor: pointer; + position: relative; + color: ${({ isSelected }) => (isSelected ? "#178415" : "#808080")}; + font-weight: ${({ isSelected }) => (isSelected ? "bold" : "normal")}; + font-size: 20px; + margin-left: 50px; + + &::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: ${({ isSelected }) => (isSelected ? "100%" : "0")}; + height: 2px; + background: #136D11; + transition: width 0.4s; + } +`; + +export const emptyWrap = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 6rem; + text-align: center; + + img { + margin-bottom: 1.5rem; + } + + span { + color: #808080; + font-size: 1.5rem; + } +`; \ No newline at end of file diff --git a/src/components/home/profile/profileEdit/index.tsx b/src/components/home/profile/profileEdit/index.tsx new file mode 100644 index 0000000..b3f11b5 --- /dev/null +++ b/src/components/home/profile/profileEdit/index.tsx @@ -0,0 +1,91 @@ +import React from "react"; +import * as S from "src/components/home/profile/profileEdit/style"; +import ReturnImg from "src/assets/imgs/profile/delete.svg"; +import AvatarImg from "src/assets/imgs/header/AvatarImg.svg"; +import Pencil from "src/assets/imgs/profile/write.svg"; +import Modal from "src/components/home/profile/profileEdit/profileCorrection/index"; +import useProfileEdit from "src/hooks/profile/useProfileEdit"; + +interface ProfileEditProps { + onCancel: () => void; +} + +const ProfileEdit: React.FC = ({ onCancel }) => { + const { + data, + isModalOpen, + currentField, + currentValue, + handleEditClick, + handleSave, + setIsModalOpen, + } = useProfileEdit(); + + return ( + + + + + + + + + + + {data?.data.memberId} + + + + + 기본정보 + + 학교 + + {data?.data.memberSchool} + handleEditClick("학교", data?.data.memberSchool || "학교 정보가 존재하지 않습니다.")}> + 수정 + + + + + 이름 + + {data?.data.memberName} + handleEditClick("이름", data?.data.memberName || "이름이 올바르지 않습니다.")}> + 수정 + + + + + 이메일 + + {data?.data.memberEmail} + handleEditClick("이메일", data?.data.memberEmail || "이메일이 존재하지 않습니다.")}> + 수정 + + + + + 비밀번호 + + ********** + handleEditClick("비밀번호", "**********")}> + 수정 + + + + + + + setIsModalOpen(false)} + title={`${currentField}`} + value={currentValue} + onSave={handleSave} + /> + + ); +}; + +export default ProfileEdit; diff --git a/src/components/home/profile/profileEdit/profileCorrection/index.tsx b/src/components/home/profile/profileEdit/profileCorrection/index.tsx new file mode 100644 index 0000000..e1518d2 --- /dev/null +++ b/src/components/home/profile/profileEdit/profileCorrection/index.tsx @@ -0,0 +1,98 @@ +import React from "react"; +import * as S from "./style"; +import { ModalProps } from "src/types/profile/Modal.type"; +import { schoolOptions } from "src/constants/profile/schoolOptions"; +import useModal from "src/hooks/profile/useModal"; + +const Modal: React.FC = ({ isOpen, onClose, title, value, onSave }) => { + const { + inputValue, + selectedSchool, + password, + setInputValue, + setSelectedSchool, + setPassword, + handleSave + } = useModal(value, title); + + if (!isOpen) return null; + + return ( + + + {title === "학교" ? ( + <> + 새로운 학교를 선택해주세요 + setSelectedSchool(e.target.value)} + > + {schoolOptions.map((school) => ( + + ))} + + + ) : title === "이름" ? ( + <> + 새로운 이름을 입력해주세요 + setInputValue(e.target.value)} + placeholder="새로운 이름 입력" + /> + + ) : title === "이메일" ? ( + <> + 새로운 이메일을 입력해주세요 + setInputValue(e.target.value)} + placeholder="새로운 이메일을 입력" + /> + + ) : title === "비밀번호" ? ( + <> + 새로운 비밀번호를 입력해주세요 + setInputValue(e.target.value)} + placeholder="새로운 비밀번호 입력" + /> + + ) : ( + <> + setInputValue(e.target.value)} + /> + + )} + + {(title === "학교" || title === "이름" || title === "이메일" || title === "비밀번호") && ( + <> + 기존의 비밀번호를 입력해주세요 + setPassword(e.target.value)} + placeholder="비밀번호 입력" + /> + + )} + + + 취소 + handleSave(onSave, onClose)}>저장 + + + + ); +}; + +export default Modal; diff --git a/src/components/home/profile/profileEdit/profileCorrection/style.ts b/src/components/home/profile/profileEdit/profileCorrection/style.ts new file mode 100644 index 0000000..340c223 --- /dev/null +++ b/src/components/home/profile/profileEdit/profileCorrection/style.ts @@ -0,0 +1,86 @@ +import styled from 'styled-components'; + +export const ModalOverlay = styled.main` + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + overflow: hidden; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 2; +`; + + + +export const ModalContainer = styled.main` + width: 52vw; + height: 55vh; + border-radius: 13px; + background: #fff; + box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12); + display: flex; + flex-direction: column; + align-items: center; + padding: 15px; + overflow: hidden; +`; + +export const Title = styled.span` + margin-top: 100px; + font-size: 20px; + margin-bottom: 20px; +`; + +export const pwTitle = styled.span` + margin-top: 50px; + font-size: 20px; + margin-bottom: 20px; +`; + +export const Select = styled.select` + border: 1px solid #D9D9D9; + border-radius: 10px; + width: 30vw; + height: 6vh; + font-size: 15px; + text-indent: 10px; +`; + +export const Input = styled.input` + border: 1px solid #D9D9D9; + border-radius: 10px; + width: 30vw; + height: 6vh; + font-size: 15px; + text-indent: 10px; +`; + +export const buttonWrap = styled.div` + margin-top: 6vh; +`; + +export const saveButton = styled.button` + width: 7vw; + height: 5vh; + border-radius: 15px; + border: 1px solid #66BB64; + background-color: #66BB64; + color: #FFFFFF; + font-size: 15px; + margin: 20px; +`; + +export const cancelButton = styled.button` + width: 7vw; + height: 5vh; + border-radius: 15px; + border: 1px solid #66BB64; + background-color: #FFFFFF; + color: #66BB64; + font-size: 15px; +`; diff --git a/src/components/home/profile/profileEdit/style.ts b/src/components/home/profile/profileEdit/style.ts new file mode 100644 index 0000000..2c46a46 --- /dev/null +++ b/src/components/home/profile/profileEdit/style.ts @@ -0,0 +1,164 @@ +import styled from 'styled-components'; + +export const ProfileWrap = styled.main` + display: flex; + flex-direction: column; + margin-top: 4.44vh; + width: 100%; + height: calc(100% - 4.44vh); + align-items: center; + justify-content: center; + overflow: hidden; +`; + +export const MainWrap = styled.main` + width: 72vw; + height: 80vh; + border-radius: 13px; + background: #fff; + box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12); + display: flex; + flex-direction: column; + align-items: center; + padding: 15px; + overflow: hidden;/ +`; + +export const TitleWrap = styled.div` + display: flex; + align-items: center; + width: 100%; + height: 10vh; + margin-top: 4vh; + padding-left: 5vw; + padding-right: 5vw; + box-sizing: border-box; + position: relative; +`; + +export const AvatarContainer = styled.div` + position: relative; + margin-right: 1.25rem; +`; + +export const Avatar = styled.img` + width: 5rem; + height: 5rem; + border-radius: 50%; +`; + +export const PencilIconContainer = styled.div` + background-color: #178415; + width: 1.7rem; + height: 1.7rem; + border-radius: 50%; + position: absolute; + bottom: 0.18rem; + right: 0; + display: flex; + align-items: center; + justify-content: center; +`; + +export const PencilIcon = styled.img` + width: 1rem; + height: 1rem; + cursor: pointer; + z-index: 1; +`; + +export const ProfileInfo = styled.div` + display: flex; + flex-direction: column; +`; + +export const UserName = styled.h2` + font-size: 1.5em; + font-weight: bold; + margin: 0; + word-wrap: break-word; +`; + +export const ReturnIcon = styled.img` + position: fixed; + right: 0; + width: 1.5rem; + height: 1.5rem; + cursor: pointer; + margin-right: 10vw; +`; + +export const DetailWrap = styled.div` + width: 63vw; + height: 50vh; + margin-top: 4vh; + background-color: #F7F7F7; + border-radius: 13px; + display: flex; + flex-direction: column; + overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; +`; + +export const SectionTitle = styled.span` + font-size: 1em; + margin-top: 1.3rem; + margin-left: 1.3rem; + margin-bottom: 1rem; + display: block; + color: #5C5C5C; +`; + +export const Detail = styled.div` + display: flex; + align-items: center; + padding: 0.5rem 1rem; + width: 100%; + box-sizing: border-box; +`; + +export const DetailLabel = styled.span` + font-size: 1em; + font-weight: bold; + color: #333; + width: 20%; + white-space: nowrap; + margin-left: 5vw; +`; + +export const DetailContainer = styled.div` + display: flex; + align-items: center; + width: 80%; + justify-content: space-between; + border-bottom: 1px solid #ddd; + padding: 0.5rem 0; + margin: 1rem 0; + box-sizing: border-box; +`; + +export const DetailValue = styled.span` + font-size: 1em; + color: #666; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-left: 0.2vw; +`; + +export const EditButton = styled.button` + background: none; + border: none; + color: #178415; + cursor: pointer; + font-size: 1em; + font-weight: bold; + flex-shrink: 0; + padding: 0.5rem 0; + text-align: center; + margin-right: 4rem; + display: flex; + justify-content: center; +`; diff --git a/src/components/home/profile/profileSetting/index.tsx b/src/components/home/profile/profileSetting/index.tsx new file mode 100644 index 0000000..921c655 --- /dev/null +++ b/src/components/home/profile/profileSetting/index.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import * as S from "src/components/home/profile/profileSetting/style"; +import ReturnImg from "src/assets/imgs/profile/delete.svg"; +import AvatarImg from "src/assets/imgs/header/AvatarImg.svg"; +import Pencil from "src/assets/imgs/profile/write.svg"; +import { useGetProfileList } from "src/queries/profile/profile.query"; + +interface ProfileEditProps { + onCancel: () => void; +} + +const ProfileSetting: React.FC = ({ onCancel }) => { + const { data } = useGetProfileList(); + return ( + + + + + + + + + + + {data?.data.memberId} + + + + + 기본정보 + + 학교 + + {data?.data.memberSchool} + 수정 + + + + 이름 + + {data?.data.memberName} + 수정 + + + + 이메일 + + {data?.data.memberEmail} + 수정 + + + + 비밀번호 + + ********** + 수정 + + + +
+ 정보수신동의 +
+ SOPO가 보내는 이메일을 받겠습니다. +
+
+ SOPO가 보내는 푸시알림을 앱으로 받겠습니다. +
+
+ + + ); +}; + +export default ProfileSetting; \ No newline at end of file diff --git a/src/components/home/profile/profileSetting/style.ts b/src/components/home/profile/profileSetting/style.ts new file mode 100644 index 0000000..5e6b2f8 --- /dev/null +++ b/src/components/home/profile/profileSetting/style.ts @@ -0,0 +1,166 @@ +import styled from 'styled-components'; + +export const ProfileWrap = styled.main` + display: flex; + flex-direction: column; + margin-top: 4.44vh; + width: 100%; + height: calc(100% - 4.44vh); + align-items: center; + justify-content: center; + //overflow: hidden; + overflow-y: auto; + overflow-x: hidden; +`; + +export const MainWrap = styled.main` + width: 72vw; + height: 80vh; + border-radius: 13px; + background: #fff; + box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12); + display: flex; + flex-direction: column; + align-items: center; + padding: 15px; + overflow: hidden;/ +`; + +export const TitleWrap = styled.div` + display: flex; + align-items: center; + width: 100%; + height: 10vh; + margin-top: 4vh; + padding-left: 5vw; + padding-right: 5vw; + box-sizing: border-box; + position: relative; +`; + +export const AvatarContainer = styled.div` + position: relative; + margin-right: 1.25rem; +`; + +export const Avatar = styled.img` + width: 5rem; + height: 5rem; + border-radius: 50%; +`; + +export const PencilIconContainer = styled.div` + background-color: #178415; + width: 1.7rem; + height: 1.7rem; + border-radius: 50%; + position: absolute; + bottom: 0.18rem; + right: 0; + display: flex; + align-items: center; + justify-content: center; +`; + +export const PencilIcon = styled.img` + width: 1rem; + height: 1rem; + cursor: pointer; + z-index: 1; +`; + +export const ProfileInfo = styled.div` + display: flex; + flex-direction: column; +`; + +export const UserName = styled.h2` + font-size: 1.5em; + font-weight: bold; + margin: 0; + word-wrap: break-word; +`; + +export const ReturnIcon = styled.img` + position: fixed; + right: 0; + width: 1.5rem; + height: 1.5rem; + cursor: pointer; + margin-right: 10vw; +`; + +export const DetailWrap = styled.div` + width: 63vw; + height: 50vh; + margin-top: 4vh; + background-color: #F7F7F7; + border-radius: 13px; + display: flex; + flex-direction: column; + overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; +`; + +export const SectionTitle = styled.span` + font-size: 1em; + margin-top: 1.3rem; + margin-left: 1.3rem; + margin-bottom: 1rem; + display: block; + color: #5C5C5C; +`; + +export const Detail = styled.div` + display: flex; + align-items: center; + padding: 0.5rem 1rem; + width: 100%; + box-sizing: border-box; +`; + +export const DetailLabel = styled.span` + font-size: 1em; + font-weight: bold; + color: #333; + width: 20%; + white-space: nowrap; + margin-left: 5vw; +`; + +export const DetailContainer = styled.div` + display: flex; + align-items: center; + width: 80%; + justify-content: space-between; + border-bottom: 1px solid #ddd; + padding: 0.5rem 0; + margin: 1rem 0; + box-sizing: border-box; +`; + +export const DetailValue = styled.span` + font-size: 1em; + color: #666; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-left: 0.2vw; +`; + +export const EditButton = styled.button` + background: none; + border: none; + color: #178415; + cursor: pointer; + font-size: 1em; + font-weight: bold; + flex-shrink: 0; + padding: 0.5rem 0; + text-align: center; + margin-right: 4rem; + display: flex; + justify-content: center; +`; diff --git a/src/components/home/profile/style.ts b/src/components/home/profile/style.ts new file mode 100644 index 0000000..6cb216a --- /dev/null +++ b/src/components/home/profile/style.ts @@ -0,0 +1 @@ +import styled from 'styled-components'; \ No newline at end of file diff --git a/src/constants/profile/schoolOptions.ts b/src/constants/profile/schoolOptions.ts new file mode 100644 index 0000000..f609a22 --- /dev/null +++ b/src/constants/profile/schoolOptions.ts @@ -0,0 +1,6 @@ +export const schoolOptions = [ + "대덕소프트웨어마이스터고등학교", + "부산소프트웨어마이스터고등학교", + "대구소프트웨어마이스터고등학교", + "광주소프트웨어마이스터고등학교" +]; \ No newline at end of file diff --git a/src/hooks/profile/useModal.ts b/src/hooks/profile/useModal.ts new file mode 100644 index 0000000..6086b6d --- /dev/null +++ b/src/hooks/profile/useModal.ts @@ -0,0 +1,33 @@ +import { useState } from "react"; +import { schoolOptions } from "src/constants/profile/schoolOptions"; + +const useModal = (value: string, title: string) => { + const [inputValue, setInputValue] = useState(value); + const [selectedSchool, setSelectedSchool] = useState(schoolOptions[0]); + const [password, setPassword] = useState(""); + + const handleSave = (onSave: (newValue: string) => void, onClose: () => void) => { + if (title === "학교") { + onSave(selectedSchool); + } else if (title === "이름") { + onSave(inputValue); + } else if (title === "비밀번호") { + onSave(password); + } else { + onSave(inputValue); + } + onClose(); + }; + + return { + inputValue, + selectedSchool, + password, + setInputValue, + setSelectedSchool, + setPassword, + handleSave + }; +}; + +export default useModal; diff --git a/src/hooks/profile/useProfileEdit.ts b/src/hooks/profile/useProfileEdit.ts new file mode 100644 index 0000000..46bfab9 --- /dev/null +++ b/src/hooks/profile/useProfileEdit.ts @@ -0,0 +1,31 @@ +import { useState } from "react"; +import { useGetProfileList } from "src/queries/profile/profile.query"; + +const useProfileEdit = () => { + const { data } = useGetProfileList(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [currentField, setCurrentField] = useState(null); + const [currentValue, setCurrentValue] = useState(""); + + const handleEditClick = (field: string, value: string) => { + setCurrentField(field); + setCurrentValue(value); + setIsModalOpen(true); + }; + + const handleSave = (newValue: string) => { + console.log(`${currentField} 수정됨: ${newValue}`); + }; + + return { + data, + isModalOpen, + currentField, + currentValue, + handleEditClick, + handleSave, + setIsModalOpen, + }; +}; + +export default useProfileEdit; diff --git a/src/pages/profile/page.tsx b/src/pages/profile/page.tsx index 2dcefcc..af0635d 100644 --- a/src/pages/profile/page.tsx +++ b/src/pages/profile/page.tsx @@ -1,7 +1,8 @@ import React from "react"; -import Profile from "src/components/home/profile"; +import MainProfile from "src/components/home/profile/index"; -const ProfilePage=()=>{ -return -} -export default ProfilePage; \ No newline at end of file +const ProfilePage: React.FC = () => { + return ; +}; + +export default ProfilePage; diff --git a/src/repositories/authRepository/authRepository.ts b/src/repositories/authRepository/authRepository.ts index 32841db..f877bf9 100644 --- a/src/repositories/authRepository/authRepository.ts +++ b/src/repositories/authRepository/authRepository.ts @@ -10,6 +10,7 @@ export interface AuthRepository { }): Promise; } + export interface LoginParmas extends Login{} export interface emailRespose{ authCode:string; diff --git a/src/repositories/authRepository/authRepositoryImpl.ts b/src/repositories/authRepository/authRepositoryImpl.ts index 3d6b3f0..c9e1b13 100644 --- a/src/repositories/authRepository/authRepositoryImpl.ts +++ b/src/repositories/authRepository/authRepositoryImpl.ts @@ -1,8 +1,8 @@ import { LoginResponse } from "src/types/auth/login.types"; import { AuthRepository, - NewAccessTokenResponse, - LoginParmas, + NewAccessTokenResponse, + LoginParams, SignUpParams, emailRespose } from "./authRepository"; @@ -10,7 +10,7 @@ import config from "src/config/config.json"; import axios from "axios"; class authRepositoryImpl implements AuthRepository { - public async login(loginData: LoginParmas): Promise { + public async login(loginData: LoginParams): Promise { try { const { data } = await axios.post(`${config.server}/auth/sign_in`, loginData); return data; diff --git a/src/styles/global.ts b/src/styles/global.ts index ba7eae4..b18af69 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -6,7 +6,7 @@ ${reset} * { margin: 0; padding: 0; - font-family: 'Pretendard-Regular' !important; + font-family: 'Pretendard' !important; } ` export default globalStyles; \ No newline at end of file diff --git a/src/types/profile/Modal.type.ts b/src/types/profile/Modal.type.ts new file mode 100644 index 0000000..00df3d7 --- /dev/null +++ b/src/types/profile/Modal.type.ts @@ -0,0 +1,7 @@ +export interface ModalProps { + isOpen: boolean; + onClose: () => void; + title: string; + value: string; + onSave: (newValue: string) => void; +} diff --git a/src/types/profile/profile.type.ts b/src/types/profile/profile.type.ts index 6a67a3b..e0c90db 100644 --- a/src/types/profile/profile.type.ts +++ b/src/types/profile/profile.type.ts @@ -4,5 +4,6 @@ export interface profileType { memberName: string; memberEmail: string; memberSchool: string; + memberPassword: string; }; } diff --git a/src/utils/profile/renderEmptyMessage.ts b/src/utils/profile/renderEmptyMessage.ts new file mode 100644 index 0000000..6fe32fc --- /dev/null +++ b/src/utils/profile/renderEmptyMessage.ts @@ -0,0 +1,14 @@ +export const renderEmptyMessage = (selected: number) => { + switch (selected) { + case 0: + return "게시물이 없습니다."; + case 1: + return "저장된 포트폴리오가 없습니다."; + case 2: + return "참가한 대회가 없습니다."; + case 3: + return "저장된 북마크가 없습니다."; + default: + return ""; + } +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ff3e80a..ca5b115 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9795,16 +9795,7 @@ string-natural-compare@^3.0.1: resolved "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-3.0.1.tgz" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -9899,14 +9890,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11092,16 +11076,7 @@ workbox-window@6.6.1: "@types/trusted-types" "^2.0.2" workbox-core "6.6.1" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": - version "7.0.0" - resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - -wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==