-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
컴포넌트 사용성 개선 및 라우팅 제한 추가, github action workflow 오류 해결 등 버그 5건 수정 #524
Changes from 8 commits
8eea182
b4e599a
0f0007b
709ffc9
4a0ebfb
9ae4804
e23fa43
a89e470
e3282eb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,10 +8,6 @@ on: | |
paths: | ||
- 'frontend/**' | ||
|
||
defaults: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. working directory 가 있으니까 .github/workflows/scripts/calculatePRDeadline.js 의 경로가 제대로 인식이 안되더라구요... 그래서 지웠습니다😂😂 |
||
run: | ||
working-directory: frontend | ||
|
||
jobs: | ||
pull_request_open: | ||
runs-on: ubuntu-latest | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
name: Storybook-Deploy | ||
name: Deploy | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Deploy 로 원상복구했더니 제대로 스토리북 배포에 대한 action이 일어나더라구요(휴..) |
||
|
||
on: | ||
pull_request: | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,9 +8,10 @@ import PostOptionProvider from '@hooks/context/postOption'; | |
|
||
import router from '@routes/router'; | ||
|
||
import ChannelTalk from '@pages/ChannelTalk'; | ||
import ErrorBoundaryForTopClass from '@pages/ErrorBoundaryForTopClass'; | ||
|
||
import ChannelTalk from '@components/ChannelTalk'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. pages에서 components 경로로 채널톡 컴포넌트 옮겼습니다 |
||
|
||
import { GlobalStyle } from '@styles/globalStyle'; | ||
import { theme } from '@styles/theme'; | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -27,7 +27,7 @@ import { | |
POST_DEADLINE_POLICY, | ||
POST_TITLE_POLICY, | ||
} from '@constants/policyMessage'; | ||
import { CATEGORY_COUNT_LIMIT, IMAGE_BASE_URL, POST_CONTENT, POST_TITLE } from '@constants/post'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. IMAGE_BASE_URL 안쓰고 있어서 지웠어요~ |
||
import { CATEGORY_COUNT_LIMIT, POST_CONTENT, POST_TITLE } from '@constants/post'; | ||
|
||
import { calculateDeadlineTime } from '@utils/post/calculateDeadlineTime'; | ||
import { checkWriter } from '@utils/post/checkWriter'; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,18 +18,9 @@ export const fadeInOutAnimation = keyframes` | |
`; | ||
|
||
export const Wrapper = styled.div<{ $position: 'top' | 'bottom' }>` | ||
display: grid; | ||
grid-template-columns: 1fr; | ||
grid-template-rows: ${props => POSITION[props.$position]}; | ||
align-items: end; | ||
justify-items: center; | ||
|
||
width: 100vw; | ||
height: 100vh; | ||
|
||
position: fixed; | ||
top: 0; | ||
left: 0; | ||
|
||
top: ${props => POSITION[props.$position]}; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 혹시 인터렉션이 가능해져서 사용자가 오류가 나는 버튼을 여러번 클릭하면 토스트가 여러개 생성될까요? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 맞아요 그러면 같은 위치에 다수의 toast들이 띄워져서 겹치는데, 이런 경우의 수 때문에 뭔가 전역으로 관리하는게 낫지 않나.. 라는 생각이 들더라구요🤔😀 |
||
`; | ||
|
||
export const Content = styled.div<{ $size: Size | 'free' }>` | ||
|
@@ -49,5 +40,5 @@ export const Content = styled.div<{ $size: Size | 'free' }>` | |
|
||
animation: ${fadeInOutAnimation} ${TOAST_TIME}s linear infinite; | ||
|
||
z-index: ${theme.zIndex.modal}; | ||
z-index: ${theme.zIndex.select}; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { useMutation, useQueryClient } from '@tanstack/react-query'; | ||
|
||
import { UpdateUserInfoRequest } from '@type/user'; | ||
|
||
import { updateUserInfo } from '@api/userInfo'; | ||
|
||
import { QUERY_KEY } from '@constants/queryKey'; | ||
|
||
export const useUpdateUserInfo = () => { | ||
const queryClient = useQueryClient(); | ||
|
||
const LOGGED_IN = true; | ||
const { mutate, isLoading, isSuccess, isError, error } = useMutation({ | ||
mutationFn: async (userInfo: UpdateUserInfoRequest) => await updateUserInfo(userInfo), | ||
onSuccess: () => { | ||
queryClient.invalidateQueries({ queryKey: [QUERY_KEY.USER_INFO, LOGGED_IN] }); | ||
}, | ||
onError: () => { | ||
window.console.error('개인 정보 등록에 실패했습니다.'); | ||
}, | ||
}); | ||
|
||
return { mutate, isLoading, isSuccess, isError, error }; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,19 @@ | ||
import { ChangeEvent, FormEvent, useState } from 'react'; | ||
import { useNavigate } from 'react-router-dom'; | ||
import { ChangeEvent, FormEvent, useEffect, useState } from 'react'; | ||
import { Navigate, useNavigate } from 'react-router-dom'; | ||
|
||
import { updateUserInfo } from '@api/userInfo'; | ||
import { useUpdateUserInfo } from '@hooks/query/user/useUpdateUserInfo'; | ||
import { useToast } from '@hooks/useToast'; | ||
|
||
import Accordion from '@components/common/Accordion'; | ||
import IconButton from '@components/common/IconButton'; | ||
import Layout from '@components/common/Layout'; | ||
import LogoButton from '@components/common/LogoButton'; | ||
import NarrowTemplateHeader from '@components/common/NarrowTemplateHeader'; | ||
import SquareButton from '@components/common/SquareButton'; | ||
import Toast from '@components/common/Toast'; | ||
|
||
import { BIRTH_YEAR } from '@constants/user'; | ||
|
||
import { setCookieToken } from '@utils/cookie'; | ||
import { getCookieToken, setCookieToken } from '@utils/cookie'; | ||
|
||
import * as S from './style'; | ||
|
||
|
@@ -23,6 +25,10 @@ interface UserInfoForm { | |
|
||
export default function RegisterPersonalInfo() { | ||
const navigate = useNavigate(); | ||
const hasEssentialInfo = getCookieToken().hasEssentialInfo === 'true'; | ||
|
||
const { mutate: updateUserInfo, isSuccess, isError, error } = useUpdateUserInfo(); | ||
const { isToastOpen, openToast, toastMessage } = useToast(); | ||
|
||
const [userInfoForm, setUserInfoForm] = useState<UserInfoForm>({ | ||
gender: '', | ||
|
@@ -62,18 +68,38 @@ export default function RegisterPersonalInfo() { | |
|
||
const submittedUserInfo = { gender, birthYear: Number(birthYear) }; | ||
updateUserInfo(submittedUserInfo); | ||
setCookieToken('hasEssentialInfo', true); | ||
|
||
alert('개인 정보 등록 완료!'); | ||
navigate('/'); | ||
}; | ||
|
||
useEffect(() => { | ||
if (isSuccess) { | ||
setCookieToken('hasEssentialInfo', true); | ||
alert('개인 정보가 등록 완료되었습니다.'); | ||
navigate('/'); | ||
} | ||
}, [isSuccess]); | ||
|
||
useEffect(() => { | ||
if (isError && error instanceof Error) { | ||
openToast('개인 정보를 이미 등록 완료하셨습니다.'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 백엔드에서는 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 만약 하나라도 커스텀하면 모두 커스텀하고, 개인적으로는 지금처럼 백엔드에서 작성하면 좋을 것 같아요. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 저도 프론트에서 알 수 있는 에러라면 프론트가 처리하고, 구체적으로 알 수 없는 에러는 현재처럼 백엔드에서 보내주는 것을 보내주면 좋겠다고 생각이 들어요 |
||
return; | ||
} | ||
}, [isError, error]); | ||
|
||
if (hasEssentialInfo) { | ||
alert('개인 정보를 이미 등록 완료하셨습니다.'); | ||
return <Navigate to={'/'} />; | ||
} | ||
|
||
return ( | ||
<Layout isSidebarVisible={true}> | ||
<S.Wrapper> | ||
<S.HeaderWrapper> | ||
<NarrowTemplateHeader> | ||
<IconButton category="back" /> | ||
<LogoButton | ||
content="icon" | ||
style={{ width: '33px', height: '33px' }} | ||
onClick={() => navigate('/')} | ||
/> | ||
</NarrowTemplateHeader> | ||
</S.HeaderWrapper> | ||
<S.Title>개인 정보 등록</S.Title> | ||
|
@@ -147,6 +173,11 @@ export default function RegisterPersonalInfo() { | |
</S.ButtonWrapper> | ||
</S.InfoForm> | ||
</S.MainWrapper> | ||
{isToastOpen && ( | ||
<Toast size="md" position="bottom"> | ||
{toastMessage} | ||
</Toast> | ||
)} | ||
</S.Wrapper> | ||
</Layout> | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
백엔드랑 프론트엔드 모두 action을 trigger하는 키워드가 같으면
채널 2개에 각각 알림이 가버려서...... 백엔드랑 프론트엔드 키워드를 다르게 변경해봤습니다!!