-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #15 from read-a-perfume/feature/brand-page
Feature/brand page
- Loading branch information
Showing
13 changed files
with
530 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import FlexBox from '@components/layout/FlexBox' | ||
import {Label} from '@components/main/LoginModal/FindPassword/FindPassword.style' | ||
import {FormControl} from '@mui/material' | ||
import { | ||
AlertSpan, | ||
CategoryTitle, | ||
EditProfileButton, | ||
FormBlock, | ||
Input, | ||
Profile, | ||
Styledswitch, | ||
} from '@pages/brand/Brand.style' | ||
import React from 'react' | ||
|
||
const Form = ({ secondBlock, thirdBlock } : { | ||
secondBlock : React.RefObject<HTMLDivElement>; | ||
thirdBlock : React.RefObject<HTMLDivElement>; | ||
}) => { | ||
// const [image, setImage] = useState<string>('') | ||
const image = '' | ||
|
||
return ( | ||
<FormBlock> | ||
<FlexBox alignItems="center" style={{gap: '27px'}}> | ||
<Profile>{image && <img src={image} alt="profile" />}</Profile> | ||
<EditProfileButton>프로필 변경</EditProfileButton> | ||
</FlexBox> | ||
<CategoryTitle marginTop="48px">브랜드 기본 정보</CategoryTitle> | ||
<FlexBox style={{gap: '31px', marginBottom: '32px'}}> | ||
<FormControl> | ||
<Label>브랜드명</Label> | ||
<Input name="name" /> | ||
</FormControl> | ||
<FormControl> | ||
<Label>웹 사이트 URL</Label> | ||
<Input name="url" /> | ||
</FormControl> | ||
</FlexBox> | ||
<FormControl style={{marginBottom: '32px'}}> | ||
<Label>브랜드 소개</Label> | ||
<Input full name="url" /> | ||
</FormControl> | ||
<FlexBox style={{gap: '31px'}}> | ||
<FormControl> | ||
<Label>기업명</Label> | ||
<Input name="businessName" /> | ||
</FormControl> | ||
<FormControl> | ||
<Label>사용자등록번호</Label> | ||
<Input name="businessNumber" /> | ||
</FormControl> | ||
</FlexBox> | ||
<div ref={secondBlock}> | ||
<CategoryTitle marginTop="78px">관리자 계정 관리</CategoryTitle> | ||
<FlexBox style={{gap: '31px', marginBottom: '32px'}}> | ||
<FormControl> | ||
<Label>아이디</Label> | ||
<Input name="id" /> | ||
</FormControl> | ||
<FormControl> | ||
<Label>비밀번호</Label> | ||
<Input name="password" /> | ||
</FormControl> | ||
</FlexBox> | ||
<FlexBox style={{gap: '31px'}}> | ||
<FormControl> | ||
<Label>기업용 이메일</Label> | ||
<Input name="businessEmail" /> | ||
</FormControl> | ||
<FormControl> | ||
<Label>휴대전화</Label> | ||
<Input name="phone" /> | ||
</FormControl> | ||
</FlexBox> | ||
</div> | ||
<div ref={thirdBlock}> | ||
<CategoryTitle marginTop="88px">알림 설정</CategoryTitle> | ||
<FlexBox alignItems="center"> | ||
<AlertSpan>브랜드 제품에 대한 리뷰 알림</AlertSpan> | ||
<Styledswitch defaultChecked /> | ||
</FlexBox> | ||
</div> | ||
</FormBlock> | ||
) | ||
} | ||
|
||
export default Form |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import Header from '@components/layout/Header' | ||
import {useEffect, useRef, useState} from 'react' | ||
import {useNavigate} from 'react-router-dom' | ||
import FlexBox from '@components/layout/FlexBox' | ||
import { Section, SettingsNav, SettingsNavItems, SettingsTitle } from '@pages/brand/Brand.style' | ||
import Form from './BrandForm' | ||
|
||
const BrandSettings = () => { | ||
const isLogged = true | ||
const navigate = useNavigate() | ||
const [clicked, setClicked] = useState(0) | ||
|
||
const firstBlock = useRef<HTMLDivElement>(null) | ||
const secondBlock = useRef<HTMLDivElement>(null) | ||
const thirdBlock = useRef<HTMLDivElement>(null) | ||
|
||
useEffect(() => { | ||
if (!isLogged) { | ||
navigate('/') | ||
} | ||
}, []) | ||
|
||
return ( | ||
<> | ||
<Header /> | ||
<Section ref={firstBlock}> | ||
<SettingsNav> | ||
<SettingsTitle>설정 및 관리</SettingsTitle> | ||
<FlexBox style={{flexDirection: 'column', gap: '15px'}}> | ||
<SettingsNavItems | ||
clicked={clicked === 0} | ||
onClick={() => { | ||
setClicked(0) | ||
firstBlock.current?.scrollIntoView({ | ||
behavior: 'smooth', | ||
block: 'start', | ||
}) | ||
}} | ||
> | ||
브랜드 기본 정보 | ||
</SettingsNavItems> | ||
<SettingsNavItems | ||
clicked={clicked === 1} | ||
onClick={() => { | ||
setClicked(1) | ||
secondBlock.current?.scrollIntoView({ | ||
behavior: 'smooth', | ||
block: 'start', | ||
}) | ||
}} | ||
> | ||
관리자 계정 관리 | ||
</SettingsNavItems> | ||
<SettingsNavItems | ||
clicked={clicked === 2} | ||
onClick={() => { | ||
setClicked(2) | ||
thirdBlock.current?.scrollIntoView({ | ||
behavior: 'smooth', | ||
block: 'start', | ||
}) | ||
}} | ||
> | ||
알림 설정 | ||
</SettingsNavItems> | ||
</FlexBox> | ||
</SettingsNav> | ||
<Form secondBlock={secondBlock} thirdBlock={thirdBlock} /> | ||
</Section> | ||
</> | ||
) | ||
} | ||
|
||
export default BrandSettings |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import Header from '@components/layout/Header' | ||
import styled from '@emotion/styled' | ||
import {Typography} from '@mui/material' | ||
import {theme} from '@theme/theme' | ||
import FlexBox from '@components/layout/FlexBox' | ||
import { magazineData } from './magazineData' | ||
import { useParams } from 'react-router-dom' | ||
import CustomIcons from 'src/assets/customIcons' | ||
import { Banner } from '@pages/brand/Brand.style' | ||
|
||
const BannerSpan = styled(Typography)({ | ||
fontSize: theme.typography.body2.fontSize, | ||
fontWeight: 600, | ||
color: 'white', | ||
marginBottom: '80px', | ||
zIndex: 1, | ||
position: 'absolute', | ||
}) | ||
|
||
const BannerImage = styled.img({ | ||
width: '100%', | ||
height: '470px', | ||
objectFit: 'contain', | ||
position: 'absolute', | ||
zIndex: 0, | ||
imageRendering: '-webkit-optimize-contrast', | ||
backfaceVisibility: 'hidden', | ||
}) | ||
|
||
export const Blur = styled.div({ | ||
background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%), url(<path-to-image>), lightgray 50% / cover no-repeat', | ||
opacity: 0.6, | ||
position: 'absolute', | ||
width: '100%', | ||
height: '470px', | ||
zIndex: 1 | ||
}) | ||
|
||
const MagazineContent = () => { | ||
const path = useParams(); | ||
const data = magazineData[Number(path.id)] | ||
|
||
return ( | ||
<> | ||
<Header /> | ||
<Banner> | ||
<FlexBox> | ||
<CustomIcons.ArrowLeftIcon width="24" height="24" style={{zIndex: 2}} /> | ||
<BannerSpan style={{zIndex: 2}}>asdf</BannerSpan> | ||
</FlexBox> | ||
<BannerImage src={data.image} alt="banner" style={{zIndex: 1}} /> | ||
<Blur /> | ||
</Banner> | ||
</> | ||
) | ||
} | ||
|
||
export default MagazineContent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
export const magazineData = [ | ||
{ | ||
id: 1, | ||
image: '/images/brand-magazine.png', | ||
title: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭', | ||
content: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여 사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드 플로랄 부케는 "여성의 향기를 담은 여성미의 진수"를 만들어 달라고 부탁한 가브리엘...', | ||
hastag : ['플로럴', '여름산책', '슬로우 썸머'] | ||
}, | ||
{ | ||
id: 2, | ||
image: '/images/brand-magazine.png', | ||
title: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭', | ||
content: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여 사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드 플로랄 부케는 "여성의 향기를 담은 여성미의 진수"를 만들어 달라고 부탁한 가브리엘...', | ||
hastag : ['플로럴', '여름산책', '슬로우 썸머'] | ||
}, | ||
{ | ||
id: 3, | ||
image: '/images/brand-magazine.png', | ||
title: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭', | ||
content: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여 사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드 플로랄 부케는 "여성의 향기를 담은 여성미의 진수"를 만들어 달라고 부탁한 가브리엘...', | ||
hastag : ['플로럴', '여름산책', '슬로우 썸머'] | ||
}, | ||
{ | ||
id: 4, | ||
image: '/images/brand-magazine.png', | ||
title: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭', | ||
content: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여 사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드 플로랄 부케는 "여성의 향기를 담은 여성미의 진수"를 만들어 달라고 부탁한 가브리엘...', | ||
hastag : ['플로럴', '여름산책', '슬로우 썸머'] | ||
}, | ||
{ | ||
id: 5, | ||
image: '/images/brand-magazine.png', | ||
title: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭', | ||
content: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여 사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드 플로랄 부케는 "여성의 향기를 담은 여성미의 진수"를 만들어 달라고 부탁한 가브리엘...', | ||
hastag : ['플로럴', '여름산책', '슬로우 썸머'] | ||
}, | ||
{ | ||
id: 6, | ||
image: '/images/brand-magazine.png', | ||
title: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭', | ||
content: '심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여 사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드 플로랄 부케는 "여성의 향기를 담은 여성미의 진수"를 만들어 달라고 부탁한 가브리엘...', | ||
hastag : ['플로럴', '여름산책', '슬로우 썸머'] | ||
}, | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.