feat(faust): Basic skeleton after keyword selection

키워드 선택 후 플레이 화면으로 넘어가는 부분을 구현하였습니다. #31
pseudolab · Jul 14, 2024 · 11318d3 · 11318d3
1 parent 2bd33dd
commit 11318d3
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 12 deletions.
diff --git a/src/modules/Faust/FaustContainer.tsx b/src/modules/Faust/FaustContainer.tsx
@@ -16,9 +16,19 @@ const getKeywordList = () => {
   ];
 };
 
+const useInput = (initialValue: string) => {
+  const [value, setValue] = useState(initialValue);
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  return { value, onChange };
+};
+
 const FaustContainer = () => {
   const [keywordList, _] = useState(getKeywordList());
   const [selectedKeywords, setSelectedKeywords] = useState<string[]>([]);
+  const [isClicked, setIsClicked] = useState<boolean>(false);
+  const sentenceId = useInput("42");
 
   const handleKeywordClick = (keyword: string) => {
     setSelectedKeywords((prevSelected) => {
@@ -30,12 +40,51 @@ const FaustContainer = () => {
       return prevSelected;
     });
   };
+  const handleSentenceIDChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    sentenceId.onChange(event);
+  };
+  const handleRegisterSentence = () => {
+    try {
+      const sentences: { [key: string]: string } = {
+        "42": "삶과 우주, 그리고 모든 것에 대한 답은 42 입니다.",
+      };
+
+      if (typeof sentenceId.value !== "string") {
+        throw new Error("sentenceId.value must be a string");
+      }
+
+      if (!sentences.hasOwnProperty(sentenceId.value)) {
+        throw new Error(
+          `No sentence found for sentenceId.value: ${sentenceId.value}`
+        );
+      }
+
+      alert(sentences[sentenceId.value]);
+    } catch (error) {
+      return `Error: ${(error as any).message}`;
+    }
+  };
+
+  const handleNextButtonClick = () => {
+    if (selectedKeywords.length === 4) {
+      setIsClicked(true);
+    } else {
+      alert("4개의 키워드를 선택해주세요.");
+    }
+  };
 
   return (
     <FaustPresenter
       keywordList={keywordList}
       selectedKeywords={selectedKeywords}
       handleKeywordClick={handleKeywordClick}
+      isClicked={isClicked}
+      sentenceId={sentenceId.value}
+      handleNextButtonClick={handleNextButtonClick}
+      handleSentenceIDChange={handleSentenceIDChange}
+      handleRegisterSentence={handleRegisterSentence}
     />
   );
 };

diff --git a/src/modules/Faust/FaustPresenter.tsx b/src/modules/Faust/FaustPresenter.tsx
@@ -1,5 +1,5 @@
 import { styled } from "@mui/material";
-import { Container } from "@mui/material";
+import { Container, Input } from "@mui/material";
 
 const Wrapper = styled(Container)({
   width: "60vw",
@@ -29,28 +29,69 @@ const Keyword = styled(Container)<{ isSelected: boolean }>((props) => ({
   },
 }));
 
+const MyButton = styled(Container)({
+  marginTop: "1rem",
+  width: "100%",
+  height: "3rem",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  background: "#ffcc33",
+  borderRadius: "5px",
+});
+
+const InputContainer = styled(Container)({
+  marginTop: "1rem",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+});
+
+const InputBox = styled(Input)({
+  marginTop: "5rem",
+});
+
 // Container Props
 type FaustPresenterProps = {
   keywordList: string[];
   selectedKeywords: string[];
+  isClicked: boolean;
+  sentenceId: string;
   handleKeywordClick: (keyword: string) => void;
+  handleNextButtonClick: () => void;
+  handleSentenceIDChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleRegisterSentence: () => void;
 };
 
 const FaustPresenter = (props: FaustPresenterProps) => {
   return (
     <>
       <Wrapper>
-        <KeywordContainer>
-          {props.keywordList.map((keyword, index) => (
-            <Keyword
-              key={index}
-              isSelected={props.selectedKeywords.includes(keyword)}
-              onClick={() => props.handleKeywordClick(keyword)}
-            >
-              {keyword}
-            </Keyword>
-          ))}
-        </KeywordContainer>
+        {props.isClicked ? (
+          <>
+            <InputBox
+              placeholder="단어 ID 입력"
+              value={props.sentenceId}
+              onChange={props.handleSentenceIDChange}
+            ></InputBox>
+            <MyButton onClick={props.handleRegisterSentence}>등록</MyButton>
+          </>
+        ) : (
+          <>
+            <KeywordContainer>
+              {props.keywordList.map((keyword, index) => (
+                <Keyword
+                  key={index}
+                  isSelected={props.selectedKeywords.includes(keyword)}
+                  onClick={() => props.handleKeywordClick(keyword)}
+                >
+                  {keyword}
+                </Keyword>
+              ))}
+            </KeywordContainer>
+            <MyButton onClick={props.handleNextButtonClick}>다음</MyButton>
+          </>
+        )}
       </Wrapper>
     </>
   );