- 판다마켓이 처음이신가요?
+
+ 판다마켓이 처음이신가요?
회원가입
@@ -12,21 +13,9 @@ function SignupGuide() {
);
}
-function SimpleLoginContainer() {
- return (
-
- );
-}
-
export default function Signin() {
return (
-
+
회원가입 페이지입니다. ;
+ return (
+
+
+ );
}
diff --git a/src/app/(with-Header)/faq/page.tsx b/src/app/(with-Header)/faq/page.tsx
new file mode 100644
index 000000000..2267baf9b
--- /dev/null
+++ b/src/app/(with-Header)/faq/page.tsx
@@ -0,0 +1,3 @@
+export default function Faq() {
+ return FAQ 페이지입니다. ;
+}
diff --git a/src/app/(with-Header)/layout.tsx b/src/app/(with-Header)/layout.tsx
index 621b79ddd..2aa3a4a3b 100644
--- a/src/app/(with-Header)/layout.tsx
+++ b/src/app/(with-Header)/layout.tsx
@@ -1,34 +1,5 @@
-import Link from 'next/link';
-import Image from 'next/image';
import { ReactNode } from 'react';
-
-function Icon() {
- return (
-
-
-
- );
-}
+import Header from '@/components/Header';
export default function Layout({ children }: { children: ReactNode }) {
return (
diff --git a/src/app/(with-Header)/page.tsx b/src/app/(with-Header)/page.tsx
index ac08857d5..f72520e8c 100644
--- a/src/app/(with-Header)/page.tsx
+++ b/src/app/(with-Header)/page.tsx
@@ -1,3 +1,133 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+function Footer() {
+ return (
+
+ );
+}
+
+interface Content {
+ keyword: string;
+ subTitle1: string;
+ subTitle2: string;
+ explain1: string;
+ explain2: string;
+}
+
+const CONTENT_SECTION: Content[] = [
+ {
+ keyword: 'Hot item',
+ subTitle1: '인기 상품을 ',
+ subTitle2: '확인해 보세요',
+ explain1: '가장 HOT한 중고거래 물품을',
+ explain2: '판다 마켓에서 확인해 보세요',
+ },
+ {
+ keyword: 'Search',
+ subTitle1: '구매를 원하는 ',
+ subTitle2: '상품을 검색하세요',
+ explain1: '구매하고 싶은 물품을 검색해서',
+ explain2: '쉽게 찾아보세요',
+ },
+ {
+ keyword: 'Register',
+ subTitle1: '판매를 원하는 ',
+ subTitle2: '상품을 등록하세요',
+ explain1: '어떤 물건이든 판매하고 싶은 상품을',
+ explain2: '쉽게 등록하세요',
+ },
+];
+
+function ContentList() {
+ function makeContent(index: number) {
+ return (
+
+
+ );
+ }
+ return Array.from({ length: 3 }, (_, index) => makeContent(index));
+}
+
+function BottomBanner() {
+ return (
+
+
+ );
+}
+
+function TopBanner() {
+ return (
+
+
+ );
+}
+
export default function Home() {
- return
+
+ );
}
diff --git a/src/app/(with-Header)/privacy/page.tsx b/src/app/(with-Header)/privacy/page.tsx
new file mode 100644
index 000000000..2b752dd62
--- /dev/null
+++ b/src/app/(with-Header)/privacy/page.tsx
@@ -0,0 +1,3 @@
+export default function Privacy() {
+ return Privacy 페이지입니다. ;
+}
diff --git a/src/components/ArticleForm/index.tsx b/src/components/ArticleForm/index.tsx
index 65d6dc9f0..3406f0ffd 100644
--- a/src/components/ArticleForm/index.tsx
+++ b/src/components/ArticleForm/index.tsx
@@ -4,9 +4,9 @@ import { useForm } from 'react-hook-form';
import { submitArticle } from '@/actions/submit-article';
import { useState } from 'react';
import Image from 'next/image';
-
import { ArticleFormData } from '@/types';
import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/stores/useAuthStore';
export default function ArticleForm() {
const {
@@ -26,6 +26,7 @@ export default function ArticleForm() {
const [resultMessage, setResultMessage] = useState(null);
const [previewImage, setPreviewImage] = useState(null);
const router = useRouter();
+ const { setAccessToken } = useAuthStore();
const formValues = watch();
@@ -46,7 +47,10 @@ export default function ArticleForm() {
reset({ title: '', content: '', image: null });
setPreviewImage(null);
- if (result.accessToken) localStorage.setItem('accessToken', result.accessToken);
+ if (result.accessToken) {
+ localStorage.setItem('accessToken', result.accessToken);
+ setAccessToken(result.accessToken);
+ }
if (result.success) {
setTimeout(() => {
diff --git a/src/components/Auth/SigninForm/index.tsx b/src/components/Auth/SigninForm/index.tsx
index d39fd1888..26ab2e2bd 100644
--- a/src/components/Auth/SigninForm/index.tsx
+++ b/src/components/Auth/SigninForm/index.tsx
@@ -1,35 +1,91 @@
'use client';
import { submitLogin } from '@/actions/submit-login';
+import { useAuthStore } from '@/stores/useAuthStore';
import { useRouter } from 'next/navigation';
-import { useActionState, useEffect } from 'react';
+import { useActionState, useEffect, useState } from 'react';
-const SUBMIT_BTN_CLASSNAME = 'mt-4 rounded-full py-4 bg-gray-400 font-semibold text-xl text-white';
+const SUBMIT_BTN_CLASSNAME = 'mt-4 rounded-full py-4 font-semibold text-xl text-white text-center';
+
+interface Valid {
+ email: string;
+ password: string;
+ isEmailValid: boolean;
+ isPasswordValid: boolean;
+ isValid: boolean;
+}
export default function SigninForm() {
const [state, action, isPending] = useActionState(submitLogin, null);
+ const [valid, setValid] = useState({ email: '', password: '', isEmailValid: true, isPasswordValid: true, isValid: false });
const router = useRouter();
+ const { setAccessToken } = useAuthStore();
useEffect(() => {
if (state && !state.status) alert(state.error);
if (state?.response && 'accessToken' in state?.response) {
localStorage.setItem('accessToken', state.response.accessToken);
localStorage.setItem('refreshToken', state.response.refreshToken);
+ setAccessToken(state.response.accessToken);
router.replace('/');
}
- }, [state, router]);
+ }, [state, router, setAccessToken]);
+
+ const validateInputs = (email: string, password: string) => {
+ const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+ const isPasswordValid = password.length >= 8;
+ const isValid = isEmailValid && isPasswordValid;
+ return { isEmailValid, isPasswordValid, isValid };
+ };
+
+ const handleInputChange = (field: 'email' | 'password', value: string) => {
+ setValid((prev) => {
+ const newValidState = { ...prev, [field]: value };
+ const { isEmailValid, isPasswordValid, isValid } = validateInputs(newValidState.email, newValidState.password);
+ if (field === 'email') return { ...newValidState, isEmailValid, isValid };
+ return { ...newValidState, isPasswordValid, isValid };
+ });
+ };
return (
-
);
}
diff --git a/src/components/Auth/SignupForm/index.tsx b/src/components/Auth/SignupForm/index.tsx
new file mode 100644
index 000000000..18c3cc65f
--- /dev/null
+++ b/src/components/Auth/SignupForm/index.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import { submitSignup } from '@/actions/submit-signup';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { SignupFormData } from '@/types';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+
+export default function SignupForm() {
+ const {
+ register,
+ handleSubmit,
+ formState: { isSubmitting, errors, isValid },
+ watch,
+ reset,
+ trigger,
+ } = useForm({
+ defaultValues: {
+ email: '',
+ nickname: '',
+ password: '',
+ passwordConfirmation: '',
+ },
+ mode: 'onChange',
+ });
+ const router = useRouter();
+ const { setAccessToken } = useAuthStore();
+
+ const onSubmit = async (data: SignupFormData) => {
+ const result = await submitSignup(data);
+ if (result.response && 'accessToken' in result.response) {
+ localStorage.setItem('accessToken', result.response.accessToken);
+ localStorage.setItem('refreshToken', result.response.refreshToken);
+ setAccessToken(result.response.accessToken);
+ reset();
+ router.replace('/');
+ return;
+ }
+ alert(result.error);
+ };
+
+ const preventEnterSubmit = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/src/components/CommentForm/index.tsx b/src/components/CommentForm/index.tsx
index 1bd6f40c5..a6d479570 100644
--- a/src/components/CommentForm/index.tsx
+++ b/src/components/CommentForm/index.tsx
@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form';
import { useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/stores/useAuthStore';
interface CommentFormData {
content: string;
@@ -26,6 +27,8 @@ export default function CommentForm({ id }: { id: string }) {
const isFormValid = formValues.content;
const queryClient = useQueryClient();
+ const { setAccessToken } = useAuthStore();
+
const onSubmit = async (data: CommentFormData) => {
try {
const formData = new FormData();
@@ -36,7 +39,10 @@ export default function CommentForm({ id }: { id: string }) {
setResultMessage(result.message);
reset({ content: '' });
- if (result.accessToken) localStorage.setItem('accessToken', result.accessToken);
+ if (result.accessToken) {
+ localStorage.setItem('accessToken', result.accessToken);
+ setAccessToken(result.accessToken);
+ }
if (result.success) {
queryClient.invalidateQueries({
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 000000000..70bde78b9
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
+
+type Setter = Dispatch>;
+
+function DropDown({ setIsClickProfile }: { setIsClickProfile: Setter }) {
+ const { setAccessToken } = useAuthStore();
+ const onClick = () => {
+ setIsClickProfile(false);
+ localStorage.removeItem('accessToken');
+ localStorage.removeItem('refreshToken');
+ setAccessToken('');
+ };
+ return (
+
+
+
+ );
+}
diff --git a/src/components/SimpleLoginContainer/index.tsx b/src/components/SimpleLoginContainer/index.tsx
new file mode 100644
index 000000000..34bae6459
--- /dev/null
+++ b/src/components/SimpleLoginContainer/index.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image';
+
+export default function SimpleLoginContainer() {
+ return (
+
+ );
+}
diff --git a/src/stores/useAuthStore.tsx b/src/stores/useAuthStore.tsx
new file mode 100644
index 000000000..d230ee22e
--- /dev/null
+++ b/src/stores/useAuthStore.tsx
@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+
+const getLocalStorageItem = (key: string, defaultValue: string) => {
+ if (typeof window !== 'undefined') {
+ const value = localStorage.getItem(key);
+ return value ? value : defaultValue;
+ }
+ return defaultValue;
+};
+
+interface Store {
+ accessToken: string;
+ setAccessToken: (accessToken: string) => void;
+}
+
+export const useAuthStore = create((set) => ({
+ accessToken: getLocalStorageItem('accessToken', ''),
+ setAccessToken: (accessToken: string) => {
+ localStorage.setItem('accessToken', accessToken);
+ set((state) => ({ ...state, accessToken }));
+ },
+}));
diff --git a/src/types.ts b/src/types.ts
index e42d30b9e..95f7477e0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -68,3 +68,42 @@ export interface Comments {
list: Comment[];
nextCursor: null | string;
}
+
+export interface SignupFormData {
+ email: string;
+ nickname: string;
+ password: string;
+ passwordConfirmation: string;
+}
+
+export interface SignupResponse {
+ accessToken: string;
+ refreshToken: string;
+ user: {
+ id: number;
+ email: string;
+ image: null | string;
+ nickname: string;
+ updatedAt: string;
+ createdAt: string;
+ };
+}
+export interface SignupFailResponse {
+ message: string;
+ details: {
+ email?: {
+ message: string;
+ };
+ nickanme?: {
+ message: string;
+ };
+ password?: {
+ message: string;
+ };
+ passwordConfirmation?: {
+ message: string;
+ };
+ };
+}
+
+export type ResponseWithAccessToken = T & { accessToken: string };
diff --git a/src/utils/apiHelper.ts b/src/utils/apiHelper.ts
new file mode 100644
index 000000000..806b89e68
--- /dev/null
+++ b/src/utils/apiHelper.ts
@@ -0,0 +1,39 @@
+import { ResponseWithAccessToken } from '@/types';
+import axios, { AxiosError, AxiosResponse } from 'axios';
+
+const apiHelper = axios.create({
+ baseURL: process.env.NEXT_PUBLIC_API_URL,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+});
+
+apiHelper.interceptors.response.use(
+ (response: AxiosResponse) => response,
+ async (error: AxiosError) => {
+ if (error.response?.status === 401) {
+ const refreshToken: string = error?.config?.headers?.['x-refresh-token'] ?? '';
+ if (refreshToken) {
+ try {
+ const refreshResponse = await axios.post<{ accessToken: string }>(`${process.env.NEXT_PUBLIC_API_URL}/auth/refresh-token`, { refreshToken });
+
+ const { accessToken: newAccessToken } = refreshResponse.data;
+
+ if (error.config) {
+ error.config.headers['Authorization'] = `baerer ${newAccessToken}`;
+ const response: AxiosResponse> = await apiHelper.request(error.config);
+ response.data.accessToken = newAccessToken;
+ return response;
+ }
+ } catch (refreshError) {
+ console.error('리프레시 토큰 생성 실패 : ', refreshError);
+ return Promise.reject(refreshError);
+ }
+ }
+ }
+
+ return Promise.reject(error);
+ },
+);
+
+export default apiHelper;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index dfc725ddf..8cc2dce7b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,6 +17,7 @@ export default {
50: '#F9FAFB',
},
blue: {
+ 40: '#CFE5FF',
50: '#E6F2FF',
100: '#3692FF',
200: '#1967D6',
@@ -28,6 +29,7 @@ export default {
},
screens: {
pc: '1200px',
+ 'sm-mobile': '400px',
},
},
},
+ 이미 회원이신가요?
+
+ 로그인
+
+
+ );
+}
+
export default function Signup() {
- return
-
- );
-}
-
-function Header() {
- return (
-
+
+ {CONTENT_SECTION[index].keyword}
++ {CONTENT_SECTION[index].subTitle1} + {CONTENT_SECTION[index].subTitle2} +
++ {CONTENT_SECTION[index].explain1} + {CONTENT_SECTION[index].explain2} +
+
+
+
+ 믿을 수 있는
+판다마켓 중고 거래
+
+
+
+ 일상의 모든 물건을 거래해 보세요
+ + 구경하러 가기 + +hi
;
+ return (
+ -
+
- 로그아웃 +
+
+ );
+}
+
+export default function Header() {
+ const pathname = usePathname();
+ const { accessToken } = useAuthStore();
+
+ const [isMounted, setIsMounted] = useState(false);
+ const [isClickProfile, setIsClickProfile] = useState(false);
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ return (
+