From c045d4960cb20894ff0a276eb47796926544e690 Mon Sep 17 00:00:00 2001 From: Simune <111689342+chaeyun-sim@users.noreply.github.com> Date: Sun, 16 Jul 2023 20:52:05 +0900 Subject: [PATCH 1/3] feat: add route, useAddHypen hook, Brand page --- src/components/brand/BrandForm.tsx | 87 ++++++++++++++++++++++++ src/components/brand/BrandSettings.tsx | 74 ++++++++++++++++++++ src/components/brand/MagazineContent.tsx | 58 ++++++++++++++++ src/components/brand/magazineData.tsx | 44 ++++++++++++ src/hooks/useAddHypen.tsx | 23 +++++++ src/route/route.tsx | 18 ++++- 6 files changed, 303 insertions(+), 1 deletion(-) create mode 100644 src/components/brand/BrandForm.tsx create mode 100644 src/components/brand/BrandSettings.tsx create mode 100644 src/components/brand/MagazineContent.tsx create mode 100644 src/components/brand/magazineData.tsx create mode 100644 src/hooks/useAddHypen.tsx diff --git a/src/components/brand/BrandForm.tsx b/src/components/brand/BrandForm.tsx new file mode 100644 index 0000000..1228d2b --- /dev/null +++ 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; + thirdBlock : React.RefObject; +}) => { + // const [image, setImage] = useState('') + const image = '' + + return ( + + + {image && profile} + 프로필 변경 + + 브랜드 기본 정보 + + + + + + + + + + + + + + + + + + + + + + + + +
+ 관리자 계정 관리 + + + + + + + + + + + + + + + + + + + + +
+
+ 알림 설정 + + 브랜드 제품에 대한 리뷰 알림 + + +
+ + ) +} + +export default Form \ No newline at end of file diff --git a/src/components/brand/BrandSettings.tsx b/src/components/brand/BrandSettings.tsx new file mode 100644 index 0000000..a6824d3 --- /dev/null +++ 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(null) + const secondBlock = useRef(null) + const thirdBlock = useRef(null) + + useEffect(() => { + if (!isLogged) { + navigate('/') + } + }, []) + + return ( + <> +
+
+ + 설정 및 관리 + + { + setClicked(0) + firstBlock.current?.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }) + }} + > + 브랜드 기본 정보 + + { + setClicked(1) + secondBlock.current?.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }) + }} + > + 관리자 계정 관리 + + { + setClicked(2) + thirdBlock.current?.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }) + }} + > + 알림 설정 + + + +
+
+ + ) +} + +export default BrandSettings \ No newline at end of file diff --git a/src/components/brand/MagazineContent.tsx b/src/components/brand/MagazineContent.tsx new file mode 100644 index 0000000..ef1037c --- /dev/null +++ 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(), 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 ( + <> +
+ + + + asdf + + + + + + ) +} + +export default MagazineContent \ No newline at end of file diff --git a/src/components/brand/magazineData.tsx b/src/components/brand/magazineData.tsx new file mode 100644 index 0000000..d158531 --- /dev/null +++ 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 : ['플로럴', '여름산책', '슬로우 썸머'] + }, +] \ No newline at end of file diff --git a/src/hooks/useAddHypen.tsx b/src/hooks/useAddHypen.tsx new file mode 100644 index 0000000..fed3214 --- /dev/null +++ b/src/hooks/useAddHypen.tsx @@ -0,0 +1,23 @@ +const useAddHyphen = () => { + const addHypen = (type: 'business' | 'phone', value: string) => { + let formatNum + + try { + if (type === 'business') { + if (value.length == 10) { + formatNum = value.replace(/(\d{3})(\d{2})(\d{5})/, '$1-$2-$3') + } else if (value.length == 11) { + formatNum = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3') + } + } + } catch (e) { + formatNum = value + console.log(e) + } + return formatNum + } + + return addHypen +} + +export default useAddHyphen \ No newline at end of file diff --git a/src/route/route.tsx b/src/route/route.tsx index 3143c06..25e9c4f 100644 --- a/src/route/route.tsx +++ b/src/route/route.tsx @@ -3,6 +3,8 @@ import React from 'react' import SignUp from '@pages/sign-up/SignUp' import Main from '@pages/main/Main' import Brand from '@pages/brand/Brand' +import MagazineContent from '@components/brand/MagazineContent' +import BrandSettings from '@components/brand/BrandSettings' const routes = [ { @@ -26,6 +28,20 @@ const routes = [ route: '/brand/:id', component: , }, + { + type: 'brand-settings', + name: 'brand-settings', + key: 'brand-settings-key', + route: '/brand/:id/settings', + component: , + }, + { + type: 'magazine-detail', + name: 'magazine-detail', + key: 'magazine-detail-key', + route: '/brand/:id/magazine/:id', + component: , + }, ] -export default routes +export default routes \ No newline at end of file From 85e226f4cc6a541503bce684b3390ca59372f273 Mon Sep 17 00:00:00 2001 From: Simune <111689342+chaeyun-sim@users.noreply.github.com> Date: Sun, 16 Jul 2023 20:53:16 +0900 Subject: [PATCH 2/3] feat: change props, add Link, remove unused code --- src/components/brand/BrandInfo.tsx | 7 ++++- src/components/brand/InfoBoxes.tsx | 1 - src/components/brand/Magazine.tsx | 48 ++++++++++++++++++++---------- src/pages/main/Main.tsx | 4 +-- 4 files changed, 41 insertions(+), 19 deletions(-) diff --git a/src/components/brand/BrandInfo.tsx b/src/components/brand/BrandInfo.tsx index a34020b..962b992 100644 --- 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}) => { https://www.tamburins.com - {enterprise && 설정 및 관리} + {enterprise && ( + + 설정 및 관리 + + )} ) diff --git a/src/components/brand/InfoBoxes.tsx b/src/components/brand/InfoBoxes.tsx index 4d1d16a..286dabd 100644 --- 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 index e897527..7c42f3b 100644 --- a/src/components/brand/Magazine.tsx +++ b/src/components/brand/Magazine.tsx @@ -11,17 +11,35 @@ 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(false) return ( - + + + { style={{marginBottom: '8px', marginTop: '16px'}} > {enterprise && ( @@ -40,14 +58,14 @@ const Magazine = ({enterprise}: {enterprise: boolean}) => { )} {optionsOpen && } - 심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭 - - 심플한 디자인이 돋보이는 전설적인 향수 N°5 빠르펭. 시간을 초월하여 - 사랑받는 아이콘으로 여성의 진정한 아름다움을 표현합니다. 알데하이드 - 플로랄 부케는 "여성의 향기를 담은 여성미의 진수"를 만들어 - 달라고 부탁한 가브리엘... - - #플로랄 #여름신작 #슬로우 썸머 + + {data.title} + {data.content} + {'#' + data.hastag.join(' #')} + ) diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx index 9255c2b..5ef771c 100644 --- a/src/pages/main/Main.tsx +++ b/src/pages/main/Main.tsx @@ -57,7 +57,7 @@ export default function Main() { return ( <> -
+
setIsOpen(!isLoggedIn ? true : false)}> @@ -71,4 +71,4 @@ export default function Main() { ) -} +} \ No newline at end of file From 0e25edcdda1850c4a0ad9626a9cc19b6c98c1652 Mon Sep 17 00:00:00 2001 From: Simune <111689342+chaeyun-sim@users.noreply.github.com> Date: Sun, 16 Jul 2023 20:53:51 +0900 Subject: [PATCH 3/3] feat: change child to type, change styles --- src/components/layout/Header.tsx | 9 +- src/pages/brand/Brand.style.ts | 191 +++++++++++++++++++++++++++---- src/pages/brand/Brand.tsx | 22 ++-- 3 files changed, 186 insertions(+), 36 deletions(-) diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 95d2777..474e3fd 100644 --- 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(false) const [keyword, setKeyword] = useState('') diff --git a/src/pages/brand/Brand.style.ts b/src/pages/brand/Brand.style.ts index 0c8cf40..83ac279 100644 --- a/src/pages/brand/Brand.style.ts +++ b/src/pages/brand/Brand.style.ts @@ -1,6 +1,6 @@ import {Step} from '@components/brand/InfoBoxes' import styled from '@emotion/styled' -import {Button, ButtonGroup, Typography} from '@mui/material' +import {Button, ButtonGroup, Switch, Typography} from '@mui/material' import {theme} from '@theme/theme' import {Link} from 'react-router-dom' import CustomIcons from 'src/assets/customIcons' @@ -19,7 +19,7 @@ export const Banner = styled.div({ export const BannerImage = styled.img({ width: '100%', height: '470px', - objectFit: 'cover', + objectFit: 'fill', position: 'absolute', zIndex: 0, imageRendering: '-webkit-optimize-contrast', @@ -27,9 +27,9 @@ export const BannerImage = styled.img({ }) export const AddImageButton = styled(Button)( - ({imageURL}: {imageURL: string}) => ({ - backgroundColor: imageURL ? 'white' : '#202020', - color: imageURL ? '#191919' : 'white', + ({imageurl}: {imageurl: string}) => ({ + backgroundColor: imageurl ? 'white' : '#202020', + color: imageurl ? '#191919' : 'white', fontSize: theme.typography.body3.fontSize, width: '137px', height: '34px', @@ -52,10 +52,10 @@ export const Blur = styled.div({ }) export const AddBannerSpan = styled(Typography)( - ({imageURL}: {imageURL: string}) => ({ + ({imageurl}: {imageurl: string}) => ({ fontSize: theme.typography.body2.fontSize, fontWeight: 600, - color: imageURL ? 'white' : '#191919', + color: imageurl ? 'white' : '#191919', marginBottom: '80px', zIndex: 1, position: 'absolute', @@ -74,7 +74,7 @@ export const BrandInfo = styled.div({ marginTop: '31px', marginLeft: '30px', display: 'flex', - flexDirection: 'column' + flexDirection: 'column', }) export const BrandProfile = styled.img({ @@ -102,7 +102,7 @@ export const BrandURL = styled(Link)({ fontSize: theme.typography.body3.fontSize, color: '#FE7156', textDecoration: 'none', - marginBottom: '16px' + marginBottom: '16px', }) export const BrandSettings = styled(Button)({ @@ -136,7 +136,7 @@ export const Tabs = styled.div({ hegith: '64px', borderBottom: '1px solid #DCDCDC', display: 'flex', - justifyContent: 'space-between' + justifyContent: 'space-between', }) export const Tab = styled.div(({current}: {current: boolean}) => ({ @@ -160,9 +160,9 @@ export const AddProductButton = styled(Button)({ background: '#FE7156', fontSize: theme.typography.body3.fontSize, color: 'white', - "&:hover" : { - background: '#FE7156' - } + '&:hover': { + background: '#FE7156', + }, }) export const WriteMagazine = styled(Button)({ @@ -172,9 +172,9 @@ export const WriteMagazine = styled(Button)({ background: '#202020', fontSize: theme.typography.body3.fontSize, color: 'white', - "&:hover" : { - background: '#202020' - } + '&:hover': { + background: '#202020', + }, }) // Products & Magazine @@ -223,7 +223,7 @@ export const OptionsGroup = styled(ButtonGroup)({ borderRadius: '10px', width: '61px', height: '60px', - background: 'white' + background: 'white', }) export const EditButton = styled(Button)({ @@ -231,7 +231,7 @@ export const EditButton = styled(Button)({ width: '100%', fontSize: theme.typography.body4.fontSize, fontWeight: 500, - color: '#191919' + color: '#191919', }) export const DeleteButton = styled(Button)({ @@ -337,5 +337,156 @@ export const PerfumeHamburger = styled(CustomIcons.HamburgerIcon)({ position: 'absolute', marginTop: '24px', marginRight: '24px', - cursor: 'pointer' -}) \ No newline at end of file + cursor: 'pointer', +}) + +// BrandSettings + +export const Section = styled.div({ + width: '100%', + display: 'flex', + background: '#FAFAFA', + paddingBottom: '100px' +}) + +export const SettingsNav = styled.div({ + width: '568px', + height: '100%', + display: 'flex', + alignItems: 'flex-end', + flexDirection: 'column', + paddingRight: '127px', + marginTop: '88px', +}) + +export const SettingsTitle = styled(Typography)({ + fontSize: theme.typography.h1.fontSize, + fontWeight: 700, + marginBottom: '40px', +}) + +export const SettingsNavItems = styled(Typography)( + ({clicked}: {clicked: boolean}) => ({ + fontSize: theme.typography.body1.fontSize, + paddingLeft: '11px', + cursor: 'pointer', + lineHeight: '20px', + fontWeight: clicked ? 600 : 400, + color: clicked ? '#FE7156' : '#191919', + borderLeft: clicked ? '2px solid #FE7156' : '2px solid white', + textAlign: 'left', + }), +) + +export const FormBlock = styled.div({ + marginTop: '170px', +}) + +export const Profile = styled.div({ + width: '104px', + height: '104px', + borderRadius: '194.5px', + border: '1px solid black', + background: 'white', +}) + +export const EditProfileButton = styled(Button)({ + border: '1px solid #DBDBDB', + borderRadius: '10px', + background: 'white', + width: '88px', + height: '33px', + color: '#191919', + fontSize: theme.typography.body3.fontSize, + fontWeight: 600, +}) + +export const CategoryTitle = styled(Typography)( + ({marginTop}: {marginTop: string}) => ({ + fontSize: theme.typography.body1.fontSize, + fontWeight: 600, + color: '#191919', + marginBottom: '25px', + marginTop: marginTop, + }), +) + +export const Label = styled(Typography)({ + fontSize: theme.typography.body3.fontSize, + color: '#303030', + fontWeight: 500, + marginBottom: '6px' +}) + +export const Input = styled.input(({full}: {full?: boolean}) => ({ + width: full ? '719px' : '344px', + height: '50px', + paddingLeft: '15px', + borderRadius: '11px', + background: 'white', + fontSize: theme.typography.body3.fontSize, + fontWeight: 500, + border: '1px solid #EDEDED', + outline: '0 !important', + '&:focus': { + border: '1px solid #FF5838 !important', + }, +})) + +export const AlertSpan = styled(Typography)({ + color: '#303030', + fontSize: theme.typography.body3.fontSize, + fontWeight: 500, +}) + +export const BannerBlur = styled.div(({opacity = 0.45} : { + opacity?: number; +}) => ({ + background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%), url(), lightgray 0px -12.524px / 100% 172.34% no-repeat', + opacity: opacity, + position: 'absolute', + width: '100%', + height: '470px', + zIndex: 1 +})) + +export const Styledswitch = styled(Switch)({ + width: 65, + height: 26, + padding: 0, + display: 'flex', + marginLeft: '15px', + '&:active': { + '& .MuiSwitch-thumb': { + width: 24, + }, + }, + '& .MuiSwitch-switchBase': { + padding: 2, + color: '#FE7156', + '&.Mui-checked': { + transform: 'translateX(40px)', + color: '#D9D9D9', + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: 'white', + }, + }, + }, + '& .MuiSwitch-thumb': { + width: 24, + height: 24, + marginTop: '-1.5px', + marginLeft: '-1.5px', + borderRadius: '100%', + transition: theme.transitions.create(['width'], { + duration: 100, + }), + }, + '& .MuiSwitch-track': { + borderRadius: '12px', + opacity: 1, + backgroundColor: 'white', + border: '1px solid #DBDBDB', + }, +}); \ No newline at end of file diff --git a/src/pages/brand/Brand.tsx b/src/pages/brand/Brand.tsx index 4aa23cf..d96a640 100644 --- a/src/pages/brand/Brand.tsx +++ b/src/pages/brand/Brand.tsx @@ -4,6 +4,7 @@ import { AddImageButton, AddProductButton, Banner, + BannerBlur, BannerImage, BrandContents, CardBox, @@ -17,10 +18,9 @@ import Magazine from '@components/brand/Magazine' import BrandInfoDetail from '@components/brand/BrandInfo' import {Button} from '@mui/material' import FlexBox from '@components/layout/FlexBox' +import { magazineData } from '@components/brand/magazineData' const Brand = () => { - const isLoggedIn = true - const magazineData = new Array(6).fill(0).map((el, i) => i + 1) const [enterprise, setEnterprise] = useState(true) const [current, setCurrent] = useState('magazine') const [fileURL, setFILEURL] = useState('') @@ -37,7 +37,7 @@ const Brand = () => { return ( <> -
+
{enterprise && ( <> @@ -48,29 +48,31 @@ const Brand = () => { ref={fileRef} onChange={changeImageHandler} /> - + {fileURL ? '배너 이미지 변경' : '배너 이미지 추가'} { if (fileRef.current) { fileRef.current.click() } }} + style={{ zIndex: 2}} > 컴퓨터에서 가져오기 )} - {fileURL && } + {fileURL && } + @@ -98,8 +100,8 @@ const Brand = () => { {current === 'magazine' ? ( - {magazineData.map(el => ( - + {magazineData.map(data => ( + ))} ) : ( @@ -109,4 +111,4 @@ const Brand = () => { ) } -export default Brand +export default Brand \ No newline at end of file