Merge branch 'main' of https://github.com/depromeet/15th-Team2-Web in…

…to feat/profile

components/molecules/global-navigation-bar/global-navigation-bar.tsx

@@ -3,6 +3,7 @@
 import { MyIcon } from '@/components/atoms/icons/my-icon';
 import { NewsIcon } from '@/components/atoms/icons/news-icon';
 import { RecordIcon } from '@/components/atoms/icons/record-icon';
+import { useCurrentMemberInfo } from '@/hooks';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -11,10 +12,12 @@ import { useGlobalNavigationBar } from './use-global-navigation-bar';
 
 export function GlobalNavigationBar() {
   //Todo: 내 userId api로 받아온 후, 마이페이지 route 추가
+  const { data } = useCurrentMemberInfo();
+
   const barItems = [
     { label: '기록', icon: RecordIcon, route: '/' },
     { label: '소식', icon: NewsIcon, route: '/news' },
-    { label: '마이', icon: MyIcon, route: '/profile/2' },
+    { label: '마이', icon: MyIcon, route: `/profile/${data?.data.id}` },
   ];
   const { barIndex, handlers } = useGlobalNavigationBar(
     barItems.map((item) => item.route),

components/molecules/page-modal/page-modal.tsx

@@ -45,7 +45,7 @@ const layoutStyles = css({
   bottom: 0,
   width: '100vw',
   maxWidth: 'maxWidth',
-  height: '100vh',
+  height: '100dvh',
   backgroundColor: 'white',
   zIndex: 1000,
   overflow: 'auto',

features/news/components/organisms/news-list.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useQueryClient } from '@tanstack/react-query';
 import { useRef } from 'react';
 
 import { PullToRefresh } from '@/components/atoms';
@@ -8,26 +9,25 @@ import { TimeLineCard, TimeLineContent } from '@/features/main';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
+import { useNewsData } from '../../hooks';
 import { NewsContent } from '../../types';
-import { EmptyNews, NewsItemWrapper, NewsItemWrapperProps } from '../molecules';
 import { FindMemberButton, FollowingListLinkButton } from '../atoms';
-import { useNewsData } from '../../hooks';
-import { useQueryClient } from '@tanstack/react-query';
-
+import { EmptyNews, NewsItemWrapper, NewsItemWrapperProps } from '../molecules';
+
 export const NewsList = () => {
   const ptrRef = useRef(null);
   const queryClient = useQueryClient();
   const { data: newsData, fetchNextPage, hasNextPage } = useNewsData();
 
   if (!newsData) return null;
 
-  let contents = newsData.pages.flatMap(({ data }) => data.content);
+  const contents = newsData.pages.flatMap(({ data }) => data.content);
   const isEmpty = contents.length === 0;
   const lastItemIndex = contents.length - 1;
 
   const handlePullToRefresh = () => {
-    queryClient.invalidateQueries({ queryKey: ['newsData'] });
-    queryClient.refetchQueries({ queryKey: ['newsData'], type: 'active' });
+    void queryClient.invalidateQueries({ queryKey: ['newsData'] });
+    void queryClient.refetchQueries({ queryKey: ['newsData'], type: 'active' });
   };
 
   return isEmpty ? (

features/profile/components/organisms/my-page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useState } from 'react';
 
 import { Button } from '@/components/atoms';
@@ -24,13 +25,15 @@ export function MyProfile({
       <section className={profileContainer}>
         <ProfileContainer profileData={profileData} />
         <div className={buttonContainer}>
-          <Button
-            size="small"
-            label="프로필 편집"
-            buttonType="assistive"
-            variant="outlined"
-            className={buttonStyle}
-          />
+          <Link href="/profile/edit" className={css({ w: 'full' })}>
+            <Button
+              size="small"
+              label="프로필 편집"
+              buttonType="assistive"
+              variant="outlined"
+              className={buttonStyle}
+            />
+          </Link>
           <Button
             size="small"
             label="프로필 공유"
@@ -93,7 +96,7 @@ const buttonContainer = flex({
 });
 
 const buttonStyle = css({
-  flexGrow: 1,
+  w: 'full',
 });
 
 const tabContainer = flex({

features/record/utils/remove-special-symbols.ts

@@ -1,3 +1,3 @@
 export const removeSpecialSymbols = (text: string) => {
-  return text.replace(/[^a-zA-Z0-9]/g, '');
+  return text.replace(/[^a-zA-Z0-9가-힣]/g, '');
 };

hooks/apis/use-current-member-info.ts

@@ -18,5 +18,6 @@ export const useCurrentMemberInfo = () => {
     queryKey: ['currentMember'],
     queryFn: () => getCurrentMemberInfo(),
     placeholderData: keepPreviousData,
+    staleTime: Infinity,
   });
 };