From 547e7d39cb52892e6e7bcaa2776ed1a35b64b40b Mon Sep 17 00:00:00 2001 From: JeonYumin <40783675+JeonYumin94@users.noreply.github.com> Date: Tue, 30 Jul 2024 11:44:29 +0900 Subject: [PATCH 1/3] =?UTF-8?q?FE-51=20:twisted=5Frightwards=5Farrows:=20?= =?UTF-8?q?=EA=B3=B5=EC=9A=A9=20API=20=EB=A8=B8=EC=A7=80=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20(#92)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * FE-52 ✨에피그램 목록조회 API (#34) * FE-52 feat: api schema 작성 * FE-52 ✨feat: getEpigrams api 작성 * FE-522 ✨fix: default export로 변경 * FE-52 ✨test: 테스트 코드 작성 * FE-52 ✨feat: BaseUrl, TeamID 상수 추가 및 axios baseTRL 수정 * FE-52 ✨fix: schema 및 apis 파일 수정 * FE-52 ✨test: 테스트 코드 삭제 * FE-52 ✨fix: .env파일 생성 및 BaseURL 수정 * FE-52 ✨fix: limit 타입 수정(optional 삭제) * FE-52 ✨text: 테 테스트코드 삭제 * FE-52 ✨fix: api GET요청 주소 수정('epigrams' -> '/epigrams') * FE-53 :sparkles: 감정이모티콘 저장 스키마 정의 * FE-53 :sparkles: 오늘의 감정 저장 api 생성 * FE-53 :sparkles: getMe 함수를 사용해 로그인 상태 확인 기능 구현 * FE-53 :sparkles: 감정 한영 변환 함수 * FE-53 :sparkles: 감정 저장 후 토스트 알림 표시 * FE-53 :sparkles: 오늘의 감정 조회 api 생성 * FE-53 :hammer: 감정 한영 변환 함수 추가 +) post, get 함수 내부로 한영 변환 함수 이동 * FE-53 :sparkles: 오늘의 감정 스키마 추가 정의 * FE-53 :sparkles: 오늘의 감정 조회 함수 적용 * FE-53 :truck: 오늘의 감정 type 이름 변경 * FE-53 :sparkles: useMutation 훅 사용 * FE-53 :memo: EmotionSelector 주석 추가 * FE-53 :fire: api 함수 에러 처리 부분 제거 * FE-53 :hammer: useQuery를 사용해 오늘의 감정 조회 데이터를 조회할 때는 useQuery를 사용하는거라 함 * FE-56 :sparkles: 댓글 수정 API (#84) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * FE-56 :sparkles: 댓글 수정 API --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-57 :sparkles: 댓글 삭제 API (#88) * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (#93) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (충돌수정) (#98) --------- Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 --- src/apis/.http | 0 src/apis/epigramComment.ts | 46 ++++++++++++ src/apis/getEmotion.ts | 25 +++++++ src/apis/getEpigrams.ts | 12 +++ src/apis/postEmotion.ts | 24 ++++++ src/apis/user.ts | 8 +- src/components/Emotion/EmotionCard.tsx | 2 +- src/components/Emotion/EmotionSaveToast.tsx | 34 +++++++++ src/components/Emotion/EmotionSelector.tsx | 81 ++++++++++++++++----- src/hooks/useDeleteCommentHook.ts | 31 ++++++++ src/hooks/useGetEmotion.ts | 11 +++ src/hooks/usePatchCommentHook.ts | 32 ++++++++ src/hooks/usePostEmotion.ts | 11 +++ src/hooks/userQueryHooks.ts | 4 +- src/schema/auth.ts | 1 + src/schema/comment.ts | 44 +++++++++++ src/schema/emotion.ts | 23 ++++++ src/schema/epigram.ts | 30 ++++++++ src/schema/epigrams.ts | 33 +++++++++ src/schema/user.ts | 2 +- src/types/{EmotionTypes.ts => emotion.ts} | 0 src/types/epigram.types.ts | 24 ++++++ src/utils/emotionMap.ts | 23 ++++++ 23 files changed, 475 insertions(+), 26 deletions(-) create mode 100644 src/apis/.http create mode 100644 src/apis/epigramComment.ts create mode 100644 src/apis/getEmotion.ts create mode 100644 src/apis/getEpigrams.ts create mode 100644 src/apis/postEmotion.ts create mode 100644 src/components/Emotion/EmotionSaveToast.tsx create mode 100644 src/hooks/useDeleteCommentHook.ts create mode 100644 src/hooks/useGetEmotion.ts create mode 100644 src/hooks/usePatchCommentHook.ts create mode 100644 src/hooks/usePostEmotion.ts create mode 100644 src/schema/comment.ts create mode 100644 src/schema/emotion.ts create mode 100644 src/schema/epigram.ts create mode 100644 src/schema/epigrams.ts rename src/types/{EmotionTypes.ts => emotion.ts} (100%) create mode 100644 src/types/epigram.types.ts create mode 100644 src/utils/emotionMap.ts diff --git a/src/apis/.http b/src/apis/.http new file mode 100644 index 00000000..e69de29b diff --git a/src/apis/epigramComment.ts b/src/apis/epigramComment.ts new file mode 100644 index 00000000..4368fb9a --- /dev/null +++ b/src/apis/epigramComment.ts @@ -0,0 +1,46 @@ +import httpClient from '@/apis/index'; +import { CommentRequestSchema, CommentRequestType, CommentResponseSchema, CommentResponseType } from '@/schema/comment'; +import { PostCommentRequest, PatchCommentRequest } from '@/types/epigram.types'; + +export const getEpigramComments = async (params: CommentRequestType): Promise => { + try { + // 요청 파라미터 유효성 검사 + const validatedParams = CommentRequestSchema.parse(params); + + const { id, limit, cursor } = validatedParams; + + // NOTE: URL의 쿼리 문자열을 사용 + // NOTE : cursor값이 있다면 ?limit=3&cursor=100, 없다면 ?limit=3,(숫자는 임의로 지정한 것) + const queryParams = new URLSearchParams({ + limit: limit.toString(), + ...(cursor !== undefined && { cursor: cursor.toString() }), + }); + + const response = await httpClient.get(`/epigrams/${id}/comments?${queryParams.toString()}`); + + // 응답 데이터 유효성 검사 + const validatedData = CommentResponseSchema.parse(response.data); + + return validatedData; + } catch (error) { + if (error instanceof Error) { + throw new Error(`댓글을 불러오는데 실패했습니다: ${error.message}`); + } + throw error; + } +}; + +export const postComment = async (commentData: PostCommentRequest) => { + const response = await httpClient.post('/comments', commentData); + return response.data; +}; + +export const patchComment = async (commentId: number, commentData: PatchCommentRequest) => { + const response = await httpClient.patch(`/comments/${commentId}`, commentData); + return response.data; +}; + +export const deleteComment = async (commentId: number) => { + const response = await httpClient.delete(`/comments/${commentId}`); + return response.data; +}; diff --git a/src/apis/getEmotion.ts b/src/apis/getEmotion.ts new file mode 100644 index 00000000..044ff3c3 --- /dev/null +++ b/src/apis/getEmotion.ts @@ -0,0 +1,25 @@ +import { EmotionType } from '@/types/emotion'; +import type { GetEmotionResponseType } from '@/schema/emotion'; +import { translateEmotionToKorean } from '@/utils/emotionMap'; +import httpClient from '.'; +import { getMe } from './user'; + +const getEmotion = async (): Promise => { + const user = await getMe(); + if (!user) { + throw new Error('로그인이 필요합니다.'); + } + + const response = await httpClient.get('/emotionLogs/today', { + params: { userId: user.id }, + }); + + if (response.status === 204) { + return null; // No content + } + + const koreanEmotion = translateEmotionToKorean(response.data.emotion); + return koreanEmotion; +}; + +export default getEmotion; diff --git a/src/apis/getEpigrams.ts b/src/apis/getEpigrams.ts new file mode 100644 index 00000000..9685bc60 --- /dev/null +++ b/src/apis/getEpigrams.ts @@ -0,0 +1,12 @@ +import { GetEpigramsParamsType, GetEpigramsResponseType, GetEpigramsResponse } from '@/schema/epigrams'; +import httpClient from '.'; + +const getEpigrams = async (params: GetEpigramsParamsType): Promise => { + const response = await httpClient.get(`/epigrams`, { params }); + + // 데이터 일치하는지 확인 + const parsedResponse = GetEpigramsResponse.parse(response.data); + return parsedResponse; +}; + +export default getEpigrams; diff --git a/src/apis/postEmotion.ts b/src/apis/postEmotion.ts new file mode 100644 index 00000000..98130bc7 --- /dev/null +++ b/src/apis/postEmotion.ts @@ -0,0 +1,24 @@ +import { EmotionType } from '@/types/emotion'; +import type { PostEmotionRequestType, PostEmotionResponseType } from '@/schema/emotion'; +import { translateEmotionToEnglish } from '@/utils/emotionMap'; +import httpClient from '.'; +import { getMe } from './user'; + +const postEmotion = async (emotion: EmotionType): Promise => { + const user = await getMe(); + if (!user) { + throw new Error('로그인이 필요합니다.'); + } + + const englishEmotion = translateEmotionToEnglish(emotion); + const request: PostEmotionRequestType = { emotion: englishEmotion }; + + const response = await httpClient.post('/emotionLogs/today', { + ...request, + userId: user.id, + }); + + return response.data; +}; + +export default postEmotion; diff --git a/src/apis/user.ts b/src/apis/user.ts index 395b0167..cd192766 100644 --- a/src/apis/user.ts +++ b/src/apis/user.ts @@ -1,18 +1,18 @@ -import type { GetUserReponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user'; +import type { GetUserResponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user'; import httpClient from '.'; -export const getMe = async (): Promise => { +export const getMe = async (): Promise => { const response = await httpClient.get('/users/me'); return response.data; }; -export const getUser = async (request: GetUserRequestType): Promise => { +export const getUser = async (request: GetUserRequestType): Promise => { const { id } = request; const response = await httpClient.get(`/users/${id}`); return response.data; }; -export const updateMe = async (request: PatchMeRequestType): Promise => { +export const updateMe = async (request: PatchMeRequestType): Promise => { const response = await httpClient.patch('/users/me', { ...request }); return response.data; }; diff --git a/src/components/Emotion/EmotionCard.tsx b/src/components/Emotion/EmotionCard.tsx index 1896f7cd..74134281 100644 --- a/src/components/Emotion/EmotionCard.tsx +++ b/src/components/Emotion/EmotionCard.tsx @@ -7,7 +7,7 @@ import React from 'react'; import cn from '@/lib/utils'; import Image from 'next/image'; -import { EmotionIconCardProps } from '@/types/EmotionTypes'; +import { EmotionIconCardProps } from '@/types/emotion'; // 아이콘 파일 경로 매핑 const iconPaths = { diff --git a/src/components/Emotion/EmotionSaveToast.tsx b/src/components/Emotion/EmotionSaveToast.tsx new file mode 100644 index 00000000..e7d24105 --- /dev/null +++ b/src/components/Emotion/EmotionSaveToast.tsx @@ -0,0 +1,34 @@ +/* + * 오늘의 감정을 선택하면 표시되는 toast입니다. + * 감정을 확인하기 위해 마이페이지로 연결됩니다. + */ + +import React, { useEffect } from 'react'; +import { useToast } from '@/components/ui/use-toast'; +import { ToastAction } from '@/components/ui/toast'; +import { useRouter } from 'next/router'; + +interface EmotionSaveToastProps { + iconType: string; +} + +function EmotionSaveToast({ iconType }: EmotionSaveToastProps) { + const { toast } = useToast(); + const router = useRouter(); + + useEffect(() => { + toast({ + title: '오늘의 감정이 저장되었습니다.', + description: `오늘의 감정: ${iconType}`, + action: ( + router.push('/mypage')}> + 확인하기 + + ), + }); + }, [iconType, toast, router]); + + return null; +} + +export default EmotionSaveToast; diff --git a/src/components/Emotion/EmotionSelector.tsx b/src/components/Emotion/EmotionSelector.tsx index 5a73639e..fc92728b 100644 --- a/src/components/Emotion/EmotionSelector.tsx +++ b/src/components/Emotion/EmotionSelector.tsx @@ -1,19 +1,21 @@ -/* - 여러 개의 EmotionIconCard를 관리합니다. - 사용자 인터페이스에 필요한 상호 작용 로직을 포함합니다. - */ - -import React, { useState } from 'react'; -import EmotionIconCard from '@/components/Emotion/EmotionCard'; +import React, { useState, useEffect } from 'react'; import useMediaQuery from '@/hooks/useMediaQuery'; -import { EmotionType, EmotionState } from '@/types/EmotionTypes'; +import EmotionIconCard from '@/components/Emotion/EmotionCard'; +import { EmotionType, EmotionState } from '@/types/emotion'; +import usePostEmotion from '@/hooks/usePostEmotion'; +import useGetEmotion from '@/hooks/useGetEmotion'; +import EmotionSaveToast from './EmotionSaveToast'; -// EmotionSelector 컴포넌트 함수 선언 +/** + * EmotionSelector 컴포넌트는 여러 개의 EmotionIconCard를 관리하고 + * 사용자의 오늘의 감정을 선택하고 저장하고 출력합니다. + */ function EmotionSelector() { + // 반응형 디자인을 위한 미디어 쿼리 훅 const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)'); const isMobile = useMediaQuery('(max-width: 767px)'); - // 감정 카드 상태 관리 + // 감정 카드 상태 관리를 위한 useState 훅 const [states, setStates] = useState>({ 감동: 'Default', 기쁨: 'Default', @@ -22,13 +24,37 @@ function EmotionSelector() { 분노: 'Default', }); - // 감정 카드 클릭 핸들러 - const handleCardClick = (iconType: EmotionType) => { + // 현재 선택된 감정을 관리하는 useState 훅 + const [selectedEmotion, setSelectedEmotion] = useState(null); + // 오늘의 감정을 조회하기 위한 훅 + const { data: emotion, error: getError, isLoading: isGetLoading } = useGetEmotion(); + // 감정을 저장하기 위한 훅 + const postEmotionMutation = usePostEmotion(); + + // 컴포넌트가 마운트될 때 한 번만 실행되는 useEffect 훅 + // 오늘의 감정을 조회하고 상태를 업데이트합니다. + useEffect(() => { + if (emotion) { + setStates((prevStates) => ({ + ...prevStates, + [emotion]: 'Clicked', + })); + } + }, [emotion]); + + /** + * 감정 카드 클릭 핸들러 + * 사용자가 감정 카드를 클릭했을 때 호출됩니다. + * 클릭된 감정 카드를 'Clicked' 상태로 설정하고 나머지 카드는 'Unclicked' 상태로 설정합니다. + * 감정을 서버에 저장합니다. + * @param iconType - 클릭된 감정의 타입 + */ + const handleCardClick = async (iconType: EmotionType) => { setStates((prevStates) => { const newStates = { ...prevStates }; if (prevStates[iconType] === 'Clicked') { - // 현재 클릭된 카드가 다시 클릭되면 모두 Default로 설정 + // 현재 클릭된 카드가 다시 클릭되면 모든 카드를 Default로 설정 Object.keys(newStates).forEach((key) => { newStates[key as EmotionType] = 'Default'; }); @@ -41,8 +67,20 @@ function EmotionSelector() { return newStates; }); + + // 오늘의 감정 저장 + postEmotionMutation.mutate(iconType, { + onSuccess: (_, clickedIconType) => { + setSelectedEmotion(clickedIconType); + }, + onError: (error: unknown) => { + // eslint-disable-next-line + console.error(error); + }, + }); }; + // 반응형 디자인을 위한 카드 크기 설정 let containerClass = 'w-[544px] h-[136px] gap-4'; let cardSize: 'lg' | 'md' | 'sm' = 'lg'; @@ -54,12 +92,19 @@ function EmotionSelector() { cardSize = 'sm'; } + if (isGetLoading) return

Loading...

; + if (getError) return

{getError.message}

; + return ( -
- {(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => ( - handleCardClick(iconType)} /> - ))} -
+ <> +
+ {(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => ( + handleCardClick(iconType)} /> + ))} +
+ {/* 감정이 선택되었을 때 토스트 메시지 표시 */} + {selectedEmotion && } + ); } diff --git a/src/hooks/useDeleteCommentHook.ts b/src/hooks/useDeleteCommentHook.ts new file mode 100644 index 00000000..006019b5 --- /dev/null +++ b/src/hooks/useDeleteCommentHook.ts @@ -0,0 +1,31 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { deleteComment } from '@/apis/epigramComment'; +import { toast } from '@/components/ui/use-toast'; + +const useDeleteCommentMutation = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: (commentId: number) => deleteComment(commentId), + onSuccess: () => { + // 댓글 목록 쿼리 무효화 + queryClient.invalidateQueries({ queryKey: ['epigramComments'] }); + + // 성공 메시지 표시 + toast({ + title: '댓글 삭제 성공', + description: '댓글이 성공적으로 삭제되었습니다.', + }); + }, + onError: (error) => { + // 에러 메시지 표시 + toast({ + title: '댓글 삭제 실패', + description: `댓글 삭제 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`, + variant: 'destructive', + }); + }, + }); +}; + +export default useDeleteCommentMutation; diff --git a/src/hooks/useGetEmotion.ts b/src/hooks/useGetEmotion.ts new file mode 100644 index 00000000..d8017abc --- /dev/null +++ b/src/hooks/useGetEmotion.ts @@ -0,0 +1,11 @@ +import { useQuery } from '@tanstack/react-query'; +import getEmotion from '@/apis/getEmotion'; +import { EmotionType } from '@/types/emotion'; + +const useGetEmotion = () => + useQuery({ + queryKey: ['emotion'], + queryFn: getEmotion, + }); + +export default useGetEmotion; diff --git a/src/hooks/usePatchCommentHook.ts b/src/hooks/usePatchCommentHook.ts new file mode 100644 index 00000000..b215624d --- /dev/null +++ b/src/hooks/usePatchCommentHook.ts @@ -0,0 +1,32 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { patchComment } from '@/apis/epigramComment'; +import { PatchCommentRequest } from '@/types/epigram.types'; +import { toast } from '@/components/ui/use-toast'; + +const usePatchCommentMutation = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: ({ commentId, ...commentData }: { commentId: number } & PatchCommentRequest) => patchComment(commentId, commentData), + onSuccess: () => { + // 댓글 목록 쿼리 무효화 + queryClient.invalidateQueries({ queryKey: ['epigramComments'] }); + + // 성공 메시지 표시 + toast({ + title: '댓글 수정 성공', + description: '댓글이 성공적으로 수정되었습니다.', + }); + }, + onError: (error) => { + // 에러 메시지 표시 + toast({ + title: '댓글 수정 실패', + description: `댓글 수정 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`, + variant: 'destructive', + }); + }, + }); +}; + +export default usePatchCommentMutation; diff --git a/src/hooks/usePostEmotion.ts b/src/hooks/usePostEmotion.ts new file mode 100644 index 00000000..f13540ae --- /dev/null +++ b/src/hooks/usePostEmotion.ts @@ -0,0 +1,11 @@ +import { useMutation } from '@tanstack/react-query'; +import postEmotion from '@/apis/postEmotion'; +import { EmotionType } from '@/types/emotion'; +import { PostEmotionResponseType } from '@/schema/emotion'; + +const usePostEmotion = () => + useMutation({ + mutationFn: postEmotion, + }); + +export default usePostEmotion; diff --git a/src/hooks/userQueryHooks.ts b/src/hooks/userQueryHooks.ts index 7c28fe75..29ba4e2e 100644 --- a/src/hooks/userQueryHooks.ts +++ b/src/hooks/userQueryHooks.ts @@ -1,6 +1,6 @@ import quries from '@/apis/queries'; import { updateMe } from '@/apis/user'; -import { GetUserReponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user'; +import { GetUserResponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user'; import { MutationOptions } from '@/types/query'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; @@ -8,7 +8,7 @@ export const useMeQuery = () => useQuery(quries.user.getMe()); export const useUserQuery = (requset: GetUserRequestType) => useQuery(quries.user.getUser(requset)); -export const useUpdateMe = (options: MutationOptions) => { +export const useUpdateMe = (options: MutationOptions) => { const queryClient = useQueryClient(); return useMutation({ mutationFn: (request: PatchMeRequestType) => updateMe(request), diff --git a/src/schema/auth.ts b/src/schema/auth.ts index 0a9069a8..5de73332 100644 --- a/src/schema/auth.ts +++ b/src/schema/auth.ts @@ -20,6 +20,7 @@ export const PostSignUpRequest = z }); // NOTE: 로그인 스키마 + export const PostSigninRequest = z.object({ email: z.string().min(1, { message: '이메일은 필수 입력입니다.' }).email({ message: '올바른 이메일 주소가 아닙니다.' }), password: z.string().min(1, { message: '비밀번호는 필수 입력입니다.' }), diff --git a/src/schema/comment.ts b/src/schema/comment.ts new file mode 100644 index 00000000..391557df --- /dev/null +++ b/src/schema/comment.ts @@ -0,0 +1,44 @@ +import { z } from 'zod'; + +const WriterSchema = z.object({ + image: z.string().nullable(), + nickname: z.string(), + id: z.number(), +}); + +const CommentContentSchema = z.string().min(1); + +const CommentSchema = z.object({ + epigramId: z.number(), + writer: WriterSchema, + updatedAt: z.string().datetime(), + createdAt: z.string().datetime(), + isPrivate: z.boolean(), + content: CommentContentSchema, + id: z.number(), +}); + +const CommentResponseSchema = z.object({ + totalCount: z.number(), + nextCursor: z.number().nullable(), + list: z.array(CommentSchema), +}); + +const CommentRequestSchema = z.object({ + id: z.number().int().positive(), + limit: z.number().int().positive().max(100), + cursor: z.number().optional(), +}); + +const CommentFormSchema = z.object({ + content: z.string().min(1, '댓글을 입력해주세요.').max(100, '100자 이내로 입력해주세요.'), + isPrivate: z.boolean().default(true), +}); + +export type CommentFormValues = z.infer; +export type CommentRequestType = z.infer; +export type CommentResponseType = z.infer; +export type CommentType = z.infer; +export type Writer = z.infer; + +export { CommentRequestSchema, CommentResponseSchema, CommentFormSchema, CommentSchema, WriterSchema }; diff --git a/src/schema/emotion.ts b/src/schema/emotion.ts new file mode 100644 index 00000000..a2239be9 --- /dev/null +++ b/src/schema/emotion.ts @@ -0,0 +1,23 @@ +import * as z from 'zod'; + +export const PostEmotionRequest = z.object({ + emotion: z.enum(['MOVED', 'JOY', 'WORRY', 'SADNESS', 'ANGER']), +}); + +export const PostEmotionResponse = z.object({ + createdAt: z.coerce.date(), + emotion: z.enum(['MOVED', 'JOY', 'WORRY', 'SADNESS', 'ANGER']), + userId: z.number(), + id: z.number(), +}); + +export const GetEmotionResponse = z.object({ + createdAt: z.coerce.date(), + emotion: z.enum(['MOVED', 'JOY', 'WORRY', 'SADNESS', 'ANGER']), + userId: z.number(), + id: z.number(), +}); + +export type PostEmotionRequestType = z.infer; +export type PostEmotionResponseType = z.infer; +export type GetEmotionResponseType = z.infer; diff --git a/src/schema/epigram.ts b/src/schema/epigram.ts new file mode 100644 index 00000000..f72fdec7 --- /dev/null +++ b/src/schema/epigram.ts @@ -0,0 +1,30 @@ +import { z } from 'zod'; + +// Tag 스키마 +const TagSchema = z.object({ + name: z.string().min(1).max(10), + id: z.number().int().positive(), +}); + +// GetEpigramResponseType 스키마 +const GetEpigramResponseSchema = z.object({ + id: z.number().int().positive(), + content: z.string().min(1).max(500), + author: z.string().min(1).max(30), + referenceTitle: z.string().max(100).nullable().optional(), + referenceUrl: z.string().url().nullable().optional(), + writerId: z.number().int().positive(), + tags: z.array(TagSchema), + likeCount: z.number(), + isLiked: z.boolean().optional(), +}); + +const EpigramRequestSchema = z.object({ + id: z.union([z.string(), z.number(), z.undefined()]), +}); + +export type Tag = z.infer; +export type GetEpigramResponseType = z.infer; +export type EpigramRequestType = z.infer; + +export { TagSchema, GetEpigramResponseSchema, EpigramRequestSchema }; diff --git a/src/schema/epigrams.ts b/src/schema/epigrams.ts new file mode 100644 index 00000000..46a7cb85 --- /dev/null +++ b/src/schema/epigrams.ts @@ -0,0 +1,33 @@ +import * as z from 'zod'; + +export const GetEpigramsParams = z.object({ + limit: z.number(), + cursor: z.number().optional(), + keyword: z.string().optional(), + writerId: z.number().optional(), +}); + +export const GetEpigramsResponse = z.object({ + totalCount: z.number(), + nextCursor: z.number(), + list: z.array( + z.object({ + likeCount: z.number(), + tags: z.array( + z.object({ + name: z.string(), + id: z.number(), + }), + ), + writerId: z.number(), + referenceUrl: z.string(), + referenceTitle: z.string(), + author: z.string(), + content: z.string(), + id: z.number(), + }), + ), +}); + +export type GetEpigramsParamsType = z.infer; +export type GetEpigramsResponseType = z.infer; diff --git a/src/schema/user.ts b/src/schema/user.ts index 83d1f8d8..4e9fde85 100644 --- a/src/schema/user.ts +++ b/src/schema/user.ts @@ -18,6 +18,6 @@ export const GetUserReponse = z.object({ id: z.number(), }); -export type GetUserReponseType = z.infer; +export type GetUserResponseType = z.infer; export type GetUserRequestType = z.infer; export type PatchMeRequestType = z.infer; diff --git a/src/types/EmotionTypes.ts b/src/types/emotion.ts similarity index 100% rename from src/types/EmotionTypes.ts rename to src/types/emotion.ts diff --git a/src/types/epigram.types.ts b/src/types/epigram.types.ts new file mode 100644 index 00000000..226ee9ee --- /dev/null +++ b/src/types/epigram.types.ts @@ -0,0 +1,24 @@ +import { GetEpigramResponseType } from '@/schema/epigram'; +import { GetUserResponseType } from '@/schema/user'; + +export interface EpigramFigureProps { + epigram: GetEpigramResponseType; + currentUserId: GetUserResponseType['id'] | undefined; +} + +export interface EpigramCommentProps { + epigramId: number; + currentUserId: GetUserResponseType['id'] | undefined; + userImage?: string | undefined; +} + +export interface PostCommentRequest { + epigramId: number; + isPrivate: boolean; + content: string; +} + +export interface PatchCommentRequest { + isPrivate: boolean; + content: string; +} diff --git a/src/utils/emotionMap.ts b/src/utils/emotionMap.ts new file mode 100644 index 00000000..84b5663e --- /dev/null +++ b/src/utils/emotionMap.ts @@ -0,0 +1,23 @@ +import { EmotionType } from '@/types/emotion'; + +const emotionMap: Record = { + 감동: 'MOVED', + 기쁨: 'JOY', + 고민: 'WORRY', + 슬픔: 'SADNESS', + 분노: 'ANGER', +}; + +const reverseEmotionMap: Record<'MOVED' | 'JOY' | 'WORRY' | 'SADNESS' | 'ANGER', EmotionType> = { + MOVED: '감동', + JOY: '기쁨', + WORRY: '고민', + SADNESS: '슬픔', + ANGER: '분노', +}; + +const translateEmotionToEnglish = (emotion: EmotionType): 'MOVED' | 'JOY' | 'WORRY' | 'SADNESS' | 'ANGER' => emotionMap[emotion]; + +const translateEmotionToKorean = (emotion: 'MOVED' | 'JOY' | 'WORRY' | 'SADNESS' | 'ANGER'): EmotionType => reverseEmotionMap[emotion]; + +export { translateEmotionToEnglish, translateEmotionToKorean }; From 399878bf9a964b37836a0187b49a2ae450d992b0 Mon Sep 17 00:00:00 2001 From: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Date: Tue, 30 Jul 2024 14:39:44 +0900 Subject: [PATCH 2/3] =?UTF-8?q?FE-32=20=F0=9F=94=80=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A9=94=EC=9D=B8=20=EB=A8=B8?= =?UTF-8?q?=EC=A7=80=20(#107)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 💄FE-33 검색 페이지 UI (#10) * .nvmrc 버전 수정 * 폰트 및 공용컬러 추가 (#6) * font-family 추가 * tailwind common color 추가 * color 명 변경 * lang 수정 --------- Co-authored-by: 전유민 * :lipstick: 공용 컴포넌트 shadcn ui 추가 (#7) * :lipstick: Feat: shadcn-ui init * :lipstick: Feat: add toast ui * Feat: add textarea ui * Feat: add switch ui * Feat: add radio-group ui * Feat: add label ui * Feat: add input ui * Feat: add form ui * Feat: add button ui * Feat: add dropdown-menu ui * Feat: add card ui * Feat: add badge ui * Feat: add avatar ui * Feat: add alert dialog ui * Chore: add eslint rules * Chore: add shadcn ui * ✨Feat: SearchBar UI 초안 완성 * styles: tailwind css 폰트 사이즈 추가 * feat: RecentSearches UI 초안 완성 * �styles: SearchResults UI 수정 * �styles: RecentSearches UI 수정 * ✨styles: 반응형 UI 추가 * FE-33 fix: build 오류 수정 중 * FE-33 fix: build 오류 해결 중 * FE-33 fix: build 오류 해결 중 * FE-33 fix: build 오류 해결 중 * fix: build 오류 해결 중 --------- Co-authored-by: 전유민 Co-authored-by: JeonYumin94 <40783675+JeonYumin94@users.noreply.github.com> Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> * FE-65 ✨최근 검색어 기능 (#51) * FE-65 ✨feat: 최근 검색어 기능 구현 * FE-65 ✨feat: 검색바와 연동하여 즉시 반영되도록 수정 * FE-65 ✨feat: debounce를 위한 lodash 라이브러리 설치 * FE-65 ✨feat: debounce 기능 적용(++lodash 라이브러리) * FE-65 ✨feat: useEffectt로 debouncedSearch함수 의존성 설정 * FE-65 ✨feat: useCallback 대신 useRef로 변경 * FE-65 ✨fix:: debounce 기능 제거(불필요) * FE-65 ✨feat: focus될 때 placeholder 사라지게 수정 및 UI 수정 * FE-65 ✨feat: isInitialMount 선언 및 주석 추가 * FE-65 ✨fix: 주석 수정 * FE-65 ✨feat: 최근 검색어 클릭 시 그 검색어로 검색되는 기능 * FE-65 styles: 주석 추가 * FE-74 ✨검색 결과 기능 (#73) * FE-74 fix: 사용하지 않는 lodash 라이브러리 삭제 * FE-74 ✨feat: 테스트 용 api 코드 가져오기 * FE-74 ✨feat: 검색 결과 기능 구현 * FE-74 ✨fix: 중복된 key, href 제거 및 규칙 무시 주석 추가 * FE-74 ✨test: 테스트 데이터 추가 * FE-74 ✨feat: 검색어 하이라이팅 및 순서 기능 추가 * FE-74 ✨fix: 주석 수정 및 api 파일 삭제 * FE-74 ✨styles: 주석 추가 * FE-74 ✨fix: 멘토링 내용 주석으로 추가 * FE-32 🔀 epic브랜치 최신화 (#77) * .nvmrc 버전 수정 * 폰트 및 공용컬러 추가 (#6) * font-family 추가 * tailwind common color 추가 * color 명 변경 * lang 수정 --------- Co-authored-by: 전유민 * :lipstick: 공용 컴포넌트 shadcn ui 추가 (#7) * :lipstick: Feat: shadcn-ui init * :lipstick: Feat: add toast ui * Feat: add textarea ui * Feat: add switch ui * Feat: add radio-group ui * Feat: add label ui * Feat: add input ui * Feat: add form ui * Feat: add button ui * Feat: add dropdown-menu ui * Feat: add card ui * Feat: add badge ui * Feat: add avatar ui * Feat: add alert dialog ui * Chore: add eslint rules * Chore: add shadcn ui * FE-48 📰 공용 컴포넌트 face emoji svg 파일 생성 * FE-48 :art: 감정 이모티콘 폴더 구조 변경 * FE-48 :sparkles: 감정 이모티콘 카드 컴포넌트 ui 생성 * FE-48 :sparkles: 감정 이모티콘 상태에 따른 클래스 설정 * FE-48 :lipstick: 감정 이모티콘 카드 컴포넌트 ui 수정 * FE-48 :sparkles: 감정 이모티콘 카드 클릭 이벤트 구현 - EmotionIconCardContainer를 사용해 상태관리와 이벤트 처리 (Clicked<->UnClicked) * FE-48 📝 컴포넌트 이름 변경 명확한 의미 전달을 위해 컴포넌트 이름 변경 * FE-48 :sparkles: 감정 이모티콘 상태 변화 동기화 구 감정 카드를 클릭할 때 상태가 올바르게 전환되고, 다른 카드의 상태도 동기화되는 기능 구현 * FE-48 :sparkles: EmotionSelector 컴포넌트 동적 크기 변경 구현 useMediaQuery 훅 생성: 화면의 크기가 변경될 때마다 리스너 추가 및 제거 * FE-48 :fire: 출력 확인을 위한 테스트 컴포넌트 삭제 * FE-48 :hammer: EmotionTypes 인터페이스 정의 emotion 관련 컴포넌트에서 해당 인터페이스를 import하여 사용하게 구현 * FE-59 :sparkles: 에피그램 카드 ui 구현 tailwind css를 확장해 줄무늬 배경 이미지 구현 * FE-59 :sparkles: 에피그램 카드 반응현 디자인 구현 * FE-59 :lipstick: 에피그램 카드 글씨체 적용 * FE-59 :fire: 에피그램 카드 테스트 코드 삭제 * FE-59 :fire: 테스트 흔적 삭제 * FE-58 :sparkles: 공용 컴포넌트 댓글 카드 기본 ui 구현 * FE-58 :lipstick: 공용 컴포넌트 반응형 디자인 적용 * FE-58 :fire: 댓글 카드 테스트 코드 삭제 * FE-58 :lips: 댓글 카드 관련 인터페이스, 스타일 분리 * FE-50 ✨공용컴포넌트 헤더 구현 (#19) * FE-5050✨ feat: 헤더 부분 기능 초안 * FE-50 ✨styles: 주석 추가 * FE-50 ✨styles: 주석 추추가 * FE-5050 ✨test: 테스트 코드 * FE-50 ✨fix: 테스트 코드 삭제 * FE-50 ✨feat: 공유 이미지 추가 및 현재 URL 복사 기능 추가 * FE-50 ✨styles: U셋 중 하나가 빠지더라도 안무너지게 UI 수정 * FE-50 ✨comment: 주석 수정 및 추가 * FE-50 ✨fix: 테스트 코드 삭제 * FE-50 ✨fix: 함수명 컨벤션에 맞게 변경 * FE-50 ✨fix: types 폴더에 interface 정의 * FE-50 fix: build 오류 수정 * FE-61 🔨 eslint 규칙 수정 * FE-61 🔥 InteractiveEmotionIconCard 삭제 단순 래핑 기능밖에 없는 컴포넌트 삭제 / emotionselector에서 emotioniconcard를 직접 사용하도록 수정 * FE-61 🔨 EpigramCard 사이즈 재정의 base -> xs로 변경 * FE-61 📝 공용 컴포넌트 테스트 텍스트 주석 추가 * FE-61 🔨 CommentCard 타입 내부 정의 * FE-61 :truck: 감정 카드 폴더 구조 변경 * FE-61 📝 감정 카드, 감정 셀렉터 주석 추가 * FE-61 :fire: 댓글 카드 디폴트 프롭 삭제 * FE-62 ✨fix: 주석 수정 및 타입 수정 (#27) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * build 오류 해결 * build 오류 해결 중 --------- Co-authored-by: 전유민 Co-authored-by: JeonYumin94 <40783675+JeonYumin94@users.noreply.github.com> Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> * FE-75 ✨무한 스크롤, 검색 결과 URL에 저장 기능 구현 (#104) * FE-75 ✨styles: tailwind .config 파일 메인과 통합 * FE-75 ✨feat: 공용 컴포넌트 Header 추가 * FE-75 ✨refactor: useMemo 사용 * FE-75 ✨feat: URL에 검색 결과 저장 * FE-75 ✨styles: 로딩 스타일 구현 * FE-75 ✨feat: 실제 api 추가 * FE-75 ✨feat: api 기능 구현 * FE-75 ✨feat: 무한 스크롤 구현 * FE-75 ✨fix: 의존성 배열에서 로딩 상태 제거 * FE-75 ✨styles: 주석 추가 * FE-75 ✨feat:: 사용자마다 최근 검색어 관리할 수 있게 변경 * FE-75 ✨fix: 검색 전 검색 결과가 나오지 않도록 수정 * FE-32 🔀브랜치 최신화 (#105) * .nvmrc 버전 수정 * 폰트 및 공용컬러 추가 (#6) * font-family 추가 * tailwind common color 추가 * color 명 변경 * lang 수정 --------- Co-authored-by: 전유민 * :lipstick: 공용 컴포넌트 shadcn ui 추가 (#7) * :lipstick: Feat: shadcn-ui init * :lipstick: Feat: add toast ui * Feat: add textarea ui * Feat: add switch ui * Feat: add radio-group ui * Feat: add label ui * Feat: add input ui * Feat: add form ui * Feat: add button ui * Feat: add dropdown-menu ui * Feat: add card ui * Feat: add badge ui * Feat: add avatar ui * Feat: add alert dialog ui * Chore: add eslint rules * Chore: add shadcn ui * FE-48 📰 공용 컴포넌트 face emoji svg 파일 생성 * FE-48 :art: 감정 이모티콘 폴더 구조 변경 * FE-48 :sparkles: 감정 이모티콘 카드 컴포넌트 ui 생성 * FE-48 :sparkles: 감정 이모티콘 상태에 따른 클래스 설정 * FE-48 :lipstick: 감정 이모티콘 카드 컴포넌트 ui 수정 * FE-48 :sparkles: 감정 이모티콘 카드 클릭 이벤트 구현 - EmotionIconCardContainer를 사용해 상태관리와 이벤트 처리 (Clicked<->UnClicked) * FE-48 📝 컴포넌트 이름 변경 명확한 의미 전달을 위해 컴포넌트 이름 변경 * FE-48 :sparkles: 감정 이모티콘 상태 변화 동기화 구 감정 카드를 클릭할 때 상태가 올바르게 전환되고, 다른 카드의 상태도 동기화되는 기능 구현 * FE-48 :sparkles: EmotionSelector 컴포넌트 동적 크기 변경 구현 useMediaQuery 훅 생성: 화면의 크기가 변경될 때마다 리스너 추가 및 제거 * FE-48 :fire: 출력 확인을 위한 테스트 컴포넌트 삭제 * FE-48 :hammer: EmotionTypes 인터페이스 정의 emotion 관련 컴포넌트에서 해당 인터페이스를 import하여 사용하게 구현 * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-59 :sparkles: 에피그램 카드 ui 구현 tailwind css를 확장해 줄무늬 배경 이미지 구현 * FE-59 :sparkles: 에피그램 카드 반응현 디자인 구현 * FE-59 :lipstick: 에피그램 카드 글씨체 적용 * FE-59 :fire: 에피그램 카드 테스트 코드 삭제 * FE-59 :fire: 테스트 흔적 삭제 * FE-58 :sparkles: 공용 컴포넌트 댓글 카드 기본 ui 구현 * FE-58 :lipstick: 공용 컴포넌트 반응형 디자인 적용 * FE-58 :fire: 댓글 카드 테스트 코드 삭제 * FE-58 :lips: 댓글 카드 관련 인터페이스, 스타일 분리 * FE-60 :sparkles: react hook form, zod 추가 * FE-50 ✨공용컴포넌트 헤더 구현 (#19) * FE-5050✨ feat: 헤더 부분 기능 초안 * FE-50 ✨styles: 주석 추가 * FE-50 ✨styles: 주석 추추가 * FE-5050 ✨test: 테스트 코드 * FE-50 ✨fix: 테스트 코드 삭제 * FE-50 ✨feat: 공유 이미지 추가 및 현재 URL 복사 기능 추가 * FE-50 ✨styles: U셋 중 하나가 빠지더라도 안무너지게 UI 수정 * FE-50 ✨comment: 주석 수정 및 추가 * FE-50 ✨fix: 테스트 코드 삭제 * FE-50 ✨fix: 함수명 컨벤션에 맞게 변경 * FE-50 ✨fix: types 폴더에 interface 정의 * FE-50 fix: build 오류 수정 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * FE-61 🔨 eslint 규칙 수정 * FE-61 🔥 InteractiveEmotionIconCard 삭제 단순 래핑 기능밖에 없는 컴포넌트 삭제 / emotionselector에서 emotioniconcard를 직접 사용하도록 수정 * FE-61 🔨 EpigramCard 사이즈 재정의 base -> xs로 변경 * FE-61 📝 공용 컴포넌트 테스트 텍스트 주석 추가 * FE-61 🔨 CommentCard 타입 내부 정의 * FE-61 :truck: 감정 카드 폴더 구조 변경 * FE-61 📝 감정 카드, 감정 셀렉터 주석 추가 * FE-61 :fire: 댓글 카드 디폴트 프롭 삭제 * FE-62 ✨fix: 주석 수정 및 타입 수정 (#27) * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :lipstick: 회원가입 페이지 레이아웃 추가 * :lipstick: 간편 로그인 로고 추가 * :lipstick: 회원가입 ui 추가 * :sparkles: 회원가입 스키마 정의 * :heavy_plus_sign: 회원가입 페이지에 스키마 적용 * :lipstick: 에러 메시지 뜰 때 라벨, 인풋도 같은 에러 색깔 추가 * :memo: 유효성 검사를 통한 버튼의 비활성화 처리 * :memo: 유효성 검사에 따른 인풋 테두리 색상 처리 * :fire: AuthLayout 삭제 * :art: 회원가입 페이지 브라우저 확대시 ui 깨짐 수정 * :truck: 정규표현식 네이밍 변경 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :sparkles: 회원가입 응답 데이터 스키마 정의 * :sparkles: 회원가입 api 생성 * :sparkles: useRegisterMutation hook 생성 * :zap: 회원가입 폼에 mutaion hook 적용 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :zap: isAxiosError로 변경 * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :twisted_rightwards_arrows: 충돌 해결 * :bug: postSignup 함수 추가 * :bug: postSignin 내보내는 방식 수정 * :wrench: lint 수정 * build 오류 해결 * build 오류 해결 중 * :sparkles: oauth api 생성 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * :sparkles: 카카오톡 리디렉트 uri 설정 * :sparkles: useKakaoLogin mutation hook 생성 * :zap: 네이버 구글 카카오 간편 로그인 링크 설정 * :recycle: 에러처리 로직 수정 * FE-51 :twisted_rightwards_arrows: 공용 API 머지 요청 (#92) * FE-52 ✨에피그램 목록조회 API (#34) * FE-52 feat: api schema 작성 * FE-52 ✨feat: getEpigrams api 작성 * FE-522 ✨fix: default export로 변경 * FE-52 ✨test: 테스트 코드 작성 * FE-52 ✨feat: BaseUrl, TeamID 상수 추가 및 axios baseTRL 수정 * FE-52 ✨fix: schema 및 apis 파일 수정 * FE-52 ✨test: 테스트 코드 삭제 * FE-52 ✨fix: .env파일 생성 및 BaseURL 수정 * FE-52 ✨fix: limit 타입 수정(optional 삭제) * FE-52 ✨text: 테 테스트코드 삭제 * FE-52 ✨fix: api GET요청 주소 수정('epigrams' -> '/epigrams') * FE-53 :sparkles: 감정이모티콘 저장 스키마 정의 * FE-53 :sparkles: 오늘의 감정 저장 api 생성 * FE-53 :sparkles: getMe 함수를 사용해 로그인 상태 확인 기능 구현 * FE-53 :sparkles: 감정 한영 변환 함수 * FE-53 :sparkles: 감정 저장 후 토스트 알림 표시 * FE-53 :sparkles: 오늘의 감정 조회 api 생성 * FE-53 :hammer: 감정 한영 변환 함수 추가 +) post, get 함수 내부로 한영 변환 함수 이동 * FE-53 :sparkles: 오늘의 감정 스키마 추가 정의 * FE-53 :sparkles: 오늘의 감정 조회 함수 적용 * FE-53 :truck: 오늘의 감정 type 이름 변경 * FE-53 :sparkles: useMutation 훅 사용 * FE-53 :memo: EmotionSelector 주석 추가 * FE-53 :fire: api 함수 에러 처리 부분 제거 * FE-53 :hammer: useQuery를 사용해 오늘의 감정 조회 데이터를 조회할 때는 useQuery를 사용하는거라 함 * FE-56 :sparkles: 댓글 수정 API (#84) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * FE-56 :sparkles: 댓글 수정 API --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-57 :sparkles: 댓글 삭제 API (#88) * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (#93) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (충돌수정) (#98) --------- Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * .http 파일 삭제 --------- Co-authored-by: 전유민 Co-authored-by: JeonYumin94 <40783675+JeonYumin94@users.noreply.github.com> Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-32 🔀브랜치 최신화 (#110) * .nvmrc 버전 수정 * 폰트 및 공용컬러 추가 (#6) * font-family 추가 * tailwind common color 추가 * color 명 변경 * lang 수정 --------- Co-authored-by: 전유민 * :lipstick: 공용 컴포넌트 shadcn ui 추가 (#7) * :lipstick: Feat: shadcn-ui init * :lipstick: Feat: add toast ui * Feat: add textarea ui * Feat: add switch ui * Feat: add radio-group ui * Feat: add label ui * Feat: add input ui * Feat: add form ui * Feat: add button ui * Feat: add dropdown-menu ui * Feat: add card ui * Feat: add badge ui * Feat: add avatar ui * Feat: add alert dialog ui * Chore: add eslint rules * Chore: add shadcn ui * FE-48 📰 공용 컴포넌트 face emoji svg 파일 생성 * FE-48 :art: 감정 이모티콘 폴더 구조 변경 * FE-48 :sparkles: 감정 이모티콘 카드 컴포넌트 ui 생성 * FE-48 :sparkles: 감정 이모티콘 상태에 따른 클래스 설정 * FE-48 :lipstick: 감정 이모티콘 카드 컴포넌트 ui 수정 * FE-48 :sparkles: 감정 이모티콘 카드 클릭 이벤트 구현 - EmotionIconCardContainer를 사용해 상태관리와 이벤트 처리 (Clicked<->UnClicked) * FE-48 📝 컴포넌트 이름 변경 명확한 의미 전달을 위해 컴포넌트 이름 변경 * FE-48 :sparkles: 감정 이모티콘 상태 변화 동기화 구 감정 카드를 클릭할 때 상태가 올바르게 전환되고, 다른 카드의 상태도 동기화되는 기능 구현 * FE-48 :sparkles: EmotionSelector 컴포넌트 동적 크기 변경 구현 useMediaQuery 훅 생성: 화면의 크기가 변경될 때마다 리스너 추가 및 제거 * FE-48 :fire: 출력 확인을 위한 테스트 컴포넌트 삭제 * FE-48 :hammer: EmotionTypes 인터페이스 정의 emotion 관련 컴포넌트에서 해당 인터페이스를 import하여 사용하게 구현 * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-59 :sparkles: 에피그램 카드 ui 구현 tailwind css를 확장해 줄무늬 배경 이미지 구현 * FE-59 :sparkles: 에피그램 카드 반응현 디자인 구현 * FE-59 :lipstick: 에피그램 카드 글씨체 적용 * FE-59 :fire: 에피그램 카드 테스트 코드 삭제 * FE-59 :fire: 테스트 흔적 삭제 * FE-58 :sparkles: 공용 컴포넌트 댓글 카드 기본 ui 구현 * FE-58 :lipstick: 공용 컴포넌트 반응형 디자인 적용 * FE-58 :fire: 댓글 카드 테스트 코드 삭제 * FE-58 :lips: 댓글 카드 관련 인터페이스, 스타일 분리 * FE-60 :sparkles: react hook form, zod 추가 * FE-50 ✨공용컴포넌트 헤더 구현 (#19) * FE-5050✨ feat: 헤더 부분 기능 초안 * FE-50 ✨styles: 주석 추가 * FE-50 ✨styles: 주석 추추가 * FE-5050 ✨test: 테스트 코드 * FE-50 ✨fix: 테스트 코드 삭제 * FE-50 ✨feat: 공유 이미지 추가 및 현재 URL 복사 기능 추가 * FE-50 ✨styles: U셋 중 하나가 빠지더라도 안무너지게 UI 수정 * FE-50 ✨comment: 주석 수정 및 추가 * FE-50 ✨fix: 테스트 코드 삭제 * FE-50 ✨fix: 함수명 컨벤션에 맞게 변경 * FE-50 ✨fix: types 폴더에 interface 정의 * FE-50 fix: build 오류 수정 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * FE-61 🔨 eslint 규칙 수정 * FE-61 🔥 InteractiveEmotionIconCard 삭제 단순 래핑 기능밖에 없는 컴포넌트 삭제 / emotionselector에서 emotioniconcard를 직접 사용하도록 수정 * FE-61 🔨 EpigramCard 사이즈 재정의 base -> xs로 변경 * FE-61 📝 공용 컴포넌트 테스트 텍스트 주석 추가 * FE-61 🔨 CommentCard 타입 내부 정의 * FE-61 :truck: 감정 카드 폴더 구조 변경 * FE-61 📝 감정 카드, 감정 셀렉터 주석 추가 * FE-61 :fire: 댓글 카드 디폴트 프롭 삭제 * FE-62 ✨fix: 주석 수정 및 타입 수정 (#27) * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :lipstick: 회원가입 페이지 레이아웃 추가 * :lipstick: 간편 로그인 로고 추가 * :lipstick: 회원가입 ui 추가 * :sparkles: 회원가입 스키마 정의 * :heavy_plus_sign: 회원가입 페이지에 스키마 적용 * :lipstick: 에러 메시지 뜰 때 라벨, 인풋도 같은 에러 색깔 추가 * :memo: 유효성 검사를 통한 버튼의 비활성화 처리 * :memo: 유효성 검사에 따른 인풋 테두리 색상 처리 * :fire: AuthLayout 삭제 * :art: 회원가입 페이지 브라우저 확대시 ui 깨짐 수정 * :truck: 정규표현식 네이밍 변경 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :sparkles: 회원가입 응답 데이터 스키마 정의 * :sparkles: 회원가입 api 생성 * :sparkles: useRegisterMutation hook 생성 * :zap: 회원가입 폼에 mutaion hook 적용 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :zap: isAxiosError로 변경 * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :twisted_rightwards_arrows: 충돌 해결 * :bug: postSignup 함수 추가 * :bug: postSignin 내보내는 방식 수정 * :wrench: lint 수정 * build 오류 해결 * build 오류 해결 중 * :sparkles: oauth api 생성 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * :sparkles: 카카오톡 리디렉트 uri 설정 * :sparkles: useKakaoLogin mutation hook 생성 * :zap: 네이버 구글 카카오 간편 로그인 링크 설정 * :recycle: 에러처리 로직 수정 * FE-51 :twisted_rightwards_arrows: 공용 API 머지 요청 (#92) * FE-52 ✨에피그램 목록조회 API (#34) * FE-52 feat: api schema 작성 * FE-52 ✨feat: getEpigrams api 작성 * FE-522 ✨fix: default export로 변경 * FE-52 ✨test: 테스트 코드 작성 * FE-52 ✨feat: BaseUrl, TeamID 상수 추가 및 axios baseTRL 수정 * FE-52 ✨fix: schema 및 apis 파일 수정 * FE-52 ✨test: 테스트 코드 삭제 * FE-52 ✨fix: .env파일 생성 및 BaseURL 수정 * FE-52 ✨fix: limit 타입 수정(optional 삭제) * FE-52 ✨text: 테 테스트코드 삭제 * FE-52 ✨fix: api GET요청 주소 수정('epigrams' -> '/epigrams') * FE-53 :sparkles: 감정이모티콘 저장 스키마 정의 * FE-53 :sparkles: 오늘의 감정 저장 api 생성 * FE-53 :sparkles: getMe 함수를 사용해 로그인 상태 확인 기능 구현 * FE-53 :sparkles: 감정 한영 변환 함수 * FE-53 :sparkles: 감정 저장 후 토스트 알림 표시 * FE-53 :sparkles: 오늘의 감정 조회 api 생성 * FE-53 :hammer: 감정 한영 변환 함수 추가 +) post, get 함수 내부로 한영 변환 함수 이동 * FE-53 :sparkles: 오늘의 감정 스키마 추가 정의 * FE-53 :sparkles: 오늘의 감정 조회 함수 적용 * FE-53 :truck: 오늘의 감정 type 이름 변경 * FE-53 :sparkles: useMutation 훅 사용 * FE-53 :memo: EmotionSelector 주석 추가 * FE-53 :fire: api 함수 에러 처리 부분 제거 * FE-53 :hammer: useQuery를 사용해 오늘의 감정 조회 데이터를 조회할 때는 useQuery를 사용하는거라 함 * FE-56 :sparkles: 댓글 수정 API (#84) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * FE-56 :sparkles: 댓글 수정 API --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-57 :sparkles: 댓글 삭제 API (#88) * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (#93) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (충돌수정) (#98) --------- Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * .http 파일 삭제 * merge main --------- Co-authored-by: 전유민 Co-authored-by: JeonYumin94 <40783675+JeonYumin94@users.noreply.github.com> Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-32 검색페이지 메인 충돌 수정 (#112) * .nvmrc 버전 수정 * 폰트 및 공용컬러 추가 (#6) * font-family 추가 * tailwind common color 추가 * color 명 변경 * lang 수정 --------- Co-authored-by: 전유민 * :lipstick: 공용 컴포넌트 shadcn ui 추가 (#7) * :lipstick: Feat: shadcn-ui init * :lipstick: Feat: add toast ui * Feat: add textarea ui * Feat: add switch ui * Feat: add radio-group ui * Feat: add label ui * Feat: add input ui * Feat: add form ui * Feat: add button ui * Feat: add dropdown-menu ui * Feat: add card ui * Feat: add badge ui * Feat: add avatar ui * Feat: add alert dialog ui * Chore: add eslint rules * Chore: add shadcn ui * FE-48 📰 공용 컴포넌트 face emoji svg 파일 생성 * FE-48 :art: 감정 이모티콘 폴더 구조 변경 * FE-48 :sparkles: 감정 이모티콘 카드 컴포넌트 ui 생성 * FE-48 :sparkles: 감정 이모티콘 상태에 따른 클래스 설정 * FE-48 :lipstick: 감정 이모티콘 카드 컴포넌트 ui 수정 * FE-48 :sparkles: 감정 이모티콘 카드 클릭 이벤트 구현 - EmotionIconCardContainer를 사용해 상태관리와 이벤트 처리 (Clicked<->UnClicked) * FE-48 📝 컴포넌트 이름 변경 명확한 의미 전달을 위해 컴포넌트 이름 변경 * FE-48 :sparkles: 감정 이모티콘 상태 변화 동기화 구 감정 카드를 클릭할 때 상태가 올바르게 전환되고, 다른 카드의 상태도 동기화되는 기능 구현 * FE-48 :sparkles: EmotionSelector 컴포넌트 동적 크기 변경 구현 useMediaQuery 훅 생성: 화면의 크기가 변경될 때마다 리스너 추가 및 제거 * FE-48 :fire: 출력 확인을 위한 테스트 컴포넌트 삭제 * FE-48 :hammer: EmotionTypes 인터페이스 정의 emotion 관련 컴포넌트에서 해당 인터페이스를 import하여 사용하게 구현 * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-59 :sparkles: 에피그램 카드 ui 구현 tailwind css를 확장해 줄무늬 배경 이미지 구현 * FE-59 :sparkles: 에피그램 카드 반응현 디자인 구현 * FE-59 :lipstick: 에피그램 카드 글씨체 적용 * FE-59 :fire: 에피그램 카드 테스트 코드 삭제 * FE-59 :fire: 테스트 흔적 삭제 * FE-58 :sparkles: 공용 컴포넌트 댓글 카드 기본 ui 구현 * FE-58 :lipstick: 공용 컴포넌트 반응형 디자인 적용 * FE-58 :fire: 댓글 카드 테스트 코드 삭제 * FE-58 :lips: 댓글 카드 관련 인터페이스, 스타일 분리 * FE-60 :sparkles: react hook form, zod 추가 * FE-50 ✨공용컴포넌트 헤더 구현 (#19) * FE-5050✨ feat: 헤더 부분 기능 초안 * FE-50 ✨styles: 주석 추가 * FE-50 ✨styles: 주석 추추가 * FE-5050 ✨test: 테스트 코드 * FE-50 ✨fix: 테스트 코드 삭제 * FE-50 ✨feat: 공유 이미지 추가 및 현재 URL 복사 기능 추가 * FE-50 ✨styles: U셋 중 하나가 빠지더라도 안무너지게 UI 수정 * FE-50 ✨comment: 주석 수정 및 추가 * FE-50 ✨fix: 테스트 코드 삭제 * FE-50 ✨fix: 함수명 컨벤션에 맞게 변경 * FE-50 ✨fix: types 폴더에 interface 정의 * FE-50 fix: build 오류 수정 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * FE-61 🔨 eslint 규칙 수정 * FE-61 🔥 InteractiveEmotionIconCard 삭제 단순 래핑 기능밖에 없는 컴포넌트 삭제 / emotionselector에서 emotioniconcard를 직접 사용하도록 수정 * FE-61 🔨 EpigramCard 사이즈 재정의 base -> xs로 변경 * FE-61 📝 공용 컴포넌트 테스트 텍스트 주석 추가 * FE-61 🔨 CommentCard 타입 내부 정의 * FE-61 :truck: 감정 카드 폴더 구조 변경 * FE-61 📝 감정 카드, 감정 셀렉터 주석 추가 * FE-61 :fire: 댓글 카드 디폴트 프롭 삭제 * FE-62 ✨fix: 주석 수정 및 타입 수정 (#27) * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :lipstick: 회원가입 페이지 레이아웃 추가 * :lipstick: 간편 로그인 로고 추가 * :lipstick: 회원가입 ui 추가 * :sparkles: 회원가입 스키마 정의 * :heavy_plus_sign: 회원가입 페이지에 스키마 적용 * :lipstick: 에러 메시지 뜰 때 라벨, 인풋도 같은 에러 색깔 추가 * :memo: 유효성 검사를 통한 버튼의 비활성화 처리 * :memo: 유효성 검사에 따른 인풋 테두리 색상 처리 * :fire: AuthLayout 삭제 * :art: 회원가입 페이지 브라우저 확대시 ui 깨짐 수정 * :truck: 정규표현식 네이밍 변경 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :sparkles: 회원가입 응답 데이터 스키마 정의 * :sparkles: 회원가입 api 생성 * :sparkles: useRegisterMutation hook 생성 * :zap: 회원가입 폼에 mutaion hook 적용 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :zap: isAxiosError로 변경 * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :twisted_rightwards_arrows: 충돌 해결 * :bug: postSignup 함수 추가 * :bug: postSignin 내보내는 방식 수정 * :wrench: lint 수정 * :sparkles: oauth api 생성 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * :sparkles: 카카오톡 리디렉트 uri 설정 * :sparkles: useKakaoLogin mutation hook 생성 * :zap: 네이버 구글 카카오 간편 로그인 링크 설정 * :recycle: 에러처리 로직 수정 * FE-51 :twisted_rightwards_arrows: 공용 API 머지 요청 (#92) * FE-52 ✨에피그램 목록조회 API (#34) * FE-52 feat: api schema 작성 * FE-52 ✨feat: getEpigrams api 작성 * FE-522 ✨fix: default export로 변경 * FE-52 ✨test: 테스트 코드 작성 * FE-52 ✨feat: BaseUrl, TeamID 상수 추가 및 axios baseTRL 수정 * FE-52 ✨fix: schema 및 apis 파일 수정 * FE-52 ✨test: 테스트 코드 삭제 * FE-52 ✨fix: .env파일 생성 및 BaseURL 수정 * FE-52 ✨fix: limit 타입 수정(optional 삭제) * FE-52 ✨text: 테 테스트코드 삭제 * FE-52 ✨fix: api GET요청 주소 수정('epigrams' -> '/epigrams') * FE-53 :sparkles: 감정이모티콘 저장 스키마 정의 * FE-53 :sparkles: 오늘의 감정 저장 api 생성 * FE-53 :sparkles: getMe 함수를 사용해 로그인 상태 확인 기능 구현 * FE-53 :sparkles: 감정 한영 변환 함수 * FE-53 :sparkles: 감정 저장 후 토스트 알림 표시 * FE-53 :sparkles: 오늘의 감정 조회 api 생성 * FE-53 :hammer: 감정 한영 변환 함수 추가 +) post, get 함수 내부로 한영 변환 함수 이동 * FE-53 :sparkles: 오늘의 감정 스키마 추가 정의 * FE-53 :sparkles: 오늘의 감정 조회 함수 적용 * FE-53 :truck: 오늘의 감정 type 이름 변경 * FE-53 :sparkles: useMutation 훅 사용 * FE-53 :memo: EmotionSelector 주석 추가 * FE-53 :fire: api 함수 에러 처리 부분 제거 * FE-53 :hammer: useQuery를 사용해 오늘의 감정 조회 데이터를 조회할 때는 useQuery를 사용하는거라 함 * FE-56 :sparkles: 댓글 수정 API (#84) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * FE-56 :sparkles: 댓글 수정 API --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-57 :sparkles: 댓글 삭제 API (#88) * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (#93) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (충돌수정) (#98) --------- Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 --------- Co-authored-by: 전유민 Co-authored-by: JeonYumin94 <40783675+JeonYumin94@users.noreply.github.com> Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 --------- Co-authored-by: 전유민 Co-authored-by: JeonYumin94 <40783675+JeonYumin94@users.noreply.github.com> Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: MOON Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 --- .vscode/settings.json | 5 +- package-lock.json | 21 ++-- package.json | 8 +- public/md.svg | 6 + src/components/index.tsx | 0 src/components/search/RecentSearches.tsx | 43 +++++++ src/components/search/SearchBar.tsx | 58 ++++++++++ src/components/search/SearchResults.tsx | 101 ++++++++++++++++ src/hooks/useGetEpigramsHooks.ts | 13 +++ src/pageLayout/SearchLayout/SearchLayout.tsx | 114 +++++++++++++++++++ src/pageLayout/index.ts | 0 src/pages/auth/SignIn.tsx | 1 - src/pages/search/index.tsx | 8 ++ src/schema/auth.ts | 1 - src/types/EmotionTypes.ts | 14 +++ tsconfig.json | 1 + 16 files changed, 380 insertions(+), 14 deletions(-) create mode 100644 public/md.svg create mode 100644 src/components/index.tsx create mode 100644 src/components/search/RecentSearches.tsx create mode 100644 src/components/search/SearchBar.tsx create mode 100644 src/components/search/SearchResults.tsx create mode 100644 src/hooks/useGetEpigramsHooks.ts create mode 100644 src/pageLayout/SearchLayout/SearchLayout.tsx create mode 100644 src/pageLayout/index.ts create mode 100644 src/pages/search/index.tsx create mode 100644 src/types/EmotionTypes.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index d5bfa7d4..a9d3f305 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -64,5 +64,8 @@ } ] } - } + }, + "cSpell.words": [ + "clsx" + ] } diff --git a/package-lock.json b/package-lock.json index 561da0f2..9fb61474 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,9 +37,10 @@ }, "devDependencies": { "@tanstack/eslint-plugin-query": "^5.50.0", - "@types/node": "^20", + "@types/lodash": "^4.17.7", + "@types/node": "^20.14.10", "@types/qs": "^6.9.15", - "@types/react": "^18", + "@types/react": "^18.3.3", "@types/react-dom": "^18", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", @@ -58,8 +59,8 @@ "postcss": "8.4.39", "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", - "tailwindcss": "3.4.4", - "typescript": "^5" + "tailwindcss": "^3.4.4", + "typescript": "^5.5.3" }, "engines": { "node": ">=20.15.0" @@ -1923,10 +1924,16 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==", + "dev": true + }, "node_modules/@types/node": { - "version": "20.14.9", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz", - "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==", + "version": "20.14.10", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz", + "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==", "dev": true, "dependencies": { "undici-types": "~5.26.4" diff --git a/package.json b/package.json index 66aa1a4e..a84b4b59 100644 --- a/package.json +++ b/package.json @@ -42,9 +42,9 @@ }, "devDependencies": { "@tanstack/eslint-plugin-query": "^5.50.0", - "@types/node": "^20", + "@types/node": "^20.14.10", "@types/qs": "^6.9.15", - "@types/react": "^18", + "@types/react": "^18.3.3", "@types/react-dom": "^18", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", @@ -63,7 +63,7 @@ "postcss": "8.4.39", "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", - "tailwindcss": "3.4.4", - "typescript": "^5" + "tailwindcss": "^3.4.4", + "typescript": "^5.5.3" } } diff --git a/public/md.svg b/public/md.svg new file mode 100644 index 00000000..9ada4505 --- /dev/null +++ b/public/md.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/index.tsx b/src/components/index.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx new file mode 100644 index 00000000..0b71f086 --- /dev/null +++ b/src/components/search/RecentSearches.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +interface RecentSearchesProps { + searches: string[]; + onSearch: (search: string) => void; + onClear: () => void; +} + +function RecentSearches({ searches, onSearch, onClear }: RecentSearchesProps) { + const handleSearchClick = (search: string) => { + onSearch(search); + }; + + const handleClearAll = () => { + onClear(); + }; + + return ( +
+
+ 최근 검색어 + +
+
+
+ {searches.map((search) => ( + + ))} +
+
+
+ ); +} + +export default RecentSearches; diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx new file mode 100644 index 00000000..accf11f1 --- /dev/null +++ b/src/components/search/SearchBar.tsx @@ -0,0 +1,58 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import SEARCH_ICON from '../../../public/md.svg'; + +// TODO react-hook-form 사용 + +interface SearchBarProps { + onSearch: (search: string) => void; + currentSearch: string; +} + +function SearchBar({ onSearch, currentSearch }: SearchBarProps) { + const [searchInput, setSearchInput] = useState(''); + const [isFocused, setIsFocused] = useState(false); + + const handleChange = (e: React.ChangeEvent) => { + setSearchInput(e.target.value); + }; + + const handleFocus = () => { + setIsFocused(true); + }; + + const handleBlur = () => { + setIsFocused(false); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (searchInput.trim()) { + onSearch(searchInput); + setSearchInput(''); + } + }; + + // 최근 검색어 클릭 시 setSearchInput 상태 업데이트 + useEffect(() => { + setSearchInput(currentSearch); + }, [currentSearch]); + + return ( +
+ + +
+ ); +} + +export default SearchBar; diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx new file mode 100644 index 00000000..8ecb893a --- /dev/null +++ b/src/components/search/SearchResults.tsx @@ -0,0 +1,101 @@ +import React, { useMemo } from 'react'; +import Link from 'next/link'; +import { GetEpigramsResponseType } from '@/schema/epigrams'; + +// TODO highlightedSections의 key 설정 부분에 더 나은 방법이 생각나면 변경 + +interface SearchResultsProps { + results: GetEpigramsResponseType | null; + query: string; + isLoading: boolean; +} + +// 텍스트 하이라이팅 함수 +function handleHighlightText(text: string, highlight: string) { + if (!highlight.trim()) { + return text; + } + + // 검색어(highlight)기준으로 검색 결과를 배열로 나눔(g: 중복 O, i: 대소문자 구분 X) + const highlightedSections = text.split(new RegExp(`(${highlight})`, 'gi')); + + // 검색어와 비교해서 같으면 하이라이팅, 다르면 그냥 반환 + return ( + <> + {highlightedSections.map((section, index) => { + const key = `${section}-${index}-${section.length}`; + return section.toLowerCase() === highlight.toLowerCase() ? ( + + {section} + + ) : ( + section + ); + })} + + ); +} + +function SearchResults({ results, query, isLoading }: SearchResultsProps) { + // 태그와 내용 순서로 정렬 - 항상 useMemo를 호출하고, results가 null인 경우 빈 배열 반환 + const sortedResults = useMemo(() => { + if (!results) return []; + return results.list.sort((a, b) => { + const aHasTag = a.tags.some((tag) => tag.name.includes(query)); + const bHasTag = b.tags.some((tag) => tag.name.includes(query)); + + if (aHasTag && !bHasTag) return -1; + if (!aHasTag && bHasTag) return 1; + return 0; + }); + }, [results, query]); + + const filteredResults = useMemo( + () => sortedResults.filter((item) => item.content.includes(query) || item.author.includes(query) || item.tags.some((tag) => tag.name.includes(query))), + [sortedResults, query], + ); + + if (isLoading) { + return ( +
+
+ 검색 결과를 불러오는 중 입니다... +
+
+ ); + } + + if (!results || filteredResults.length === 0) { + return ( +
+
+ 해당 검색어에 대한 결과가 없습니다. +
+
+ ); + } + + return ( +
+ {filteredResults.map((item) => ( + +
+
+ {handleHighlightText(item.content, query)} + - {handleHighlightText(item.author, query)} - +
+
+ {item.tags.map((tag) => ( + + {handleHighlightText(`#${tag.name}`, query)} + + ))} +
+
+ + ))} +
+ ); +} + +export default SearchResults; diff --git a/src/hooks/useGetEpigramsHooks.ts b/src/hooks/useGetEpigramsHooks.ts new file mode 100644 index 00000000..04c5554c --- /dev/null +++ b/src/hooks/useGetEpigramsHooks.ts @@ -0,0 +1,13 @@ +import { useQuery } from '@tanstack/react-query'; +import getEpigrams from '@/apis/getEpigrams'; +import { GetEpigramsResponseType } from '@/schema/epigrams'; + +const useEpigrams = (query: string, page: number, limit: number = 10) => + useQuery({ + queryKey: ['epigrams', query, page, limit], + queryFn: () => getEpigrams({ keyword: query, limit, cursor: page * limit }), + enabled: !!query, + staleTime: 5 * 60 * 1000, // 데이터 신선도 설정 + }); + +export default useEpigrams; diff --git a/src/pageLayout/SearchLayout/SearchLayout.tsx b/src/pageLayout/SearchLayout/SearchLayout.tsx new file mode 100644 index 00000000..02c68db9 --- /dev/null +++ b/src/pageLayout/SearchLayout/SearchLayout.tsx @@ -0,0 +1,114 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { useRouter } from 'next/router'; +import Header from '@/components/Header/Header'; +import SearchBar from '@/components/search/SearchBar'; +import RecentSearches from '@/components/search/RecentSearches'; +import SearchResults from '@/components/search/SearchResults'; +import useEpigrams from '@/hooks/useGetEpigramsHooks'; +import { GetEpigramsResponseType } from '@/schema/epigrams'; + +function SearchLayout() { + const [searches, setSearches] = useState([]); + const [currentSearch, setCurrentSearch] = useState(''); + const [page, setPage] = useState(0); + const [allResults, setAllResults] = useState([]); + const [totalCount, setTotalCount] = useState(0); + const [nextCursor, setNextCursor] = useState(null); + const observerRef = useRef(null); + const loadMoreRef = useRef(null); + const router = useRouter(); + + const isBrowser = typeof window !== 'undefined'; // 브라우저 환경에서만 localStorage에 접근 + const accessToken = isBrowser ? localStorage.getItem('accessToken') : null; + const isUserLoggedIn = !!accessToken; + const userId = isUserLoggedIn ? 'loggedInUser' : 'guest'; // 사용자 ID를 기반으로 저장 키 생성 + const recentSearchesKey = `recentSearches_${userId}`; + + const { data: searchResults, isLoading } = useEpigrams(currentSearch, page); + + // 새로운 검색 결과를 allResults에 누적, 총 결과 개수와 다음 커서를 업데이트 + useEffect(() => { + if (searchResults?.list) { + setAllResults((prevResults) => [...prevResults, ...searchResults.list]); + setTotalCount(searchResults.totalCount); + setNextCursor(searchResults.nextCursor); + } + }, [searchResults]); + + // observerRef가 화면에 나타날 때 페이지 증가,추가 데이터 로드 + useEffect(() => { + if (observerRef.current) observerRef.current.disconnect(); + + observerRef.current = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting && !isLoading && nextCursor !== null) { + setPage((prevPage) => prevPage + 1); + } + }); + + if (loadMoreRef.current) { + observerRef.current.observe(loadMoreRef.current); + } + + // 옵저버 클린업 (메모리 누수 방지) + return () => { + if (observerRef.current) { + observerRef.current.disconnect(); + observerRef.current = null; + } + }; + }, [allResults.length, isLoading, nextCursor]); + + // 컴포넌트가 처음 렌더링 될 때 저장된 최근 검색어 불러오기, 로그인된 사용자 별로 최근 검색어를 구분하여 URL에 데이터 저장 + useEffect(() => { + if (isBrowser) { + const storedSearches = JSON.parse(localStorage.getItem(recentSearchesKey) || '[]'); + setSearches(storedSearches); + } + + const searchParams = new URLSearchParams(window.location.search); + const query = searchParams.get('q'); + if (query) { + setCurrentSearch(query); + } + }, [recentSearchesKey]); + + // 모두지우기 클릭 시 저장된 최근 검색어 삭제 + const handleClearAll = () => { + setSearches([]); + if (isBrowser) { + localStorage.removeItem(recentSearchesKey); + } + }; + + // 검색어가 제출될 때 작동 + const handleSearch = (search: string) => { + setPage(0); + setAllResults([]); + setSearches((prevSearches) => { + const updatedSearches = [search, ...prevSearches.filter((item) => item !== search)].slice(0, 10); + if (isBrowser) { + localStorage.setItem(recentSearchesKey, JSON.stringify(updatedSearches)); + } + return updatedSearches; + }); + setCurrentSearch(search); + + const searchParams = new URLSearchParams(window.location.search); + searchParams.set('q', search); + router.push(`/search?${searchParams.toString()}`); + }; + + return ( + <> +
{}} />; +
+ + + {currentSearch && } +
+
+ + ); +} + +export default SearchLayout; diff --git a/src/pageLayout/index.ts b/src/pageLayout/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx index 68ef07ec..c1bfd025 100644 --- a/src/pages/auth/SignIn.tsx +++ b/src/pages/auth/SignIn.tsx @@ -28,7 +28,6 @@ export default function SignIn() { logo
-
mutationSignin.mutate(values))} className='flex flex-col items-center lg:gap-6 gap-5 w-full px-6'>
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx new file mode 100644 index 00000000..0914e7b7 --- /dev/null +++ b/src/pages/search/index.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import SearchLayout from '@/pageLayout/SearchLayout/SearchLayout'; + +function Search() { + return ; +} + +export default Search; diff --git a/src/schema/auth.ts b/src/schema/auth.ts index 5de73332..0a9069a8 100644 --- a/src/schema/auth.ts +++ b/src/schema/auth.ts @@ -20,7 +20,6 @@ export const PostSignUpRequest = z }); // NOTE: 로그인 스키마 - export const PostSigninRequest = z.object({ email: z.string().min(1, { message: '이메일은 필수 입력입니다.' }).email({ message: '올바른 이메일 주소가 아닙니다.' }), password: z.string().min(1, { message: '비밀번호는 필수 입력입니다.' }), diff --git a/src/types/EmotionTypes.ts b/src/types/EmotionTypes.ts new file mode 100644 index 00000000..e64f3d3f --- /dev/null +++ b/src/types/EmotionTypes.ts @@ -0,0 +1,14 @@ +export type EmotionType = '감동' | '기쁨' | '고민' | '슬픔' | '분노'; +export type EmotionState = 'Default' | 'Unclicked' | 'Clicked'; + +export interface EmotionIconCardProps { + iconType: EmotionType; // 아이콘 종류 + state: EmotionState; // 상태 + size: 'sm' | 'md' | 'lg'; // 크기 + onClick?: () => void; // 클릭 이벤트 핸들러 +} + +export interface InteractiveEmotionIconCardProps extends Omit { + state: EmotionState; + onClick: () => void; +} diff --git a/tsconfig.json b/tsconfig.json index fb68dc1a..3cb96de7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,6 +12,7 @@ "isolatedModules": true, "jsx": "preserve", "incremental": true, + "baseUrl": ".", "paths": { "@/*": ["./src/*"] } From c762ee55ccfc3740ab66a28516c320c2dae0e34e Mon Sep 17 00:00:00 2001 From: JeonYumin <40783675+JeonYumin94@users.noreply.github.com> Date: Tue, 30 Jul 2024 14:45:00 +0900 Subject: [PATCH 3/3] =?UTF-8?q?FE-27=20:twisted=5Frightwards=5Farrows:=20?= =?UTF-8?q?=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A8=B8?= =?UTF-8?q?=EC=A7=80=20=EC=9A=94=EC=B2=AD=20(#100)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * FE-34 :sparkles: 마이페이지 프로필 수정 기능 (#53) * FE-34 :lipstick: 마이페이지 UI 초기작업 * FE-34 :sparkles: 내 정보 조회 API 연동 * FE-34 :lipstick: shadcn/ui Dialog 설치 * FE-34 :sparkles: 프로필 수정 API 연동 * FE-34 :sparkles: 이미지 실패 토스트 추가 * FE-36 :sparkles: 마이페이지 캘린더 출력 함수 (#58) * FE-36 :lipstick: 감정달력 UI * FE-36 :sparkles: 캘린더 함수 생성 * FE-36 :sparkles: 마이페이지 감정달력 (#65) * FE-36 :lipstick: 감정달력 UI * FE-36 :sparkles: 캘린더 함수 생성 * FE-36 :sparkles: 마이페이지 감정달력: 오늘 날짜 표시 * FE-36 :sparkles: 마이페이지 월 별 감정로그 조회 API 연동 * FE-36 :sparkles: 월별 감정 로그 해당 날짜에 출력 * FE-36 :lipstick: 달력 css 수정 * FE-36 :art: 마이페이지 캘린더 헤더 컴포넌트 분리 * FE-36 :sparkles: 마이페이지 감정달력 필터기능 * FE-27 :twisted_rightwards_arrows: 에픽 브랜치 최신화 (#81) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-27 :twisted_rightwards_arrows: 마이페이지 에픽 브랜치 최신화 (#85) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-27 :twisted_rightwards_arrows: 브랜치 최신화 (#86) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-37 :sparkles: 마이페이지 감정차트 (#89) * FE-37 :recycle: 월별 감정로그 조회 코드 리팩토링 * FE-37 :sparkles: 감정 차트 * FE-37 :hammer: 상수 컨벤션 수정 * FE-27 :twisted_rightwards_arrows: 브랜치 최신화 (#99) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :lipstick: 회원가입 페이지 레이아웃 추가 * :lipstick: 간편 로그인 로고 추가 * :lipstick: 회원가입 ui 추가 * :sparkles: 회원가입 스키마 정의 * :heavy_plus_sign: 회원가입 페이지에 스키마 적용 * :lipstick: 에러 메시지 뜰 때 라벨, 인풋도 같은 에러 색깔 추가 * :memo: 유효성 검사를 통한 버튼의 비활성화 처리 * :memo: 유효성 검사에 따른 인풋 테두리 색상 처리 * :fire: AuthLayout 삭제 * :art: 회원가입 페이지 브라우저 확대시 ui 깨짐 수정 * :truck: 정규표현식 네이밍 변경 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :sparkles: 회원가입 응답 데이터 스키마 정의 * :sparkles: 회원가입 api 생성 * :sparkles: useRegisterMutation hook 생성 * :zap: 회원가입 폼에 mutaion hook 적용 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :zap: isAxiosError로 변경 * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :twisted_rightwards_arrows: 충돌 해결 * :bug: postSignup 함수 추가 * :bug: postSignin 내보내는 방식 수정 * :wrench: lint 수정 * :sparkles: oauth api 생성 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * :sparkles: 카카오톡 리디렉트 uri 설정 * :sparkles: useKakaoLogin mutation hook 생성 * :zap: 네이버 구글 카카오 간편 로그인 링크 설정 * :recycle: 에러처리 로직 수정 * FE-51 :twisted_rightwards_arrows: 공용 API 머지 요청 (#92) * FE-52 ✨에피그램 목록조회 API (#34) * FE-52 feat: api schema 작성 * FE-52 ✨feat: getEpigrams api 작성 * FE-522 ✨fix: default export로 변경 * FE-52 ✨test: 테스트 코드 작성 * FE-52 ✨feat: BaseUrl, TeamID 상수 추가 및 axios baseTRL 수정 * FE-52 ✨fix: schema 및 apis 파일 수정 * FE-52 ✨test: 테스트 코드 삭제 * FE-52 ✨fix: .env파일 생성 및 BaseURL 수정 * FE-52 ✨fix: limit 타입 수정(optional 삭제) * FE-52 ✨text: 테 테스트코드 삭제 * FE-52 ✨fix: api GET요청 주소 수정('epigrams' -> '/epigrams') * FE-53 :sparkles: 감정이모티콘 저장 스키마 정의 * FE-53 :sparkles: 오늘의 감정 저장 api 생성 * FE-53 :sparkles: getMe 함수를 사용해 로그인 상태 확인 기능 구현 * FE-53 :sparkles: 감정 한영 변환 함수 * FE-53 :sparkles: 감정 저장 후 토스트 알림 표시 * FE-53 :sparkles: 오늘의 감정 조회 api 생성 * FE-53 :hammer: 감정 한영 변환 함수 추가 +) post, get 함수 내부로 한영 변환 함수 이동 * FE-53 :sparkles: 오늘의 감정 스키마 추가 정의 * FE-53 :sparkles: 오늘의 감정 조회 함수 적용 * FE-53 :truck: 오늘의 감정 type 이름 변경 * FE-53 :sparkles: useMutation 훅 사용 * FE-53 :memo: EmotionSelector 주석 추가 * FE-53 :fire: api 함수 에러 처리 부분 제거 * FE-53 :hammer: useQuery를 사용해 오늘의 감정 조회 데이터를 조회할 때는 useQuery를 사용하는거라 함 * FE-56 :sparkles: 댓글 수정 API (#84) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * FE-56 :sparkles: 댓글 수정 API --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-57 :sparkles: 댓글 삭제 API (#88) * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (#93) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (충돌수정) (#98) --------- Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-27 :hammer: 충돌오류 수정 * FE-27 :hammer: 충돌내역 수정 * FE-27 :twisted_rightwards_arrows: 충돌오류 수정 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: MOON Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN * FE-27 :twisted_rightwards_arrows: 마이페이지 최신화 (#102) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :lipstick: 회원가입 페이지 레이아웃 추가 * :lipstick: 간편 로그인 로고 추가 * :lipstick: 회원가입 ui 추가 * :sparkles: 회원가입 스키마 정의 * :heavy_plus_sign: 회원가입 페이지에 스키마 적용 * :lipstick: 에러 메시지 뜰 때 라벨, 인풋도 같은 에러 색깔 추가 * :memo: 유효성 검사를 통한 버튼의 비활성화 처리 * :memo: 유효성 검사에 따른 인풋 테두리 색상 처리 * :fire: AuthLayout 삭제 * :art: 회원가입 페이지 브라우저 확대시 ui 깨짐 수정 * :truck: 정규표현식 네이밍 변경 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :sparkles: 회원가입 응답 데이터 스키마 정의 * :sparkles: 회원가입 api 생성 * :sparkles: useRegisterMutation hook 생성 * :zap: 회원가입 폼에 mutaion hook 적용 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :zap: isAxiosError로 변경 * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :twisted_rightwards_arrows: 충돌 해결 * :bug: postSignup 함수 추가 * :bug: postSignin 내보내는 방식 수정 * :wrench: lint 수정 * :sparkles: oauth api 생성 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * :sparkles: 카카오톡 리디렉트 uri 설정 * :sparkles: useKakaoLogin mutation hook 생성 * :zap: 네이버 구글 카카오 간편 로그인 링크 설정 * :recycle: 에러처리 로직 수정 * FE-51 :twisted_rightwards_arrows: 공용 API 머지 요청 (#92) * FE-52 ✨에피그램 목록조회 API (#34) * FE-52 feat: api schema 작성 * FE-52 ✨feat: getEpigrams api 작성 * FE-522 ✨fix: default export로 변경 * FE-52 ✨test: 테스트 코드 작성 * FE-52 ✨feat: BaseUrl, TeamID 상수 추가 및 axios baseTRL 수정 * FE-52 ✨fix: schema 및 apis 파일 수정 * FE-52 ✨test: 테스트 코드 삭제 * FE-52 ✨fix: .env파일 생성 및 BaseURL 수정 * FE-52 ✨fix: limit 타입 수정(optional 삭제) * FE-52 ✨text: 테 테스트코드 삭제 * FE-52 ✨fix: api GET요청 주소 수정('epigrams' -> '/epigrams') * FE-53 :sparkles: 감정이모티콘 저장 스키마 정의 * FE-53 :sparkles: 오늘의 감정 저장 api 생성 * FE-53 :sparkles: getMe 함수를 사용해 로그인 상태 확인 기능 구현 * FE-53 :sparkles: 감정 한영 변환 함수 * FE-53 :sparkles: 감정 저장 후 토스트 알림 표시 * FE-53 :sparkles: 오늘의 감정 조회 api 생성 * FE-53 :hammer: 감정 한영 변환 함수 추가 +) post, get 함수 내부로 한영 변환 함수 이동 * FE-53 :sparkles: 오늘의 감정 스키마 추가 정의 * FE-53 :sparkles: 오늘의 감정 조회 함수 적용 * FE-53 :truck: 오늘의 감정 type 이름 변경 * FE-53 :sparkles: useMutation 훅 사용 * FE-53 :memo: EmotionSelector 주석 추가 * FE-53 :fire: api 함수 에러 처리 부분 제거 * FE-53 :hammer: useQuery를 사용해 오늘의 감정 조회 데이터를 조회할 때는 useQuery를 사용하는거라 함 * FE-56 :sparkles: 댓글 수정 API (#84) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * FE-56 :sparkles: 댓글 수정 API --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-57 :sparkles: 댓글 삭제 API (#88) * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (#93) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (충돌수정) (#98) --------- Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: MOON Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN * FE-27 :twisted_rightwards_arrows: 브랜치 최신화 (충돌수정) (#111) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :lipstick: 회원가입 페이지 레이아웃 추가 * :lipstick: 간편 로그인 로고 추가 * :lipstick: 회원가입 ui 추가 * :sparkles: 회원가입 스키마 정의 * :heavy_plus_sign: 회원가입 페이지에 스키마 적용 * :lipstick: 에러 메시지 뜰 때 라벨, 인풋도 같은 에러 색깔 추가 * :memo: 유효성 검사를 통한 버튼의 비활성화 처리 * :memo: 유효성 검사에 따른 인풋 테두리 색상 처리 * :fire: AuthLayout 삭제 * :art: 회원가입 페이지 브라우저 확대시 ui 깨짐 수정 * :truck: 정규표현식 네이밍 변경 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :sparkles: 회원가입 응답 데이터 스키마 정의 * :sparkles: 회원가입 api 생성 * :sparkles: useRegisterMutation hook 생성 * :zap: 회원가입 폼에 mutaion hook 적용 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :zap: isAxiosError로 변경 * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * :twisted_rightwards_arrows: 충돌 해결 * :bug: postSignup 함수 추가 * :bug: postSignin 내보내는 방식 수정 * :wrench: lint 수정 * :sparkles: oauth api 생성 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * :sparkles: 카카오톡 리디렉트 uri 설정 * :sparkles: useKakaoLogin mutation hook 생성 * :zap: 네이버 구글 카카오 간편 로그인 링크 설정 * :recycle: 에러처리 로직 수정 * FE-51 :twisted_rightwards_arrows: 공용 API 머지 요청 (#92) * FE-52 ✨에피그램 목록조회 API (#34) * FE-52 feat: api schema 작성 * FE-52 ✨feat: getEpigrams api 작성 * FE-522 ✨fix: default export로 변경 * FE-52 ✨test: 테스트 코드 작성 * FE-52 ✨feat: BaseUrl, TeamID 상수 추가 및 axios baseTRL 수정 * FE-52 ✨fix: schema 및 apis 파일 수정 * FE-52 ✨test: 테스트 코드 삭제 * FE-52 ✨fix: .env파일 생성 및 BaseURL 수정 * FE-52 ✨fix: limit 타입 수정(optional 삭제) * FE-52 ✨text: 테 테스트코드 삭제 * FE-52 ✨fix: api GET요청 주소 수정('epigrams' -> '/epigrams') * FE-53 :sparkles: 감정이모티콘 저장 스키마 정의 * FE-53 :sparkles: 오늘의 감정 저장 api 생성 * FE-53 :sparkles: getMe 함수를 사용해 로그인 상태 확인 기능 구현 * FE-53 :sparkles: 감정 한영 변환 함수 * FE-53 :sparkles: 감정 저장 후 토스트 알림 표시 * FE-53 :sparkles: 오늘의 감정 조회 api 생성 * FE-53 :hammer: 감정 한영 변환 함수 추가 +) post, get 함수 내부로 한영 변환 함수 이동 * FE-53 :sparkles: 오늘의 감정 스키마 추가 정의 * FE-53 :sparkles: 오늘의 감정 조회 함수 적용 * FE-53 :truck: 오늘의 감정 type 이름 변경 * FE-53 :sparkles: useMutation 훅 사용 * FE-53 :memo: EmotionSelector 주석 추가 * FE-53 :fire: api 함수 에러 처리 부분 제거 * FE-53 :hammer: useQuery를 사용해 오늘의 감정 조회 데이터를 조회할 때는 useQuery를 사용하는거라 함 * FE-56 :sparkles: 댓글 수정 API (#84) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 * FE-56 :sparkles: 댓글 수정 API --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-57 :sparkles: 댓글 삭제 API (#88) * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (#93) * FE-29 :twisted_rightwards_arrows: 로그인 페이지 머지 요청 (#39) * :heavy_plus_sign: 이미지 파일 추가 * :lipstick: 로그인 페이지 레이아웃 생성 * :lipstick: 로그인 페이지 UI 생성 및 반응형 디자인 구현 * FE-60 :sparkles: react hook form, zod 추가 * FE-60 :lipstick: 로그인 폼 스타일 수정 - 텍스트 인풋 테두리 - 로그인 버튼 * FE-60 :recycle: 로그인 스키마 분리 * :sparkles: 로그인 응답 데이터 스키마 정의 * :sparkles: 로그인 api 생성 * :sparkles: 요청과 응답에 관한 인터셉터 추가 * :sparkles: useSignin mutation hook 생성 * :zap: useSignin hook 로그인 폼에 적용 * :fire: AuthLayout 삭제 * :art: onSubmit 함수 인라인으로 정의 * :recycle: 응답 인터셉터의 에러 처리 및 토큰 갱신 로직 개선 * :recycle: postSignin api 에러처리 로직 삭제 * :fire: useSignin hook 삭제 * :truck: useSigninMutation hook으로 이름 변경 및 파일 이동 * :sparkles: Toaster 컴포넌트 추가 * :sparkles: toast로 에러메시지 띄우기 * FE-71 🔀 에피그램 작성 페이지 (#71) * FE-64💄 글작성 페이지 UI추가 (#44) * FE-72 ✨ 에피그램 등록 api연동 (#52) * FE-72✨ 글작성페이지 스키마 추가 * FE-72✨ form태그 Form컴포넌트로 변경 * FE-72✨ 태그 저장기능 추가 * FE-72✨ 에피그램 등록 api연동 * FE-72✨ 에피그램 등록시 해당 에피그램 페이지로 이동 기능 추가 * FE-72✨ 등록 중일때의 로직추가 * FE-72✨ toast-> alert-dailog로 변경 * FE-72📝 TODO주석 추가 --------- Co-authored-by: 우지석 * FE-73✨ 유효성검사 추가 (#66) * FE-73♻️ Tag관리 함수 훅으로 분리 * FE-73✨ RadioGroup 로직 수정 * FE-73✨ 유효성검사 추가 * FE-73♻️ 저자 본인 선택시의 로직 변경 * FE-73✨ 중복 태그 검사 로직 추가 * FE-73♻️ 출처 유효성(optional)검사 수정 * FE-73✨ 필수항목 입력했을때 버튼 활성화 * FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정 * FE-73🐛 useEffect 의존성배열 lint problem 해결 * FE-73🐛 url유효성검사 에러 메세지 안뜨는 버그 수정 --------- Co-authored-by: 우지석 * FE-71♻️ epic브랜치 코드리뷰 반영 (#76) * FE-71♻️ token,interceptor 로직 수정 * FE-71♻️ AddEpigram 코드리뷰 반영 * FE-71🔥 테스트용 상세페이지 삭제 * FE-71♻️ onKeyDown -> onKeyUp 수정 --------- Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 * FE-51 :twisted_rightwards_arrows: 공용 API 최신화 (충돌수정) (#98) --------- Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: MOON Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 Co-authored-by: JeonYumin <40783675+JeonYumin94@users.noreply.github.com> Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN * FE-27 :twisted_rightwards_arrows: 충돌에러 수정 (#113) Co-authored-by: morrison --------- Co-authored-by: MOON <50370479+jangmoonwon@users.noreply.github.com> Co-authored-by: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Co-authored-by: 우지석 Co-authored-by: MOON Co-authored-by: imsoohyeok <160010477+imsoohyeok@users.noreply.github.com> Co-authored-by: NEWJIN <109906670+newjinlee@users.noreply.github.com> Co-authored-by: NEWJIN Co-authored-by: kich555 <79491683+kich555@users.noreply.github.com> Co-authored-by: morrison --- next.config.mjs | 17 +++ package-lock.json | 129 ++++++++++++++++- package.json | 4 + public/icon/arrow-bottom-icon.svg | 5 + public/icon/arrow-right-icon.svg | 5 + src/apis/emotion.ts | 12 ++ src/apis/index.ts | 2 +- src/apis/queries.ts | 8 ++ src/apis/user.ts | 9 +- src/components/Emotion/EmotionSelector.tsx | 2 +- src/components/ui/dialog.tsx | 65 +++++++++ src/hooks/useCalendar.ts | 67 +++++++++ src/hooks/useGetEmotion.ts | 10 +- src/hooks/userQueryHooks.ts | 16 ++- src/pageLayout/MypageLayout/MyPageLayout.tsx | 47 +++++++ src/pages/mypage/index.tsx | 5 + src/schema/emotion.ts | 20 +++ src/schema/user.ts | 15 ++ src/types/emotion.ts | 16 +++ src/types/user.ts | 13 ++ src/user/ui-profile/Calendar.tsx | 96 +++++++++++++ src/user/ui-profile/CalendarHeader.tsx | 58 ++++++++ src/user/ui-profile/Chart.tsx | 96 +++++++++++++ src/user/ui-profile/EmotionMonthlyLogs.tsx | 40 ++++++ src/user/ui-profile/Profile.tsx | 41 ++++++ src/user/ui-profile/ProfileEdit.tsx | 140 +++++++++++++++++++ src/user/utill/constants.ts | 20 +++ src/user/utill/fileNameChange.ts | 8 ++ tailwind.config.js | 3 + 29 files changed, 952 insertions(+), 17 deletions(-) create mode 100644 public/icon/arrow-bottom-icon.svg create mode 100644 public/icon/arrow-right-icon.svg create mode 100644 src/apis/emotion.ts create mode 100644 src/components/ui/dialog.tsx create mode 100644 src/hooks/useCalendar.ts create mode 100644 src/pageLayout/MypageLayout/MyPageLayout.tsx create mode 100644 src/pages/mypage/index.tsx create mode 100644 src/types/user.ts create mode 100644 src/user/ui-profile/Calendar.tsx create mode 100644 src/user/ui-profile/CalendarHeader.tsx create mode 100644 src/user/ui-profile/Chart.tsx create mode 100644 src/user/ui-profile/EmotionMonthlyLogs.tsx create mode 100644 src/user/ui-profile/Profile.tsx create mode 100644 src/user/ui-profile/ProfileEdit.tsx create mode 100644 src/user/utill/constants.ts create mode 100644 src/user/utill/fileNameChange.ts diff --git a/next.config.mjs b/next.config.mjs index d5456a15..49ba09f8 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,6 +1,23 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + images: { + domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com', 'localhost'], + remotePatterns: [ + { + protocol: 'https', + hostname: 'via.placeholder.com', + port: '', + pathname: '/**', + }, + ], + }, + rewrites: async () => [ + { + source: '/api/proxy/:path*', + destination: 'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/:path*', + }, + ], }; export default nextConfig; diff --git a/package-lock.json b/package-lock.json index 9fb61474..ce9380b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@lukemorales/query-key-factory": "^1.3.4", "@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-radio-group": "^1.2.0", @@ -23,6 +24,8 @@ "axios": "^1.7.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", + "formik": "^2.4.6", "lucide-react": "^0.402.0", "next": "14.2.4", "qs": "^6.12.2", @@ -33,6 +36,7 @@ "sharp": "^0.33.4", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7", + "yup": "^1.4.0", "zod": "^3.23.8" }, "devDependencies": { @@ -1918,6 +1922,15 @@ "react": "^18 || ^19" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -1942,8 +1955,7 @@ "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "devOptional": true + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/qs": { "version": "6.9.15", @@ -1955,7 +1967,6 @@ "version": "18.3.3", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", - "devOptional": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -2848,8 +2859,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -2908,6 +2918,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", @@ -2963,6 +2982,14 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/define-data-property": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", @@ -4173,6 +4200,30 @@ "node": ">= 6" } }, + "node_modules/formik": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz", + "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==", + "funding": [ + { + "type": "individual", + "url": "https://opencollective.com/formik" + } + ], + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.1", + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/fraction.js": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", @@ -4498,6 +4549,19 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/husky": { "version": "9.0.11", "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.11.tgz", @@ -5162,8 +5226,12 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, "node_modules/lodash.merge": { "version": "4.6.2", @@ -6180,6 +6248,11 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/property-expr": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", + "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==" + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -6250,6 +6323,11 @@ "react": "^18.3.1" } }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "node_modules/react-hook-form": { "version": "7.52.1", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.1.tgz", @@ -7112,6 +7190,16 @@ "node": ">=0.8" } }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -7123,6 +7211,11 @@ "node": ">=8.0" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "node_modules/ts-api-utils": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", @@ -7615,6 +7708,28 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/yup": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz", + "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==", + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } + }, + "node_modules/yup/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/zod": { "version": "3.23.8", "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", diff --git a/package.json b/package.json index a84b4b59..450b39fe 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@lukemorales/query-key-factory": "^1.3.4", "@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-radio-group": "^1.2.0", @@ -28,6 +29,8 @@ "axios": "^1.7.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", + "formik": "^2.4.6", "lucide-react": "^0.402.0", "next": "14.2.4", "qs": "^6.12.2", @@ -38,6 +41,7 @@ "sharp": "^0.33.4", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7", + "yup": "^1.4.0", "zod": "^3.23.8" }, "devDependencies": { diff --git a/public/icon/arrow-bottom-icon.svg b/public/icon/arrow-bottom-icon.svg new file mode 100644 index 00000000..8e0e4d20 --- /dev/null +++ b/public/icon/arrow-bottom-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icon/arrow-right-icon.svg b/public/icon/arrow-right-icon.svg new file mode 100644 index 00000000..dc5959d5 --- /dev/null +++ b/public/icon/arrow-right-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/apis/emotion.ts b/src/apis/emotion.ts new file mode 100644 index 00000000..8158e5a1 --- /dev/null +++ b/src/apis/emotion.ts @@ -0,0 +1,12 @@ +import { GetMonthlyEmotionLogsRequestType, GetMonthlyEmotionLogsResponseType } from '@/schema/emotion'; + +import httpClient from '.'; + +const getMonthlyEmotionLogs = async (request: GetMonthlyEmotionLogsRequestType): Promise => { + const response = await httpClient.get(`/emotionLogs/monthly`, { + params: request, + }); + return response.data; +}; + +export default getMonthlyEmotionLogs; diff --git a/src/apis/index.ts b/src/apis/index.ts index 6e81823b..0a4b7625 100644 --- a/src/apis/index.ts +++ b/src/apis/index.ts @@ -1,9 +1,9 @@ import axios from 'axios'; import qs from 'qs'; +// NOTE: axios 선언 const httpClient = axios.create({ baseURL: process.env.NEXT_PUBLIC_BASE_URL, - headers: { 'Content-Type': 'application/json' }, paramsSerializer: (parameters) => qs.stringify(parameters, { arrayFormat: 'repeat', encode: false }), }); diff --git a/src/apis/queries.ts b/src/apis/queries.ts index 1f84081c..0010c375 100644 --- a/src/apis/queries.ts +++ b/src/apis/queries.ts @@ -1,6 +1,8 @@ import { createQueryKeyStore } from '@lukemorales/query-key-factory'; import { GetUserRequestType } from '@/schema/user'; +import { GetMonthlyEmotionLogsRequestType } from '@/schema/emotion'; import { getMe, getUser } from './user'; +import getMonthlyEmotionLogs from './emotion'; const quries = createQueryKeyStore({ user: { @@ -13,6 +15,12 @@ const quries = createQueryKeyStore({ queryFn: () => getUser(request), }), }, + emotion: { + getMonthlyEmotionLogs: (request: GetMonthlyEmotionLogsRequestType) => ({ + queryKey: ['getMonthlyEmotionLogs', request], + queryFn: () => getMonthlyEmotionLogs(request), + }), + }, }); export default quries; diff --git a/src/apis/user.ts b/src/apis/user.ts index cd192766..5f924dea 100644 --- a/src/apis/user.ts +++ b/src/apis/user.ts @@ -1,4 +1,4 @@ -import type { GetUserResponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user'; +import type { GetUserResponseType, GetUserRequestType, PatchMeRequestType, PostPresignedUrlRequestType, PostPresignedUrlResponseType } from '@/schema/user'; import httpClient from '.'; export const getMe = async (): Promise => { @@ -16,3 +16,10 @@ export const updateMe = async (request: PatchMeRequestType): Promise => { + const formData = new FormData(); + formData.append('image', request.image); + const response = await httpClient.post('/images/upload', formData); + return response.data; +}; diff --git a/src/components/Emotion/EmotionSelector.tsx b/src/components/Emotion/EmotionSelector.tsx index fc92728b..4375c3ca 100644 --- a/src/components/Emotion/EmotionSelector.tsx +++ b/src/components/Emotion/EmotionSelector.tsx @@ -3,7 +3,7 @@ import useMediaQuery from '@/hooks/useMediaQuery'; import EmotionIconCard from '@/components/Emotion/EmotionCard'; import { EmotionType, EmotionState } from '@/types/emotion'; import usePostEmotion from '@/hooks/usePostEmotion'; -import useGetEmotion from '@/hooks/useGetEmotion'; +import { useGetEmotion } from '@/hooks/useGetEmotion'; import EmotionSaveToast from './EmotionSaveToast'; /** diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx new file mode 100644 index 00000000..f44152fd --- /dev/null +++ b/src/components/ui/dialog.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import * as DialogPrimitive from '@radix-ui/react-dialog'; +import { X } from 'lucide-react'; + +import cn from '@/lib/utils'; + +const Dialog = DialogPrimitive.Root; + +const DialogTrigger = DialogPrimitive.Trigger; + +const DialogPortal = DialogPrimitive.Portal; + +const DialogClose = DialogPrimitive.Close; + +const DialogOverlay = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( + +)); +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; + +const DialogContent = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)); +DialogContent.displayName = DialogPrimitive.Content.displayName; + +function DialogHeader({ className, ...props }: React.HTMLAttributes) { + return
; +} +DialogHeader.displayName = 'DialogHeader'; + +function DialogFooter({ className, ...props }: React.HTMLAttributes) { + return
; +} +DialogFooter.displayName = 'DialogFooter'; + +const DialogTitle = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( + +)); +DialogTitle.displayName = DialogPrimitive.Title.displayName; + +const DialogDescription = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( + +)); +DialogDescription.displayName = DialogPrimitive.Description.displayName; + +export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription }; diff --git a/src/hooks/useCalendar.ts b/src/hooks/useCalendar.ts new file mode 100644 index 00000000..44afc6a6 --- /dev/null +++ b/src/hooks/useCalendar.ts @@ -0,0 +1,67 @@ +import { getDaysInMonth } from 'date-fns'; +import { CALENDAR_LENGTH, DAY_OF_WEEK } from '../user/utill/constants'; + +interface CalendarData { + weekCalendarList: number[][]; // 주별 날짜 리스트 +} + +// 이전 달의 날짜를 계산하는 함수 +const getPreviousDays = (firstDayOfCurrentMonth: Date, totalPrevMonthDays: number): number[] => + // 현재 월의 첫 번째 날의 요일을 기준으로 이전 달의 날짜를 배열로 반환 + Array.from({ length: firstDayOfCurrentMonth.getDay() }, (_, index) => totalPrevMonthDays - firstDayOfCurrentMonth.getDay() + index + 1); +// 현재 월의 날짜를 배열로 반환하는 함수 +const getCurrentDays = (totalMonthDays: number): number[] => Array.from({ length: totalMonthDays }, (_, i) => i + 1); // 1부터 totalMonthDays까지의 배열 생성 +// 다음 달의 날짜를 계산하는 함수 +const getNextDays = (currentDayList: number[], prevDayList: number[]): number[] => { + // 다음 달의 날짜 수를 계산하여 배열로 반환 + const nextDayCount = CALENDAR_LENGTH - currentDayList.length - prevDayList.length; + return Array.from({ length: Math.max(nextDayCount, 0) }, (_, index) => index + 1); +}; + +const useCalendar = (currentDate: Date): CalendarData => { + // 현재 월의 총 날짜 수를 가져옴 + const totalMonthDays = getDaysInMonth(currentDate); + + // 이전 달의 마지막 날짜를 계산 + const prevMonthLastDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0); + // 이전 달의 총 날짜 수를 가져옴 + const totalPrevMonthDays = getDaysInMonth(prevMonthLastDate); + + // 현재 월의 첫 번째 날짜를 계산 + const firstDayOfCurrentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); + // 이전 달의 날짜 리스트 + const prevDayList = getPreviousDays(firstDayOfCurrentMonth, totalPrevMonthDays); + // 현재 월의 날짜 리스트 + const currentDayList = getCurrentDays(totalMonthDays); + // 다음 달의 날짜 리스트 + const nextDayList = getNextDays(currentDayList, prevDayList); + + // 전체 날짜 리스트 (이전 / 현재 / 다음 달 날짜 포함) + const currentCalendarList = [...prevDayList, ...currentDayList, ...nextDayList]; + + // 주별로 날짜 리스트를 분할 + const weekCalendarList: number[][] = []; + currentCalendarList.forEach((currDate, index) => { + const chunkIndex = Math.floor(index / DAY_OF_WEEK); + if (!weekCalendarList[chunkIndex]) { + weekCalendarList[chunkIndex] = []; // 주 배열이 없으면 초기화 + } + weekCalendarList[chunkIndex].push(currDate); // 누적값 반환 + }); + + // NOTE: 한 달이 5주 일 수도, 6주 일 수도 있을 때 5주인 경우 해당 달에 필요없는 다음 달의 날짜가 출력되기 때문에 (CALENDAR_LENGTH를 최대치인 42로 잡아서) 마지막 주의 첫 번째 숫자가 10이하의 날짜로 시작한다면 해당 배열을 삭제하도록 추가. + // TODO: 추후 다른 방법이 있다면 변경 할 예정 + if (weekCalendarList.length > 0) { + const lastWeek = weekCalendarList[weekCalendarList.length - 1]; + if (lastWeek[0] <= 10) { + weekCalendarList.pop(); + } + } + + // 캘린더 정보를 반환 + return { + weekCalendarList, // 주별 날짜 리스트 + }; +}; + +export default useCalendar; diff --git a/src/hooks/useGetEmotion.ts b/src/hooks/useGetEmotion.ts index d8017abc..e8555101 100644 --- a/src/hooks/useGetEmotion.ts +++ b/src/hooks/useGetEmotion.ts @@ -1,11 +1,13 @@ -import { useQuery } from '@tanstack/react-query'; +import quries from '@/apis/queries'; import getEmotion from '@/apis/getEmotion'; import { EmotionType } from '@/types/emotion'; +import { GetMonthlyEmotionLogsRequestType } from '@/schema/emotion'; +import { useQuery } from '@tanstack/react-query'; -const useGetEmotion = () => +export const useMonthlyEmotionLogs = (requset: GetMonthlyEmotionLogsRequestType) => useQuery(quries.emotion.getMonthlyEmotionLogs(requset)); + +export const useGetEmotion = () => useQuery({ queryKey: ['emotion'], queryFn: getEmotion, }); - -export default useGetEmotion; diff --git a/src/hooks/userQueryHooks.ts b/src/hooks/userQueryHooks.ts index 29ba4e2e..f5043b15 100644 --- a/src/hooks/userQueryHooks.ts +++ b/src/hooks/userQueryHooks.ts @@ -1,6 +1,6 @@ import quries from '@/apis/queries'; -import { updateMe } from '@/apis/user'; -import { GetUserResponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user'; +import { updateMe, createPresignedUrl } from '@/apis/user'; +import { GetUserRequestType, PatchMeRequestType, PostPresignedUrlRequestType, PostPresignedUrlResponseType } from '@/schema/user'; import { MutationOptions } from '@/types/query'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; @@ -8,7 +8,7 @@ export const useMeQuery = () => useQuery(quries.user.getMe()); export const useUserQuery = (requset: GetUserRequestType) => useQuery(quries.user.getUser(requset)); -export const useUpdateMe = (options: MutationOptions) => { +export const useUpdateMe = (options: MutationOptions) => { const queryClient = useQueryClient(); return useMutation({ mutationFn: (request: PatchMeRequestType) => updateMe(request), @@ -21,3 +21,13 @@ export const useUpdateMe = (options: MutationOptions) => { }, }); }; + +// presignedUrl 생성 +export const useCreatePresignedUrl = (options?: MutationOptions) => + useMutation({ + mutationFn: (request: PostPresignedUrlRequestType) => createPresignedUrl(request), + ...options, + onSuccess: (data: PostPresignedUrlResponseType) => + // 이미지 URL 반환 + data.url, + }); diff --git a/src/pageLayout/MypageLayout/MyPageLayout.tsx b/src/pageLayout/MypageLayout/MyPageLayout.tsx new file mode 100644 index 00000000..12627ade --- /dev/null +++ b/src/pageLayout/MypageLayout/MyPageLayout.tsx @@ -0,0 +1,47 @@ +import Header from '@/components/Header/Header'; +import { useMeQuery } from '@/hooks/userQueryHooks'; +import UserInfo from '@/types/user'; +import EmotionMonthlyLogs from '@/user/ui-profile/EmotionMonthlyLogs'; +import Profile from '@/user/ui-profile/Profile'; +import { useRouter } from 'next/navigation'; + +export default function MyPageLayout() { + const { data, isLoading, isError }: { data: UserInfo | undefined; isLoading: boolean; isError: boolean } = useMeQuery(); + + const router = useRouter(); + + if (isError) { + return
error
; + } + + if (isLoading) { + return
loading
; + } + + // NOTE: 회원정보가 확인되지 않는다면 로그인 페이지로 이동 + if (!data) { + router.push('/login'); + return false; + } + + return ( +
+
{}} /> +
+
+ +
오늘의 감정
+ +
+
+
+
+

내 에피그램(19)

+

내 댓글(110)

+
+
댓글 컴포넌트
+
+
+
+ ); +} diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx new file mode 100644 index 00000000..69b8c83e --- /dev/null +++ b/src/pages/mypage/index.tsx @@ -0,0 +1,5 @@ +import MyPageLayout from '@/pageLayout/MypageLayout/MyPageLayout'; + +export default function mypage() { + return ; +} diff --git a/src/schema/emotion.ts b/src/schema/emotion.ts index a2239be9..2bc5a92e 100644 --- a/src/schema/emotion.ts +++ b/src/schema/emotion.ts @@ -1,5 +1,25 @@ import * as z from 'zod'; +/** **************** 감정 달력 ***************** */ +export const GetMonthlyEmotionLogsRequest = z.object({ + userId: z.number(), + year: z.number(), + month: z.number(), +}); + +// 감정 로그 항목의 스키마 정의 +const EmotionSchema = z.object({ + id: z.number(), + userId: z.number(), + emotion: z.enum(['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY']), + createdAt: z.coerce.date(), +}); + +// 감정 로그 배열 정의 +export const GetMonthlyEmotionLogsResponse = z.array(EmotionSchema); +export type GetMonthlyEmotionLogsRequestType = z.infer; +export type GetMonthlyEmotionLogsResponseType = z.infer; + export const PostEmotionRequest = z.object({ emotion: z.enum(['MOVED', 'JOY', 'WORRY', 'SADNESS', 'ANGER']), }); diff --git a/src/schema/user.ts b/src/schema/user.ts index 4e9fde85..5c6881cb 100644 --- a/src/schema/user.ts +++ b/src/schema/user.ts @@ -1,4 +1,5 @@ import * as z from 'zod'; +import { MAX_FILE_SIZE, ACCEPTED_IMAGE_TYPES } from '@/user/utill/constants'; export const PatchMeRequest = z.object({ image: z.string().url(), @@ -18,6 +19,20 @@ export const GetUserReponse = z.object({ id: z.number(), }); +const PostPresignedUrlRequest = z.object({ + image: z + .instanceof(File) + .refine((file) => file.size <= MAX_FILE_SIZE, `업로드 파일의 용량은 최대 ${MAX_FILE_SIZE / (1024 * 1024)}MB 입니다.`) + .refine((file) => ACCEPTED_IMAGE_TYPES.includes(file.type), '.jpg, .jpeg, .png 확장자만 업로드 가능합니다.'), +}); + +export const PostPresignedUrlResponse = z.object({ + url: z.string().url(), +}); + export type GetUserResponseType = z.infer; export type GetUserRequestType = z.infer; export type PatchMeRequestType = z.infer; + +export type PostPresignedUrlRequestType = z.infer; +export type PostPresignedUrlResponseType = z.infer; diff --git a/src/types/emotion.ts b/src/types/emotion.ts index e64f3d3f..45b5b78c 100644 --- a/src/types/emotion.ts +++ b/src/types/emotion.ts @@ -1,3 +1,19 @@ +export interface Emotion { + userId: number; + year: number; + month: number; +} + +// 감정 로그 타입 지정 +export type EmotionTypeEN = 'MOVED' | 'HAPPY' | 'WORRIED' | 'SAD' | 'ANGRY'; + +export interface EmotionLog { + id: number; + userId: number; + emotion: EmotionTypeEN; + createdAt: Date; +} + export type EmotionType = '감동' | '기쁨' | '고민' | '슬픔' | '분노'; export type EmotionState = 'Default' | 'Unclicked' | 'Clicked'; diff --git a/src/types/user.ts b/src/types/user.ts new file mode 100644 index 00000000..d821ed31 --- /dev/null +++ b/src/types/user.ts @@ -0,0 +1,13 @@ +export default interface UserInfo { + nickname: string; + image: string; + id: number; + updatedAt: Date; + createdAt: Date; + teamId: string; +} + +export interface UserProfileProps { + image: string; + nickname: string; +} diff --git a/src/user/ui-profile/Calendar.tsx b/src/user/ui-profile/Calendar.tsx new file mode 100644 index 00000000..4ce6d06a --- /dev/null +++ b/src/user/ui-profile/Calendar.tsx @@ -0,0 +1,96 @@ +import React, { useState } from 'react'; +import Image from 'next/image'; +import { subMonths } from 'date-fns'; +import { EmotionLog, EmotionTypeEN } from '@/types/emotion'; +import useCalendar from '../../hooks/useCalendar'; +import { DAY_LIST, DATE_MONTH_FIXER, iconPaths } from '../utill/constants'; +import CalendarHeader from './CalendarHeader'; + +interface CalendarProps { + currentDate: Date; // 현재 날짜 + setCurrentDate: React.Dispatch>; // 현재 날짜를 설정하는 함수 + monthlyEmotionLogs: EmotionLog[]; +} + +export default function Calendar({ currentDate, setCurrentDate, monthlyEmotionLogs }: CalendarProps) { + // 캘린더 함수 호출 + const { weekCalendarList } = useCalendar(currentDate); + // 감정 필터 + const [selectedEmotion, setSelectedEmotion] = useState(null); + + // 달력에 출력할 수 있게 매핑 + const emotionMap: Record = Array.isArray(monthlyEmotionLogs) + ? monthlyEmotionLogs.reduce>((acc, log) => { + const date = new Date(log.createdAt); + const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`; + acc[dateString] = log.emotion as EmotionTypeEN; + return acc; + }, {}) + : {}; + + // 이전 달 클릭 + const handlePrevMonth = () => setCurrentDate((prevDate) => subMonths(prevDate, DATE_MONTH_FIXER)); + // 다음 달 클릭 + const handleNextMonth = () => setCurrentDate((prevDate) => subMonths(prevDate, -DATE_MONTH_FIXER)); + + // 감정 필터 + const handleEmotionSelect = (emotion: EmotionTypeEN) => { + // 현재 선택된 감정과 같으면 초기화 + if (selectedEmotion === emotion) { + setSelectedEmotion(null); + } else { + setSelectedEmotion(emotion); + } + }; + + // 필터링된 감정 맵 생성 + const filteredEmotionMap = selectedEmotion ? Object.fromEntries(Object.entries(emotionMap).filter(([, value]) => value === selectedEmotion)) : emotionMap; + + return ( +
+ {/* 캘린더 헤더 */} + + {/* 캘린더 */} +
+
+ {DAY_LIST.map((day) => ( +
+ {day} +
+ ))} +
+ {weekCalendarList.map((week, weekIndex) => ( + // TODO: index 값 Lint error. 임시로 주석 사용. 추후 수정 예정 + // eslint-disable-next-line react/no-array-index-key +
+ {week.map((day, dayIndex) => { + // 현재 날짜와 비교 + const isToday = day === currentDate.getDate() && currentDate.getMonth() === new Date().getMonth() && currentDate.getFullYear() === new Date().getFullYear(); + const dateString = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; + const emotion: EmotionTypeEN = filteredEmotionMap[dateString]; // 날짜에 해당하는 감정 가져오기 + const iconPath = emotion && iconPaths[emotion] ? iconPaths[emotion].path : '/icon/BW/SmileFaceBWIcon.svg'; + + return ( +
+ {emotion ? ( +
+

{day}

+ 감정 +
+ ) : ( +

{day}

+ )} +
+ ); + })} +
+ ))} +
+
+ ); +} diff --git a/src/user/ui-profile/CalendarHeader.tsx b/src/user/ui-profile/CalendarHeader.tsx new file mode 100644 index 00000000..2c337e1c --- /dev/null +++ b/src/user/ui-profile/CalendarHeader.tsx @@ -0,0 +1,58 @@ +import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuGroup, DropdownMenu } from '@/components/ui/dropdown-menu'; +import { Button } from '@/components/ui/button'; +import Image from 'next/image'; +import { EmotionTypeEN } from '@/types/emotion'; +import ARROW_BOTTOM_ICON from '../../../public/icon/arrow-bottom-icon.svg'; +import ARROW_RIGHT_ICON from '../../../public/icon/arrow-right-icon.svg'; +import ARROW_LEFT_ICON from '../../../public/icon/arrow-left-icon.svg'; +import { iconPaths } from '../utill/constants'; + +interface CalendarHeaderProps { + currentDate: Date; + onPrevMonth: () => void; + onNextMonth: () => void; + onEmotionSelect: (emotion: EmotionTypeEN) => void; + selectEmotion: EmotionTypeEN | null; +} + +export default function CalendarHeader({ currentDate, onPrevMonth, onNextMonth, onEmotionSelect, selectEmotion }: CalendarHeaderProps) { + return ( +
+
+
{`${currentDate.getFullYear()}년 ${currentDate.getMonth() + 1}월`}
+ + + + + + + {Object.entries(iconPaths).map(([emotionKey, { path, name }]) => ( + + + + ))} + + + +
+
+ + +
+
+ ); +} diff --git a/src/user/ui-profile/Chart.tsx b/src/user/ui-profile/Chart.tsx new file mode 100644 index 00000000..6e89af4c --- /dev/null +++ b/src/user/ui-profile/Chart.tsx @@ -0,0 +1,96 @@ +import { EmotionLog, EmotionTypeEN } from '@/types/emotion'; +import Image from 'next/image'; +import { iconPaths } from '../utill/constants'; + +interface ChartProps { + monthlyEmotionLogs: EmotionLog[]; +} + +export default function Chart({ monthlyEmotionLogs }: ChartProps) { + // 감정별 빈도수 계산 + const emotionCounts = monthlyEmotionLogs.reduce( + (count, log) => { + const { emotion } = log; + return { + ...count, // 기존의 count를 복사 + [emotion]: (count[emotion] || 0) + 1, // 현재 감정의 개수 증가 + }; + }, + {} as Record, + ); + + // 감정 종류 및 총 감정 수 계산 + const TOTAL_COUNT = monthlyEmotionLogs.length; + const EMOTIONS: EmotionTypeEN[] = ['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY']; + const RADIUS = 90; // 원의 반지름 + const CIRCUMFERENCE = 2 * Math.PI * RADIUS; + + // 가장 많이 나타나는 감정 찾기 + const maxEmotion = EMOTIONS.reduce((max, emotion) => (emotionCounts[emotion] > emotionCounts[max] ? emotion : max), EMOTIONS[0]); + + // 원형 차트의 각 감정에 대한 strokeDasharray와 strokeDashoffset 계산 + let offset = 0; + + return ( +
+

감정 차트

+
+
+ + + {EMOTIONS.map((emotion) => { + const count = emotionCounts[emotion] || 0; + const percentage = TOTAL_COUNT > 0 ? count / TOTAL_COUNT : 0; // 0으로 나누기 방지 + const strokeDasharray = `${CIRCUMFERENCE * percentage} ${CIRCUMFERENCE * (1 - percentage)}`; + + // 색상 설정 + let strokeColor; + switch (emotion) { + case 'HAPPY': + strokeColor = '#FBC85B'; + break; + case 'SAD': + strokeColor = '#E3E9F1'; + break; + case 'WORRIED': + strokeColor = '#C7D1E0'; + break; + case 'ANGRY': + strokeColor = '#EFF3F8'; + break; + default: + strokeColor = '#48BB98'; + } + + const circle = ; + + offset += CIRCUMFERENCE * percentage; // 다음 원을 위한 offset 업데이트 + return circle; + })} + + {/* 중앙에 가장 많이 나타나는 감정 출력 */} +
+ 감정 +

{iconPaths[maxEmotion].name}

+
+
+
+
+ {EMOTIONS.map((emotion) => { + const count = emotionCounts[emotion] || 0; + const percentage = TOTAL_COUNT > 0 ? Math.floor((count / TOTAL_COUNT) * 100) : 0; // 퍼센트 계산 및 소수점 버리기 + + return ( +
+

+ 감정 +

{percentage}%

+
+ ); + })} +
+
+
+
+ ); +} diff --git a/src/user/ui-profile/EmotionMonthlyLogs.tsx b/src/user/ui-profile/EmotionMonthlyLogs.tsx new file mode 100644 index 00000000..18d4ada8 --- /dev/null +++ b/src/user/ui-profile/EmotionMonthlyLogs.tsx @@ -0,0 +1,40 @@ +import { useMonthlyEmotionLogs } from '@/hooks/useGetEmotion'; +import { Emotion } from '@/types/emotion'; +import { useEffect, useState } from 'react'; +import Calendar from './Calendar'; +import Chart from './Chart'; + +interface EmotionMonthlyLogsProps { + userId: number; +} + +export default function EmotionMonthlyLogs({ userId }: EmotionMonthlyLogsProps) { + // 현재 날짜를 상태로 관리 + const [currentDate, setCurrentDate] = useState(new Date()); + + // 감정 달력 객체 상태 추가 + const [emotionRequest, setEmotionRequest] = useState({ + userId, + year: currentDate.getFullYear(), + month: currentDate.getMonth() + 1, + }); + + // '월'이 변경될 때마다 request 업데이트 + useEffect(() => { + setEmotionRequest({ + userId, + year: currentDate.getFullYear(), + month: currentDate.getMonth() + 1, + }); + }, [currentDate]); + + // 월별 감정 로그 조회 + const { data: monthlyEmotionLogs = [] } = useMonthlyEmotionLogs(emotionRequest); + + return ( + <> + + + + ); +} diff --git a/src/user/ui-profile/Profile.tsx b/src/user/ui-profile/Profile.tsx new file mode 100644 index 00000000..42fd5f74 --- /dev/null +++ b/src/user/ui-profile/Profile.tsx @@ -0,0 +1,41 @@ +import Image from 'next/image'; +import { UserProfileProps } from '@/types/user'; +import { useState } from 'react'; +import { Button } from '@/components/ui/button'; +import { Dialog, DialogTrigger, DialogContent } from '@/components/ui/dialog'; +import { sampleImage } from '../utill/constants'; +import ProfileEdit from './ProfileEdit'; + +export default function Profile({ image, nickname }: UserProfileProps) { + const [isModalOpen, setIsModalOpen] = useState(false); + + const handleProfileEditClose = () => { + setIsModalOpen(false); + }; + + // TODO: 여러개의 샘플 이미지 랜덤하게 뜨도록 추가 할 예정 + const profileImage = image || sampleImage; + + return ( +
+
+
+ 유저 프로필 +
+
+

{nickname}

+
+ + + + + + + + +
+
+ ); +} diff --git a/src/user/ui-profile/ProfileEdit.tsx b/src/user/ui-profile/ProfileEdit.tsx new file mode 100644 index 00000000..218f2c7a --- /dev/null +++ b/src/user/ui-profile/ProfileEdit.tsx @@ -0,0 +1,140 @@ +import Image from 'next/image'; +import { UserProfileProps } from '@/types/user'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import Label from '@/components/ui/label'; +import { DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { useToast } from '@/components/ui/use-toast'; +import { useEffect, useRef } from 'react'; +import { Form, Formik, useFormik } from 'formik'; +import { useCreatePresignedUrl, useUpdateMe } from '@/hooks/userQueryHooks'; +import * as Yup from 'yup'; +import { AxiosError } from 'axios'; +import fileNameChange from '../utill/fileNameChange'; + +interface UserProfileEditProps { + initialValues: { + image: string; + nickname: string; + }; + onModalClose: () => void; +} + +const validationSchema = Yup.object().shape({ + nickname: Yup.string().min(1, '닉네임은 1자 이상 30자 이하여야 합니다.').max(30, '닉네임은 1자 이상 30자 이하여야 합니다.').required('닉네임은 필수 항목입니다.'), +}); + +export default function ProfileEdit({ initialValues, onModalClose }: UserProfileEditProps) { + const createPresignedUrl = useCreatePresignedUrl(); + const fileInputRef = useRef(null); + + const { toast } = useToast(); + + const handleSubmit = async () => { + await formik.submitForm(); // Formik의 submitForm 함수 호출 + }; + + const { mutate: updateMe } = useUpdateMe({ + onSuccess: () => { + onModalClose(); + toast({ + description: '프로필 수정이 완료되었습니다.', + }); + }, + onError: () => { + toast({ + description: '프로필 수정 실패', + }); + }, + }); + + const formik = useFormik({ + initialValues: { + image: '', + nickname: '', + }, + validationSchema, + onSubmit: async (values, { setSubmitting }) => { + try { + // 프로필 업데이트 + await updateProfile(values); + setSubmitting(false); + } catch (error) { + // 에러 처리 + } finally { + setSubmitting(false); + } + }, + }); + + const updateProfile = (values: UserProfileProps) => { + updateMe(values); + }; + + // 프로필 사진 변경 클릭 + const handleImageEditClick = () => { + if (fileInputRef.current) { + fileInputRef.current.click(); + } + }; + + // 이미지 변경 시 + async function handleImageChange(e: React.ChangeEvent): Promise { + const { files } = e.currentTarget; + if (files && files.length > 0) { + const file = files[0]; + + try { + // 중복된 파일명 및 한글파일이 저장되지 않도록 파일이름 포멧 변경 + const newFileName = fileNameChange(); + const newFile = new File([file], `${newFileName}.${file.name.split('.').pop()}`, { type: file.type }); + + // presignedUrl 구하는 함수 (s3 업로드까지 같이) + const { url } = await createPresignedUrl.mutateAsync({ image: newFile }); + formik.setFieldValue('image', url); + } catch (error) { + // 에러 처리: 실패 시 토스트 메시지 + const axiosError = error as AxiosError; + + onModalClose(); + const errorMessage = `(error: ${axiosError.response?.status}) 잘못 된 요청입니다. 관리자에게 문의해주세요`; + + toast({ + description: errorMessage, + className: 'bg-red-400 text-white', + }); + } + } + } + + useEffect(() => { + formik.setValues(initialValues); + }, [initialValues]); + + return ( + + {({ isSubmitting }) => ( + + + 프로필 수정 +
+
+ 유저 프로필 + handleImageChange(e)} className='hidden' ref={fileInputRef} /> +
+
+ + +
+
+ + + + + + )} + + ); +} diff --git a/src/user/utill/constants.ts b/src/user/utill/constants.ts new file mode 100644 index 00000000..9ff423c8 --- /dev/null +++ b/src/user/utill/constants.ts @@ -0,0 +1,20 @@ +// 파일 업로드 관련 +export const MAX_FILE_SIZE = 1024 * 1024 * 5; // 파일 업로드 최대 용량 5MB +export const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png']; // 허용 가능 확장자 +export const sampleImage = '/ProfileTestImage.jpg'; // 초기프로필 이미지 + +// 캘린더 관련 상수 +export const DAY_LIST = ['일', '월', '화', '수', '목', '금', '토']; // 요일 +export const DATE_MONTH_FIXER = 1; // 날짜 조정 상수 (현재 사용되지 않음, 필요에 따라 활용 가능) +export const CALENDAR_LENGTH = 42; // 6주에 맞추어 캘린더의 총 길이를 42로 설정 +export const DAY_OF_WEEK = 7; // 한 주의 날 수 (일~토) +export const DEFAULT_TRASH_VALUE = -1; // 기본값 설정 (필요에 따라 사용 가능) + +// 아이콘 파일 경로 매핑 +export const iconPaths = { + MOVED: { path: '/icon/Color/HeartFaceColorIcon.svg', name: '기쁨', color: 'bg-illust-green' }, + HAPPY: { path: '/icon/Color/SmileFaceColorIcon.svg', name: '감동', color: 'bg-illust-yellow' }, + WORRIED: { path: '/icon/Color/ThinkFaceColorIcon.svg', name: '고민', color: 'bg-sub-gray_1' }, + SAD: { path: '/icon/Color/SadFaceColorIcon.svg', name: '슬픔', color: 'bg-sub-gray_2' }, + ANGRY: { path: '/icon/Color/AngryFaceColorIcon.svg', name: '분노', color: 'bg-sub-gray_3' }, +}; diff --git a/src/user/utill/fileNameChange.ts b/src/user/utill/fileNameChange.ts new file mode 100644 index 00000000..73007d0c --- /dev/null +++ b/src/user/utill/fileNameChange.ts @@ -0,0 +1,8 @@ +function fileNameChange() { + const now = new Date(); + const formattedFileName = `profile${now.getHours()}${now.getMinutes()}${now.getSeconds()}${now.getDate()}${now.getMonth() + 1}${now.getFullYear()}`; + + return formattedFileName; +} + +export default fileNameChange; diff --git a/tailwind.config.js b/tailwind.config.js index 25a4545d..a8b08d2c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -50,6 +50,9 @@ module.exports = { 'sub-gray_2': '#E3E9F1', 'sub-gray_3': '#EFF3F8', }, + boxShadow: { + '3xl': '0px 0px 36px 0px rgba(0, 0, 0, 0.05)', + }, screens: { sm: '640px', md: '768px',