컴포넌트 사용성 개선 및 라우팅 제한 추가, github action worflow 오류 해결 등 버그 5건 수정 (#524)

* fix: (#518) pr 코멘트 메시지 수정, 채널톡 컴포넌트 경로 수정

* feat: (#477) 개인정보 업데이트 쿼리 및 통신 실패에 대한 toast 띄우기 구현

* fix: (#478) UpButton, AddButton 고정 및 width 조정

* refactor: (#476) 뒤로가기 버튼을 누르면 이전 url로 이동하도록 수정

* design: (#474) 토스트 외부에서 상호작용 가능하도록 style 수정

* fix: (#518) path 수정

* fix: (#518) working directory 삭제

* fix: (#477) path 수정

* chore: (#474) 코드 복구

.github/workflows/backend-pr-comment.yml

@@ -14,7 +14,7 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Send Slack notification When Review Completed
- if: contains(github.event.comment.body, 'review-complete') # check the comment if it contains the keywords
+ if: contains(github.event.comment.body, 'be-리뷰완') # check the comment if it contains the keywords
  uses: slackapi/slack-github-action@v1.24.0
  with:
  channel-id: ${{ secrets.SLACK_BE_CHANNEL }} # Slack 채널 ID
@@ -35,7 +35,7 @@ jobs:
  SLACK_BOT_TOKEN: ${{ secrets.SLACK_TOKEN }} # Slack 토큰
 
  - name: Send Slack notification When Re-review Requested
- if: contains(github.event.comment.body, 'review-request')
+ if: contains(github.event.comment.body, 'be-리뷰요청')
  uses: slackapi/slack-github-action@v1.24.0
  with:
  channel-id: ${{ secrets.SLACK_BE_CHANNEL }}

.github/workflows/backend-pr-deadline-slack-bot.yml

@@ -8,10 +8,6 @@ on:
  paths:
  - 'backend/**'
 
-defaults:
- run:
- working-directory: backend
-
 jobs:
  pull_request_open:
  runs-on: ubuntu-latest

.github/workflows/frontend-pr-comment.yml

@@ -14,7 +14,7 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Send Slack notification When Review Completed
- if: contains(github.event.comment.body, 'review-complete') # check the comment if it contains the keywords
+ if: contains(github.event.comment.body, 'fe-리뷰완') # check the comment if it contains the keywords
  uses: slackapi/slack-github-action@v1.24.0
  with:
  channel-id: ${{ secrets.SLACK_FE_CHANNEL }} # Slack 채널 ID
@@ -35,7 +35,7 @@ jobs:
  SLACK_BOT_TOKEN: ${{ secrets.SLACK_TOKEN }} # Slack 토큰
 
  - name: Send Slack notification When Re-review Requested
- if: contains(github.event.comment.body, 'review-request') # check the comment if it contains the keywords
+ if: contains(github.event.comment.body, 'fe-리뷰요청') # check the comment if it contains the keywords
  uses: slackapi/slack-github-action@v1.24.0
  with:
  channel-id: ${{ secrets.SLACK_FE_CHANNEL }} # Slack 채널 ID

.github/workflows/frontend-pr-deadline-slack-bot.yml

@@ -8,10 +8,6 @@ on:
  paths:
  - 'frontend/**'
 
-defaults:
- run:
- working-directory: frontend
-
 jobs:
  pull_request_open:
  runs-on: ubuntu-latest

.github/workflows/frontend-storybook-deploy.yml

@@ -1,4 +1,4 @@
-name: Storybook-Deploy
+name: Deploy
 
 on:
  pull_request:

frontend/src/App.tsx

@@ -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';
+
 import { GlobalStyle } from '@styles/globalStyle';
 import { theme } from '@styles/theme';
 

frontend/src/components/common/Toast/style.ts

@@ -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]};
 `;
 
 export const Content = styled.div<{ $size: Size | 'free' }>`

frontend/src/components/post/PostListPage/style.ts

@@ -40,9 +40,11 @@ export const ButtonContainer = styled.div`
  align-items: end;
  gap: 20px;
 
+ width: 62px;
  padding-right: 10px;
 
- position: sticky;
+ position: fixed;
+ left: 90%;
  bottom: 24px;
 `;
 

frontend/src/hooks/query/user/useUpdateUserInfo.ts

@@ -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 };
+};

frontend/src/pages/VoteStatisticsPage/index.tsx

@@ -37,17 +37,13 @@ export default function VoteStatisticsPage() {
  isLoading: isVoteResultLoading,
  } = useFetch(() => getPostStatistics(postId));
 
- const movePostDetailPage = () => {
- navigate(`${PATH.POST}/${postId}`);
- };
-
  if (postDetail && !checkWriter(postDetail.writer.id)) return <Navigate to={PATH.HOME} />;
 
  return (
  <Layout isSidebarVisible={true}>
  <S.HeaderWrapper>
  <NarrowTemplateHeader>
- <IconButton category="back" onClick={movePostDetailPage} />
+ <IconButton category="back" onClick={() => navigate(-1)} />
  </NarrowTemplateHeader>
  </S.HeaderWrapper>
  <S.Container>

frontend/src/pages/post/PostDetail/InnerHeaderPart/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { PostAction, PostMenuItem } from '@type/menu';
 
@@ -39,7 +40,9 @@ export default function InnerHeaderPart({
  isClosed,
  handleEvent: { movePage, controlPost },
 }: PostDetailPageChildProps) {
- const { moveWritePostPage, moveVoteStatisticsPage, movePostListPage } = movePage;
+ const navigate = useNavigate();
+
+ const { moveWritePostPage, moveVoteStatisticsPage } = movePage;
  const { setEarlyClosePost, deletePost, reportPost, reportNickname } = controlPost;
  const { isOpen, toggleComponent, closeComponent } = useToggle();
  const [action, setAction] = useState<PostAction | null>(null);
@@ -55,7 +58,12 @@ export default function InnerHeaderPart({
 
  return (
  <>
- <IconButton category="back" onClick={movePostListPage} />
+ <IconButton
+ category="back"
+ onClick={() => {
+ navigate(-1);
+ }}
+ />
  <S.HeaderWrapper>
  {!isWriter ? (
  <>

frontend/src/pages/user/RegisterPersonalInfo/index.tsx

@@ -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('개인 정보를 이미 등록 완료하셨습니다.');
+ 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>
  );