Merge branch 'mission4/geongyu09' into mission4/geongyu09-new

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

package.json

@@ -14,7 +14,8 @@
     "@actions/github": "^6.0.0",
     "@slack/webhook": "^7.0.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.64",
@@ -24,6 +25,7 @@
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "^3.2.5",
     "vite": "^5.1.6"
   }
 }

src/components/Intro.jsx

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export default function Intro() {
+  return (
+    <IntroContainer>
+      <h1>ECNV</h1>
+      <div>
+        <p>Welcome to ECNV, the best place to buy your favorite items.</p>
+        <p>Here is a list of items you can buy:</p>
+      </div>
+    </IntroContainer>
+  );
+}
+
+const IntroContainer = styled.div`
+  background-color: rgb(248, 250, 252);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  background: url("https://cdn.pixabay.com/photo/2016/04/03/11/36/berlin-1304370_1280.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  h1 {
+    font-size: 8rem;
+    color: rgb(2, 6, 23);
+    background-color: white;
+    --tw-bg-opacity: 0.35;
+    opacity: 35%;
+    padding-inline: 4rem;
+  }
+  div {
+    margin-top: 5rem;
+    background-color: #ffffff;
+  }
+`;

src/components/ItemFeed.jsx

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export default function ItemFeed({ id, src, name, price }) {
+  return (
+    <StyledList key={id}>
+      <img src={src} />
+      <div>
+        <span>{name}</span>
+        <span>{price}</span>
+      </div>
+    </StyledList>
+  );
+}
+
+const StyledList = styled.li`
+  width: 100%;
+  img {
+    width: 100%;
+    border-radius: 0.75rem;
+  }
+  div {
+    display: flex;
+    flex-direction: column;
+  }
+`;

src/components/Shop.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import Intro from "./Intro";
+import ShoppingList from "./ShoppingList";
+import ToggleBtn from "./ToggleBtn";
+import { useEffect, useState } from "react";
+
+export default function Shop() {
+  const [items, setItems] = useState([]);
+  const [isSale, setIsSale] = useState(false);
+  const url = !isSale ? "api/products.json" : "api/sale_products.json";
+  const buttonText = !isSale ? "Show Sale product" : "All products";
+
+  useEffect(() => {
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => setItems(data));
+  }, [isSale]);
+
+  const buttonHandler = () => setIsSale(!isSale);
+
+  return (
+    <Main>
+      <Intro />
+      <ToggleBtn buttonText={buttonText} buttonHandler={buttonHandler} />
+      <ShoppingList items={items} />
+    </Main>
+  );
+}
+
+const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;

src/components/ShoppingList.jsx

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import ItemFeed from "./ItemFeed";
+
+export default function ShoppingList({ items }) {
+  return (
+    <StyledUl>
+      {items.map((item) => (
+        <ItemFeed key={item.id} {...item} />
+      ))}
+    </StyledUl>
+  );
+}
+
+const StyledUl = styled.ul`
+  display: grid;
+  padding-left: 5rem;
+  padding-right: 5rem;
+  margin-top: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6rem;
+  width: 100vw;
+`;

src/components/ToggleBtn.jsx

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export default function ToggleBtn({ buttonText, buttonHandler }) {
+  return <StyledBtn onClick={buttonHandler}>{buttonText}</StyledBtn>;
+}
+
+const StyledBtn = styled.button`
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: 1.25rem;
+  margin-right: 5rem;
+  align-self: flex-end;
+  border-radius: 0.5rem;
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+`;