Merge pull request #14 from read-a-perfume/feature/brand-page

feat: brand page publishing, add test images

src/assets/customIcons.tsx

@@ -103,12 +103,28 @@ const ArrowLeftIcon = createSvgIcon(
   'ArrowLeftIcon',
 )
 
+const HamburgerIcon = createSvgIcon(
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"
+    />
+  </svg>,
+  'HamburgerIcon'
+)
+
 const CustomIcons = {
   CommentIcon,
   SearchIcon,
   DefaultCheckIcon,
   YellowCheckIcon,
   ArrowLeftIcon,
+  HamburgerIcon,
 }
 
 export default CustomIcons

src/components/brand/BrandInfo.tsx

@@ -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

src/components/brand/EditOptionsModal/EditOptions.tsx

@@ -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

src/components/brand/InfoBoxes.tsx

@@ -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

src/components/brand/Magazine.tsx

@@ -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 빠르펭. 시간을 초월하여
+          사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드
+          플로랄 부케는 &quot;여성의 향기를 담은 여성미의 진수&quot;를 만들어
+          달라고 부탁한 가브리엘...
+        </CardSpan>
+        <HashTags>#플로랄 #여름신작 #슬로우 썸머</HashTags>
+      </MagazineInfo>
+    </Card>
+  )
+}
+
+export default Magazine

src/components/layout/Header.tsx

@@ -16,6 +16,7 @@ const HeaderLayout = styled.div({
   height: '152px',
   display: 'flex',
   width: '100%',
+  borderBottom: '1px solid black'
 })
 
 const HeaderNavigation = styled.div(