From f25ba95325aae51cba7113ca523533e2037c142f Mon Sep 17 00:00:00 2001 From: abg3000 Date: Wed, 11 May 2022 22:53:22 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=EC=9C=A0=EC=A0=80=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=ED=9B=84,=20=EC=88=98=EC=A0=95=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- constants/imgUrl.ts | 2 + constants/tabMenu.ts | 7 +++- hooks/useForm.ts | 18 ++++++++ hooks/useImageHandle.ts | 4 -- pages/profile.tsx | 64 ++++++++++++++++------------- pages/user/[id].tsx | 6 +-- public/images/team-profile-icon.svg | 8 ++++ recoil/auth.ts | 6 +++ types/team.d.ts | 11 +++++ types/user.d.ts | 2 +- utils/userEditForm.ts | 1 - 11 files changed, 91 insertions(+), 38 deletions(-) create mode 100644 hooks/useForm.ts create mode 100644 public/images/team-profile-icon.svg create mode 100644 types/team.d.ts diff --git a/constants/imgUrl.ts b/constants/imgUrl.ts index d994bcd..105b924 100644 --- a/constants/imgUrl.ts +++ b/constants/imgUrl.ts @@ -11,3 +11,5 @@ export const edit_icon = '/images/edit-icon.svg'; export const following_icon = '/images/icon-add-round.svg'; export const message_icon = '/images/icon-message.svg'; + +export const team_profile_icon = '/images/team-profile-icon.svg'; diff --git a/constants/tabMenu.ts b/constants/tabMenu.ts index d0f6404..01474e3 100644 --- a/constants/tabMenu.ts +++ b/constants/tabMenu.ts @@ -1,4 +1,9 @@ -export const tabMenuArr = [ +export const userTabMenuArr = [ { id: 'post', name: '작업물', isActive: true }, { id: 'scrap', name: '스크랩', isActive: false }, ]; + +export const teamTabMenuArr = [ + { id: 'post', name: '작업물', isActive: true }, + { id: 'member', name: '멤버', isActive: false }, +]; diff --git a/hooks/useForm.ts b/hooks/useForm.ts new file mode 100644 index 0000000..ce03e79 --- /dev/null +++ b/hooks/useForm.ts @@ -0,0 +1,18 @@ +import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useState } from 'react'; + +const useForm = ( + initialData: T +): [T, Dispatch>, (e: ChangeEvent) => void] => { + const [values, setValues] = useState(initialData); + const handler = useCallback( + (e: React.ChangeEvent) => { + const { name, value } = e.target; + setValues({ ...values, [name]: value }); + }, + [values, setValues] + ); + + return [values, setValues, handler]; +}; + +export default useForm; diff --git a/hooks/useImageHandle.ts b/hooks/useImageHandle.ts index 847a325..83f13ae 100644 --- a/hooks/useImageHandle.ts +++ b/hooks/useImageHandle.ts @@ -9,8 +9,6 @@ const useImageHandle = (name: string) => { secretAccessKey: process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY, }); - console.log(awsObj); - const myBucket = new AWS.S3({ params: { Bucket: process.env.NEXT_PUBLIC_AWS_STORAGE_BUCKET_NAME }, region: process.env.NEXT_PUBLIC_AWS_REGION, @@ -19,8 +17,6 @@ const useImageHandle = (name: string) => { const storeImage = async (e: React.ChangeEvent) => { const currentFile = (e.target as HTMLInputElement).files[0]; const currentFileName = currentFile.name.replaceAll(' ', ''); - console.log(currentFile); - console.log(currentFileName); const params = { ACL: 'public-read', diff --git a/pages/profile.tsx b/pages/profile.tsx index 075603f..5fe3599 100644 --- a/pages/profile.tsx +++ b/pages/profile.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useQuery, useMutation, useQueryClient } from 'react-query'; import Image from 'next/image'; import styled from 'styled-components'; @@ -9,7 +9,7 @@ import ImageUploadWrapper from 'components/common/ImageUploadWrapper'; import { ProfileIcon, ProfileWrapper, CameraIcon, CameraIconWrapper } from 'components/common/Atomic/Profile'; import { TabButton } from 'components/common/Atomic/Tabs/TabButton'; import { camera_icon, default_profile } from 'constants/imgUrl'; -import { tabMenuArr } from 'constants/tabMenu'; +import { userTabMenuArr } from 'constants/tabMenu'; import usersApi from 'apis/users.api'; import { UserEditForm } from 'types/user'; import { userEditForm } from 'utils/userEditForm'; @@ -18,25 +18,39 @@ import { Keyword } from 'components/common/Atomic/Tabs/Keyword'; import ProfileEdit from 'components/Profile/ProfileEdit'; import UploadProduct from 'components/Profile/UploadProduct'; import { UploadButton } from 'components/common/Atomic/Tabs/Button'; +import useForm from 'hooks/useForm'; +import Router from 'next/router'; +import { userInfo } from 'recoil/auth'; +import { useRecoilState } from 'recoil'; const Profile = () => { const queryClient = useQueryClient(); - const { isLoading, isError, error, data } = useQuery(['user-profile'], () => usersApi.checkUsers(4), { - onSuccess: (data) => { - setTestForm(userEditForm(data)); - }, - }); // useQuery로 유저정보 받아옴. + const [, setUserInfo] = useRecoilState(userInfo); - const { mutate: userInfoMutate } = useMutation(() => usersApi.editUser(4, testForm, { isRequiredLogin: true }), { - onSuccess: (data) => { - console.log('data', data); - queryClient.setQueryData('user-profile', data); - }, - }); + const { isLoading, isError, error, data } = useQuery( + ['user-profile'], + () => usersApi.checkUsers(sessionStorage.getItem('id')), + { + onSuccess: (data) => { + setValues(userEditForm(data)); + setUserInfo(data); + console.log(data); + }, + } + ); + + const { mutate: userInfoMutate } = useMutation( + () => usersApi.editUser(sessionStorage.getItem('id'), values, { isRequiredLogin: true }), + { + onSuccess: ({ data }) => { + queryClient.setQueryData('user-profile', data); + }, + } + ); const [editMode, setEditMode] = useState(false); const [currentTab, setCurrentTab] = useState('post'); - const [testForm, setTestForm] = useState(); + const [values, setValues, handler] = useForm(); //Suspense를 사용하게 된다면, useQuery를 여러개 선언하는것은 사용할 수 없으므로, useQueries를 사용해야함 const Items = { post: ['작업물1'], //['아이템1', '아이템2'], @@ -66,7 +80,7 @@ const Profile = () => { const selectTab = useCallback( (id: string) => () => { - tabMenuArr.forEach((tab) => { + userTabMenuArr.forEach((tab) => { if (tab.id === id) { tab.isActive = true; setCurrentTab(tab.id); @@ -78,17 +92,11 @@ const Profile = () => { [currentTab] ); - const testFormHook = useCallback( - (e: React.ChangeEvent) => { - const { name, value } = e.target; - console.log('name = %s value = %s', name, value); - console.log('banner : ', testForm.backgroundImage); - console.log('profile : ', testForm.profileImage); - console.log('description : ', testForm.description); - setTestForm({ ...testForm, [name]: value }); - }, - [testForm, setTestForm] - ); + useEffect(() => { + if (!sessionStorage.getItem('jwtToken')) { + Router.push('/'); + } + }, []); if (isLoading) { return

Loading

; } @@ -144,7 +152,7 @@ const Profile = () => { {numberWithCommas(data?.followingCount)} {editMode ? ( - + ) : (

{data?.description}

)} @@ -157,7 +165,7 @@ const Profile = () => {
- {tabMenuArr.map((tab, i) => ( + {userTabMenuArr.map((tab, i) => ( {tab.name} {Items[tab.id].length} diff --git a/pages/user/[id].tsx b/pages/user/[id].tsx index c909ef5..2d5798e 100644 --- a/pages/user/[id].tsx +++ b/pages/user/[id].tsx @@ -4,7 +4,7 @@ import Layout from 'components/Layout'; import Banner from 'components/Profile/Banner'; import ItemList from 'components/Profile/ItemList'; import { TabButton } from 'components/common/Atomic/Tabs/TabButton'; -import { tabMenuArr } from 'constants/tabMenu'; +import { userTabMenuArr } from 'constants/tabMenu'; import usersApi from 'apis/users.api'; import { useRouter } from 'next/router'; import Image from 'next/image'; @@ -48,7 +48,7 @@ const UserProfile: React.FC = () => { const selectTab = useCallback( (id: string) => () => { - tabMenuArr.forEach((tab) => { + userTabMenuArr.forEach((tab) => { if (tab.id === id) { tab.isActive = true; setCurrentTab(tab.id); @@ -101,7 +101,7 @@ const UserProfile: React.FC = () => {
- {tabMenuArr.map((tab, i) => ( + {userTabMenuArr.map((tab, i) => ( {tab.name} {Items[tab.id].length} diff --git a/public/images/team-profile-icon.svg b/public/images/team-profile-icon.svg new file mode 100644 index 0000000..b06b9f4 --- /dev/null +++ b/public/images/team-profile-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/recoil/auth.ts b/recoil/auth.ts index 12ca2b2..1416415 100644 --- a/recoil/auth.ts +++ b/recoil/auth.ts @@ -1,4 +1,5 @@ import { atom } from 'recoil'; +import { User } from 'types/user'; export interface UserCategoryType { mainCategory: number; @@ -21,6 +22,11 @@ export interface socialLoginState { socialType: string; } +export const userInfo = atom({ + key: 'userInfo', + default: null, +}); + export const userRegisterInfoState = atom({ key: 'userRegisterInfoState', default: { diff --git a/types/team.d.ts b/types/team.d.ts new file mode 100644 index 0000000..858fb78 --- /dev/null +++ b/types/team.d.ts @@ -0,0 +1,11 @@ +export interface TeamTypes { + id: number; + title: string; + description: string; + leader: number; + teamProfileImage: string; + backgroundImage: string; + postCount: number; + memberCount: number; + teamFollowCount: number; +} diff --git a/types/user.d.ts b/types/user.d.ts index 9dd244c..e711ba3 100644 --- a/types/user.d.ts +++ b/types/user.d.ts @@ -1,5 +1,5 @@ export interface User { - id: number; + id: string; email: string; nickname: string; description: string; diff --git a/utils/userEditForm.ts b/utils/userEditForm.ts index 11f5b38..46bcaf5 100644 --- a/utils/userEditForm.ts +++ b/utils/userEditForm.ts @@ -1,7 +1,6 @@ import { User, UserEditForm } from 'types/user'; export const userEditForm = (user: User): UserEditForm => { - console.log('user', user); return { email: user.email, nickname: user.nickname,