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

Feature/brand page
read-a-perfume · Jul 16, 2023 · c7f0e8a · c7f0e8a
2 parents 3478222 + 0e25edc
commit c7f0e8a
Show file tree

Hide file tree

Showing 13 changed files with 530 additions and 56 deletions.
diff --git a/src/components/brand/BrandForm.tsx b/src/components/brand/BrandForm.tsx
@@ -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
diff --git a/src/components/brand/BrandInfo.tsx b/src/components/brand/BrandInfo.tsx
@@ -9,6 +9,7 @@ import {
   BrandURL,
   Follows,
 } from '@pages/brand/Brand.style'
+import {Link} from 'react-router-dom'
 
 const BrandInfoDetail = ({enterprise}: {enterprise: boolean}) => {
   return (
@@ -27,7 +28,11 @@ const BrandInfoDetail = ({enterprise}: {enterprise: boolean}) => {
         <BrandURL to="https://www.tamburins.com">
           https://www.tamburins.com
         </BrandURL>
-        {enterprise && <BrandSettings>설정 및 관리</BrandSettings>}
+        {enterprise && (
+          <Link to="/brand/:id/settings">
+            <BrandSettings>설정 및 관리</BrandSettings>
+          </Link>
+        )}
       </BrandInfo>
     </BrandInfoBlock>
   )

diff --git a/src/components/brand/BrandSettings.tsx b/src/components/brand/BrandSettings.tsx
@@ -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
diff --git a/src/components/brand/InfoBoxes.tsx b/src/components/brand/InfoBoxes.tsx
@@ -15,7 +15,6 @@ import {
   Types,
 } from '@pages/brand/Brand.style'
 import React from 'react'
-import CustomIcons from 'src/assets/customIcons'
 
 export enum Step {
   '0%' = 0,

diff --git a/src/components/brand/Magazine.tsx b/src/components/brand/Magazine.tsx
@@ -11,25 +11,43 @@ import {
 import {useState} from 'react'
 import CustomIcons from 'src/assets/customIcons'
 import EditOptions from './EditOptionsModal/EditOptions'
+import {Link} from 'react-router-dom'
 
-const Magazine = ({enterprise}: {enterprise: boolean}) => {
+const Magazine = ({
+  enterprise,
+  data,
+}: {
+  enterprise: boolean
+  data: {
+    id: number
+    image: string
+    title: string
+    content: string
+    hastag: string[]
+  }
+}) => {
   const [optionsOpen, setOptionsOpen] = useState<boolean>(false)
 
   return (
     <Card width="512px" height="594px">
-      <CardImage
-        height="320px"
-        src="/images/brand-magazine.png"
-        alt="brand magazine"
-      />
+      <Link
+        to={`/brand/:id/magazine/${data.id}`}
+        style={{textDecoration: 'none'}}
+      >
+        <CardImage
+          height="320px"
+          src="/images/brand-magazine.png"
+          alt="brand magazine"
+        />
+      </Link>
       <MagazineInfo>
         <FlexBox
           justifyContent="space-between"
           alignItems="center"
           style={{marginBottom: '8px', marginTop: '16px'}}
         >
           <EditorProfile
-            src="/images/brand-image.png"
+            src="/images/brand-magazine.png"
             alt="editor profile image"
           />
           {enterprise && (
@@ -40,14 +58,14 @@ const Magazine = ({enterprise}: {enterprise: boolean}) => {
           )}
           {optionsOpen && <EditOptions />}
         </FlexBox>
-        <CardTitle>심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭</CardTitle>
-        <CardSpan>
-          심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여
-          사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드
-          플로랄 부케는 &quot;여성의 향기를 담은 여성미의 진수&quot;를 만들어
-          달라고 부탁한 가브리엘...
-        </CardSpan>
-        <HashTags>#플로랄 #여름신작 #슬로우 썸머</HashTags>
+        <Link
+          to={`/brand/:id/magazine/${data.id}`}
+          style={{textDecoration: 'none'}}
+        >
+          <CardTitle>{data.title}</CardTitle>
+          <CardSpan>{data.content}</CardSpan>
+          <HashTags>{'#' + data.hastag.join(' #')}</HashTags>
+        </Link>
       </MagazineInfo>
     </Card>
   )

diff --git a/src/components/brand/MagazineContent.tsx b/src/components/brand/MagazineContent.tsx
@@ -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
diff --git a/src/components/brand/magazineData.tsx b/src/components/brand/magazineData.tsx
@@ -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 : ['플로럴', '여름산책', '슬로우 썸머']
+  },
+]
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -27,7 +27,7 @@ const HeaderNavigation = styled.div(
     gap: gap,
     paddingLeft: '160px',
     paddingRight: '160px',
-    '&:nth-child(2)': {
+    '&:nth-of-type(2)': {
       display: 'flex',
       justifyContent: 'space-between',
     },
@@ -71,11 +71,8 @@ const Input = styled(OutlinedInput)({
   },
 })
 
-interface HeaderIProps {
-  isLoggedIn: boolean
-}
-
-const Header = ({isLoggedIn}: HeaderIProps) => {
+const Header = () => {
+  const isLoggedIn = true;
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const [keyword, setKeyword] = useState<string>('')