-
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 #14 from read-a-perfume/feature/brand-page
feat: brand page publishing, add test images
- Loading branch information
Showing
13 changed files
with
720 additions
and
23 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,36 @@ | ||
import FlexBox from '@components/layout/FlexBox' | ||
import { | ||
BrandInfo, | ||
BrandInfoBlock, | ||
BrandProfile, | ||
BrandSettings, | ||
BrandSubTitle, | ||
BrandTitle, | ||
BrandURL, | ||
Follows, | ||
} from '@pages/brand/Brand.style' | ||
|
||
const BrandInfoDetail = ({enterprise}: {enterprise: boolean}) => { | ||
return ( | ||
<BrandInfoBlock> | ||
<BrandProfile src="/images/brand-logo.png" alt="brand logo" /> | ||
<BrandInfo> | ||
<FlexBox alignItems="center"> | ||
<BrandTitle>TAMBURINS</BrandTitle> | ||
<Follows color="red">2480</Follows> | ||
<Follows>팔로워</Follows> | ||
</FlexBox> | ||
<BrandSubTitle> | ||
제품보다 새로운 경험, 공간 등의 콘텐츠를 통해서 새로운 감성을 전달하는 | ||
탬버린즈 | ||
</BrandSubTitle> | ||
<BrandURL to="https://www.tamburins.com"> | ||
https://www.tamburins.com | ||
</BrandURL> | ||
{enterprise && <BrandSettings>설정 및 관리</BrandSettings>} | ||
</BrandInfo> | ||
</BrandInfoBlock> | ||
) | ||
} | ||
|
||
export default BrandInfoDetail |
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,20 @@ | ||
import {Box} from '@mui/material' | ||
import { DeleteButton, EditButton, OptionsGroup } from '@pages/brand/Brand.style' | ||
|
||
const EditOptions = () => { | ||
return ( | ||
<Box sx={{position: 'absolute', marginLeft: '440px', marginTop: '80px'}}> | ||
<OptionsGroup | ||
size="medium" | ||
variant='text' | ||
color='inherit' | ||
orientation="vertical" | ||
> | ||
<EditButton>수정</EditButton> | ||
<DeleteButton>삭제</DeleteButton> | ||
</OptionsGroup> | ||
</Box> | ||
) | ||
} | ||
|
||
export default EditOptions |
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,120 @@ | ||
import FlexBox from '@components/layout/FlexBox' | ||
import { | ||
BoxContent, | ||
BrandName, | ||
Card, | ||
CardBox, | ||
CardImage, | ||
Categories, | ||
DetailedInfoBox, | ||
Divider, | ||
Dot, | ||
InfoBox, | ||
PerfumeHamburger, | ||
ProductName, | ||
Types, | ||
} from '@pages/brand/Brand.style' | ||
import React from 'react' | ||
import CustomIcons from 'src/assets/customIcons' | ||
|
||
export enum Step { | ||
'0%' = 0, | ||
'10%' = 19, | ||
'20%' = 38, | ||
'30%' = 57, | ||
'40%' = 76, | ||
'50%' = 95, | ||
'60%' = 114, | ||
'70%' = 133, | ||
'80%' = 152, | ||
'90%' = 171, | ||
'100%' = 190, | ||
} | ||
|
||
const InfoBoxes = ({enterprise}: {enterprise: boolean}) => { | ||
const productData = new Array(8).fill(0).map((_, i) => i + 1) | ||
|
||
return ( | ||
<CardBox> | ||
{productData.map(el => ( | ||
<FlexBox | ||
style={{flexDirection: 'column', gap: '32px', flexWrap: 'wrap'}} | ||
key={el} | ||
> | ||
<Card width="376px" height="426px"> | ||
{enterprise && ( | ||
<div | ||
style={{width: '100%', display: 'flex', justifyContent: 'end'}} | ||
> | ||
<PerfumeHamburger /> | ||
</div> | ||
)} | ||
<CardImage src="/images/perfume.png" alt="product" height="341px" /> | ||
<FlexBox alignItems="center" style={{flexDirection: 'column'}}> | ||
<BrandName>탬버린즈</BrandName> | ||
<ProductName>퍼퓸 카모</ProductName> | ||
</FlexBox> | ||
</Card> | ||
<FlexBox style={{flexDirection: 'column', gap: '12px'}}> | ||
<InfoBox> | ||
<BoxContent left={true}> | ||
<Categories>강도</Categories> | ||
<Types color="#333">적당한 향</Types> | ||
</BoxContent> | ||
<BoxContent left={false}> | ||
<Categories>지속력</Categories> | ||
<Types color="#333">3시간-6시간</Types> | ||
</BoxContent> | ||
</InfoBox> | ||
<DetailedInfoBox> | ||
<FlexBox alignItems="center"> | ||
<Categories color="#333" style={{marginRight: '27px'}}> | ||
독특한 | ||
</Categories> | ||
<div> | ||
<Divider /> | ||
<Dot marginLeft={Step['10%']} /> | ||
</div> | ||
<Categories color="#333" style={{marginLeft: '20px'}}> | ||
무난한 | ||
</Categories> | ||
</FlexBox> | ||
<FlexBox alignItems="center"> | ||
<Categories | ||
color="#333" | ||
style={{marginRight: '13px', width: '60px'}} | ||
> | ||
자연적인 | ||
</Categories> | ||
<div> | ||
<Divider /> | ||
<Dot marginLeft={Step['80%']} /> | ||
</div> | ||
<Categories | ||
color="#333" | ||
style={{width: '60px', marginLeft: '8px'}} | ||
> | ||
인공적인 | ||
</Categories> | ||
</FlexBox> | ||
<FlexBox alignItems="center"> | ||
<Categories color="#333" style={{marginRight: '27px'}}> | ||
데일리 | ||
</Categories> | ||
<div> | ||
<Divider /> | ||
<Dot marginLeft={Step['20%']} /> | ||
</div> | ||
<Categories color="#333" style={{marginLeft: '20px'}}> | ||
위클리 | ||
</Categories> | ||
</FlexBox> | ||
</DetailedInfoBox> | ||
</FlexBox> | ||
</FlexBox> | ||
))} | ||
</CardBox> | ||
) | ||
} | ||
|
||
export default InfoBoxes |
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,56 @@ | ||
import FlexBox from '@components/layout/FlexBox' | ||
import { | ||
Card, | ||
CardImage, | ||
CardSpan, | ||
CardTitle, | ||
EditorProfile, | ||
HashTags, | ||
MagazineInfo, | ||
} from '@pages/brand/Brand.style' | ||
import {useState} from 'react' | ||
import CustomIcons from 'src/assets/customIcons' | ||
import EditOptions from './EditOptionsModal/EditOptions' | ||
|
||
const Magazine = ({enterprise}: {enterprise: boolean}) => { | ||
const [optionsOpen, setOptionsOpen] = useState<boolean>(false) | ||
|
||
return ( | ||
<Card width="512px" height="594px"> | ||
<CardImage | ||
height="320px" | ||
src="/images/brand-magazine.png" | ||
alt="brand magazine" | ||
/> | ||
<MagazineInfo> | ||
<FlexBox | ||
justifyContent="space-between" | ||
alignItems="center" | ||
style={{marginBottom: '8px', marginTop: '16px'}} | ||
> | ||
<EditorProfile | ||
src="/images/brand-image.png" | ||
alt="editor profile image" | ||
/> | ||
{enterprise && ( | ||
<CustomIcons.HamburgerIcon | ||
onClick={() => setOptionsOpen(!optionsOpen)} | ||
style={{cursor: 'pointer'}} | ||
/> | ||
)} | ||
{optionsOpen && <EditOptions />} | ||
</FlexBox> | ||
<CardTitle>심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭</CardTitle> | ||
<CardSpan> | ||
심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여 | ||
사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드 | ||
플로랄 부케는 "여성의 향기를 담은 여성미의 진수"를 만들어 | ||
달라고 부탁한 가브리엘... | ||
</CardSpan> | ||
<HashTags>#플로랄 #여름신작 #슬로우 썸머</HashTags> | ||
</MagazineInfo> | ||
</Card> | ||
) | ||
} | ||
|
||
export default Magazine |
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.