Submitted Value:
diff --git a/srcs/next/src/app/component/single/Button.tsx b/srcs/next/src/app/component/single/Button.tsx
deleted file mode 100644
index eb4f03660..000000000
--- a/srcs/next/src/app/component/single/Button.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-interface ButtonProps {
- onClick: () => void;
-}
-
-const Button: React.FC
= ({ onClick }) => {
- return (
- Submit
- );
-};
-
-export default Button;
diff --git a/srcs/next/src/app/component/single/InputBox.tsx b/srcs/next/src/app/component/single/InputBox.tsx
index 140073fd4..52b3cfa69 100644
--- a/srcs/next/src/app/component/single/InputBox.tsx
+++ b/srcs/next/src/app/component/single/InputBox.tsx
@@ -11,12 +11,7 @@ const InputBox: React.FC = ({ value, onChange }) => {
};
return (
- = ({ onClick }) => {
- const handleClick = async () => {
+const LoginButton = () => {
+ const login = async () => {
try {
- // Axios를 사용하여 서버로 GET 요청 보내기
- const response = await axios.get('https://10.12.4.3:3000'); // 서버의 실제 API URL로 변경하세요
-
- // 요청이 성공하면 응답 데이터를 출력
- console.log('서버 응답 데이터:', response.data);
-
- // 클릭 이벤트 핸들러 실행
- onClick();
+ // const response: AxiosResponse = await axios({
+ // method: 'get',
+ // url: 'http://10.14.9.4:3000/auth/42login',
+ // headers: {
+ // 'Content-Type': 'application/json',
+ // 'Access-Control-Allow-Origin': '*', // 혹은 특정 도메인으로 설정
+ // 'Access-Control-Allow-Credentials': 'true', // 인증 정보 전송 허용
+ // }
+ // });
+ //console.log('서버 응답 데이터:', response.data);
} catch (error) {
- // 요청이 실패한 경우 에러 처리
console.error('서버 요청 실패:', error);
}
};
return (
- Submit
- );
+ 42 Login
+ )
};
export default LoginButton;
+
diff --git a/srcs/next/src/app/globals.css b/srcs/next/src/app/globals.css
index e69de29bb..642ba19da 100644
--- a/srcs/next/src/app/globals.css
+++ b/srcs/next/src/app/globals.css
@@ -0,0 +1,4 @@
+body {
+ background-color: rgb(41, 41, 41);
+ color: white
+}
\ No newline at end of file
diff --git a/srcs/next/src/app/main/page.tsx b/srcs/next/src/app/main/page.tsx
new file mode 100644
index 000000000..bc58433dd
--- /dev/null
+++ b/srcs/next/src/app/main/page.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import React, { useState } from "react";
+
+const MainHome: React.FC = () => {
+ return (
+
+
HOME!
+
+ );
+};
+
+export default MainHome;
\ No newline at end of file
diff --git a/srcs/next/src/app/page.tsx b/srcs/next/src/app/page.tsx
index a1ccf1b60..6f7ef893a 100644
--- a/srcs/next/src/app/page.tsx
+++ b/srcs/next/src/app/page.tsx
@@ -1,20 +1,23 @@
-// import Game from "./Game";
-// import ReactDOM from 'react-dom/client';
-// import App from './App';
-import Clock from './Clock';
-import InputForm from './component/multi/InputForm';
-// import HandleLoginButton from './component/single/HandleLoginButton';
-// import AxiosComponent from 'AxiosComponent';
+import React from "react";
+import { Provider } from "react-redux";
+import store from "./redux/store"; // store의 경로는 실제 프로젝트에 맞게 수정하세요.
+import Test from "./redux/Test"; // Test 컴포넌트의 경로는 실제 프로젝트에 맞게 수정하세요.
+import InputForm from "./component/multi/InputForm";
+import LoginButton from "./component/single/LoginButton";
+import Link from "next/link";
+import { CookiesProvider } from "react-cookie";
+// import RegisterHome from "./register/page";
-export default function Home() {
- return (
-
- {/*
- )
+const Home = () => {
+ return (
+
+ Welcome!
+
+ );
}
+
+export default Home;
\ No newline at end of file
diff --git a/srcs/next/src/app/redux/mySlice.tsx b/srcs/next/src/app/redux/mySlice.tsx
new file mode 100644
index 000000000..ce8fa5912
--- /dev/null
+++ b/srcs/next/src/app/redux/mySlice.tsx
@@ -0,0 +1,34 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface MyState {
+ value: number;
+}
+
+const initialState: MyState = {
+ value: 0,
+};
+
+const mySlice = createSlice({
+ name: 'my',
+ initialState,
+ reducers: {
+ up: (state, action: PayloadAction) => {
+ state.value += action.payload;
+ },
+ },
+});
+
+export default mySlice;
+export const { up } = mySlice.actions;
+
+/*
+
+1. PayloadAction을 가져와서 up reducer의 action 매개변수 타입을 PayloadAction로 명시합니다. 이는 createSlice에서 생성된 액션의 타입을 정확하게 지정하는 데 도움이 됩니다.
+
+2. initialState를 명시적으로 MyState 타입으로 지정합니다. 이렇게 하면 초기 상태의 형식이 제대로 유지됩니다.
+
+3. export default mySlice.reducer;는 슬라이스의 리듀서를 내보냅니다.
+
+4. export const { up } = mySlice.actions;는 up 액션을 내보냅니다.
+
+*/
\ No newline at end of file
diff --git a/srcs/next/src/app/redux/store.tsx b/srcs/next/src/app/redux/store.tsx
new file mode 100644
index 000000000..e39a9f874
--- /dev/null
+++ b/srcs/next/src/app/redux/store.tsx
@@ -0,0 +1,20 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import mySlice from './mySlice';
+import tokenSlice from './tokenSlice';
+import userSlice from './userSlice';
+
+// const rootReducer = combineReducers({
+// my: mySlice.reducer,
+// token: tokenSlice.reducer
+// });
+
+const store = configureStore({
+ reducer:
+ {
+ user: userSlice.reducer,
+ }
+});
+
+export default store;
+
+//export type RootState = ReturnType;
diff --git a/srcs/next/src/app/redux/tokenSlice.tsx b/srcs/next/src/app/redux/tokenSlice.tsx
new file mode 100644
index 000000000..548fc3144
--- /dev/null
+++ b/srcs/next/src/app/redux/tokenSlice.tsx
@@ -0,0 +1,37 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface tokenState {
+ authenticated : boolean;
+ accessToken : string | null;
+ expireTime : number | null;
+}
+
+const initialState: tokenState = {
+ authenticated : false,
+ accessToken : null,
+ expireTime : null,
+};
+
+const tokenSlice = createSlice({
+ name: 'authToken',
+ initialState,
+ reducers: {
+ // save token
+ setToken: (state, action: PayloadAction) => {
+ state.authenticated = true;
+ state.accessToken = action.payload;
+ },
+ // save expire time
+ setExpireTime: (state, action: PayloadAction) => {
+ state.expireTime = action.payload;
+ },
+ },
+});
+
+// check authenticated
+export const isAuthenticated = (state: tokenState) => {
+ return state.expireTime !== null && state.expireTime > Date.now();
+};
+
+export default tokenSlice;
+export const {setToken, setExpireTime} = tokenSlice.actions;
diff --git a/srcs/next/src/app/redux/userSlice.tsx b/srcs/next/src/app/redux/userSlice.tsx
new file mode 100644
index 000000000..0fcff1728
--- /dev/null
+++ b/srcs/next/src/app/redux/userSlice.tsx
@@ -0,0 +1,29 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface userState {
+ name : string,
+ imageUrl : string | null,
+}
+
+const initialState: userState = {
+ name : "none",
+ imageUrl : null,
+};
+
+const userSlice = createSlice({
+ name: 'user',
+ initialState,
+ reducers: {
+ // save name
+ setName: (state, action: PayloadAction) => {
+ state.name = action.payload;
+ },
+ // save image url
+ setImageUrl: (state, action: PayloadAction) => {
+ state.imageUrl = action.payload;
+ },
+ },
+});
+
+export default userSlice;
+export const {setName, setImageUrl} = userSlice.actions;
diff --git a/srcs/next/src/app/register/CheckDuplicatebutton.tsx b/srcs/next/src/app/register/CheckDuplicatebutton.tsx
new file mode 100644
index 000000000..974f31f68
--- /dev/null
+++ b/srcs/next/src/app/register/CheckDuplicatebutton.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { Provider } from "react-redux";
+import store from "../redux/store";
+import { setName, setImageUrl } from "../redux/userSlice"
+import { useSelector, useDispatch } from "react-redux";
+import axios from "axios";
+import { userState } from "../redux/userSlice";
+
+const CheckDuplicatebuttonContent = () => {
+ const dispatch = useDispatch();
+ const userName = useSelector((state: userState) => state.name);
+
+ // console.log("state.username: " + userName);
+ const checkDuplicate = async() => {
+ //const inputName =
+ try{
+ //alert("inputname: " + userName);
+ const response = await axios.get("http://10.14.9.4:3000/users/username/testUser");
+ alert('asdas');
+ dispatch(setName("testUser"));
+ console.log("correct");
+ } catch(error) {
+ console.log("dup");
+ }
+ {userName ? (
+
+
사용 가능한 닉네임입니다!
+ ) : (
+
+
중복된 닉네임입니다!
+ )
+ }
+ }
+
+ const myOnChange = () => {
+ dispatch(setName(userName));
+ }
+
+ return (
+
+ Check Duplicate
+
+ )
+};
+
+const CheckDuplicatebutton = () => {
+ return (
+
+
+ )
+};
+
+export default CheckDuplicatebutton;
\ No newline at end of file
diff --git a/srcs/next/src/app/register/RegisterButton.tsx b/srcs/next/src/app/register/RegisterButton.tsx
new file mode 100644
index 000000000..49c4d8e3d
--- /dev/null
+++ b/srcs/next/src/app/register/RegisterButton.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import React from 'react';
+import axios, { AxiosResponse } from 'axios';
+import { CookiesProvider } from 'react-cookie';
+import { getCookie } from '../Cookie';
+import { Provider } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { userState } from '../redux/userSlice';
+import store from '../redux/store';
+
+const RegisterButtonContent = () => {
+ const name = useSelector((state: userState) => state.name);
+ const imageUrl = useSelector((state: userState) => state.imageUrl);
+ const register = async () => {
+ const enrollToken = getCookie("enroll_token");
+ console.log(enrollToken);
+ if (enrollToken != undefined)
+ {
+ const postRes :AxiosResponse = await axios.post("http://10.19.9.4:3000/signup", {
+ headers: {
+ Authorization: `Bearer ${enrollToken}`
+ },
+ });
+ const nameRes :AxiosResponse = await axios.patch("http://10.19.9.4:3000/signup/username", {
+ headers: {
+ Authorization: `Bearer ${enrollToken}`
+ },
+ data: {
+ username: name,
+ }
+ });
+ const imageRes :AxiosResponse = await axios.patch("http://10.19.9.4:3000/signup/profileImage", {
+ headers: {
+ Authorization: `Bearer ${enrollToken}`
+ },
+ data: {
+ profileImage: imageUrl,
+ }
+ });
+ }
+ }
+
+// @Post('/signup') // DB ㅅ생ㅅ 크토크만
+// @Patch('/signup/username') // ㅌㅌㅌ큰 + username
+// @Patch('/signup/profileImage') / 크토크
+ return (
+ Register
+ )
+};
+
+const RegisterButton = () => {
+ return (
+
+
+
+
+ )
+};
+
+export default RegisterButton;
\ No newline at end of file
diff --git a/srcs/next/src/app/register/page.tsx b/srcs/next/src/app/register/page.tsx
new file mode 100644
index 000000000..5105c42c3
--- /dev/null
+++ b/srcs/next/src/app/register/page.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import React, { useState } from "react";
+import RegisterButton from "./RegisterButton";
+import CheckDuplicatebutton from "./CheckDuplicatebutton";
+
+const RegisterHome: React.FC = () => {
+ const handleImageUpload = (event: React.ChangeEvent) => {
+ // 이미지 선택 여부를 체크
+ };
+
+ return (
+
+
Register Page!!
+
+
+
+
+
4242
+
+
+
+
+
+
+ site Login
+
+
+ refresh
+
+
+ 42Login
+
+
+
+ logout
+
+
+
+ 2fa request
+
+ 2fa verify