diff --git a/src/assets/backgrounds/setting.png b/src/assets/backgrounds/setting.png new file mode 100644 index 0000000..4132aaf Binary files /dev/null and b/src/assets/backgrounds/setting.png differ diff --git a/src/assets/icons/calendar.svg b/src/assets/icons/calendar.svg new file mode 100644 index 0000000..aa23069 --- /dev/null +++ b/src/assets/icons/calendar.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg new file mode 100644 index 0000000..05091e8 --- /dev/null +++ b/src/assets/icons/info.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/MyPage/BrandView.tsx b/src/components/MyPage/BrandView.tsx index c94bfb2..f6b7894 100644 --- a/src/components/MyPage/BrandView.tsx +++ b/src/components/MyPage/BrandView.tsx @@ -1,9 +1,11 @@ import { useState } from 'react'; -import { styled } from 'styled-components'; +import styled from 'styled-components'; import { ReactComponent as AddIcon } from '@/assets/icons/add.svg'; import { ReactComponent as ArrowRight } from '@/assets/icons/arrowRight.svg'; +import { ReactComponent as CalendarIcon } from '@/assets/icons/calendar.svg'; +import { ReactComponent as InfoIcon } from '@/assets/icons/info.svg'; import { ReactComponent as BrandLogoImage } from '@/assets/logos/brandLogo.svg'; import Card from '@/components/MyPage/Card'; import DateCard from '@/components/MyPage/DateCard'; @@ -11,16 +13,37 @@ import { BrandChip } from '@/components/common/Chip/BrandChip'; import { BrandCardModal } from '@/components/common/Modal/BrandCardModal'; import { userService } from '@/services/UserService'; +interface DateCardProps { + title: string; + description: string; + date: string; +} + export const BrandView = () => { const [isModalOpen, setIsModalOpen] = useState(false); + const [readyCards, setReadyCards] = useState([]); + const [progressCards, setProgressCards] = useState([]); + const [completeCards, setCompleteCards] = useState([]); - const openModal = () => { - setIsModalOpen(true); - }; + const openModal = () => setIsModalOpen(true); + const closeModal = () => setIsModalOpen(false); - const closeModal = () => { - setIsModalOpen(false); + const addDateCard = ( + title: string, + description: string, + date: string, + status: '준비' | '진행중' | '완료' + ) => { + const newCard = { title, description, date }; + if (status === '준비') { + setReadyCards((prev) => [...prev, newCard]); + } else if (status === '진행중') { + setProgressCards((prev) => [...prev, newCard]); + } else if (status === '완료') { + setCompleteCards((prev) => [...prev, newCard]); + } }; + return ( @@ -40,10 +63,18 @@ export const BrandView = () => { - - 브랜드 관리 - - + + + 브랜드 관리 + + + + + + + + + @@ -66,9 +97,17 @@ export const BrandView = () => { - {Dummy3.map((item) => ( + {Dummy3.map((item, index) => ( + ))} + {readyCards.map((item, index) => ( + { - {Dummy4.map((item) => ( + {Dummy4.map((item, index) => ( + + ))} + {progressCards.map((item, index) => ( { - {Dummy5.map((item) => ( + {Dummy5.map((item, index) => ( + + ))} + {completeCards.map((item, index) => ( { - + ); }; @@ -203,6 +258,14 @@ const BrandTextContainer = styled.div` gap: 12px; display: flex; `; +const BrandContainer = styled.div` + width: 100%; + height: 100%; + justify-content: flex-start; + align-items: center; + gap: 12px; + display: flex; +`; const BrandText = styled.div` text-align: center; color: ${({ theme }) => `${theme.color.gray800}`}; @@ -210,9 +273,6 @@ const BrandText = styled.div` word-wrap: break-word; `; const BrandMenuContainer = styled.div` - border-radius: 8px; - overflow: hidden; - border: 2px #efefef solid; justify-content: flex-start; align-items: center; display: flex; diff --git a/src/components/MyPage/Card.tsx b/src/components/MyPage/Card.tsx index 60bc5bd..36578a5 100644 --- a/src/components/MyPage/Card.tsx +++ b/src/components/MyPage/Card.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components'; const Container = styled.div` - width: 300px; - height: auto; + width: 100%; + height: 100%; padding: 20px; background: ${({ theme }) => `${theme.color.white}`}; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13); @@ -16,7 +16,7 @@ const Container = styled.div` const InnerContainer = styled.div` align-self: stretch; - height: 72px; + height: 100px; flex-direction: column; justify-content: flex-start; align-items: flex-start; @@ -33,13 +33,13 @@ const Title = styled.div` const Description = styled.div` align-self: stretch; + flex: 1; color: ${({ theme }) => `${theme.color.gray500}`}; ${({ theme }) => theme.font.desktop.label2}; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; - max-height: 100px; `; const Card = ({ title, description }: { title: string; description: string }) => { diff --git a/src/components/MyPage/DateCard.tsx b/src/components/MyPage/DateCard.tsx index 19cc8fe..79b6b3a 100644 --- a/src/components/MyPage/DateCard.tsx +++ b/src/components/MyPage/DateCard.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; const Container = styled.div` width: 100%; - height: auto; + height: 100%; padding: 20px; background: ${({ theme }) => `${theme.color.white}`}; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13); @@ -16,7 +16,7 @@ const Container = styled.div` const InnerContainer = styled.div` align-self: stretch; - height: 72px; + height: 100px; flex-direction: column; justify-content: flex-start; align-items: flex-start; @@ -39,7 +39,6 @@ const Description = styled.div` overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; - max-height: 100px; `; const DateText = styled.div` diff --git a/src/components/MyPage/MyBrandingView.tsx b/src/components/MyPage/MyBrandingView.tsx index 387d30e..67c75c4 100644 --- a/src/components/MyPage/MyBrandingView.tsx +++ b/src/components/MyPage/MyBrandingView.tsx @@ -6,9 +6,9 @@ import { authClient } from '@/apis/client'; import { ExperienceCard } from '@/components/MyPage/ExperienceCard'; interface ApiResponseItem { - selfUnderstandingUrl: string; - name: string; - link: string; + imageUrl: string; + programsTitle: string; + type: string; programsId: number; } @@ -51,10 +51,10 @@ export const MyBrandingView = ({ programData, sortOrder }: MyExperienceProps) => {data.map((item) => ( ))} diff --git a/src/components/MyPage/MyExperienceWholeView.tsx b/src/components/MyPage/MyExperienceWholeView.tsx index 8cf5a15..b3477db 100644 --- a/src/components/MyPage/MyExperienceWholeView.tsx +++ b/src/components/MyPage/MyExperienceWholeView.tsx @@ -6,9 +6,9 @@ import { authClient } from '@/apis/client'; import { ExperienceCard } from '@/components/MyPage/ExperienceCard'; interface ApiResponseItem { - selfUnderstandingUrl: string; - name: string; - link: string; + imageUrl: string; + programsTitle: string; + type: string; programsId: number; } @@ -51,10 +51,10 @@ export const MyExperienceWholeView = ({ programData, sortOrder }: MyExperiencePr {data.map((item) => ( ))} diff --git a/src/components/MyPage/MyUnderstandingView.tsx b/src/components/MyPage/MyUnderstandingView.tsx index ccb4f05..4f1cbfd 100644 --- a/src/components/MyPage/MyUnderstandingView.tsx +++ b/src/components/MyPage/MyUnderstandingView.tsx @@ -6,9 +6,9 @@ import { authClient } from '@/apis/client'; import { ExperienceCard } from '@/components/MyPage/ExperienceCard'; interface ApiResponseItem { - selfUnderstandingUrl: string; - name: string; - link: string; + imageUrl: string; + programsTitle: string; + type: string; programsId: number; } @@ -51,10 +51,10 @@ export const MyUnderstandingView = ({ programData, sortOrder }: MyExperienceProp {data.map((item) => ( ))} diff --git a/src/components/MyPage/SettingView.tsx b/src/components/MyPage/SettingView.tsx index d5dbb1f..a6f7176 100644 --- a/src/components/MyPage/SettingView.tsx +++ b/src/components/MyPage/SettingView.tsx @@ -1,12 +1,25 @@ import { styled } from 'styled-components'; +import backgroundImg from '@/assets/backgrounds/setting.png'; export const SettingView = () => { - return 설정어쩌구; + return ( + + + + ); }; const StyledContainer = styled.div` width: 100%; height: 100%; padding: 100px 24px 52px 24px; - background-color: aliceblue; +`; + +const ImageContainer = styled.div` + width: 100%; + height: 100%; + background-image: url(${backgroundImg}); + background-size: contain; + background-position: top; + background-repeat: no-repeat; `; diff --git a/src/components/common/Modal/BrandCardModal.tsx b/src/components/common/Modal/BrandCardModal.tsx index 076c338..83d628c 100644 --- a/src/components/common/Modal/BrandCardModal.tsx +++ b/src/components/common/Modal/BrandCardModal.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import styled from 'styled-components'; @@ -7,15 +7,38 @@ import { PlainButton } from '@/components/common/Button/PlainButton'; interface ModalProps { isOpen: boolean; onClose: () => void; + onAdd: ( + title: string, + description: string, + date: string, + status: '준비' | '진행중' | '완료' + ) => void; } -export const BrandCardModal = ({ isOpen, onClose }: ModalProps) => { +export const BrandCardModal = ({ isOpen, onClose, onAdd }: ModalProps) => { const [title, setTitle] = useState(''); const [type, setType] = useState(''); const [startDate, setStartDate] = useState('2024.05.15'); - const [endDate, setEndDate] = useState(''); + const [date, setDate] = useState(''); const [description, setDescription] = useState(''); - const [status, setStatus] = useState<'진행전' | '진행중' | '완료'>('진행전'); + const [status, setStatus] = useState<'준비' | '진행중' | '완료'>('준비'); + + useEffect(() => { + if (isOpen) { + setTitle(''); + setType(''); + setStartDate('2024.05.15'); + setDate(''); + setDescription(''); + setStatus('준비'); + } + }, [isOpen]); + + const handleAdd = () => { + onAdd(title, description, date, status); + onClose(); + }; + if (!isOpen) return null; return ( @@ -40,12 +63,12 @@ export const BrandCardModal = ({ isOpen, onClose }: ModalProps) => { setStatus('진행전')} + onClick={() => setStatus('준비')} > - 진행전 + 준비 { width="87px" onClick={() => setStatus('진행중')} > - 진행중 + 진행 { setEndDate(e.target.value)} + value={date} + onChange={(e) => setDate(e.target.value)} placeholder="20XX.XX.XX" /> @@ -89,7 +112,7 @@ export const BrandCardModal = ({ isOpen, onClose }: ModalProps) => { 취소하기 - + 추가하기