+ 
+ 
+
-> npm install, npm start, etc.
+### Development
+
+
+ 
+ 
+ 
+ 
+{title}
-
-
-
-
-
+
+
+ 로딩중...
}>
+ {body}
--
-
-
- {user ? (
- 로딩중...
}>
+
-
- ) : (
-
- Sign in or sign up to add comments on this
- article.
-
- )}
+ {title}
+
+
+
+
+ ) : (
+
+
+ )}
+
+
+
-
+
+ {body}
++
+
+
+ ) : (
+
+
+ )}
+ HomeLoading...
;
};
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 718cda6c..54661b13 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,82 +1,12 @@
-'use client';
-
-import { loginAPI } from '@/services/users';
-import useUserStore from '@/stores/useUserStore';
-import { form, question, title } from '@/styles/account.css';
-import { input, container, flexCenter, flexRow, fillGreenButton } from '@/styles/common.css';
-import { buttonBox } from '@/styles/layout.css';
-import { LoginUser } from '@/types';
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { ChangeEvent, FormEvent, useState } from 'react';
+import FormHead from '@/components/account/FormHead';
+import SignInForm from '@/components/account/SignInForm';
+import { container, flexCenter, flexRow } from '@/styles/common.css';
const LoginPage = () => {
- const router = useRouter();
- const { login } = useUserStore();
-
- const [formData, setFormData] = useStateSign in
- Need an account?
-
+ conduit
-A place to share your knowledge.
+
+
conduit
+A place to share your knowledge.
+
diff --git a/app/register/page.tsx b/app/register/page.tsx
index 8ab918a6..9bb7eb6f 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -1,91 +1,12 @@
-'use client';
-import { registerUserAPI } from '@/services/users';
-import useUserStore from '@/stores/useUserStore';
-import { form, question, title } from '@/styles/account.css';
-import { input, container, flexRow, flexCenter, fillGreenButton } from '@/styles/common.css';
-import { buttonBox } from '@/styles/layout.css';
-import { NewUser } from '@/types';
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-
-import { ChangeEvent, FormEvent, useState } from 'react';
+import FormHead from '@/components/account/FormHead';
+import SignUpForm from '@/components/account/SignUpForm';
+import { container, flexRow, flexCenter } from '@/styles/common.css';
const RegisterPage = () => {
- const router = useRouter();
- const { login } = useUserStore();
- const [formData, setFormData] = useState({
- username: '',
- email: '',
- password: '',
- });
-
- const { mutate, isLoading } = useMutation({
- mutationFn: registerUserAPI,
- onError: error => {
- alert('회원가입에 실패했습니다.');
- console.log(error);
- },
- onSuccess: res => {
- alert('회원가입에 성공했습니다.');
- login({
- ...res.user,
- });
- router.push('/');
- },
- });
-
- const handleSubmit = (e: FormEvent) => {
- e.preventDefault();
-
- mutate({
- ...formData,
- });
- };
-
- const handleChange = (e: ChangeEvent) => {
- const { name, value } = e.target;
- setFormData(prev => ({
- ...prev,
- [name]: value,
- }));
- };
-
return (
-
);
};
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index ed259661..a1cbed6b 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,110 +1,17 @@
-'use client';
-import { updateUserAPI } from '@/services/users';
-import useUserStore from '@/stores/useUserStore';
-import { articleTextarea } from '@/styles/article.css';
-import { container, flex, hr, input } from '@/styles/common.css';
-import { logoutButton, settingBlock, settingForm, settingTitle, updateButton } from '@/styles/settings.css';
-import { useMutation } from '@tanstack/react-query';
-import { useState } from 'react';
+import LogoutButton from '@/components/settings/LogoutButton';
+import SettingForm from '@/components/settings/SettingForm';
-const SettingsPage = () => {
- const { email, username, image, bio, password, logout, updateUser } = useUserStore();
-
- // 초기화 함수로 전환
- const [formData, setFormData] = useState({
- image,
- username,
- bio,
- email,
- password,
- });
- const { mutate, isLoading } = useMutation({
- mutationFn: updateUserAPI,
- onError: err => {
- console.error(err);
- },
- onSuccess: res => {
- alert('회원 정보를 변경했습니다!');
- updateUser({
- ...res.user,
- });
- },
- });
-
- const handleSubmit = async (e: any) => {
- e.preventDefault();
+import { container, hr } from '@/styles/common.css';
+import { settingBlock, settingTitle } from '@/styles/settings.css';
- mutate({
- ...formData,
- });
- };
-
- const handleChange = (e: any) => {
- setFormData(prev => ({
- ...prev,
- [e.target.name]: e.target.value,
- }));
- };
+const SettingsPage = () => {
return (
);
diff --git a/components/account/FormHead.tsx b/components/account/FormHead.tsx
new file mode 100644
index 00000000..d85e4079
--- /dev/null
+++ b/components/account/FormHead.tsx
@@ -0,0 +1,12 @@
+import { question, title } from '@/styles/account.css';
+
+const FormHead = ({ titleText, questionText }: { titleText: string; questionText: string }) => {
+ return (
+ <>
+ ({
+ email: '',
+ password: '',
+ });
+
+ const loginSuccess = (res: UserResponse) => {
+ saveUserInfo({ ...res.user });
+ router.push('/');
+ };
+
+ const loginError = (err: Error) => {
+ console.error(err.message);
+ alert('이메일 또는 비밀번호가 잘못되었습니다.');
+ };
+
+ const { login } = useAuth({ loginSuccess, loginError });
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ login({
+ ...loginUser,
+ });
+ };
+
+ const handleChange = (e: ChangeEvent) => {
+ const { name, value } = e.target;
+ setLoginUser(prev => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
+
+ return (
+
+ );
+};
+
+export default SignInForm;
diff --git a/components/account/SignUpForm.tsx b/components/account/SignUpForm.tsx
new file mode 100644
index 00000000..d8adefd0
--- /dev/null
+++ b/components/account/SignUpForm.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import useAuth from '@/hooks/useAuth';
+import useUserStore from '@/stores/useUserStore';
+import { form } from '@/styles/account.css';
+import { fillGreenButton, input } from '@/styles/common.css';
+import { buttonBox } from '@/styles/layout.css';
+import { NewUser } from '@/types/api/users';
+import { UserAction } from '@/types/store/userStore';
+
+import { useRouter } from 'next/navigation';
+import { ChangeEvent, FormEvent, useState } from 'react';
+
+const SignUpForm = () => {
+ const router = useRouter();
+ const { saveUserInfo } = useUserStore() as UserAction;
+ const [newUser, setNewUser] = useState({
+ username: '',
+ email: '',
+ password: '',
+ });
+
+ const signupSuccess = (res: any) => {
+ saveUserInfo({
+ ...res.user,
+ });
+ router.push('/');
+ };
+
+ const signupError = () => {
+ alert('회원가입에 실패했습니다.');
+ setNewUser({
+ username: '',
+ email: '',
+ password: '',
+ });
+ };
+
+ const { signup } = useAuth({ signupSuccess, signupError });
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+
+ signup({
+ ...newUser,
+ });
+ };
+
+ const handleChange = (e: ChangeEvent) => {
+ const { name, value } = e.target;
+ setNewUser(prev => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
+
+ return (
+
+ );
+};
+
+export default SignUpForm;
diff --git a/components/article/ArticleDeleteButton.tsx b/components/article/ArticleDeleteButton.tsx
new file mode 100644
index 00000000..9df24e7e
--- /dev/null
+++ b/components/article/ArticleDeleteButton.tsx
@@ -0,0 +1,18 @@
+'use client';
+import Button from '@/composables/Button';
+import { useRouter } from 'next/navigation';
+
+const ArticleDeleteButton = ({ slug }: { slug: string }) => {
+ const router = useRouter();
+ const handleButtonClick = async () => {
+ await fetch(`/api/articles/${slug}`, { method: 'DELETE' }).then(res => res.json());
+ router.push('/');
+ };
+ return (
+
+ );
+};
+
+export default ArticleDeleteButton;
diff --git a/components/article/ArticleEditButton.tsx b/components/article/ArticleEditButton.tsx
new file mode 100644
index 00000000..aee4c79a
--- /dev/null
+++ b/components/article/ArticleEditButton.tsx
@@ -0,0 +1,17 @@
+'use client';
+import Button from '@/composables/Button';
+import { useRouter } from 'next/navigation';
+
+const ArticleEditButton = ({ slug }: { slug: string }) => {
+ const router = useRouter();
+ const handleButtonClick = () => {
+ router.push(`/editor/${slug}`);
+ };
+ return (
+
+ );
+};
+
+export default ArticleEditButton;
diff --git a/components/article/ArticleList.tsx b/components/article/ArticleList.tsx
index 675cf3ed..33c175b0 100644
--- a/components/article/ArticleList.tsx
+++ b/components/article/ArticleList.tsx
@@ -1,44 +1,35 @@
-// 'use client';
-import { ArticleAPI, fetchArticles } from '@/services/articles';
+'use client';
+
import ArticlePreview from './ArticlePreview';
-import { useInfiniteQuery } from '@tanstack/react-query';
import React, { useRef } from 'react';
+import { flexCenter } from '@/styles/common.css';
+import useCurrentTab from '@/stores/useCurrentTab';
+import useArticles from '@/hooks/useArticles';
+import { Article } from '@/types/api/articles';
+type Props = {
+ username?: string;
+};
+const ArticleList = ({ username }: Props) => {
+ const targetRef = useRef(null);
+ const { tab } = useCurrentTab();
+ const { articlesData } = useArticles({ targetRef, tab, username });
-const ArticleList = async () => {
- const { articles } = await ArticleAPI.all(1);
-
- // const { data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, status } = useInfiniteQuery({
- // queryKey: ['articles'],
- // queryFn: ({ pageParam = 1 }) => ArticleAPI.all(pageParam),
- // getNextPageParam: (lastPage, pages) => {
- // if (5 > page.current) {
- // return page.current;
- // }
- // return undefined;
- // },
- // retry: false,
- // onSuccess: () => {
- // console.log('성공' + page.current);
-
- // page.current++;
- // },
- // onError: () => {},
- // });
-
- // return (
- //
Sign up
- Have an account?
-
+ Your Settings
-
+ {titleText}
+ {questionText}
+
+ );
+};
+
+export default FormHead;
diff --git a/components/account/SignInForm.tsx b/components/account/SignInForm.tsx
new file mode 100644
index 00000000..074143ae
--- /dev/null
+++ b/components/account/SignInForm.tsx
@@ -0,0 +1,75 @@
+'use client';
+import useAuth from '@/hooks/useAuth';
+import useUserStore from '@/stores/useUserStore';
+import { form } from '@/styles/account.css';
+import { fillGreenButton, input } from '@/styles/common.css';
+import { buttonBox } from '@/styles/layout.css';
+import { LoginUser, UserResponse } from '@/types/api/users';
+import { UserAction } from '@/types/store/userStore';
+import { useRouter } from 'next/navigation';
+import { ChangeEvent, FormEvent, useState } from 'react';
+
+const SignInForm = () => {
+ const router = useRouter();
+ const { saveUserInfo } = useUserStore() as UserAction;
+
+ const [loginUser, setLoginUser] = useState
- //
- // {data?.pages.map((group, i) => (
- //
- // );
-
- return
- // {group.articles.map(article => (
- //
- // ))}
- // {articles?.map(article =>
;
+ return (
+
+ {articlesData?.pages?.at(0)?.articles?.length === 0 ? (
+ '데이터가 없습니다.'
+ ) : (
+
+ );
};
export default ArticleList;
diff --git a/components/article/ArticlePreview.tsx b/components/article/ArticlePreview.tsx
index fe220c37..8e85d993 100644
--- a/components/article/ArticlePreview.tsx
+++ b/components/article/ArticlePreview.tsx
@@ -5,8 +5,10 @@ import TagList from '../tags/TagList';
import { useRouter } from 'next/navigation';
import { FillHeartIcon } from '@/composables/icons';
import { fillGreenButton, flex, flexBetween, greenButton } from '@/styles/common.css';
-import { useMutation } from '@tanstack/react-query';
-import { favoriteArticleAPI, unFavoriteArticleAPI } from '@/services/favorites';
+import { useQueryClient } from '@tanstack/react-query';
+import useCurrentTab from '@/stores/useCurrentTab';
+import useArticles from '@/hooks/useArticles';
+
type Props = {
article: any;
};
@@ -14,23 +16,34 @@ const ArticlePreview = ({
article: { title, description, favorited, favoritesCount, tagList, author, createdAt, slug },
}: Props) => {
const router = useRouter();
+ const { tab } = useCurrentTab();
+
+ const queryClient = useQueryClient();
+
+ const onSuccess = () => {
+ queryClient.invalidateQueries({ queryKey: ['articles', tab] });
+ };
+
+ const onError = () => {
+ // 권한이 없을 경우 login 페이지로 이동
+ router.push('/login');
+ };
+
+ const { favorite, unFavorite } = useArticles({ onSuccess, onError });
+
+ const handleButtonClick = (slug: string) => {
+ if (favorited) {
+ unFavorite(slug);
+ } else {
+ favorite(slug);
+ }
+ };
- const { mutate } = useMutation({
- mutationFn: favorited ? unFavoriteArticleAPI : favoriteArticleAPI,
- onError: err => {
- console.error(err);
- },
- onSuccess: res => {
- console.log(res);
-
- console.log('좋아요!');
- },
- });
return (
+ {articlesData?.pages.map((group, i) => (
+
+ )}
+
+
+ {group?.articles?.map((article: Article) =>
+ ))}
+