엄성진 / Learn_In_Web

Go to a project
Toggle navigation Toggle navigation pinning
sungjin
d3a0ca36 1 parent d9740a5a

Add full support for difficulty pages.

Inline Side-by-side
Showing 4 changed files with 91 additions and 25 deletions
import { Link } from "@nextui-org/react";
import { getPostsByDifficulty } from "../../api/post";
import { useState } from "react";
import { useEffect } from "react";
import { useRouter } from "next/router";
export default function Popular() {
const [posts, setPosts] = useState([]);
const router = useRouter();
useEffect(() => {
getPostsByDifficulty(3).then(setPosts);
}, []);
const DateType = (date) => {
console.log(date);
const dateObj = new Date(date);
const month = dateObj.toLocaleString("default", { month: "long" });
const day = dateObj.getDate();
const year = dateObj.getFullYear();
return dateObj.toLocaleString();
}
return (
<div className="ml-10 mr-10">
<ul>
{posts.map(post => (
<li key={post.id}>
<a onClick={() => router.push(`/post/${post.id}`)} className="cursor-pointer transition
duration-100 transform hover:text-white text-2xl">
{post.title}
</a>
<span className="float-right">{DateType(post.createdAt)}</span>
</li>
))}
</ul>
</div>
);
}
\ No newline at end of file
......@@ -2,20 +2,33 @@ import { Link } from "@nextui-org/react";
import { getPostsByDifficulty } from "../../api/post";
import { useState } from "react";
import { useEffect } from "react";
import { useRouter } from "next/router";
export default function Popular() {
const [posts, setPosts] = useState([]);
const router = useRouter();
useEffect(() => {
getPostsByDifficulty(1).then(setPosts);
}, []);
const DateType = (date) => {
console.log(date);
const dateObj = new Date(date);
const month = dateObj.toLocaleString("default", { month: "long" });
const day = dateObj.getDate();
const year = dateObj.getFullYear();
return dateObj.toLocaleString();
}
return (
<div>
<div className="ml-10 mr-10">
<ul>
{posts.map(post => (
<li key={post.id}>
<Link href={`/post/${post.id}`}>
<a>{post.title}</a>
</Link>
<a onClick={() => router.push(`/post/${post.id}`)} className="cursor-pointer transition
duration-100 transform hover:text-white text-2xl">
{post.title}
</a>
<span className="float-right">{DateType(post.createdAt)}</span>
</li>
))}
</ul>
......
......@@ -2,20 +2,33 @@ import { Link } from "@nextui-org/react";
import { getPostsByDifficulty } from "../../api/post";
import { useState } from "react";
import { useEffect } from "react";
import { useRouter } from "next/router";
export default function Popular() {
const [posts, setPosts] = useState([]);
const router = useRouter();
useEffect(() => {
getPostsByDifficulty(2).then(setPosts);
}, []);
const DateType = (date) => {
console.log(date);
const dateObj = new Date(date);
const month = dateObj.toLocaleString("default", { month: "long" });
const day = dateObj.getDate();
const year = dateObj.getFullYear();
return dateObj.toLocaleString();
}
return (
<div>
<div className="ml-10 mr-10">
<ul>
{posts.map(post => (
<li key={post.id}>
<Link href={`/post/${post.id}`}>
<a>{post.title}</a>
</Link>
<a onClick={() => router.push(`/post/${post.id}`)} className="cursor-pointer transition
duration-100 transform hover:text-white text-2xl">
{post.title}
</a>
<span className="float-right">{DateType(post.createdAt)}</span>
</li>
))}
</ul>
......
import * as auth from "../api/auth";
import push from "next/router";
import { useRouter } from "next/router";
export default function Signup() {
const router = useRouter();
return (
<div>
<h1>Signup</h1>
<div className="flex h-auto">
<div className="w-auto inline-block p-3 rounded-lg m-auto">
<h1 className="font-bold text-4xl text-center">회원가입</h1>
<form onSubmit={handleSubmit}>
<label htmlFor="name">Name</label>
<input type="text" id="name" />
<input type="email" id="email" placeholder="email" className="my-2 rounded-sm" />
<br />
<label htmlFor="email">Email</label>
<input type="email" id="email" />
<input type="text" id="name" placeholder="nickname" className="my-2 rounded-sm" />
<br />
<label htmlFor="password">Password</label>
<input type="password" id="password" />
<input type="password" id="password" className="my-2 rounded-sm" placeholder="password" />
<br />
<label htmlFor="password-confirm">Confirm Password</label>
<input type="password" id="password-confirm" />
<input type="password" id="passwordConfirm" className="my-2 rounded-sm" placeholder="password confirm" />
<br />
<button type="submit">Signup</button>
<button type="submit" className="mt-2 px-4 py-2 text-base font-semibold text-white transition duration-500 transform bg-blue-300 rounded-lg hover:shadow-lg focus:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-blue-300 motion-reduce:transform-none hover:scale-105 tramsform">Signup</button>
</form>
</div>
</div>
);
}
function handleSubmit(event) {
async function handleSubmit(event) {
event.preventDefault();
const form = event.target;
const name = form.name.value;
......@@ -36,12 +37,14 @@ function handleSubmit(event) {
alert("Passwords do not match");
return;
}
const signup = auth.signup(name, email, password);
if(!signup) {
const signup = await auth.signup(name, email, password);
if (!signup) {
alert("Signup failed");
}
else {
alert("Signup success");
return push("/");
return router.push("/");
}
}
}
......