From 0a86c2eec1eab456f01d99df0c0932f78c4c1b5a Mon Sep 17 00:00:00 2001 From: healim01 <22000770@handong.edu> Date: Fri, 28 Jul 2023 21:48:44 +0900 Subject: [PATCH 1/4] :sparkles: fix css --- src/components/Header.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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() { From 823e76492ba2dec69ec3bb09a30a561f257c6438 Mon Sep 17 00:00:00 2001 From: healim01 <22000770@handong.edu> Date: Fri, 28 Jul 2023 21:49:04 +0900 Subject: [PATCH 2/4] :lipstick: add png --- src/imgs/Logo_White.png | Bin 0 -> 2055 bytes src/imgs/Spoon.png | Bin 0 -> 1209 bytes src/theme.js | 7 +++---- 3 files changed, 3 insertions(+), 4 deletions(-) create mode 100644 src/imgs/Logo_White.png create mode 100644 src/imgs/Spoon.png diff --git a/src/imgs/Logo_White.png b/src/imgs/Logo_White.png new file mode 100644 index 0000000000000000000000000000000000000000..ca7671d9cad51c459d504a403c74d33150ba8077 GIT binary patch literal 2055 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 literal 0 HcmV?d00001 diff --git a/src/imgs/Spoon.png b/src/imgs/Spoon.png new file mode 100644 index 0000000000000000000000000000000000000000..c975f267264075e558a5f618553b055c77c63ef9 GIT binary patch literal 1209 zcmV;q1V;ObP)@~0drDELIAGL9O(c600d`2O+f$vv5yPaXARO*iBj7f{AFcCLC*uo813tHuW{F1D6DtEYv2UkJS#0g=^l?Ff|m1*@UchN|QF zpDq+cQVQNRDPmPB`hRpYiu{5oCL)_Wtl$mA23zX*@B|7L;*Vq()63;k%ik%Bo& zzy-YvhU&HudY-As3ODb6N$7!kR9_C8P%vRCGO7pQ0^y`6h*N?sT;uQ-Hp$KNbiwJ@ z^S(-)$;sFTUaBzMxzBr^4v38BS9gF|2eZ&%!YhcMKkhzkucExkhI zez&Ba&=$^k655;4H~EU;=#^V}EQq-50lFA=^tZ3Titc2b(m`GfrlpG!Jil)87ew66 z)52wGBzx$$c~w809J&hdkqakp$SSZjwVIg7M3PRPnTSHQuSGqI`S)lG z?h?vN zt>acjCagGlwm|4Wx!;ak9JekqVXA+5c*CEkEwD!Vu(lY9gEc4525T(wQz0@jS|RrL zfLyn!$gd$1g zClHFD!iVYiFBTw2pR@a+0+W=wnEA#MWo%#%aR4o5?*s->h@;OYrfSR`5p|C((kqV6rpwA`_MlY0iLjqV*tbMmZNE z6BhHd@ls6DT|jO`_AnpwLFt1Hl}FFOg9JCQv`pQ!@cU{Wr`gVKTCp~0@#qAlY; X#$n$A=#b*`00000NkvXXu0mjfXP7S` literal 0 HcmV?d00001 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', // 검정 }, }, }); From a350da86625fc245c3860fff956f092e0afc4584 Mon Sep 17 00:00:00 2001 From: healim01 <22000770@handong.edu> Date: Fri, 28 Jul 2023 21:49:21 +0900 Subject: [PATCH 3/4] :sparkles: add product page --- src/routes/Product.js | 215 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 214 insertions(+), 1 deletion(-) 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}, + ))} + + + + + + ); } From 527770df9cdcbe40c1d3c792ee5d0185857ad79a Mon Sep 17 00:00:00 2001 From: healim01 <22000770@handong.edu> Date: Fri, 28 Jul 2023 21:50:05 +0900 Subject: [PATCH 4/4] :fire: rm --- src/Router.js | 1 - 1 file changed, 1 deletion(-) 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';