diff --git a/Layout/LayoutProvider.tsx b/Layout/LayoutProvider.tsx index 54a95fc69..d60953b20 100644 --- a/Layout/LayoutProvider.tsx +++ b/Layout/LayoutProvider.tsx @@ -4,6 +4,7 @@ import AdminAppLayout from 'Layout/AdminLayout'; import AgendaAppLayout from 'Layout/AgendaLayout'; import TakguAppLayout from 'Layout/TakguLayout'; import { usePathname } from 'hooks/agenda/Layout/usePathname'; +import useAxiosAgendaError from 'hooks/useAxiosAgendaError'; import useAxiosResponse from 'hooks/useAxiosResponse'; type LayoutProviderProps = { @@ -14,7 +15,8 @@ type LayoutProviderProps = { // 로그인 스테이트 등은 각 레이아웃에서 확인 const LayoutProvider = ({ children }: LayoutProviderProps) => { useRecoilValue(loginState); - useAxiosResponse(); + useAxiosResponse(); // takgu axios response interceptor + useAxiosAgendaError(); // agenda axios response interceptor const app = usePathname(); switch (app) { diff --git a/components/LoginChecker.tsx b/components/LoginChecker.tsx index 5a5d17532..1b03cef6d 100644 --- a/components/LoginChecker.tsx +++ b/components/LoginChecker.tsx @@ -8,7 +8,11 @@ interface LoginCheckerProps { export default function LoginChecker({ children }: LoginCheckerProps) { const [isLoading, loggedIn] = useLoginCheck(); - // return <>{children}; + // dev 환경에서는 로그인 상태를 유지 + // 만약 로그인 상태를 확인하고 싶다면, 아래 주석처리 필요 + if (process.env.NODE_ENV === 'development') { + return <>{children}; + } return loggedIn ? ( <>{children} diff --git a/components/admin/agenda/announcements/AnnouncementTable.tsx b/components/admin/agenda/announcements/AnnouncementTable.tsx index 025a8ba47..9db4ee1cf 100644 --- a/components/admin/agenda/announcements/AnnouncementTable.tsx +++ b/components/admin/agenda/announcements/AnnouncementTable.tsx @@ -59,7 +59,7 @@ export default function AnnouncementTable() { }); const [currentPage, setCurrentPage] = useState(1); const [selectedAgendaKey, setSelectedAgendaKey] = useState(''); - const agendaList = useFetchGet('admin/list').data || []; + const agendaList = useFetchGet({ url: 'admin/list' }).data || []; useEffect(() => { if (agendaKey) { diff --git a/components/admin/agenda/teamList/TeamTable.tsx b/components/admin/agenda/teamList/TeamTable.tsx index ad68ff152..57eab45af 100644 --- a/components/admin/agenda/teamList/TeamTable.tsx +++ b/components/admin/agenda/teamList/TeamTable.tsx @@ -68,7 +68,7 @@ export default function TeamTable() { const [currentPage, setCurrentPage] = useState(1); const [selectedAgendaKey, setSelectedAgendaKey] = useState(''); - const agendaList = useFetchGet(`admin/list`).data || []; + const agendaList = useFetchGet({ url: 'admin/list' }).data || []; const setSnackBar = useSetRecoilState(toastState); const buttonList: string[] = [styles.coin, styles.penalty]; diff --git a/components/agenda/Form/AdminTicketForm.tsx b/components/agenda/Form/AdminTicketForm.tsx index e269269b8..cdf67b14f 100644 --- a/components/agenda/Form/AdminTicketForm.tsx +++ b/components/agenda/Form/AdminTicketForm.tsx @@ -17,7 +17,7 @@ interface userFormProps { const AdminTicketForm = ({ stringKey, data, onProceed }: userFormProps) => { const { closeModal } = useModal(); const sendRequest = useFetchRequest().sendRequest; - const agendaList = useFetchGet('admin/list').data || []; + const agendaList = useFetchGet({ url: 'admin/list' }).data || []; const [issuedFromKey, setIssuedFromKey] = useState( data.issuedFromKey ? data.issuedFromKey : '' diff --git a/components/agenda/Form/TicketForm.tsx b/components/agenda/Form/TicketForm.tsx index 9fd820c41..3498e6fa5 100644 --- a/components/agenda/Form/TicketForm.tsx +++ b/components/agenda/Form/TicketForm.tsx @@ -12,7 +12,7 @@ interface userFormProps { const TicketForm = ({ stringKey }: userFormProps) => { const { closeModal } = useModal(); const sendRequest = useFetchRequest().sendRequest; - const agendaList = useFetchGet('admin/list').data || []; + const agendaList = useFetchGet({ url: 'admin/list' }).data || []; const [selectedAgendaKey, setSelectedAgendaKey] = useState(''); const handleSelectChange = (e: { target: { value: any } }) => { diff --git a/components/agenda/Form/userForm.tsx b/components/agenda/Form/userForm.tsx index f147bcc48..1623c8b0f 100644 --- a/components/agenda/Form/userForm.tsx +++ b/components/agenda/Form/userForm.tsx @@ -48,9 +48,9 @@ const UserForm = ({ stringKey }: userFormProps) => { const { closeModal } = useModal(); const sendRequest = useFetchRequest().sendRequest; - const { data }: { data: dataType | null } = useFetchGet( - `profile/${stringKey}` - ); + const { data }: { data: dataType | null } = useFetchGet({ + url: `profile/${stringKey}`, + }); if (!data) { return
loading...
; diff --git a/components/agenda/Home/AgendaInfo.tsx b/components/agenda/Home/AgendaInfo.tsx index 32246e7a1..c560fed75 100644 --- a/components/agenda/Home/AgendaInfo.tsx +++ b/components/agenda/Home/AgendaInfo.tsx @@ -45,7 +45,7 @@ const AgendaInfo = ({
count { } }; const myList = - useFetchGet('/profile/current/list')?.data || []; + useFetchGet({ url: '/profile/current/list' })?.data || + []; return (
{ + const { + keyword, + setKeyword, + keywordHandler, + showDropDown, + setShowDropDown, + searchResult, + searchBarRef, + handleKeyDown, + } = useSearchBar(); + + const changeUser = (intraId: string) => { + setKeyword(''); + setShowDropDown(false); + router.push(`/agenda/profile/user?id=${intraId}`); + }; + return ( -
- - -
+ <> +
+
+ setShowDropDown(true)} + placeholder='유저 검색하기' + maxLength={12} + value={keyword} + /> +
+ {keyword ? ( + setKeyword('')}> + + + ) : ( + + + + )} +
+
+ {showDropDown && keyword && ( +
+ {searchResult.length ? ( + searchResult.map((intraId: string) => ( +
changeUser(intraId)} key={intraId}> + {intraId} +
+ )) + ) : ( +
검색 결과가 없습니다.
+ )} +
+ )} +
+ ); }; diff --git a/components/agenda/Profile/HistoryList.tsx b/components/agenda/Profile/HistoryList.tsx index 4ecc6bd59..ab04b3300 100644 --- a/components/agenda/Profile/HistoryList.tsx +++ b/components/agenda/Profile/HistoryList.tsx @@ -41,80 +41,84 @@ const HistoryList = ({ historyListData, isHost }: HistoryListProps) => {
{historyTitle}
{historyListData.length > 0 ? ( - historyListData.map((historyData: HistoryItemProps) => { - const { - historyTeamMates, - totalPeople, - peopleCount, - startTime, - endTime, - timeString, - } = parsingHistoryData(historyData); + historyListData.map( + (historyData: HistoryItemProps, index: number) => { + const { + historyTeamMates, + totalPeople, + peopleCount, + startTime, + endTime, + timeString, + } = parsingHistoryData(historyData); - return ( - -
- {historyData.agendaTitle} -
- -
- {/* PROGRESS : tag mapping */} - {historyData.isOfficial ? ( - - ) : ( - - )} - -
+ return ( + +
+ {historyData.agendaTitle} +
-
-
- +
+ {/* PROGRESS : tag mapping */} + {historyData.isOfficial ? ( + + ) : ( + + )} +
-
{timeString}
-
+
+
+ +
- {/* Team 정보 UI / host 경우 ❌ */} - {historyTeamMates && historyTeamMates.length > 0 ? ( - <> -
+
{timeString}
+
-
- {historyData.teamName} -
+ {/* Team 정보 UI / host 경우 ❌ */} + {historyTeamMates && historyTeamMates.length > 0 ? ( + <> +
-
-
- +
+ {historyData.teamName}
- {/* intra id mapping */} -
- {historyTeamMates.map((mate) => ( -
- {mate.intraId} -
- ))} +
+
+ +
+ + {/* intra id mapping */} +
+ {historyTeamMates.map((mate, index) => ( +
+ {mate.intraId} +
+ ))} +
-
- {/* coalition color mapping */} -
- -
- - ) : null} - - ); - }) + {/* coalition color mapping */} +
+ +
+ + ) : null} + + ); + } + ) ) : (
아젠다 기록이 없습니다.
)} diff --git a/components/agenda/Profile/ProfileCard.tsx b/components/agenda/Profile/ProfileCard.tsx index 7f5b4656c..1d4ed497a 100644 --- a/components/agenda/Profile/ProfileCard.tsx +++ b/components/agenda/Profile/ProfileCard.tsx @@ -7,7 +7,7 @@ import GithubIcon from 'public/image/agenda/github.svg'; import useFetchRequest from 'hooks/agenda/useFetchRequest'; import styles from 'styles/agenda/Profile/ProfileCard.module.scss'; -const ProfileImageCard = ({ +const ProfileCard = ({ userIntraId, userContent, userGithub, @@ -77,6 +77,7 @@ const ProfileImageCard = ({ setProfileData(initialProfileData); handleFlip(); }; + return (
@@ -186,34 +190,40 @@ const ProfileImageCard = ({
-
{userContent}
+
+ {userContent} +
Acheivements
- -
- {achievements.map((data, index) => { - const imageUrl = data.image; - - if (imageUrl) { - const parsedUrl = imageUrl.replace( - '/uploads', - 'https://cdn.intra.42.fr' - ); - - return ( -
- -
- ); - } - return null; - })} +
+ {achievements.length + ? achievements.map((data, index) => { + const imageUrl = data.image; + + if (imageUrl) { + const parsedUrl = imageUrl.replace( + '/uploads', + 'https://cdn.intra.42.fr' + ); + + return ( +
+ +
+ ); + } + return null; + }) + : ''}
@@ -223,4 +233,4 @@ const ProfileImageCard = ({ ); }; -export default ProfileImageCard; +export default ProfileCard; diff --git a/components/agenda/Ticket/Ticket.tsx b/components/agenda/Ticket/Ticket.tsx index 70ddbaa0b..b79e39918 100644 --- a/components/agenda/Ticket/Ticket.tsx +++ b/components/agenda/Ticket/Ticket.tsx @@ -9,7 +9,7 @@ interface TicketProps { } const Ticket = ({ type }: { type: string }) => { - const { data } = useFetchGet('/ticket'); + const { data } = useFetchGet({ url: '/ticket' }); const { openModal } = useModal(); return ( diff --git a/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx b/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx index a8283b873..588c2555d 100644 --- a/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx +++ b/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx @@ -15,6 +15,7 @@ export default function AgendaAnnouncements() { url: `/announcement`, params: { agenda_key: agendaKey }, size: 5, + isReady: Boolean(agendaKey), }); if (!agendaKey || !content) { diff --git a/components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx b/components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx index 61676c904..d83aa1447 100644 --- a/components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx +++ b/components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx @@ -20,6 +20,7 @@ export default function ParticipantTeamList({ } = usePageNation({ url: `team/open/list`, params: { agenda_key: agendaKey }, + isReady: Boolean(agendaKey), }); const { @@ -28,6 +29,7 @@ export default function ParticipantTeamList({ } = usePageNation({ url: `team/confirm/list`, params: { agenda_key: agendaKey }, + isReady: Boolean(agendaKey), }); const noParticipants = ( diff --git a/components/agenda/agendaDetail/tabs/ParticipantsList.tsx b/components/agenda/agendaDetail/tabs/ParticipantsList.tsx index 8b1496673..d3e735ee5 100644 --- a/components/agenda/agendaDetail/tabs/ParticipantsList.tsx +++ b/components/agenda/agendaDetail/tabs/ParticipantsList.tsx @@ -16,6 +16,7 @@ export default function ParticipantsList({ max }: numberProps) { usePageNation({ url: `team/confirm/list`, params: { agenda_key: agendaKey }, + isReady: Boolean(agendaKey), }); const curPeople = participants ? participants.length : 0; diff --git a/components/agenda/utils/CustomImage.tsx b/components/agenda/utils/CustomImage.tsx index 355c8b365..cc43ff197 100644 --- a/components/agenda/utils/CustomImage.tsx +++ b/components/agenda/utils/CustomImage.tsx @@ -22,6 +22,7 @@ const CustomImage = ({ return src ? ( {alt}(loginState); const resetModal = useResetRecoilState(modalState); + const router = useRouter(); + + if (status === 401) { + localStorage.removeItem('42gg-token'); + setLoggedIn(false); + } + + const resetHandler = () => { + if (status === 401) { + localStorage.removeItem('42gg-token'); + setLoggedIn(false); + } + setError({ msg: '', status: 0 }); + goHome(); + }; useEffect(() => { resetModal(); @@ -18,10 +39,8 @@ export default function ErrorPage() {
42GG
- {error === 'DK404' - ? '잘못된 요청입니다!' - : '데이터 요청에 실패하였습니다.'} -
({error})
+ {msg} +
({status})
@@ -31,11 +50,35 @@ export default function ErrorPage() {
-
+
+ {/* 개발용 토큰 넣기 버튼 */} + {process.env.NODE_ENV === 'development' && status === 401 ? ( + <> + + + + ) : null}
); diff --git a/components/error/ErrorChecker.tsx b/components/error/ErrorChecker.tsx index a508dacf9..a73bd7fcf 100644 --- a/components/error/ErrorChecker.tsx +++ b/components/error/ErrorChecker.tsx @@ -1,4 +1,5 @@ import { useRecoilValue } from 'recoil'; +import { agendaErrorState } from 'utils/recoil/agendaError'; import { errorState } from 'utils/recoil/error'; import AgendaErrorPage from 'components/error/AgendaError'; import TakguErrorPage from 'components/error/Error'; @@ -12,17 +13,23 @@ interface ErrorCheckerProps { // 추후 takgu쪽과 디자인을 어느정도 맞춘 후 통합할 예정 export default function ErrorChecker({ children }: ErrorCheckerProps) { const error = useRecoilValue(errorState); - const app = usePathname(); + const agendaError = useRecoilValue(agendaErrorState); - return error === '' ? ( - <>{children} - ) : app === 'takgu' ? ( -
-
- -
-
- ) : ( - - ); + switch (true) { + case agendaError.msg !== '': { + return ; + } + case error !== '': { + return ( +
+
+ +
+
+ ); + } + default: { + return <>{children}; + } + } } diff --git a/hooks/agenda/Layout/useUser.ts b/hooks/agenda/Layout/useUser.ts index f0f6e71ec..711121541 100644 --- a/hooks/agenda/Layout/useUser.ts +++ b/hooks/agenda/Layout/useUser.ts @@ -1,13 +1,10 @@ import { useQuery } from 'react-query'; -import { useSetRecoilState } from 'recoil'; import { User } from 'types/agenda/mainType'; import { instanceInAgenda } from 'utils/axios'; -import { errorState } from 'utils/recoil/error'; export const useUser = () => { - const setError = useSetRecoilState(errorState); const { data, isError } = useQuery( - 'user', + 'agendauser', () => instanceInAgenda.get('/profile/info').then((res) => { return res.data; @@ -18,7 +15,6 @@ export const useUser = () => { } ); if (isError) { - setError('JB02'); return undefined; } if (data) return data; diff --git a/hooks/agenda/useFetchGet.ts b/hooks/agenda/useFetchGet.ts index 83bebc71d..be934bec4 100644 --- a/hooks/agenda/useFetchGet.ts +++ b/hooks/agenda/useFetchGet.ts @@ -1,13 +1,19 @@ import { useEffect, useState, useCallback } from 'react'; import { instanceInAgenda } from 'utils/axios'; -const useFetchGet = (url: string, params?: Record) => { +interface FetchGetProps { + url: string; + isReady?: boolean; + params?: Record; +} + +const useFetchGet = ({ url, isReady = true, params }: FetchGetProps) => { const [data, setData] = useState(null); const [status, setStatus] = useState(0); const [error, setError] = useState(null); const getData = useCallback(async () => { - if (params && params.agenda_key === undefined) { + if (isReady === false) { return; } @@ -24,8 +30,7 @@ const useFetchGet = (url: string, params?: Record) => { }, [url, params]); useEffect(() => { - // URL이 있고 params가 없거나, agenda_key가 있는 경우에도 getData 호출 가능 - if (url && (!params || (params && params.agenda_key))) { + if (url) { getData(); // 조건에 맞을 때만 getData 호출 } }, [url, JSON.stringify(params)]); diff --git a/hooks/agenda/useIntraId.ts b/hooks/agenda/useIntraId.ts new file mode 100644 index 000000000..84efb902b --- /dev/null +++ b/hooks/agenda/useIntraId.ts @@ -0,0 +1,18 @@ +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; + +const useIntraId = () => { + const router = useRouter(); + const [intraId, setIntraId] = useState(undefined); + + useEffect(() => { + if (router.isReady) { + const id = router.query.id as string; + setIntraId(id); + } + }, [router.isReady, router.query.id]); + + return intraId; +}; + +export default useIntraId; diff --git a/hooks/agenda/usePageNation.ts b/hooks/agenda/usePageNation.ts index d07607899..c22888734 100644 --- a/hooks/agenda/usePageNation.ts +++ b/hooks/agenda/usePageNation.ts @@ -1,34 +1,32 @@ import { useEffect, useRef, useState, useCallback } from 'react'; import { instanceInAgenda } from 'utils/axios'; -const usePageNation = ({ - url, - size = 20, - useIdx, - params, -}: { +interface PageNationProps { url: string; params?: Record; size?: number; // 페이지 사이즈 + isReady?: boolean; // API 호출 가능 상태 확인 useIdx?: boolean; // 인덱싱 추가 여부 -}) => { +} + +const usePageNation = ({ + url, + params, + size = 20, + isReady, + useIdx, +}: PageNationProps) => { const currentPage = useRef(1); const [content, setContent] = useState(null); const status = useRef(0); const totalPages = useRef(1); - // 기본 파라미터 설정 - if (!size) size = 20; params = params || {}; params.page = currentPage.current; params.size = size; const getData = useCallback( async (page: number, size: number) => { - if (params && params.agenda_key === undefined) { - return { content: null }; - } - const res = await instanceInAgenda.get(url, { params }); const content = res.data.content ? res.data.content : []; const totalSize = res.data.totalSize ? res.data.totalSize : 0; @@ -62,7 +60,7 @@ const usePageNation = ({ }; if ( - (!params || params.agenda_key) && + isReady == true && (!status.current || Math.floor(status.current / 100) !== 2) ) { fetchData(); diff --git a/hooks/takgu/Layout/useAnnouncementCheck.ts b/hooks/takgu/Layout/useAnnouncementCheck.ts index b4cc56e11..d35bb54ba 100644 --- a/hooks/takgu/Layout/useAnnouncementCheck.ts +++ b/hooks/takgu/Layout/useAnnouncementCheck.ts @@ -41,16 +41,9 @@ const useAnnouncementCheck = (presentPath: string) => { } }; - // const attendedHandler = () => { - // if (user && user.isAttended === false && presentPath === '/') { - // setModal({ modalName: 'EVENT-WELCOME' }); - // } - // }; - useEffect(() => { if (!user) return; - // attendedHandler(); - if (user && user.isAttended === false && presentPath === '/') { + if (user && user.isAttended === false && presentPath === 'takgu') { setModal({ modalName: 'EVENT-WELCOME' }); } else announcementHandler(); }, [user, presentPath]); diff --git a/hooks/takgu/Layout/useUser.ts b/hooks/takgu/Layout/useUser.ts index 2b4677062..4647109e9 100644 --- a/hooks/takgu/Layout/useUser.ts +++ b/hooks/takgu/Layout/useUser.ts @@ -15,7 +15,7 @@ export const useUser = () => { } ); if (isError) { - // setError('JB02'); + setError('JB02'); return undefined; } if (data) return data; diff --git a/hooks/useAxiosAgendaError.ts b/hooks/useAxiosAgendaError.ts new file mode 100644 index 000000000..db5216a79 --- /dev/null +++ b/hooks/useAxiosAgendaError.ts @@ -0,0 +1,86 @@ +import { AxiosError, AxiosResponse } from 'axios'; +import Cookies from 'js-cookie'; +import { useEffect, useState } from 'react'; +import { useSetRecoilState } from 'recoil'; +import { instanceInAgenda } from 'utils/axios'; +import { agendaErrorState } from 'utils/recoil/agendaError'; +import { loginState } from 'utils/recoil/login'; + +export default function useAxiosAgendaError() { + const setLogin = useSetRecoilState(loginState); + const [isRecalling, setIsRecalling] = useState(false); + const setError = useSetRecoilState(agendaErrorState); + const refreshToken = Cookies.get('refresh_token') || ''; + + const accessTokenHandler = async () => { + if (!refreshToken) { + return; + } + try { + const res = await instanceInAgenda.post( + `/pingpong/users/accesstoken?refreshToken=${refreshToken}` + ); + localStorage.setItem('42gg-token', res.data.accessToken); + } catch (error) { + setError({ msg: '로그인이 만료되었습니다', status: 401 }); + } + }; + + const errorResponseHandler = async (error: AxiosError) => { + const defaultReturn = () => { + if (isRecalling === true) { + setLogin(false); + setIsRecalling(false); + } + return Promise.reject(error); + }; + if (error.response === undefined || error.response?.status === undefined) { + return defaultReturn(); + } + switch (error.response.status) { + case 401: { + if (!isRecalling) { + setIsRecalling(true); + try { + const res = await instanceInAgenda.post( + `/pingpong/users/accesstoken?refreshToken=${refreshToken}` + ); + localStorage.setItem('42gg-token', res.data.accessToken); + setIsRecalling(false); + return instanceInAgenda.request(error.config); + } catch (error) { + setIsRecalling(false); + setError({ msg: '로그인이 만료되었습니다', status: 401 }); + return Promise.reject(error); + } + } else return defaultReturn(); + } + case 500: + setError({ + msg: '서버 오류가 발생했습니다', + status: error.response.status, + }); + break; + } + return defaultReturn(); + }; + + const responseInterceptor = instanceInAgenda.interceptors.response.use( + (response: AxiosResponse) => response, + errorResponseHandler + ); + useEffect(() => { + if (localStorage.getItem('42gg-token')) { + setLogin(true); + } else { + accessTokenHandler(); + setLogin(true); + } + }, []); + + useEffect(() => { + return () => { + instanceInAgenda.interceptors.response.eject(responseInterceptor); + }; + }, [responseInterceptor]); +} diff --git a/hooks/useAxiosResponse.ts b/hooks/useAxiosResponse.ts index 822f83176..534be16c6 100644 --- a/hooks/useAxiosResponse.ts +++ b/hooks/useAxiosResponse.ts @@ -2,7 +2,7 @@ import { AxiosError, AxiosResponse } from 'axios'; import Cookies from 'js-cookie'; import { useEffect, useState } from 'react'; import { useSetRecoilState } from 'recoil'; -import { instance, instanceInAgenda } from 'utils/axios'; +import { instance } from 'utils/axios'; import { errorState } from 'utils/recoil/error'; import { loginState } from 'utils/recoil/login'; @@ -13,6 +13,9 @@ export default function useAxiosResponse() { const refreshToken = Cookies.get('refresh_token') || ''; const accessTokenHandler = async () => { + if (!refreshToken) { + return; + } try { const res = await instance.post( `/pingpong/users/accesstoken?refreshToken=${refreshToken}` @@ -50,11 +53,6 @@ export default function useAxiosResponse() { (response: AxiosResponse) => response, errorResponseHandler ); - const responseInAgendaInterceptor = - instanceInAgenda.interceptors.response.use( - (response: AxiosResponse) => response, - errorResponseHandler - ); useEffect(() => { if (localStorage.getItem('42gg-token')) { @@ -68,7 +66,6 @@ export default function useAxiosResponse() { useEffect(() => { return () => { instance.interceptors.response.eject(responseInterceptor); - instance.interceptors.response.eject(responseInAgendaInterceptor); }; - }, [responseInterceptor, responseInAgendaInterceptor]); + }, [responseInterceptor]); } diff --git a/hooks/useSearchBar.ts b/hooks/useSearchBar.ts index a24065b8b..82df5f568 100644 --- a/hooks/useSearchBar.ts +++ b/hooks/useSearchBar.ts @@ -55,12 +55,17 @@ export default function useSearchBar(): useSearchBarReturn { }, [keyword, setError]); const handleKeyDown = (event: React.KeyboardEvent) => { + const basePath = router.pathname.split('/')[1]; if (event.key === 'Enter') { searchResult.map((data) => { if (data === keyword) { setShowDropDown(false); event.currentTarget.blur(); - router.push(`/takgu/users/detail?intraId=${keyword}`); + if (basePath === 'takgu') { + router.push(`/takgu/users/detail?intraId=${keyword}`); + } else if (basePath === 'agenda') { + router.push(`/agenda/profile/user?id=${keyword}`); + } } }); } diff --git a/pages/_app.tsx b/pages/_app.tsx index cc9cc1c37..3437c026f 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,7 +2,7 @@ import type { AppProps } from 'next/app'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { QueryClient, QueryClientProvider } from 'react-query'; import { RecoilRoot } from 'recoil'; import ErrorChecker from 'components/error/ErrorChecker'; @@ -14,16 +14,18 @@ import 'styles/globals.css'; function MyApp({ Component, pageProps }: AppProps) { const router = useRouter(); - const queryClient = new QueryClient({ - defaultOptions: { - queries: { - staleTime: 60 * 1000 * 10, // 10분 동안은 캐시를 사용 - cacheTime: 60 * 1000 * 10, // 20분 동안 캐시를 유지 - retry: 1, // 에러가 났을 때 1번 재시도 - refetchOnMount: false, - }, - }, - }); + const [queryClient, _] = useState( + () => + new QueryClient({ + defaultOptions: { + queries: { + staleTime: 60 * 1000 * 10, // 10분 동안은 캐시를 사용 + retry: 1, // 에러가 났을 때 1번 재시도 + refetchOnMount: false, + }, + }, + }) + ); useEffect(() => { const handleRouteChange = (url: string) => { diff --git a/pages/admin/agenda/teamModify.tsx b/pages/admin/agenda/teamModify.tsx index 1c182e405..d56f39375 100644 --- a/pages/admin/agenda/teamModify.tsx +++ b/pages/admin/agenda/teamModify.tsx @@ -6,9 +6,14 @@ import styles from 'styles/agenda/pages/create-team.module.scss'; const TeamModify = () => { const { team_key, location } = router.query; + const readyState = Boolean(team_key); // + team_key router.query 써서 쿼리로 못가져왔을 시, 에러 가능성 있음 - const teamData = useFetchGet('admin/team', { - team_key: team_key as string, + const teamData = useFetchGet({ + url: 'admin/team', + isReady: readyState, + params: { + team_key: team_key as string, + }, }).data; return ( diff --git a/pages/agenda/detail/host/result.tsx b/pages/agenda/detail/host/result.tsx index 58f89341c..b7ca95f42 100644 --- a/pages/agenda/detail/host/result.tsx +++ b/pages/agenda/detail/host/result.tsx @@ -92,7 +92,11 @@ const SubmitAgendaResult = () => { const { data } = useFetchGet<{ totalSize: number; content: ParticipantProps[]; - }>(`team/confirm/list`, { agenda_key: agenda_key, size: 30, page: 1 }) || { + }>({ + url: `team/confirm/list`, + isReady: Boolean(agenda_key), + params: { agenda_key: agenda_key, size: 30, page: 1 }, + }) || { data: {}, status: 400, }; diff --git a/pages/agenda/detail/index.tsx b/pages/agenda/detail/index.tsx index cd520617b..d12224747 100644 --- a/pages/agenda/detail/index.tsx +++ b/pages/agenda/detail/index.tsx @@ -17,10 +17,11 @@ const AgendaDetail = () => { const agendaKey = useAgendaKey(); const agendaData = useAgendaInfo(agendaKey as string); - const { data: myTeam, status: myTeamStatus } = useFetchGet( - `team/my`, - { agenda_key: agendaKey } - ); + const { data: myTeam, status: myTeamStatus } = useFetchGet({ + url: `team/my`, + isReady: Boolean(agendaKey), + params: { agenda_key: agendaKey }, + }); const intraId = useUser()?.intraId || ''; const isHost = getIsHost(intraId, agendaData); diff --git a/pages/agenda/detail/team/create.tsx b/pages/agenda/detail/team/create.tsx index 4d1fcb600..0e583acba 100644 --- a/pages/agenda/detail/team/create.tsx +++ b/pages/agenda/detail/team/create.tsx @@ -10,8 +10,12 @@ const CreateTeam = () => { const router = useRouter(); const agendaKey = useAgendaKey(); - const agendaInfo = useFetchGet(`/`, { - agenda_key: agendaKey, + const agendaInfo = useFetchGet({ + url: `/`, + isReady: Boolean(agendaKey), + params: { + agenda_key: agendaKey, + }, }).data; const backPage = () => { diff --git a/pages/agenda/detail/team/index.tsx b/pages/agenda/detail/team/index.tsx index 74b3e314f..b3c00481c 100644 --- a/pages/agenda/detail/team/index.tsx +++ b/pages/agenda/detail/team/index.tsx @@ -27,14 +27,20 @@ export default function TeamDetail() { */ const intraId = useUser()?.intraId; - const agendaData = useFetchGet(`/`, { - agenda_key: agendaKey, + const agendaData = useFetchGet({ + url: '/', + isReady: Boolean(agendaKey), + params: { agenda_key: agendaKey }, }).data; const { data: teamDetailData, getData: getTeamDetail } = - useFetchGet('/team', { - teamKey: teamUID, - agenda_key: agendaKey, + useFetchGet({ + url: '/team', + isReady: Boolean(agendaKey && teamUID), + params: { + agenda_key: agendaKey, + teamKey: teamUID, + }, }); /** diff --git a/pages/agenda/index.tsx b/pages/agenda/index.tsx index 7dd6a8cff..b7e59c827 100644 --- a/pages/agenda/index.tsx +++ b/pages/agenda/index.tsx @@ -17,8 +17,10 @@ const Agenda: NextPage = () => { url: '/history', }); - const { data: currentData } = useFetchGet('/confirm'); - const { data: openData } = useFetchGet('/open'); + const { data: currentData } = useFetchGet({ + url: '/confirm', + }); + const { data: openData } = useFetchGet({ url: '/open' }); return (
diff --git a/pages/agenda/profile/index.tsx b/pages/agenda/profile/index.tsx index 7df132207..f746dd50c 100644 --- a/pages/agenda/profile/index.tsx +++ b/pages/agenda/profile/index.tsx @@ -1,18 +1,24 @@ import { useRouter } from 'next/router'; import { useEffect } from 'react'; +import { useSetRecoilState } from 'recoil'; +import { agendaErrorState } from 'utils/recoil/agendaError'; import { useUser } from 'hooks/agenda/Layout/useUser'; const Index = () => { const router = useRouter(); const { intraId } = useUser() || {}; + const setError = useSetRecoilState(agendaErrorState); useEffect(() => { if (intraId) { router.push(`/agenda/profile/user?id=${intraId}`); } else { - router.push(`/`); + setError({ + msg: '로그인 정보가 만료되어 재로그인이 필요합니다.', + status: 401, + }); } - }, [intraId, router]); + }, [intraId, router, setError]); return null; }; diff --git a/pages/agenda/profile/user.tsx b/pages/agenda/profile/user.tsx index 9ca5368ee..48325ee8a 100644 --- a/pages/agenda/profile/user.tsx +++ b/pages/agenda/profile/user.tsx @@ -1,7 +1,10 @@ -import { useRouter } from 'next/router'; +import { useState, useEffect, useRef } from 'react'; import { MyTeamDataProps } from 'types/agenda/agendaDetail/agendaTypes'; import { HistoryItemProps } from 'types/agenda/profile/historyListTypes'; -import { ProfileDataProps } from 'types/agenda/profile/profileDataTypes'; +import { + AgendaProfileDataProps, + IntraProfileDataProps, +} from 'types/agenda/profile/profileDataTypes'; import AgendaUserSearchBar from 'components/agenda/Profile/AgendaUserSearchBar'; import CurrentList from 'components/agenda/Profile/CurrentList'; import HistoryList from 'components/agenda/Profile/HistoryList'; @@ -11,19 +14,49 @@ import AgendaLoading from 'components/agenda/utils/AgendaLoading'; import PageNation from 'components/Pagination'; import { useUser } from 'hooks/agenda/Layout/useUser'; import useFetchGet from 'hooks/agenda/useFetchGet'; +import useIntraId from 'hooks/agenda/useIntraId'; import usePageNation from 'hooks/agenda/usePageNation'; import styles from 'styles/agenda/Profile/AgendaProfile.module.scss'; const AgendaProfile = () => { - const intraId = useRouter().query.id; + const intraId = useIntraId(); // 쿼리의 id const userIntraId = useUser()?.intraId; // 현재 나의 intraId - const isMyProfile = intraId === userIntraId ? true : false; + const [profileUrl, setProfileUrl] = useState('/profile'); + const [myProfileCheck, setMyProfileCheck] = useState(null); + const isIntraId = useRef(false); // 인트라 아이디가 42에 있는지 확인 + const isAgendaId = useRef(false); // 인트라 아이디가 agenda에 있는지 확인 - /** API GET */ - const { data: profileData, getData: getProfileData } = - useFetchGet( - isMyProfile ? '/profile' : `/profile/${intraId}` - ); + useEffect(() => { + if (intraId && userIntraId) { + if (intraId === userIntraId) { + setMyProfileCheck(true); + } else { + setProfileUrl(`/profile/${intraId}`); + setMyProfileCheck(false); + } + } + }, [intraId, userIntraId]); + const { data: intraData, getData: getIntraData } = + useFetchGet({ + url: `/profile/intra/${intraId}`, + isReady: Boolean(intraId), + }); + + /** Agenda API GET */ + const { data: agendaProfileData, getData: getAgendaProfileData } = + useFetchGet({ + url: profileUrl, + // 본인이거나 42에 아이디가 있는 경우에만 데이터 요청 + isReady: Boolean( + intraId === userIntraId || (intraId && isIntraId.current) + ), + }); + + // useEffect(() => { + // if (intraId) { + // getProfileData(); + // } + // }, [intraId]); // host current const { @@ -31,12 +64,13 @@ const AgendaProfile = () => { PagaNationElementProps: PagaNationHostCurrent, } = usePageNation({ url: `/host/current/list/${intraId}`, + isReady: Boolean(intraId && isAgendaId.current), }); // current team - const currentListData = useFetchGet( - '/profile/current/list' - ).data; + const currentListData = useFetchGet({ + url: '/profile/current/list', + }).data; // host history const { @@ -44,6 +78,7 @@ const AgendaProfile = () => { PagaNationElementProps: PagaNationHostHistory, } = usePageNation({ url: `/host/history/list/${intraId}`, + isReady: Boolean(intraId && isAgendaId.current), }); // history @@ -52,6 +87,7 @@ const AgendaProfile = () => { PagaNationElementProps: PagaNationHistory, } = usePageNation({ url: `/profile/history/list/${intraId}`, + isReady: Boolean(intraId && isAgendaId.current), }); if (!intraId || !userIntraId) { @@ -65,19 +101,22 @@ const AgendaProfile = () => {
{/* ProfileCard */} - {profileData && ( + {intraData && intraId && ( )} {/* Ticket */} - {isMyProfile ? : ''} + {myProfileCheck ? : ''} {/* Host Current List */} {hostCurrentListData && hostCurrentListData.length > 0 ? ( <> @@ -88,7 +127,7 @@ const AgendaProfile = () => { '' )} {/* Current List */} - {isMyProfile && currentListData ? ( + {myProfileCheck && currentListData ? ( ) : ( '' diff --git a/styles/agenda/Home/Agenda.module.scss b/styles/agenda/Home/Agenda.module.scss index 90c140e0e..508f0f6d5 100644 --- a/styles/agenda/Home/Agenda.module.scss +++ b/styles/agenda/Home/Agenda.module.scss @@ -14,7 +14,7 @@ @include layout; position: relative; top: -1rem; - display: flex; + display: flex !important; width: 100%; flex-direction: column; padding: 1rem 0; diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss index d45990402..51b8d7f4a 100644 --- a/styles/agenda/Home/MyAgendaBtn.module.scss +++ b/styles/agenda/Home/MyAgendaBtn.module.scss @@ -72,15 +72,17 @@ } .myAgendaListContainer { - display: flex; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(16rem, 3fr)); + width: 100%; height: 23rem; flex-direction: column; overflow-y: scroll; align-items: flex-start; - gap: 1rem; + gap: 0.8rem; @media screen and (min-width: 961px) { - display: flex; + display: grid; width: auto; height: auto; flex-direction: row; diff --git a/styles/agenda/Home/MyTeamInfo.module.scss b/styles/agenda/Home/MyTeamInfo.module.scss index bd13c3eea..65a31b08c 100644 --- a/styles/agenda/Home/MyTeamInfo.module.scss +++ b/styles/agenda/Home/MyTeamInfo.module.scss @@ -2,7 +2,7 @@ .Container { display: flex; - max-width: 100%; + width: 100%; padding: 0.5rem 1rem; background-color: var(--box-bg-1); border: var(--default-border); @@ -16,7 +16,7 @@ display: flex; width: 100%; flex-direction: column; - padding: 0.5rem; + padding: 0.4rem; justify-content: flex-start; } @@ -30,12 +30,11 @@ } .teamTitle { - @include text(sub-title); + @include text(tab); margin: 0; } .agendaTitle { - @include text(sub-title); + @include text(description-s); margin: 0; - font-family: $font-text-light; } diff --git a/styles/agenda/Layout/Layout.module.scss b/styles/agenda/Layout/Layout.module.scss index 33aea57d6..64246b756 100644 --- a/styles/agenda/Layout/Layout.module.scss +++ b/styles/agenda/Layout/Layout.module.scss @@ -29,13 +29,16 @@ color: white; cursor: pointer; - background-color: var(--highlight-yellow); + background-color: var(--highlight-violet); border: none; border-radius: $radius-circle; box-shadow: var(--box-shadow-light); transition: background-color 0.3s; &:hover { - background-color: var(--highlight-violet); + width: 3rem; + height: 3rem; + transform: translate(10%, 10%); + animation: all 1s; } } diff --git a/styles/agenda/Layout/MenuBar.module.scss b/styles/agenda/Layout/MenuBar.module.scss index bd90d9b43..c869b7155 100644 --- a/styles/agenda/Layout/MenuBar.module.scss +++ b/styles/agenda/Layout/MenuBar.module.scss @@ -7,6 +7,7 @@ min-width: 200px; height: calc(100vh - 4rem); padding: 1rem; + overflow-y: auto; background: var(--menubar-bg); } .inactive { @@ -37,7 +38,7 @@ align-items: center; } .last { - margin-top: 4rem; + margin-top: 2rem; } .content { diff --git a/styles/agenda/Profile/AgendaProfile.module.scss b/styles/agenda/Profile/AgendaProfile.module.scss index 33b917a68..690cb01df 100644 --- a/styles/agenda/Profile/AgendaProfile.module.scss +++ b/styles/agenda/Profile/AgendaProfile.module.scss @@ -11,6 +11,6 @@ .agendaUserSearchBarWrap { display: flex; - justify-content: flex-start; + justify-content: flex-end; width: 100%; } diff --git a/styles/agenda/Profile/AgendaUserSearchBar.module.scss b/styles/agenda/Profile/AgendaUserSearchBar.module.scss index 64a7d34c4..46f02290f 100644 --- a/styles/agenda/Profile/AgendaUserSearchBar.module.scss +++ b/styles/agenda/Profile/AgendaUserSearchBar.module.scss @@ -1,27 +1,60 @@ @import 'styles/agenda/common.scss'; +.warp { + position: relative; + width: 12rem; +} + .agendaUserSearchBar { + position: relative; + z-index: 4; display: flex; - width: 12rem; height: 2.5rem; - padding: 0.5rem 1rem; - background-color: var(--box-bg-3); + padding: 0.2rem 1rem; + font-size: $font-size-m; + color: var(black); + background-color: var(--box-bg-1); border-radius: $radius-big; justify-content: space-between; align-items: center; input { - width: 8rem; + all: unset; + position: relative; + z-index: 5; + box-sizing: border-box; + width: calc(100% - 4rem); color: var(--color-text-reverse); - background: none; - border: none; - outline: none; - @include text(label); + @include text(default); } - .imageBox { - width: 1.5rem; - height: 1.5rem; - color: var(--color-text-reverse); + .icons { + display: flex; + align-items: center; + margin-top: 0.2rem; + .reset { + cursor: pointer; + } + } +} + +.dropdown { + position: absolute; + top: 1.1rem; + left: 0; + z-index: 2; + + box-sizing: border-box; + display: block; + width: 100%; + padding: 1.4rem 0 0 1rem; + color: var(--box-bg-1-dark); + background: var(--box-bg-1); + border-radius: 0 0 $radius-small $radius-small; + @include text(default); + + div { + padding: 0.4rem 0; + cursor: pointer; } } diff --git a/styles/agenda/agendaDetail/AgendaDetail.module.scss b/styles/agenda/agendaDetail/AgendaDetail.module.scss index 90ee627e1..9923e035f 100644 --- a/styles/agenda/agendaDetail/AgendaDetail.module.scss +++ b/styles/agenda/agendaDetail/AgendaDetail.module.scss @@ -1,17 +1,16 @@ @import 'styles/agenda/common.scss'; .layout { - @include layout; grid-template: 'top top top top' 450px 'content content match match' auto / 1fr 1fr 1fr 1fr; - max-width: 100%; - padding-top: 1px; } .agendaDetailWrap { @include pageContainer; + max-width: 100%; height: 100%; + padding: 0 5rem; } .headWrapper { // @include gridHidden(web); diff --git a/styles/agenda/agendaDetail/AgendaInfo.module.scss b/styles/agenda/agendaDetail/AgendaInfo.module.scss index 89f492a00..de75e84d5 100644 --- a/styles/agenda/agendaDetail/AgendaInfo.module.scss +++ b/styles/agenda/agendaDetail/AgendaInfo.module.scss @@ -79,7 +79,7 @@ $info-gradient: linear-gradient( align-items: center; } .organizerWrap { - @include text('default'); // medium + @include text('description-s'); // medium display: flex; margin-right: auto; // UploadBtn과의 간격 확보 align-items: center; diff --git a/styles/agenda/agendaDetail/AgendaTab.module.scss b/styles/agenda/agendaDetail/AgendaTab.module.scss index 5b922038e..7d05b30ac 100644 --- a/styles/agenda/agendaDetail/AgendaTab.module.scss +++ b/styles/agenda/agendaDetail/AgendaTab.module.scss @@ -28,6 +28,9 @@ display: flex; align-items: flex-start; width: 100%; + @media screen and (min-width: 961px) { + justify-content: center; + } } } diff --git a/styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss b/styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss index 1df198d0c..3ed14ef5c 100644 --- a/styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss +++ b/styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss @@ -13,9 +13,8 @@ } .participantsContainer { - display: flex; - justify-content: flex-start; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 2rem; width: 100%; } diff --git a/styles/agenda/button/TabButton.module.scss b/styles/agenda/button/TabButton.module.scss index 67269f44a..58ad88f11 100644 --- a/styles/agenda/button/TabButton.module.scss +++ b/styles/agenda/button/TabButton.module.scss @@ -21,7 +21,7 @@ } &.isActive { - background: var(--highlight-yellow); + background: var(--highlight-violet); } } diff --git a/styles/agenda/button/UploadBtn.module.scss b/styles/agenda/button/UploadBtn.module.scss index 24966854e..a335ddc75 100644 --- a/styles/agenda/button/UploadBtn.module.scss +++ b/styles/agenda/button/UploadBtn.module.scss @@ -15,6 +15,6 @@ gap: 0.3rem; span { - @include text('tab'); + @include text(tab); } } diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss index 8f323da11..0d987b143 100644 --- a/styles/agenda/common.scss +++ b/styles/agenda/common.scss @@ -157,7 +157,7 @@ $font-size-xs: 0.8rem; // $small-font } @else if ($type == 'date') { // 날짜 - 월,일 font-family: $font-text-bold; - font-size: $font-size-xl; + font-size: $font-size-l; } @else if ($type == 'sub-title') { // 아젠다 리스트 아이템 - 타이틀 font-family: $font-text-bold; diff --git a/styles/agenda/pages/CreateAgenda.module.scss b/styles/agenda/pages/CreateAgenda.module.scss index 97c4639cd..e8f7d5efc 100644 --- a/styles/agenda/pages/CreateAgenda.module.scss +++ b/styles/agenda/pages/CreateAgenda.module.scss @@ -1,13 +1,15 @@ @import 'styles/agenda/Form/Form.module.scss'; .pageContainer { - @include pageContainer; + @include layout; + display: flex !important; } .container { @include container(1); + max-width: 50rem; padding: 0.5rem; - @include text('default'); text-align: left; + @include text('default'); } .cancelBtn { diff --git a/styles/agenda/responsive.scss b/styles/agenda/responsive.scss index 49816a426..dc5dfcd9d 100644 --- a/styles/agenda/responsive.scss +++ b/styles/agenda/responsive.scss @@ -31,23 +31,21 @@ @include action; width: 100%; height: max-content; + justify-content: center; @media screen and (max-width: 480px) { display: flex; flex-direction: column; - // border: 2px solid red; } @media screen and (min-width: 481px) and (max-width: 960px) { display: flex; flex-direction: column; - // padding: 0 5rem; - // border: 2px solid blue; } @media screen and (min-width: 961px) { display: grid; padding: 0 5rem; - // border: 2px solid yellow; } } + @mixin pageContainer { @include action; display: flex; @@ -61,6 +59,7 @@ } @media screen and (min-width: 961px) { height: 100%; + padding: 0 5rem; } } diff --git a/styles/agenda/utils/AgendaTag.module.scss b/styles/agenda/utils/AgendaTag.module.scss index 5e4ccacb8..d3ebf8d22 100644 --- a/styles/agenda/utils/AgendaTag.module.scss +++ b/styles/agenda/utils/AgendaTag.module.scss @@ -22,8 +22,10 @@ $tags: ( .agendaTag { display: flex; - width: 3.3rem; + width: max-content; + min-width: 3.3rem; height: 1.2rem; + padding: 0.2rem 0.5rem; color: var(--color-text-reverse); border-radius: $radius-medium; justify-content: center; @@ -33,9 +35,10 @@ $tags: ( .defaultTag { display: flex; - width: 3.3rem; + width: max-content; + min-width: 3.3rem; height: 1.2rem; - padding: 0.2rem; + padding: 0.2rem 0.5rem; background-color: var(--box-bg-2-light); border-radius: $radius-medium; diff --git a/styles/agenda/utils/PageController.module.scss b/styles/agenda/utils/PageController.module.scss index 93ad536b2..fe83278c2 100644 --- a/styles/agenda/utils/PageController.module.scss +++ b/styles/agenda/utils/PageController.module.scss @@ -4,9 +4,9 @@ width: 100%; height: max-content; @include pageContainer; + padding: 0 1rem !important; @media screen and (max-width: 960px) { height: 90%; - padding: 0 1rem !important; } } diff --git a/styles/globals.css b/styles/globals.css index db3167291..bf8fbc230 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -18,7 +18,7 @@ input { Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-weight: 500; } -/* +/* @media all and (max-width: 379px) { html { font-size: 14px; @@ -39,25 +39,25 @@ input { @media all and (min-width: 768px) { html { - font-size: 19px; + font-size: 17px; } } @media all and (min-width: 1024px) { html { - font-size: 20px; + font-size: 18px; } } @media all and (min-width: 1280px) { html { - font-size: 21px; + font-size: 19px; } } @media all and (min-width: 1440px) { html { - font-size: 22px; + font-size: 20px; } } diff --git a/types/agenda/profile/profileCardTypes.ts b/types/agenda/profile/profileCardTypes.ts index 77d014215..7edf51c8d 100644 --- a/types/agenda/profile/profileCardTypes.ts +++ b/types/agenda/profile/profileCardTypes.ts @@ -7,5 +7,5 @@ export interface ProfileCardProps { imageUrl: string; achievements: AchievementProps[]; getProfileData: () => void; - isMyProfile: boolean; + isMyProfile: boolean | null; } diff --git a/types/agenda/profile/profileDataTypes.ts b/types/agenda/profile/profileDataTypes.ts index 7f83cbf5b..71027ec30 100644 --- a/types/agenda/profile/profileDataTypes.ts +++ b/types/agenda/profile/profileDataTypes.ts @@ -1,14 +1,9 @@ import { AgendaLocation, Coalition } from 'constants/agenda/agenda'; -export interface ProfileDataProps { - achievements: AchievementProps[]; +export interface IntraProfileDataProps { + intraId: string; imageUrl: string; - ticketCount: number; - userCoalition: Coalition; - userContent: string; - userGithub: string; - userIntraId: string; - userLocation: AgendaLocation; + achievements: AchievementProps[]; } export interface LoginInfoDataProps { @@ -27,3 +22,11 @@ export interface AchievementProps { users_url: string; visible: boolean; } + +export interface AgendaProfileDataProps { + userIntraId: string; + userContent: string; //50자 이내 + userGithub: string; + userCoalition: string; // ENUM 상단확인 + userLocation: string; // 혹시나 서울/경산 이외 들어울 경우 예외처리 +} diff --git a/utils/recoil/agendaError.ts b/utils/recoil/agendaError.ts new file mode 100644 index 000000000..801dfd9a5 --- /dev/null +++ b/utils/recoil/agendaError.ts @@ -0,0 +1,12 @@ +import { atom } from 'recoil'; +import { v1 } from 'uuid'; + +export interface ErrorStateType { + msg: string; + status: number; +} + +export const agendaErrorState = atom({ + key: `errorState/${v1()}`, + default: { msg: '', status: 0 }, +});