diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js new file mode 100644 index 0000000..0ba3164 --- /dev/null +++ b/src/assets/icons/index.js @@ -0,0 +1,8 @@ +export { default as nav_home } from './nav_home.svg'; +export { default as nav_home_active } from './nav_home_active.svg'; +export { default as nav_add_card } from './nav_add_card.svg'; +export { default as nav_add_card_active } from './nav_add_card_active.svg'; +export { default as nav_view_card } from './nav_view_card.svg'; +export { default as nav_view_card_active } from './nav_view_card_active.svg'; +export { default as nav_mypage } from './nav_mypage.svg'; +export { default as nav_mypage_active } from './nav_mypage_active.svg'; \ No newline at end of file diff --git a/src/assets/icons/nav_add_card.svg b/src/assets/icons/nav_add_card.svg new file mode 100644 index 0000000..a40e41c --- /dev/null +++ b/src/assets/icons/nav_add_card.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/nav_add_card_active.svg b/src/assets/icons/nav_add_card_active.svg new file mode 100644 index 0000000..ad728c9 --- /dev/null +++ b/src/assets/icons/nav_add_card_active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/nav_home.svg b/src/assets/icons/nav_home.svg new file mode 100644 index 0000000..8c6c074 --- /dev/null +++ b/src/assets/icons/nav_home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/nav_home_active.svg b/src/assets/icons/nav_home_active.svg new file mode 100644 index 0000000..4a33da2 --- /dev/null +++ b/src/assets/icons/nav_home_active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/nav_mypage.svg b/src/assets/icons/nav_mypage.svg new file mode 100644 index 0000000..922c64e --- /dev/null +++ b/src/assets/icons/nav_mypage.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/nav_mypage_active.svg b/src/assets/icons/nav_mypage_active.svg new file mode 100644 index 0000000..392d4eb --- /dev/null +++ b/src/assets/icons/nav_mypage_active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/nav_view_card.svg b/src/assets/icons/nav_view_card.svg new file mode 100644 index 0000000..d27f83f --- /dev/null +++ b/src/assets/icons/nav_view_card.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/nav_view_card_active.svg b/src/assets/icons/nav_view_card_active.svg new file mode 100644 index 0000000..4cd7218 --- /dev/null +++ b/src/assets/icons/nav_view_card_active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/CardInfo/CardInfo.jsx b/src/components/CardInfo/CardInfo.jsx index 8a9d8fe..e9d8181 100644 --- a/src/components/CardInfo/CardInfo.jsx +++ b/src/components/CardInfo/CardInfo.jsx @@ -6,6 +6,7 @@ import { Link } from 'react-router-dom'; export default function CardInfo({ name, + team, job, company, imageUrl, @@ -30,7 +31,7 @@ export default function CardInfo({ {name} - {job}, {company} + {job} / {team}, {company} diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx index ca26210..bd67e06 100644 --- a/src/components/SearchBar/SearchBar.jsx +++ b/src/components/SearchBar/SearchBar.jsx @@ -9,7 +9,7 @@ export default function SearchBar({ theme }) { const placeholderText = theme === 'white' ? '명함을 검색해주세요' - : '이름, 직책, 이메일, 휴대폰, 유선전화, 부서, 회사 등을 입력하세요'; + : '이름, 직책, 이메일, 휴대폰, 유선전화, 부서, 회사명 등을 입력하세요'; return ( diff --git a/src/components/TabBar/TabBar.jsx b/src/components/TabBar/TabBar.jsx index 5668e2a..ce0f6a2 100644 --- a/src/components/TabBar/TabBar.jsx +++ b/src/components/TabBar/TabBar.jsx @@ -1,37 +1,46 @@ import React from 'react'; import { useLocation } from 'react-router-dom'; import * as S from './TabBar.style'; -import { Link } from 'react-router-dom'; -import Icon from '../../components/Icon/Icon'; + +import { + nav_home, + nav_home_active, + nav_add_card, + nav_add_card_active, + nav_view_card, + nav_view_card_active, + nav_mypage, + nav_mypage_active, +} from '../../assets/icons'; const tabItems = [ { path: '/home', label: '홈', alt: '홈', - icon: , - activeIcon: , + icon: , + activeIcon: , }, { path: '/card/add', label: '명함 추가', alt: '명함 추가', - icon: , - activeIcon: , + icon: , + activeIcon: , }, { path: '/card', label: '명함 보기', alt: '명함 보기', - icon: , - activeIcon: , + icon: , + activeIcon: , }, { path: '/mypage', label: '마이페이지', alt: '마이페이지', - icon: , - activeIcon: , + icon: , + activeIcon: , }, ]; @@ -44,14 +53,12 @@ export default function TabBar() { {tabItems.map(({ path, label, alt, icon, activeIcon }) => { const isActive = currentPath === path; return ( - - - - {isActive ? activeIcon : icon} - - {label} - - + + + {isActive ? activeIcon : icon} + + {label} + ); })} diff --git a/src/components/TabBar/TabBar.style.jsx b/src/components/TabBar/TabBar.style.jsx index 211a9bd..e66ed16 100644 --- a/src/components/TabBar/TabBar.style.jsx +++ b/src/components/TabBar/TabBar.style.jsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { Link } from 'react-router-dom'; export const TabBar = styled.div` display: flex; @@ -18,15 +19,15 @@ export const TabBar = styled.div` box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.05); `; -export const Icon = styled.div` - /* border: 1px solid red; */ +export const Icon = styled(Link)` + width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 15px; - color: ${(props) => (props.isActive ? '#2D29FF' : '#C8C8C8')}; + color: ${(props) => (props.isactive ? '#2D29FF' : '#C8C8C8')}; `; export const IconImg = styled.div` @@ -46,7 +47,7 @@ export const Text = styled.span` display: flex; justify-content: center; align-items: center; - color: ${(props) => (props.isActive ? '#2D29FF' : '#C8C8C8')}; + color: ${(props) => (props.isactive ? '#2D29FF' : '#C8C8C8')}; font-size: 11px; line-height: 130%; letter-spacing: -0.55px; diff --git a/src/constants/cardData.js b/src/constants/cardData.js index 33368f6..ea4d17e 100644 --- a/src/constants/cardData.js +++ b/src/constants/cardData.js @@ -1,7 +1,9 @@ const sampleData = [ { + id: 1, name: '박유진', - job: '프로덕트 디자이너', + job: '사원', + team: '디자인팀', company: '숙명여자대학교', phone: '010-0000-1111', email: 'yj@wellet.co.kr', @@ -12,8 +14,10 @@ const sampleData = [ memo: '내일 미팅', }, { + id: 2, name: '한은영', - job: '프론트엔드 개발자', + job: '사원', + team: '개발팀', company: '숙명여자대학교', phone: '010-1111-2222', email: 'ey@wellet.co.kr', @@ -24,8 +28,10 @@ const sampleData = [ memo: '', }, { + id: 3, name: '이영희', - job: '백엔드 개발자', + job: '사원', + team: '개발팀', company: 'WELLET Corp.', phone: '010-2222-3333', email: 'yh@wellet.co.kr', @@ -36,8 +42,10 @@ const sampleData = [ memo: '', }, { + id: 4, name: '김현우', job: '프론트엔드 개발자', + team: '신규서비스팀', company: 'WELLET Corp.', phone: '010-3333-4444', email: 'hw@wellet.co.kr', @@ -48,8 +56,10 @@ const sampleData = [ memo: '', }, { + id: 5, name: '김디공', - job: '대표', + job: '사원', + team: '', company: '다공 부동산', phone: '010-4444-5555', email: 'dg@wellet.co.kr', @@ -60,8 +70,10 @@ const sampleData = [ memo: '', }, { + id: 6, name: '홍길동', - job: '대표 | 공인중개사', + job: '대표', + team: '', company: '동네공인중개사', phone: '010-5555-6666', email: 'gd@wellet.co.kr', @@ -72,8 +84,10 @@ const sampleData = [ memo: '', }, { + id: 7, name: '김인쇄', - job: '공인중개사', + job: '대표', + team: '', company: '인쇄픽부동산', phone: '010-6666-7777', email: 'is@wellet.co.kr', @@ -84,8 +98,10 @@ const sampleData = [ memo: '', }, { + id: 8, name: '박대기', - job: '보도본부 사회팀 / 기자', + job: '기자', + team: '보도본부 사회팀', company: 'KBS', phone: '010-7777-8888', email: 'dk@wellet.co.kr', @@ -96,9 +112,11 @@ const sampleData = [ memo: '', }, { + id: 9, name: '홍길동', - job: '팀장 / PD', - company: 'KBS VJ 특공대', + job: '팀장, PD', + team: '시사교양팀, VJ 특공대', + company: 'KBS', phone: '010-8888-9999', email: 'kd@wellet.co.kr', tel: '81-2-222-0123', diff --git a/src/constants/cardsSampleData.js b/src/constants/cardsSampleData.js index e131ee4..5ac65ab 100644 --- a/src/constants/cardsSampleData.js +++ b/src/constants/cardsSampleData.js @@ -1,7 +1,9 @@ const CARDS_SAMPLE_DATA = [ { - name: '박유정', - job: '프로덕트 디자이너', + id: 1, + name: '박유진', + job: '사원', + team: '디자인팀', company: '숙명여자대학교', phone: '010-0000-1111', email: 'yj@wellet.co.kr', @@ -12,8 +14,10 @@ const CARDS_SAMPLE_DATA = [ category: '비즈니스', }, { + id: 2, name: '한은영', - job: '프론트엔드 개발자', + job: '사원', + team: '개발팀', company: '숙명여자대학교', phone: '010-1111-2222', email: 'ey@wellet.co.kr', @@ -24,8 +28,10 @@ const CARDS_SAMPLE_DATA = [ category: '비즈니스', }, { + id: 3, name: '이영희', - job: '백엔드 개발자', + job: '사원', + team: '개발팀', company: 'WELLET Corp.', phone: '010-2222-3333', email: 'yh@wellet.co.kr', @@ -36,8 +42,10 @@ const CARDS_SAMPLE_DATA = [ category: '비즈니스', }, { + id: 4, name: '김현우', job: '프론트엔드 개발자', + team: '신규서비스팀', company: 'WELLET Corp.', phone: '010-3333-4444', email: 'hw@wellet.co.kr', @@ -48,8 +56,10 @@ const CARDS_SAMPLE_DATA = [ category: '비즈니스', }, { + id: 5, name: '김디공', - job: '대표', + job: '사원', + team: '', company: '다공 부동산', phone: '010-4444-5555', email: 'dg@wellet.co.kr', @@ -59,8 +69,10 @@ const CARDS_SAMPLE_DATA = [ category: '부동산', }, { + id: 6, name: '홍길동', - job: '대표 | 공인중개사', + job: '대표', + team: '', company: '동네공인중개사', phone: '010-5555-6666', email: 'gd@wellet.co.kr', @@ -70,8 +82,10 @@ const CARDS_SAMPLE_DATA = [ category: '부동산', }, { + id: 7, name: '김인쇄', - job: '공인중개사', + job: '대표', + team: '', company: '인쇄픽부동산', phone: '010-6666-7777', email: 'is@wellet.co.kr', @@ -81,8 +95,10 @@ const CARDS_SAMPLE_DATA = [ category: '부동산', }, { + id: 8, name: '박대기', - job: '보도본부 사회팀 / 기자', + job: '기자', + team: '보도본부 사회팀', company: 'KBS', phone: '010-7777-8888', email: 'dk@wellet.co.kr', @@ -92,9 +108,11 @@ const CARDS_SAMPLE_DATA = [ category: '방송사', }, { - name: '홍길돈', - job: '팀장 / PD', - company: 'KBS VJ 특공대', + id: 9, + name: '홍길동', + job: '팀장, PD', + team: '시사교양팀, VJ 특공대', + company: 'KBS', phone: '010-8888-9999', email: 'kd@wellet.co.kr', tel: '81-2-222-0123', diff --git a/src/nextDevelopItems/EmailLoginPage/EmailLoginPage.jsx b/src/nextDevelopItems/EmailLoginPage/EmailLoginPage.jsx index a1d090c..2182e5e 100644 --- a/src/nextDevelopItems/EmailLoginPage/EmailLoginPage.jsx +++ b/src/nextDevelopItems/EmailLoginPage/EmailLoginPage.jsx @@ -21,7 +21,7 @@ export default function EmailLoginPage() { 우리(WE)들이 사용하는 월렛 - + { const files = Array.from(event.target.files || event.dataTransfer.files); - setSelectedImage(files); + const newImages = files.slice(0, 2); + setSelectedImage((prevImages) => + [...prevImages.slice(0, 2), ...newImages].slice(0, 2) + ); }; const handleButtonClick = () => { @@ -92,147 +100,51 @@ export default function AddCardPage() { }; return ( - <> - -
- - - - 명함 추가하기 - 사진을 첨부 / 직접 입력하여 명함 추가하기 - - - - - - - +
+ + + + 명함 추가하기 + 사진을 첨부 / 직접 입력하여 명함 추가하기 + + + + + + + {activeBadge === '이미지로 입력' ? ( + - {activeBadge === '이미지로 입력' && ( - - 등록할 명함첩을 선택하세요 - - - - - 아래 버튼을 클릭하거나,
- 이미지 파일을 여기에 끌어다 놓으세요. - - - - - - 선택한 모든 명함 이미지는 앞면으로 인식합니다. - - - - - - 이미지는 한 번에 1장까지 업로드할 수 있습니다. - - - - - - 이미지 한 장 당 최대 크기는 1MB 입니다. - - - - - 파일 가져오기 - - - {selectedImage.length > 0 && ( - - {selectedImage.map((file, index) => ( - - ))} - - )} - - )} - - {activeBadge === '직접 입력' && ( - - 등록할 명함첩을 선택하세요 - - - - {!profileImage && } - - - 프로필 사진 등록 - - 사진 아이콘을 클릭하여 -
- 명함에 들어갈 프로필 사진을 등록하세요. - - - - - - - {inputFields.map((field, index) => ( - - ))} - - - - 그룹 - - - - - - )} - - - - 등록 - 취소 - - - + handleDragOver={handleDragOver} + handleDragLeave={handleDragLeave} + handleDrop={handleDrop} + /> + ) : ( + + )} + + + 등록 + 취소 + + ); } diff --git a/src/pages/AddCardPage/AddCardPage.style.jsx b/src/pages/AddCardPage/AddCardPage.style.jsx index 3abc774..48c9e45 100644 --- a/src/pages/AddCardPage/AddCardPage.style.jsx +++ b/src/pages/AddCardPage/AddCardPage.style.jsx @@ -83,7 +83,7 @@ export const AddBoxDescWrapper = styled.div` flex-direction: column; align-items: flex-start; gap: 4px; - padding-bottom: 6px; + padding-bottom: 14px; `; export const AddBoxDesc = styled.div` @@ -114,13 +114,12 @@ export const ImportImageBtnWrapper = styled.div` export const PreviewContainer = styled.div` display: flex; - flex-wrap: wrap; + flex-direction: column; + justify-content: center; + gap: 10px; `; -export const PreviewImage = styled.img` - height: 100px; - object-fit: cover; -`; +export const PreviewImage = styled.img``; export const ImportImageBtn = styled.button` display: flex; @@ -138,12 +137,6 @@ export const ImportImageBtn = styled.button` `; // 직접 입력으로 명함 추가 -export const FormContainer = styled.div` - display: flex; - flex-direction: column; - justify-content: flex-start; -`; - export const RegisterImageContainer = styled.div` display: flex; align-items: center; diff --git a/src/pages/AddCardPage/DirectInputForm.jsx b/src/pages/AddCardPage/DirectInputForm.jsx new file mode 100644 index 0000000..6929178 --- /dev/null +++ b/src/pages/AddCardPage/DirectInputForm.jsx @@ -0,0 +1,71 @@ +import React from 'react'; +import * as S from './AddCardPage.style'; +import Icon from '../../components/Icon/Icon'; +import { InputWrapper, BlueBadge } from '../../components'; + +export default function DirectInputForm({ + profileImage, + onUploadProfileImage, + handleProfileImageClick, + profileImageInputRef, + inputFields, + activeGroupBadge, + groupBadges, + setActiveGroupBadge, +}) { + return ( + + 등록할 명함첩을 선택하세요 + + + + {!profileImage && } + + + 프로필 사진 등록 + + 사진 아이콘을 클릭하여 +
+ 명함에 들어갈 프로필 사진을 등록하세요. + + + + + + + {inputFields.map((field, index) => ( + + ))} + + + + 그룹 + + + + + + ); +} diff --git a/src/pages/AddCardPage/ImageInputForm.jsx b/src/pages/AddCardPage/ImageInputForm.jsx new file mode 100644 index 0000000..1d565b8 --- /dev/null +++ b/src/pages/AddCardPage/ImageInputForm.jsx @@ -0,0 +1,76 @@ +import React from 'react'; +import * as S from './AddCardPage.style'; +import Icon from '../../components/Icon/Icon'; + +export default function ImageInputForm({ + selectedImage, + onUploadImage, + handleButtonClick, + imageInputRef, + isDragOver, + handleDragOver, + handleDragLeave, + handleDrop, +}) { + return ( + + + 등록할 명함첩을 선택하세요 + + + + + 아래 버튼을 클릭하거나,
+ 이미지 파일을 여기에 끌어다 놓으세요. + + + + + + 선택한 모든 명함 이미지는 앞면으로 인식합니다. + + + + + + 이미지는 한 번에 2장까지 업로드할 수 있습니다. + + + + + 이미지 한 장 당 최대 크기는 1MB 입니다. + + + {selectedImage.length < 2 && ( // 두 장 이하일 때만 파일 가져오기 버튼을 보여줌 + + 파일 가져오기 + + + )} + {selectedImage.length > 0 && ( + + {selectedImage.map((file, index) => ( + + ))} + + )} + + + ); +} diff --git a/src/pages/CardDetailPage/CardDetailPage.jsx b/src/pages/CardDetailPage/CardDetailPage.jsx index 62651d5..8a196a2 100644 --- a/src/pages/CardDetailPage/CardDetailPage.jsx +++ b/src/pages/CardDetailPage/CardDetailPage.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { useParams, Link } from 'react-router-dom'; import * as S from './CardDetailPage.style'; import Icon from '../../components/Icon/Icon'; @@ -28,6 +28,7 @@ export default function CardDetailPage() { imageUrl: '', name: '이름없음', job: '직책없음', + team: '팀없음', company: '회사없음', phone: '전화번호없음', email: '이메일없음', @@ -60,7 +61,9 @@ export default function CardDetailPage() { {data.name} - {data.job} + + {data.job} / {data.team} + {data.company} diff --git a/src/pages/CardDetailPage/CardDetailPage.style.jsx b/src/pages/CardDetailPage/CardDetailPage.style.jsx index df091bc..eaf1f86 100644 --- a/src/pages/CardDetailPage/CardDetailPage.style.jsx +++ b/src/pages/CardDetailPage/CardDetailPage.style.jsx @@ -1,5 +1,11 @@ import styled from '@emotion/styled'; +export const CardDetail = styled.div` + overflow-y: auto; + scrollbar-width: none; + padding-bottom: 85px; +`; + export const TopContainer = styled.div` width: 100%; height: 244px; @@ -7,7 +13,7 @@ export const TopContainer = styled.div` border-radius: 0px 0px 20px 20px; background: linear-gradient(111deg, #2d29ff 35.96%, #721cff 116.82%); position: relative; - padding: 20px; + padding: 24px 20px 12px; `; export const TopBar = styled.div` @@ -21,9 +27,11 @@ export const LeftContainer1 = styled.div` `; export const MyName = styled.div` - width: 60px; + width: 78px; + height: 22px; display: flex; justify-content: center; + align-items: center; `; export const EditIcon = styled.div` @@ -47,7 +55,7 @@ export const EditIcon = styled.div` export const MidBar = styled.div` width: 100%; display: inline-flex; - padding: 24px 0; + padding: 24px 0 12px; justify-content: center; `; @@ -75,7 +83,7 @@ export const BotBar = styled.div` flex-direction: column; align-items: center; justify-content: center; - gap: 8px; + gap: 16px; `; export const NameBox = styled.div` @@ -88,12 +96,11 @@ export const SubBar = styled.div` height: 5px; border-radius: 4px; background: #8776ff; - padding: 0 20px; + padding: 0px; `; export const BottomContainer = styled.div` width: 100%; - height: 724px; background: #fff; padding: 20px; box-sizing: border-box; diff --git a/src/pages/DetailEditPage/DetailEditPage.jsx b/src/pages/DetailEditPage/DetailEditPage.jsx index cc7014f..3118286 100644 --- a/src/pages/DetailEditPage/DetailEditPage.jsx +++ b/src/pages/DetailEditPage/DetailEditPage.jsx @@ -4,6 +4,7 @@ import * as S from './DetailEditPage.style'; import Icon from '../../components/Icon/Icon'; import { BlueBadge } from '../../components'; import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData'; +import ProfileImgDefault from '../../assets/images/profile-img-default.svg'; const InputWrapper = memo( ({ @@ -53,6 +54,7 @@ export default function DetailEditPage() { const { id } = useParams(); const [activeBadge, setActiveBadge] = useState(null); + const filteredData = CARDS_SAMPLE_DATA.find( (data) => data.name === decodeURIComponent(id) ); @@ -61,6 +63,10 @@ export default function DetailEditPage() { return filteredData ? badges : []; }); + const data = filteredData || { + imageUrl: '', + }; + const [profileImage, setProfileImage] = useState(null); const [selectedImage, setSelectedImage] = useState([]); @@ -85,6 +91,7 @@ export default function DetailEditPage() { name: filteredData.name, job: filteredData.job, company: filteredData.company, + team: filteredData.team, }); const [myContact, setMyContact] = useState({ @@ -126,6 +133,13 @@ export default function DetailEditPage() { value: myInfo.job, onChange: handleInfoChange, }, + { + label: '부서', + type: 'text', + name: 'team', + value: myInfo.team, + onChange: handleInfoChange, + }, { label: '휴대폰', type: 'tel', @@ -134,7 +148,7 @@ export default function DetailEditPage() { onChange: handleContactChange, }, { - label: '이메일 주소', + label: '이메일', type: 'email', name: 'email', value: myContact.email, @@ -210,108 +224,112 @@ export default function DetailEditPage() { navigate(`/card/${id}`); }; + const profileImageUrl = data.imageUrl || ProfileImgDefault; + return ( <> - - - - - - - - - - - 편집완료 - - - - - - - - + + + + + + + + + + + 편집완료 + + + + + - - - - - {isEditing.name ? ( - handleBlur('name')} - onFocus={() => handleFocus('name')} - autoFocus + + - ) : ( - <> - {myInfo.name} - handleEditClick('name')}> - - - - )} - - - 사진 아이콘을 클릭하여 명함에 들어갈 프로필 사진을 수정하세요 - - - - - - {InputData.map((field, index) => ( - handleBlur(field.name)} - onFocus={() => handleFocus(field.name)} - autoFocus={isEditing[field.name]} + + + + + + {isEditing.name ? ( + handleBlur('name')} + onFocus={() => handleFocus('name')} + autoFocus + /> + ) : ( + <> + {myInfo.name} + handleEditClick('name')}> + + + + )} + + + 사진 아이콘을 클릭하여 명함에 들어갈 프로필 사진을 수정하세요 + + + + + + {InputData.map((field, index) => ( + handleBlur(field.name)} + onFocus={() => handleFocus(field.name)} + autoFocus={isEditing[field.name]} + /> + ))} + + + + 그룹 + + - ))} - - - - 그룹 - - - - 그룹 추가 - - - - - - + + 그룹 추가 + + + + + + + ); } diff --git a/src/pages/DetailEditPage/DetailEditPage.style.jsx b/src/pages/DetailEditPage/DetailEditPage.style.jsx index 68ab119..c15f460 100644 --- a/src/pages/DetailEditPage/DetailEditPage.style.jsx +++ b/src/pages/DetailEditPage/DetailEditPage.style.jsx @@ -1,8 +1,14 @@ import styled from '@emotion/styled'; +export const DetailEdit = styled.div` + overflow-y: auto; + scrollbar-width: none; + padding-bottom: 85px; +`; + export const Header = styled.div` width: 100%; - height: 84px; + height: 76px; display: flex; align-items: center; justify-content: space-between; @@ -64,12 +70,13 @@ export const PicContainer = styled.div` `; export const ProfilePic = styled.div` + display: flex; + justify-content: center; + align-items: center; width: 68px; height: 68px; - object-fit: cover; border-radius: 68px; background: #2d29ff4c; - position: relative; `; export const Galleryicon = styled.button` diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index d69f5c4..b34352d 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -43,29 +43,29 @@ export default function HomePage() {

둘러보기

-

등록된 명함 찾아보기

+

최근 등록된 명함

 {filterdList.length > 0 && ( - <> - - {filterdList.map((data, index) => ( - - ))} - - - - 더 보기 - - - + + {filterdList.map((data, index) => ( + + ))} + )} + + navigate('/card')}> + + 더 보기 + + + ); } diff --git a/src/pages/HomePage/HomePage.style.jsx b/src/pages/HomePage/HomePage.style.jsx index 5e89605..ed26a25 100644 --- a/src/pages/HomePage/HomePage.style.jsx +++ b/src/pages/HomePage/HomePage.style.jsx @@ -20,6 +20,7 @@ export const MyCardContainer = styled.div` display: flex; justify-content: center; padding: 0 20px; + cursor: pointer; `; export const UpDownBarBox = styled.div` @@ -37,7 +38,7 @@ export const UpDownBar = styled.div` `; export const Container = styled.div` - padding: 20px; + padding: 20px 20px 0 20px; overflow: hidden; `; @@ -60,7 +61,18 @@ export const CardListTitle = styled.div` } `; -export const EditBtnWrapper = styled.button` +export const BottomMoreBtn = styled.div` + width: 100%; + display: flex; + justify-content: end; + padding: 0 10px; +`; + +export const EditBtnWrapper = styled.div` + padding: 10px; +`; + +export const EditBtn = styled.button` display: inline-flex; padding: 4px 10px; align-items: center; @@ -82,9 +94,3 @@ export const CardContainer = styled.div` flex-direction: column; gap: 10px; `; - -export const BottomMoreBtn = styled.div` - display: flex; - justify-content: end; - padding-top: 10px; -`; diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx index a6ff15f..97d6cad 100644 --- a/src/pages/MyPage/MyPage.jsx +++ b/src/pages/MyPage/MyPage.jsx @@ -1,7 +1,7 @@ import * as S from './MyPage.style'; import Icon from '../../components/Icon/Icon'; import React, { useState } from 'react'; -import { Link } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { HiOutlineLink } from 'react-icons/hi'; // 더미 데이터 @@ -35,103 +35,119 @@ export default function MyPage() { }, 3000); }; + const navigate = useNavigate(); + const handleEditButtonClick = () => { + navigate('/mypage/edit'); + }; + return ( <> - - - 편집하기 - - - - - - - 내 명함 - 프로필 사진 - {myInfo.name} - - - - - - + + + + + 내 명함 + + 편집하기 + + + + + + 프로필 사진 + + + + + + + {myInfo.name} + + + 내 정보 - 회사 + 회사명 {myInfo.company} - 직무 / 부서 + 직책 / 부서 {`${myInfo.job} / ${myInfo.team}`} - - 내 연락처 - - - 휴대폰 - - {myInfo.phone} - - + + 내 연락처 + + + 휴대폰 + + {myInfo.phone} + + + + + + + + 이메일 + + {myInfo.email} + + + + + 유선전화 + + {myInfo.tel} - - - - - 이메일 - - {myInfo.email} - - - - - 유선전화 - - {myInfo.tel} - - - - - 주소 - {myInfo.address} - - - - + + + + 주소 + {myInfo.address} + + + + - {/* QR 코드 모달창 */} - {isModalOpen && ( - - e.stopPropagation()}> - - - - - 내 명함 QR코드 - QR 이미지 - - - - 링크 복사하기 - - 저장하기 - - - - - )} + {/* QR 코드 모달창 */} + {isModalOpen && ( + + e.stopPropagation()}> + + + + + 내 명함 QR코드 + QR 이미지 + + + + 링크 복사하기 + + 저장하기 + + + + + )} - {/* 토스트 메시지 */} - {isToastVisible && ( - 링크가 복사되었습니다. - )} + {/* 토스트 메시지 */} + {isToastVisible && ( + 링크가 복사되었습니다. + )} + ); } diff --git a/src/pages/MyPage/MyPage.style.jsx b/src/pages/MyPage/MyPage.style.jsx index 572b25e..3a124a8 100644 --- a/src/pages/MyPage/MyPage.style.jsx +++ b/src/pages/MyPage/MyPage.style.jsx @@ -1,41 +1,77 @@ import styled from '@emotion/styled'; +export const MyPage = styled.div` + overflow-y: auto; + scrollbar-width: none; + padding-bottom: 85px; +`; + export const TopContainer = styled.div` width: 100%; height: 244px; - flex-shrink: 0; border-radius: 0px 0px 20px 20px; background: linear-gradient(111deg, #2d29ff 35.96%, #721cff 116.82%); position: relative; + padding: 24px 20px 12px; `; -export const EditButton = styled.a` +export const TopBar = styled.div` + width: 100%; + display: inline-flex; + justify-content: space-between; +`; + +export const LeftContainer1 = styled.div` + width: 60px; +`; + +export const MyCardTitle = styled.div` display: flex; justify-content: center; - align-items: center; - position: absolute; - top: 30px; - right: 20px; + color: var(--white, #fff); + font-size: 16px; + font-weight: 500; + line-height: 150%; + letter-spacing: -0.5px; + width: 60px; +`; + +export const EditButton = styled.a` padding: 4px 10px; + flex-direction: column; + gap: 8px; border-radius: 10px; background: var(--color-1, #ebf3fe); color: var(--primary, #2d29ff); font-size: 11px; + font-weight: 400; line-height: 150%; letter-spacing: -0.5px; + width: 60px; + justify-content: center; + display: flex; + align-items: center; + cursor: pointer; +`; + +export const MidBar = styled.div` + width: 100%; + display: inline-flex; + justify-content: space-between; +`; + +export const LeftContainer2 = styled.div` + width: 31px; `; export const ShareIconWrapper = styled.div` display: flex; justify-content: end; align-items: center; - position: absolute; - top: 74px; - right: 16px; width: 31px; height: 38px; cursor: pointer; - padding: 10px; + padding: 16px 10px; `; export const MyInfoSummaryWrapper = styled.div` @@ -43,20 +79,8 @@ export const MyInfoSummaryWrapper = styled.div` flex-direction: column; justify-content: center; align-items: center; - padding: 30px 0; - gap: 10px; -`; - -export const MyCardTitle = styled.div` - display: flex; - justify-content: center; - color: var(--white, #fff); - font-size: 16px; - font-weight: 500; - line-height: 150%; - letter-spacing: -0.5px; - width: 60px; - padding-bottom: 19px; + padding: 24px 0 0; + gap: 14px; `; export const ProfileImageWrapper = styled.div` @@ -70,6 +94,16 @@ export const ProfileImageWrapper = styled.div` background-color: white; `; +export const BotBar = styled.div` + width: 100%; + padding: 6px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 25px; +`; + export const MyName = styled.div` color: var(--white, #fff); font-size: 18px; @@ -78,21 +112,13 @@ export const MyName = styled.div` letter-spacing: -0.5px; `; -export const BottomBarWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - position: absolute; - bottom: 10px; - width: 100%; -`; - -export const BottomBar = styled.div` +export const SubBar = styled.div` width: 72px; height: 5px; border-radius: 4px; background: #8776ff; padding: 0 20px; + gap: 0px; `; // 내 상세 정보 @@ -100,7 +126,6 @@ export const BottomContainer = styled.div` display: flex; flex-direction: column; width: 100%; - height: 724px; background: #fff; padding: 20px; box-sizing: border-box; diff --git a/src/pages/MyPageEditPage/MyPageEditPage.jsx b/src/pages/MyPageEditPage/MyPageEditPage.jsx index 60be5da..70fd264 100644 --- a/src/pages/MyPageEditPage/MyPageEditPage.jsx +++ b/src/pages/MyPageEditPage/MyPageEditPage.jsx @@ -101,7 +101,7 @@ export default function MyPageEditPage() { onChange: handleContactChange, }, { - label: '이메일 주소', + label: '이메일', type: 'email', name: 'email', value: myContact.email, @@ -192,89 +192,91 @@ export default function MyPageEditPage() { return ( <> - - - - - - - - - - - 편집완료 - - - - - - - - + + + + + + + + + + + 편집완료 + + + + + - - - - - {isEditing.name ? ( - handleBlur('name')} - onFocus={() => handleFocus('name')} - autoFocus + + - ) : ( - <> - {myInfo.name} - handleEditClick('name')}> - - - - )} - - - 사진 아이콘을 클릭하여 명함에 들어갈 프로필 사진을 수정하세요 - - - - - - {InputData.map((field, index) => ( - handleBlur(field.name)} - onFocus={() => handleFocus(field.name)} - autoFocus={isEditing[field.name]} - /> - ))} - - + + + + + + {isEditing.name ? ( + handleBlur('name')} + onFocus={() => handleFocus('name')} + autoFocus + /> + ) : ( + <> + {myInfo.name} + handleEditClick('name')}> + + + + )} + + + 사진 아이콘을 클릭하여 명함에 들어갈 프로필 사진을 수정하세요 + + + + + + {InputData.map((field, index) => ( + handleBlur(field.name)} + onFocus={() => handleFocus(field.name)} + autoFocus={isEditing[field.name]} + /> + ))} + + + ); } diff --git a/src/pages/MyPageEditPage/MyPageEditPage.style.jsx b/src/pages/MyPageEditPage/MyPageEditPage.style.jsx index 2e88dd5..b85266e 100644 --- a/src/pages/MyPageEditPage/MyPageEditPage.style.jsx +++ b/src/pages/MyPageEditPage/MyPageEditPage.style.jsx @@ -1,8 +1,14 @@ import styled from '@emotion/styled'; +export const MyEdit = styled.div` + overflow-y: auto; + scrollbar-width: none; + padding-bottom: 96px; +`; + export const Header = styled.div` width: 100%; - height: 84px; + height: 76px; display: flex; align-items: center; justify-content: space-between; @@ -13,6 +19,7 @@ export const ArrowIcon = styled.div` display: flex; align-items: center; width: 60px; + cursor: pointer; `; export const WelletLogo = styled.div` @@ -106,6 +113,7 @@ export const InputNameBox = styled.input` font-size: 16px; font-weight: 600; `; + export const Name = styled.div` color: var(--grey4, #1a1a1a); font-size: 16px; diff --git a/src/pages/ViewCardPage/ViewCardPage.jsx b/src/pages/ViewCardPage/ViewCardPage.jsx index 4597941..b0b1f9e 100644 --- a/src/pages/ViewCardPage/ViewCardPage.jsx +++ b/src/pages/ViewCardPage/ViewCardPage.jsx @@ -83,6 +83,7 @@ export default function ViewCardPage() { key={index} name={data.name} job={data.job} + team={data.team} company={data.company} imageUrl={data.imageUrl} isDeleteMode={isDeleteMode}