[3주차 기본/심화/생각 과제] Would You Like Something to Drink?

package.json

@@ -0,0 +1,3 @@
+{
+  "dependencies": {}
+}

week3/World-Cup/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

week3/World-Cup/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

week3/World-Cup/components/FirstStage.jsx

@@ -0,0 +1,181 @@
+import styled from "styled-components";
+
+import React from "react";
+
+const FirstStage = (FirstStageProps) => {
+  const {
+    tournamentStage,
+    setTournamentStage,
+    firstChoice,
+    setFirstChoice,
+    setSecondChoice,
+    setThirdChoice,
+  } = FirstStageProps;
+
+  return (
+    <FirstStageContainer>
+      <StageTitle>Choose your preference</StageTitle>
+      <ChoiceBox>
+        <Choice
+          type="button"
+          value="Coffee"
+          onClick={() => {
+            setFirstChoice("coffee");
+          }}
+          className={firstChoice === "coffee" && "selected"}
+        >
+          Coffee
+        </Choice>
+        <Choice
+          type="button"
+          value="Tea"
+          onClick={() => {
+            setFirstChoice("tea");
+          }}
+          className={firstChoice === "tea" && "selected"}
+        >
+          Tea
+        </Choice>
+        <Choice
+          type="button"
+          value="Halmi Latte"
+          onClick={() => {
+            setFirstChoice("halmi");
+          }}
+          className={firstChoice === "halmi" && "selected"}
+        >
+          Halmi Latte
+        </Choice>
+      </ChoiceBox>
+      <ButtonBox>
+        <Button
+          type="button"
+          onClick={() => {
+            setTournamentStage(tournamentStage - 1);
+            setFirstChoice("");
+            setSecondChoice("");
+            setThirdChoice("");
+          }}
+        >
+          Previous
+        </Button>
+        {firstChoice === "" ? (
+          <Button
+            type="button"
+            onClick={() => {
+              setTournamentStage(tournamentStage + 1);
+            }}
+            disabled
+          >
+            Next
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            onClick={() => {
+              setTournamentStage(tournamentStage + 1);
+            }}
+          >
+            Next
+          </Button>
+        )}
+      </ButtonBox>
+    </FirstStageContainer>
+  );
+};
+
+export default FirstStage;
+
+const FirstStageContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: calc(100vw - 20rem);
+  height: calc(100vh - 20rem);
+
+  border-radius: 2rem;
+
+  background-color: ${({ theme }) => theme.colors.blue};
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const StageTitle = styled.p`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 40rem;
+  height: 3rem;
+
+  border-radius: 0.5rem;
+  margin: 3rem 0;
+
+  background-color: ${({ theme }) => theme.colors.cream};
+  color: ${({ theme }) => theme.colors.navy};
+
+  ${({ theme }) => theme.fonts.subtitle};
+`;
+
+const ChoiceBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5rem;
+`;
+
+const Choice = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: calc((100vw - 60rem) / 2);
+  height: 20rem;
+
+  background-color: ${({ theme }) => theme.colors.cream};
+  color: ${({ theme }) => theme.colors.navy};
+
+  border: none;
+  border-radius: 1rem;
+
+  ${({ theme }) => theme.fonts.body_bold};
+
+  &:hover,
+  &.selected {
+    background-color: ${({ theme }) => theme.colors.orange};
+    color: ${({ theme }) => theme.colors.white};
+  }
+`;
+
+const ButtonBox = styled.span`
+  display: flex;
+  gap: 5rem;
+`;
+
+const Button = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 8rem;
+  height: 2rem;
+
+  margin-top: 2rem;
+
+  border-radius: 0.5rem;
+
+  background-color: ${({ theme }) => theme.colors.cream};
+  color: ${({ theme }) => theme.colors.navy};
+
+  ${({ theme }) => theme.fonts.body_bold};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.orange};
+    color: ${({ theme }) => theme.colors.white};
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.disabled_button};
+    color: ${({ theme }) => theme.colors.navy};
+    cursor: not-allowed;
+  }
+`;

week3/World-Cup/components/Random.jsx

@@ -0,0 +1,104 @@
+import styled from "styled-components";
+import React, { useState } from "react";
+import RandomResult from "./RandomResult";
+
+const Random = () => {
+  const [showResult, setShowResult] = useState(false);
+
+  const renderRandom = () => {
+    return showResult ? (
+      <RandomResult setShowResult={setShowResult} />
+    ) : (
+      <>
+        <HomeTitle>How would you like to choose your drink?</HomeTitle>
+        <RandomBox>Random!</RandomBox>
+        <StartBtn
+          type="button"
+          onClick={() => {
+            setShowResult(true);
+          }}
+        >
+          Start!
+        </StartBtn>
+      </>
+    );
+  };
+
+  return <RandomContainer>{renderRandom()}</RandomContainer>;
+};
+
+export default Random;
+
+const RandomContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: calc(100vw - 20rem);
+  height: calc(100vh - 20rem);
+
+  border-radius: 2rem;
+
+  background-color: ${({ theme }) => theme.colors.blue};
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const HomeTitle = styled.p`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 40rem;
+  height: 3rem;
+
+  border-radius: 0.5rem;
+  margin: 3rem 0;
+
+  background-color: ${({ theme }) => theme.colors.cream};
+  color: ${({ theme }) => theme.colors.navy};
+
+  user-select: none;
+
+  ${({ theme }) => theme.fonts.subtitle};
+`;
+
+const RandomBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: calc((100vw - 60rem));
+  height: 20rem;
+
+  background-color: ${({ theme }) => theme.colors.cream};
+  color: ${({ theme }) => theme.colors.navy};
+
+  border-radius: 1rem;
+
+  user-select: none;
+
+  ${({ theme }) => theme.fonts.body_bold};
+`;
+
+const StartBtn = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 8rem;
+  height: 2rem;
+
+  margin-top: 2rem;
+
+  border-radius: 0.5rem;
+
+  background-color: ${({ theme }) => theme.colors.cream};
+  color: ${({ theme }) => theme.colors.navy};
+
+  ${({ theme }) => theme.fonts.body_bold};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.orange};
+    color: ${({ theme }) => theme.colors.white};
+  }
+`;