#12/product page (#15)

DREAMLANDTHON · Jul 28, 2023 · 4f78c9c · 4f78c9c
2 parents 68e0e8f + f912de5
commit 4f78c9c
Show file tree

Hide file tree

Showing 16 changed files with 558 additions and 51 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,10 +17,9 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# custom
-.env
diff --git a/src/App.js b/src/App.js
@@ -59,6 +59,7 @@ table {
 }
 * {
   box-sizing: border-box;
+
 }
 /* body {
   font-weight: 300;

diff --git a/src/Router.js b/src/Router.js
@@ -9,6 +9,7 @@ import SetAllergies from './routes/SetAllergies';
 import SetSpecial from './routes/SetSpecial';
 import SetStart from './routes/SetStart';
 import SetFinish from './routes/SetFinish';
+import MyPage from './routes/MyPage';
 
 const Page = styled.div`
   display: flex;
@@ -43,6 +44,9 @@ function Router() {
             <Route exact path="/Login">
               <Login />
             </Route>
+            <Route exact path="/MyPage">
+              <MyPage />
+            </Route>
             <Route exact path="/set">
               <SetStart />
             </Route>

diff --git a/src/apis/like.js b/src/apis/like.js
@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+export const addLike = async (id, data) => {
+  const response = await axios.post(
+    `${process.env.REACT_APP_BASE_URL}/api/item/${id}/like`,
+    data,
+  );
+  return response.data;
+};
+
+export const deleteLike = async (id, data) => {
+  const response = await axios.delete(
+    `${process.env.REACT_APP_BASE_URL}/api/item/${id}/like`,
+    data,
+  );
+  return response.data;
+};
diff --git a/src/apis/member.js b/src/apis/member.js
@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export const firstSignUp = async (data) => {
+  const response = await axios.post(
+    `${process.env.REACT_APP_BASE_URL}/api/user/first`,
+    data,
+  );
+  return response;
+};
+
+export const addtionalSignUp = async (data) => {
+  const response = await axios.post(
+    `${process.env.REACT_APP_BASE_URL}/api/user`,
+    data,
+  );
+  return response;
+};
+
+export const getProfile = async (id) => {
+  const response = await axios.get(
+    `${process.env.REACT_APP_BASE_URL}/api/user/${id}`,
+  );
+  return response.data;
+};
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 import logo from '../imgs/Logo.png';
 import user from '../imgs/User.png';
+import { Link, useHistory } from 'react-router-dom';
+import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';
 
 const Head = styled.div`
   display: flex;
@@ -9,19 +11,43 @@ const Head = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
+  background-color: ${(props) => props.backgroundColor || '#ffffff'};
 `;
 
 const Img = styled.img`
   /* margin: 30px; */
   width: 30px;
 `;
 
-export default function Header() {
+const BackButton = styled.button`
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+`;
+
+export default function Header(props) {
+  const history = useHistory();
+
+  const handleGoBack = () => {
+    history.goBack();
+  };
   return (
     <>
-      <Head>
-        <Img src={logo} alt="logo" />
-        <img style={{ width: '30px', height: '30px' }} src={user} alt="user" />
+      <Head backgroundColor={props.backgroundColor}>
+        {props.logoDisplay === 'none' ? (
+          <BackButton onClick={handleGoBack}>
+            <ArrowBackIosNewRoundedIcon color="mono" />
+          </BackButton>
+        ) : (
+          <Link to="/">
+            <Img src={logo} alt="logo" />
+          </Link>
+        )}
+
+        <Link to="/MyPage">
+          <Img style={{ display: props.userDisplay }} src={user} alt="user" />
+        </Link>
       </Head>
     </>
   );

diff --git a/src/imgs/Background.png b/src/imgs/Background.png
diff --git a/src/imgs/CanEat.png b/src/imgs/CanEat.png
diff --git a/src/imgs/Dot.png b/src/imgs/Dot.png
diff --git a/src/imgs/Saved.png b/src/imgs/Saved.png
diff --git a/src/imgs/whoie_cookie.png b/src/imgs/whoie_cookie.png
diff --git a/src/routes/CateList.js b/src/routes/CateList.js
@@ -1,3 +1,200 @@
+import styled from 'styled-components';
+import user from '../imgs/User.png';
+import { useLocation } from 'react-router-dom';
+// import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';
+import WholeCookie from '../imgs/whoie_cookie.png';
+// import Bread from '../imgs/bread.png';
+// import Noodles from '../imgs/noodles.png';
+// import Drink from '../imgs/drink.png';
+import theme from '../theme';
+import Header from '../components/Header';
+
+const products = [
+  {
+    name: '고래밥',
+    img: 'https://image.homeplus.kr/td/efa1a935-1101-472f-b554-4feae2014745',
+  },
+  {
+    name: '고래밥',
+    img: 'https://image.homeplus.kr/td/efa1a935-1101-472f-b554-4feae2014745',
+  },
+  {
+    name: '고래밥',
+    img: 'https://image.homeplus.kr/td/efa1a935-1101-472f-b554-4feae2014745',
+  },
+  {
+    name: '고래밥',
+    img: 'https://image.homeplus.kr/td/efa1a935-1101-472f-b554-4feae2014745',
+  },
+];
+
+const Page = styled.div`
+  background-color: black;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  overflow-y: auto;
+`;
+
+const Head = styled.div`
+  display: flex;
+  height: 10vh;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  background-color: black;
+`;
+
+const Img = styled.img`
+  width: 30px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: start;
+  align-items: start;
+  height: 90vh;
+  max-width: 320px;
+  min-width: 320px;
+`;
+const TitleGrids = styled.div`
+  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 15px;
+  /* border: 1px solid red; */
+  margin-top: 20px;
+`;
+
+const Logo = styled.img`
+  width: 50px;
+`;
+
+const Title = styled.div`
+  color: white;
+  font-weight: bold;
+  font-size: 28px;
+  margin-bottom: 10px;
+`;
+const SubTitle = styled.div`
+  color: white;
+  font-size: 18px;
+`;
+
+const Text = styled.div`
+  color: white;
+  font-size: 20px;
+  font-weight: 500;
+  margin: 20px;
+`;
+
+const ItemContainer = styled.div`
+  margin-bottom: 20px;
+`;
+
+const Grids = styled.div`
+  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  /* border: 1px solid blue; */
+  min-width: 320px;
+  justify-items: center;
+  gap: 30px;
+`;
+
+const Card = styled.div`
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 170px;
+  justify-content: space-between;
+`;
+
+const RecommGrids = styled(Grids)`
+  justify-items: end;
+`;
+
+const ProductImg = styled.img`
+  border-radius: 15px;
+  width: 150px;
+`;
+const ProductName = styled.div`
+  margin-top: 10px;
+  font-size: 18px;
+`;
+
+const RedBackground = styled.div`
+  background-color: ${theme.palette.primary.main};
+  width: 130px; /* Adjust the width as needed */
+  height: 130px; /* Adjust the height as needed */
+  position: relative;
+  border-radius: 15px;
+`;
+
+const ProductRecommImg = styled.img`
+  border-radius: 15px;
+  width: 130px;
+  position: absolute;
+  top: 10%;
+  right: 10%;
+  /* width: 100%;
+  height: 100%; */
+  z-index: 1;
+`;
 export default function CateList() {
-  return <div> CateList Page </div>;
+  // const location = useLocation();
+  // const { title, SubTitle, img } = location.state;
+  // console.log('title', title);
+  // console.log('Img', img);
+  return (
+    <>
+      <Header
+        backgroundColor={theme.palette.mono.black}
+        backDisplay="block"
+        logoDisplay="none"
+      />
+      <Page>
+        <Container>
+          <TitleGrids>
+            <Logo src={WholeCookie} alt="img" />
+            <div>
+              <Title>Snack</Title>
+              <SubTitle>과자</SubTitle>
+            </div>
+          </TitleGrids>
+          <ItemContainer>
+            <Text>글루텐 프리 인기 상품</Text>
+            <RecommGrids>
+              {products.slice(0, 2).map((item) => (
+                <Card>
+                  <div>
+                    <RedBackground>
+                      <ProductRecommImg src={item.img} />
+                    </RedBackground>
+                  </div>
+                  <ProductName>{item.name}</ProductName>
+                </Card>
+              ))}
+            </RecommGrids>
+          </ItemContainer>
+          <ItemContainer>
+            <Text>우유 알레르기 대체 상품</Text>
+            <Grids>
+              {products.map((item) => (
+                <Card>
+                  <ProductImg src={item.img} />
+                  <ProductName>{item.name}</ProductName>
+                </Card>
+              ))}
+            </Grids>
+            <div style={{ height: '200px' }} />
+          </ItemContainer>
+        </Container>
+      </Page>
+    </>
+  );
 }
diff --git a/src/routes/Category.js b/src/routes/Category.js
@@ -14,6 +14,9 @@ const Container = styled.div`
   gap: 8px;
   justify-content: center;
   align-items: center;
+  height: 90vh;
+
+  background-color: ${theme.palette.mono.black};
 `;
 
 const Item = styled.div`
@@ -25,9 +28,15 @@ const Item = styled.div`
   padding: 20px;
   border-radius: 14px;
 `;
+
+const Ment = styled.div`
+  min-width: 370px;
+  display: flex;
+`;
+
 const Title = styled.div`
   display: flex;
-  font-size: 28px;
+  font-size: ${(props) => props.fontSize || '28px'};
   font-weight: bold;
   color: ${(props) => props.color || 'white'};
   margin-bottom: 10px;
@@ -47,9 +56,24 @@ const Img = styled.img`
 export default function Category() {
   return (
     <>
-      <Header />
+      <Header backgroundColor={theme.palette.mono.black} />
       <Container>
-        <Link to="/set">
+        <Ment>
+          <Title fontSize="22px">
+            안전하고 맛있게 먹을 수 있는
+            <br /> 맞춤형 식품을 추천해줄게요!
+          </Title>
+        </Ment>
+        <Link
+          to={{
+            pathname: '/category/1',
+            state: {
+              title: 'Snack',
+              SubTitle: '과자',
+              img: 'Cookie',
+            },
+          }}
+        >
           <Item>
             <Title>Snack</Title>
             <SubTitle>과자</SubTitle>
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ table { @@
     }
     * {
       box-sizing: border-box;
     }
     /* body {
       font-weight: 300;
@@ Expand Down @@