diff --git a/src/Router.js b/src/Router.js index 6d66de6..ed1088a 100644 --- a/src/Router.js +++ b/src/Router.js @@ -5,7 +5,6 @@ import Category from './routes/Category'; import CateList from './routes/CateList'; import Login from './routes/Login'; import styled from 'styled-components'; -// import Header from './components/Header'; import SetAllergies from './routes/SetAllergies'; import SetSpecial from './routes/SetSpecial'; import SetStart from './routes/SetStart'; diff --git a/src/components/Header.js b/src/components/Header.js index 8651ce4..78d9c04 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -4,13 +4,16 @@ import user from '../imgs/User.png'; const Head = styled.div` display: flex; + height: 10vh; + flex-direction: row; justify-content: space-between; - padding: 30px; + align-items: center; + padding: 0 20px; `; const Img = styled.img` /* margin: 30px; */ - width: 45px; + width: 30px; `; export default function Header() { diff --git a/src/imgs/Logo_White.png b/src/imgs/Logo_White.png new file mode 100644 index 0000000..ca7671d Binary files /dev/null and b/src/imgs/Logo_White.png differ diff --git a/src/imgs/Spoon.png b/src/imgs/Spoon.png new file mode 100644 index 0000000..c975f26 Binary files /dev/null and b/src/imgs/Spoon.png differ diff --git a/src/routes/Product.js b/src/routes/Product.js index ccee2ac..1dfee98 100644 --- a/src/routes/Product.js +++ b/src/routes/Product.js @@ -1,3 +1,216 @@ +import styled from 'styled-components'; +import Header from '../components/Header'; +import theme from '../theme'; +import Logo_White from '../imgs/Logo_White.png'; +import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; +import Spoon from '../imgs/Spoon.png'; + +const products = { + img: 'https://image.homeplus.kr/td/efa1a935-1101-472f-b554-4feae2014745', + name: '고래밥 볶음양념맛', + type: '과자(유처리제품)', + allergy: ['땅콩', '대두', '밀', '돼지고기', '복숭아'], + ingredients: [ + '밀가루', + '알파옥수수분말', + '변성전분', + '식물성유지1', + '볶음양념맛시즈닝', + '식물성유지2', + '갈색설탕', + '백설탕', + '유단백혼합분말', + '전분', + '바베큐양념페이스트', + '혼합치즈분말', + '패각칼슘', + '식염', + '산도조절제', + '유화제', + ], +}; + +const myAllergies = ['대두', '밀']; + +const Page = styled.div` + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + height: 90vh; + /* border: 1px solid black; */ +`; + +const ProductImg = styled.img` + width: 200px; +`; + +const Img = styled.img` + width: 100px; +`; + +const Slide = styled.div` + padding: 30px; + border-radius: 25px 25px 0 0; + width: 90%; + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + background-color: ${theme.palette.mono.mono8}; +`; + +const Grids = styled.div` + min-width: 320px; + display: grid; + grid-template-columns: 1fr 1fr; + padding: 5px; +`; + +const Value = styled.div` + font-size: 16px; + color: ${theme.palette.mono.mono2}; +`; +const Item = styled.div` + display: flex; + justify-content: flex-end; + font-size: 16px; + color: ${theme.palette.mono.mono2}; + font-weight: bold; +`; + +const Alert = styled.div` + display: flex; + gap: 10px; + width: 320px; + height: 50px; + border-radius: 5px; + font-size: 14px; + font-weight: 500; + margin: 30px 0; + color: white; + align-items: center; + justify-content: center; + background-color: ${(props) => props.backgroundColor || null}; + border: 3px solid ${theme.palette.primary.main}; +`; + +const Container = styled.div` + max-width: 330px; + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 40px; +`; + +const Allergy = styled.div` + font-size: 16px; + font-weight: 600; + color: ${(props) => props.color || theme.palette.mono.mono1}; +`; + +const Ingredients = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +const Ingredient = styled.div` + font-size: 14px; + font-weight: 100; + color: ${theme.palette.mono.mono1}; +`; + +const Divider = styled.div` + margin: 20px 0; + display: flex; + gap: 10px; + height: 2px; +`; + +const Div = styled.div` + height: 100%; + width: 10px; + background-color: ${theme.palette.mono.mono2}; +`; + export default function Product() { - return
Product Page
; + let isOk = false; + return ( + <> +
+ + + + + + + {[ + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + ].map((item) => ( +
+ ))} + + +
+ + 제품명 + {products.name} + + + 식품유형 + {products.type} + +
+ + {isOk ? ( + + + 알레르기 주의 성분이 포함되어 있어요 + + ) : ( + + spoon + 안심하고 먹을 수 있어요 + + )} + + + {products.allergy.map((allergy) => + myAllergies.includes(allergy) ? ( + {allergy}, + ) : ( + {allergy}, + ), + )} + + + + 원재료정보 + + {products.ingredients.map((ingre) => ( + {ingre}, + ))} + + + + + + ); } diff --git a/src/theme.js b/src/theme.js index da432cf..2404a14 100644 --- a/src/theme.js +++ b/src/theme.js @@ -15,6 +15,7 @@ const theme = createTheme({ main: '#FF2C00', // 빨강 }, mono: { + main: '#FFFFFF', mono1: '#FFFFFF', // 흰색 mono2: '#F3F3F4', // 살짝 어두운 흰색 mono3: '#E7E8E9', // 어두운 하양 @@ -22,10 +23,8 @@ const theme = createTheme({ mono5: '#9FA3A9', // 밝은 회색 mono6: '#6F757E', // 회색 mono7: '#3F4753', // 진한 회색 - mono8: '#27303E', // 더 진한 회색 - }, - black: { - main: '#000000', // 검정 + mono8: '#2F2E2D', // 더 진한 회색 + black: '#000000', // 검정 }, }, });