Merge branch 'develop' of https://github.com/nowrobin/ecrire into fea…

…t/auth
nowrobin · Jul 8, 2024 · 3a98bd9 · 3a98bd9
2 parents 3443833 + 3da817f
commit 3a98bd9
Show file tree

Hide file tree

Showing 12 changed files with 947 additions and 536 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,11 +14,13 @@
     "@prisma/client": "^5.14.0",
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.44.2",
+    "@vercel/analytics": "^1.3.1",
     "@vercel/postgres": "^0.8.0",
     "next": "14.2.3",
     "next-auth": "^4.24.7",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/public/chevron-left.svg b/public/chevron-left.svg
diff --git a/public/chevron-right.svg b/public/chevron-right.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,15 +1,14 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { Analytics } from "@vercel/analytics/react";
 import Header from "./component/header/page";
 
-// import AuthContext from "./api/auth/providers";
-
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Ecrire",
-  description: "Type your Quote of the day",
+  description: "Type quote of the day",
 };
 
 export default function RootLayout({
@@ -18,10 +17,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="kor">
+    <html lang="en">
       <body className={inter.className}>
         <Header></Header>
         {children}
+        <Analytics />
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,12 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { quotes } from "@/app/quotes";
+import Image from "next/image";
+import chevLeft from "../../public/chevron-left.svg";
+import chevRight from "../../public/chevron-right.svg";
+import Link from "next/link";
+import IdStore from "./store";
 
 interface Word {
   content: string;
@@ -11,20 +17,30 @@ interface Letter extends Word {
   wordIndex: number;
   letters: string[];
 }
+type QUOTE = {
+  title: string;
+  author: string;
+  content: string;
+};
 
 export default function Home() {
-  //Get Session Info
-  //For sentence
   const [sentenceCurrent, setSentenceCurrent] = useState(0); //sentence Current position
   const [textValue, setTextValue] = useState(""); //for the print text
-  // let inputCollection: string[] = [];
   const [inputCollection, setInputCollection] = useState<string[]>([]);
-  const quote = {
-    title: "눈물을 마시는 새",
-    author: "이영도",
-    content:
-      "아름다운 나의 벗이여, 내 형제여. 살았을 적 언제나 내 곁에,\n죽은 후엔 영원히 내 속에 남은 이여 다시 돌아온 봄이건만,\n꽃잎 맞으며 그대와 거닐 수 없으니 봄은 왔으되 결코 봄이 아니구나.",
-  };
+  const [quoteNumber, setQuoteNumber] = useState<number>(0);
+  const [quote, setQuote] = useState<QUOTE>(quotes[0]);
+  const [userName, setUserName] = useState("");
+  const { id, setId } = IdStore();
+  const testName = "test";
+
+  useEffect(() => {
+    setTextValue("");
+    setQuote(quotes[quoteNumber]);
+    setId(testName);
+    setUserName(id);
+  }, [quoteNumber, id, setId]);
+
+  console.log(userName);
 
   const sentences = quote.content.split("\n");
 
@@ -33,7 +49,6 @@ export default function Home() {
     let targetLength = targetValue[sentenceCurrent].length;
     if (targetLength == sentences[sentenceCurrent].length) {
       setInputCollection((prev: string[]) => {
-        //다음 index가 없거나, 처음 들어올때
         if (prev[sentenceCurrent] == undefined || prev.length == 0) {
           return [...prev, targetValue[sentenceCurrent]];
         } else {
@@ -94,7 +109,6 @@ export default function Home() {
         <span className="text-red-800">{previousInputValue[wordIndex]}</span>
       );
     }
-
     let testInput = textValue.split("\n");
     let testInputLetter = testInput[sentenceCurrent].split("");
 
@@ -131,6 +145,20 @@ export default function Home() {
       </div>
     );
   };
+
+  const handleNextClick = () => {
+    if (quoteNumber + 1 >= quotes.length) {
+      setQuoteNumber(0);
+    } else setQuoteNumber((prev) => ++prev);
+    setQuote(quotes[quoteNumber]);
+  };
+  const handlePrevClick = () => {
+    if (quoteNumber <= 0) {
+      setQuoteNumber(quotes.length - 1);
+    } else setQuoteNumber((prev) => --prev);
+    setQuote(quotes[quoteNumber]);
+  };
+
   return (
     <div className="flex flex-col items-start w-[50%] m-32">
       <div id="print" className="flex  w-[36rem] h-[13rem] gap-1  p-10">
@@ -153,9 +181,22 @@ export default function Home() {
           onKeyDown={handleKeyDown}
         ></textarea>
       </div>
-      <hr className=" w-[100%] h-[0.75px] bg-white"></hr>
-      <div>{quote.author}</div>
-      <div>{quote.title}</div>
+      <hr className=" w-[150%] h-[0.75px] bg-white"></hr>
+      <div className="flex flex-row gap-4 mt-2 ml-2">
+        <button onClick={handlePrevClick}>
+          <Image src={chevLeft} alt="chevLeft" width={20} />
+        </button>
+        <div className="flex flex-col ">
+          <div className=" h-[20px]">{"저자 :  " + quote.author}</div>
+          <div className=" h-[20px]">{"제목 :  " + quote.title}</div>
+        </div>
+        <button className="" onClick={handleNextClick}>
+          <Image src={chevRight} alt="chevLeft" width={20} />
+        </button>
+        <div className="ml-12 mt-4 text-white">
+          <Link href={"/userfeed"}>Leave Us a feedback===</Link>
+        </div>
+      </div>
     </div>
   );
 }