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

Feature/brand page
read-a-perfume · Aug 30, 2023 · 694a885 · 694a885
2 parents 95b248a + e52cc03
commit 694a885
Show file tree

Hide file tree

Showing 13 changed files with 684 additions and 332 deletions.
diff --git a/src/assets/UploadIcon.tsx b/src/assets/UploadIcon.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+const UploadIcon = ({width = "61", height = "55"} : {
+  width?: string;
+  height?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 61 55"
+      fill="none"
+    >
+      <path
+        d="M61 33.1117V51.0713C61 52.1133 60.591 53.1125 59.863 53.8493C59.1351 54.5861 58.1477 55 57.1182 55H3.88182C2.8523 55 1.86494 54.5861 1.13696 53.8493C0.408976 53.1125 0 52.1133 0 51.0713V33.1117C0 32.0697 0.408976 31.0704 1.13696 30.3337C1.86494 29.5969 2.8523 29.183 3.88182 29.183H17.1909C17.6321 29.183 18.0553 29.3604 18.3673 29.6761C18.6793 29.9919 18.8545 30.4201 18.8545 30.8667C18.8545 31.3132 18.6793 31.7415 18.3673 32.0573C18.0553 32.373 17.6321 32.5504 17.1909 32.5504H3.88182C3.73474 32.5504 3.59369 32.6095 3.4897 32.7148C3.3857 32.82 3.32727 32.9628 3.32727 33.1117V51.0713C3.32727 51.2202 3.3857 51.3629 3.4897 51.4682C3.59369 51.5734 3.73474 51.6326 3.88182 51.6326H57.1182C57.2653 51.6326 57.4063 51.5734 57.5103 51.4682C57.6143 51.3629 57.6727 51.2202 57.6727 51.0713V33.1117C57.6727 32.9628 57.6143 32.82 57.5103 32.7148C57.4063 32.6095 57.2653 32.5504 57.1182 32.5504H43.8091C43.3679 32.5504 42.9447 32.373 42.6327 32.0573C42.3207 31.7415 42.1455 31.3132 42.1455 30.8667C42.1455 30.4201 42.3207 29.9919 42.6327 29.6761C42.9447 29.3604 43.3679 29.183 43.8091 29.183H57.1182C58.1477 29.183 59.1351 29.5969 59.863 30.3337C60.591 31.0704 61 32.0697 61 33.1117ZM18.3665 16.3418L28.8364 5.74842V30.8667C28.8364 31.3132 29.0116 31.7415 29.3236 32.0573C29.6356 32.373 30.0588 32.5504 30.5 32.5504C30.9412 32.5504 31.3644 32.373 31.6764 32.0573C31.9884 31.7415 32.1636 31.3132 32.1636 30.8667V5.74842L42.6335 16.3418C42.9488 16.6392 43.3659 16.8011 43.7969 16.7934C44.2279 16.7857 44.6392 16.609 44.944 16.3006C45.2488 15.9921 45.4234 15.5759 45.431 15.1397C45.4386 14.7035 45.2786 14.2813 44.9847 13.9622L31.6756 0.492409C31.3637 0.177104 30.9409 0 30.5 0C30.0591 0 29.6363 0.177104 29.3244 0.492409L16.0153 13.9622C15.7214 14.2813 15.5614 14.7035 15.569 15.1397C15.5766 15.5759 15.7512 15.9921 16.056 16.3006C16.3608 16.609 16.7721 16.7857 17.2031 16.7934C17.6341 16.8011 18.0512 16.6392 18.3665 16.3418ZM49.9091 42.0915C49.9091 41.5365 49.7465 40.9939 49.4418 40.5324C49.1371 40.071 48.7041 39.7113 48.1974 39.4989C47.6908 39.2865 47.1333 39.2309 46.5954 39.3392C46.0576 39.4475 45.5635 39.7148 45.1757 40.1072C44.788 40.4997 44.5239 40.9997 44.4169 41.544C44.3099 42.0884 44.3648 42.6526 44.5747 43.1654C44.7846 43.6781 45.1399 44.1164 45.5959 44.4248C46.0519 44.7331 46.588 44.8977 47.1364 44.8977C47.8717 44.8977 48.577 44.602 49.097 44.0758C49.617 43.5495 49.9091 42.8357 49.9091 42.0915Z"
+        fill="#B4B4B4"
+      />
+    </svg>
+  )
+}
+
+export default UploadIcon
diff --git a/src/assets/customIcons.tsx b/src/assets/customIcons.tsx
@@ -199,7 +199,23 @@ const BeforeIcon = createSvgIcon(
   >
     <path
       d="M13.9806 6L15.3906 7.41L10.8106 12L15.3906 16.59L13.9806 18L7.98062 12L13.9806 6Z"
-      fill="#DBDBDB"
+      fill="#B4B4B4"
+    />
+  </svg>,
+  'BeforeIcon',
+)
+
+const BeforeIconBlack = createSvgIcon(
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M13.9806 6L15.3906 7.41L10.8106 12L15.3906 16.59L13.9806 18L7.98062 12L13.9806 6Z"
+      fill="black"
     />
   </svg>,
   'BeforeIcon',
@@ -221,6 +237,22 @@ const AfterIcon = createSvgIcon(
   'AfterIcon',
 )
 
+const AfterIconBlack = createSvgIcon(
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M10.0194 6L8.60938 7.41L13.1894 12L8.60938 16.59L10.0194 18L16.0194 12L10.0194 6Z"
+      fill="black"
+    />
+  </svg>,
+  'AfterIcon',
+)
+
 const FilterIcon = createSvgIcon(
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -441,6 +473,8 @@ const CustomIcons = {
   ShowPassword,
   HidePassword,
   Dot,
+  BeforeIconBlack,
+  AfterIconBlack
 }
 
 export default CustomIcons
diff --git a/src/components/Notification/NotificationModal.tsx b/src/components/Notification/NotificationModal.tsx
@@ -1,5 +1,5 @@
+import { ModalProps } from '@components/LoginModal/layout/LoginModal.interface'
 import FlexBox from '@components/layout/FlexBox'
-import { ModalProps } from '@components/main/LoginModal/layout/LoginModal.interface'
 import styled from '@emotion/styled'
 import {Box, Modal, Typography} from '@mui/material'
 import CloseIcon from 'src/assets/CloseIcon'

diff --git a/src/components/brand/Magazine/Magazine.style.ts b/src/components/brand/Magazine/Magazine.style.ts
@@ -1,68 +1,11 @@
 import styled from '@emotion/styled'
-import {Button, TextareaAutosize, Typography} from '@mui/material'
+import {Button, Typography} from '@mui/material'
 import {AddBannerSpan, AddImageButton} from '@pages/brand/Brand.style'
-import {theme} from '@theme/theme'
+import { theme } from '@theme/theme'
 import CustomIcons from 'src/assets/customIcons'
 
 // PostMagazine
 
-export const ContentWrapper = styled.section({
-  width: '100%',
-  minHeight: '650px',
-  paddingLeft: 160,
-  paddingRight: 160,
-  paddingTop: 32,
-})
-
-export const TitleInput = styled.textarea({
-  border: 'transparent',
-  height: 110,
-  width: '100%',
-  fontSize: 36,
-  fontWeight: '600',
-  color: '#191919',
-  fontFamily: 'AritaBuri !important',
-  display: 'flex',
-  justifyContent: 'left',
-  alignItems: 'flex-start',
-  resize: 'none',
-  '&:placeholder': {
-    color: '#A9A9A9',
-  },
-})
-
-export const SubTitleInput = styled.input({
-  border: 'transparent',
-  width: '100%',
-  fontSize: theme.typography.h2.fontSize,
-  fontWeight: '600',
-  color: '#191919',
-  fontFamily: 'AritaBuri !important',
-  marginBottom: 25,
-  marginTop: 25,
-  '&:placeholder': {
-    color: '#A9A9A9',
-  },
-})
-
-export const ContentInput = styled(TextareaAutosize)({
-  border: 'transparent',
-  width: '100%',
-  minHeight: 36,
-  fontSize: theme.typography.h4.fontSize,
-  fontWeight: '500',
-  color: '#191919',
-  display: 'flex',
-  justifyContent: 'left',
-  alignItems: 'flex-start',
-  marginBottom: 48,
-  lineBreak: 'auto',
-  resize: 'none',
-  '&:placeholder': {
-    color: '#A9A9A9',
-  },
-})
-
 export const HeaderImage = styled.header({
   width: '100%',
   height: '470px',
@@ -85,25 +28,30 @@ export const BannerButton = styled(AddImageButton)(
   }),
 )
 
-export const Attributes = styled.div({
-  width: '100%',
-  height: 48,
-  paddingLeft: 160,
-  display: 'flex',
-  background: '#F1F1F5',
+export const EditorTitle = styled(Typography)({
+  fontSize: 18,
+  fontWeight: '500',
+  color: '#191919',
+  marginRight: 40,
+})
+
+export const TitleInput = styled.input({
+  height: 55,
+  border: 'none',
+  borderBottom: '1px solid #DBDBDB',
+  fontSize: 18,
+  fontWeight: '500',
 })
 
-export const AttributeButton = styled(Button)({
-  width: 113,
-  height: 48,
-  borderTop: 'none',
-  borderBottom: 'none',
-  borderRight: 'none',
+export const AddButton = styled.div({
+  width: 112,
+  height: '100%',
   borderLeft: '1px solid #DBDBDB',
-  background: 'none',
+  borderRight: '1px solid #DBDBDB',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  cursor: 'pointer',
   '&:nth-of-type(3)': {
     borderRight: '1px solid #DBDBDB',
   },
@@ -146,3 +94,55 @@ export const OptionsIcon = styled(CustomIcons.HamburgerIcon)({
   marginTop: 32,
   cursor: 'pointer',
 })
+
+export const AddButtonText = styled(Typography)({
+  fontSize: 14,
+  fontWeight: 500,
+  color: '#191919',
+  marginLeft: 6,
+})
+
+export const TextBox = styled.div({
+  marginLeft: 160,
+  marginRight: 160,
+  marginTop: 34,
+})
+
+export const ImageDefault = styled.div({
+  width: 1192,
+  marginTop: 34,
+  marginBottom: 34,
+  height: 586,
+  background: '#F1F1F5',
+  border: '1px solid #EDEDED',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+})
+
+export const PostFooter = styled.div({
+  width: '100%',
+  position: 'fixed',
+  bottom: 0,
+  height: 112,
+  borderTop: '1px solid black',
+  padding: '0px 160px',
+  background: 'white',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+})
+
+export const LinkButton = styled(Button)({
+  width: 73,
+  height: 38,
+  borderRadius: 10,
+  border : '1px solid #DBDBDB',
+  background: 'white',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: 14,
+  color: '#191919'
+})
diff --git a/src/components/brand/Magazine/MagazineContent.tsx b/src/components/brand/Magazine/MagazineContent.tsx
@@ -1,58 +1,112 @@
 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 { useParams } from 'react-router-dom'
+import {useParams} from 'react-router-dom'
 import CustomIcons from 'src/assets/customIcons'
-import { Banner } from '@pages/brand/Brand.style'
-import { magazineData } from '@components/main/constants'
-
-const BannerSpan = styled(Typography)({
-  fontSize: theme.typography.body2.fontSize,
-  fontWeight: 600,
-  color: 'white',
-  marginBottom: '80px',
-  zIndex: 1,
-  position: 'absolute',
-})
+import {magazineData} from '@components/main/constants'
+import {LinkButton, PostFooter} from './Magazine.style'
 
 const BannerImage = styled.img({
   width: '100%',
   height: '470px',
-  objectFit: 'contain',
+  objectFit: 'fill',
   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',
+  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
+  zIndex: 1,
+})
+
+export const BannerBox = styled.div({
+  width: '100%',
+  height: '470px',
+  background: '#F1F1F5',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
 })
 
 const MagazineContent = () => {
-  const path = useParams();
+  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>
+      <BannerBox>
+        <FlexBox style={{padding: '0px 160px'}} direction={'column'}>
+          <CustomIcons.BeforeIcon width="24" height="24" style={{zIndex: 2}} />
+          <Typography
+            style={{fontSize: 14, color: 'white', zIndex: 2, marginTop: 16}}
+          >
+            #선물하기좋은 #탬버린즈퍼퓸핸드
+          </Typography>
+          <Typography
+            style={{
+              fontSize: 36,
+              fontWeight: '600',
+              lineHeight: '150%',
+              color: 'white',
+              fontFamily: 'AritaBuri !important',
+              marginTop: 12,
+              zIndex: 2,
+            }}
+          >
+            산뜻한 감촉과 함께 풍부한 영양을 공급하는 동시에
+            <br />
+            매력적인 향기를 전달하는 퍼퓸핸드
+          </Typography>
+          <FlexBox alignItems="center" style={{marginTop: 19}}>
+            <div
+              style={{
+                width: 52,
+                height: 52,
+                borderRadius: 194.5,
+                border: '1px solid black',
+                background: 'white',
+                marginRight: 8,
+                zIndex: 2,
+              }}
+            ></div>
+            <Typography
+              style={{
+                fontSize: 18,
+                fontWeight: '600',
+                textTransform: 'uppercase',
+                color: 'white',
+                marginRight: 12,
+                zIndex: 2,
+              }}
+            >
+              TAMBURINS
+            </Typography>
+            <Typography style={{fontSize: 14, color: 'white', zIndex: 2}}>
+              {new Date().toISOString().split('T')[0].split('-').join('.')}
+            </Typography>
+          </FlexBox>
         </FlexBox>
         <BannerImage src={data.image} alt="banner" style={{zIndex: 1}} />
         <Blur />
-      </Banner>
+      </BannerBox>
+      <div style={{paddingLeft: 160, paddingRight: 160, marginTop: 88}}>
+        testing~~
+      </div>
+      <PostFooter>
+        <LinkButton>이전글</LinkButton>
+        <LinkButton>다음글</LinkButton>
+      </PostFooter>
     </>
   )
 }
 
-export default MagazineContent
+export default MagazineContent