Merge branch 'develop'

src/apis/domains/guest/useFetchGuestInfo.ts

@@ -1,4 +1,4 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { get } from '@apis/api';
 import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
@@ -18,8 +18,9 @@ const getGuestInfo = async (guestId: string): Promise<GuestGetResponse | null> =
 };
 
 export const useFetchGuestInfo = (guestId: string) => {
-  return useSuspenseQuery({
+  return useQuery({
     queryKey: [QUERY_KEY.GUEST_INFO],
     queryFn: () => getGuestInfo(guestId),
+    enabled: !!guestId,
   });
 };

src/apis/domains/guest/usePatchGuestNickname.ts

@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { patch } from '@apis/api';
+import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
+
+import { components } from '@schema';
+import { ApiResponseType, ErrorType } from '@types';
+
+type GuestUpdateRequest = components['schemas']['GuestUpdateRequest'];
+const patchGuestNickname = async (
+  guestId: number,
+  guestNickname: string
+): Promise<GuestUpdateRequest | null> => {
+  try {
+    const response = await patch<ApiResponseType<GuestUpdateRequest>>(`/v2/guest/${guestId}`, {
+      guestNickname,
+    });
+
+    return response.data.data;
+  } catch (err) {
+    console.error('API error:', err);
+    throw err;
+  }
+};
+
+export const usePatchGuestNickname = (guestId: number, setErrorMessage: (msg: string) => void) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (guestNickname: string) => patchGuestNickname(guestId, guestNickname),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.GUEST_INFO] });
+    },
+    onError: (error: ErrorType) => {
+      if (error.status === 40008) {
+        setErrorMessage('* 이미 존재하는 닉네임이에요.');
+      } else {
+        setErrorMessage('닉네임 변경 중 오류가 발생했습니다. 다시 시도해 주세요.');
+      }
+    },
+  });
+};

src/apis/queryKeys/queryKeys.ts

@@ -10,6 +10,7 @@ export const QUERY_KEY = {
   MY_HOST_INFO: 'myHostInfo',
   GUEST_PARTICIPATE: 'guestParticipateMoim',
   GUEST_APPLY: 'guestApplyMoim',
+  GUEST_NICKNAME_CHANGE: 'guestNicknameChange',
   HOST_MOIM_INFO: 'hostMoimInfo',
   MOIM_DETAIL: 'moimDetail',
   APPLICANT_LIST: 'applicantList',

src/assets/svg/IcEdit20.tsx

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+const SvgIcEdit20 = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20" {...props}>
+    <circle cx={10.5} cy={10} r={10} fill="#5451FF" />
+    <path
+      fill="#fff"
+      d="m10.18 13.287 3.944-3.944a5.5 5.5 0 0 1-1.773-1.192 5.5 5.5 0 0 1-1.192-1.774L7.214 10.32c-.308.308-.462.462-.594.632q-.234.301-.4.646c-.092.194-.16.4-.298.813l-.727 2.178a.566.566 0 0 0 .716.716l2.178-.727c.413-.137.62-.206.814-.298q.345-.165.645-.4c.17-.132.324-.286.632-.594m5.039-5.039a2.097 2.097 0 1 0-2.966-2.966l-.473.473.02.06a4.7 4.7 0 0 0 1.116 1.77c.513.516 1.14.905 1.83 1.136z"
+    />
+  </svg>
+);
+export default SvgIcEdit20;

src/assets/svg/index.ts

@@ -25,6 +25,7 @@ export { default as IcDropdownPlatformDown } from './IcDropdownPlatformDown';
 export { default as IcDropdownPlatformUp } from './IcDropdownPlatformUp';
 export { default as IcDropdownRight } from './IcDropdownRight';
 export { default as IcDropdownUp } from './IcDropdownUp';
+export { default as IcEdit20 } from './IcEdit20';
 export { default as IcEdit } from './IcEdit';
 export { default as IcEmploymentActive } from './IcEmploymentActive';
 export { default as IcEmploymentBlack } from './IcEmploymentBlack';

src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts

@@ -5,7 +5,6 @@ import { flexGenerator } from '@styles/generator';
 export const profileWrapperStyle = css`
   ${flexGenerator('row', 'flex-start', 'center')}
   gap: 1rem;
-  width: 100%;
 `;
 export const profileWrapperSizeStyle = {
   xlarge: css`

src/components/common/inputs/Input/Input.style.ts

@@ -12,7 +12,7 @@ export const labelAndInputWrapper = css`
   ${flexGenerator('column', 'center', 'flex-start')}
   gap: 0.8rem;
   width: 100%;
-  min-width: 33.5rem;
+  /* min-width: 33.5rem; 삭제 모달 내 input 크기를 위해 주석처리 */
 `;
 
 export const inputLabelStyle = (theme: Theme) => css`
@@ -27,27 +27,34 @@ export const inputWrapperStyle = css`
   position: relative;
 `;
 
-export const inputStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => css`
-  width: 100%;
-  height: 5.2rem;
-  padding: 1.5rem;
-  padding-right: 6rem;
-  border: 1px solid ${isError && isFocused ? theme.color.error : theme.color.lightgray1};
-  border-radius: 10px;
+export const inputStyle =
+  (isError: boolean, isFocused: boolean, customBorderColor?: string) => (theme: Theme) => css`
+    width: 100%;
+    height: 5.2rem;
+    padding: 1.5rem;
+    padding-right: 6rem;
+    border: 1px solid
+      ${isError && isFocused ? theme.color.error : theme.color.lightgray1 || customBorderColor};
+    border-radius: 10px;
 
-  color: ${theme.color.blackgray};
-  background-color: ${theme.color.white};
-  ${theme.font['body01-r-15']}
+    color: ${theme.color.blackgray};
+    background-color: ${theme.color.white};
+    ${theme.font['body01-r-15']}
 
-  &::placeholder {
-    color: ${theme.color.midgray1};
-    ${theme.font['body06-m-15']}
-  }
+    &::placeholder {
+      color: ${theme.color.midgray1};
+      ${theme.font['body06-m-15']}
+    }
 
-  &:focus {
-    outline: none;
-  }
-`;
+    &:focus {
+      outline: none;
+    }
+    &:focus-within {
+      ${customBorderColor && !isError
+        ? `border: 1px solid ${theme.color.purple1} `
+        : `${theme.color.error}`}
+    }
+  `;
 
 export const deleteButtonStyle = css`
   position: absolute;

src/components/common/inputs/Input/Input.tsx

@@ -1,3 +1,4 @@
+import { SerializedStyles } from '@emotion/react';
 import React, { InputHTMLAttributes, forwardRef, useState } from 'react';
 
 import { IcDelete20 } from '@svg';
@@ -21,6 +22,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   inputLabel?: string;
   errorMessage?: string;
   isCountValue: boolean;
+  customStyle?: SerializedStyles;
+  customBorderColor?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -34,6 +37,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       errorMessage,
       maxLength = 10,
       isCountValue = false,
+      customStyle,
+      customBorderColor,
     },
     ref
   ) => {
@@ -82,7 +87,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           <div css={inputWrapperStyle}>
             <input
               ref={ref}
-              css={[inputStyle(isError, isFocused)]}
+              css={[inputStyle(isError, isFocused, customBorderColor), customStyle]}
               placeholder={placeholder}
               value={value}
               onChange={handleInputChange}
@@ -97,12 +102,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           </div>
         </div>
         <div css={errorAndLengthWrapper(hasError)}>
-          {isFocused && displayErrorMessage && (
+          {isFocused && displayErrorMessage ? (
             <span css={errorMessageStyle}>{displayErrorMessage}</span>
+          ) : (
+            <div></div>
           )}
           {isCountValue && (
             <span css={textLengthStyle(isError, isFocused)}>
-              {value.length}/{maxLength}
+              {value?.length}/{maxLength}
             </span>
           )}
         </div>

src/pages/class/components/HostInfoCard/HostInfoCard.style.ts

@@ -58,13 +58,11 @@ export const hostNameStyle = (theme: Theme) => css`
 export const hostKeywordStyle = (theme: Theme) => css`
   color: ${theme.color.purple2};
   ${theme.font['body03-r-12']};
-  line-height: 140%;
 `;
 
 export const hostDescriptionWrapper = (theme: Theme) => css`
   color: ${theme.color.midgray2};
   ${theme.font['body03-r-12']};
-  line-height: 140%;
 
   display: -webkit-box;
   -webkit-line-clamp: 2;

src/pages/class/page/Class/Class.style.ts

@@ -74,6 +74,8 @@ export const tabButtonStyle = (isSelected: boolean) => (theme: Theme) => css`
 
 export const tabSectionStyle = (theme: Theme) => css`
   background-color: ${theme.color.bg_white0};
+  width: 100%;
+  min-height: 75rem;
   padding: 2.8rem 2rem;
 `;
 

src/pages/class/page/Class/Class.tsx

@@ -1,5 +1,5 @@
 import { useAtom } from 'jotai';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -64,9 +64,7 @@ const Class = () => {
   const { data: moimDescription, isLoading: isMoimDescriptionLoading } = useFetchMoimDescription(
     moimId ?? ''
   );
-  const { data: moimNoticeList, isLoading: isMoimNoticeListLoading } = useFetchMoimNoticeList(
-    moimId ?? ''
-  );
+  const { data: moimNoticeList } = useFetchMoimNoticeList(moimId ?? '');
   if (isMoimDetailLoading || isMoimDescriptionLoading) {
     return <Spinner />;
   }
@@ -100,7 +98,6 @@ const Class = () => {
       showToast();
     }
   };
-
   return (
     <div>
       <LogoHeader />
@@ -161,14 +158,16 @@ const Class = () => {
         <section css={[tabSectionStyle, selectTab === '클래스소개' && infoSectionStyle]}>
           {selectTab === '클래스소개' && <ClassInfo content={moimDescription ?? ''} />}
           {selectTab === '공지사항' &&
-            (isMoimNoticeListLoading ? (
-              <Spinner variant="component" />
-            ) : (moimNoticeList || []).length === 0 ? (
+            ((moimNoticeList || []).length === 0 ? (
               <ClassNoticeEmptyView />
             ) : (
               <ClassNotice noticeData={moimNoticeList || []} moimId={moimId ?? ''} />
             ))}
-          {selectTab === '리뷰' && <ClassReviewTab moimId={moimId ?? ''} />}
+          {selectTab === '리뷰' && (
+            <Suspense fallback={<Spinner />}>
+              <ClassReviewTab moimId={moimId ?? ''} />
+            </Suspense>
+          )}
         </section>
         {selectTab === '공지사항' && moimDetail?.hostId === hostId && (
           <div

src/pages/guest/components/MoimCard/MoimCard.tsx

@@ -40,6 +40,9 @@ const MoimCard = ({ guestMyClassData }: MoimCardProps) => {
   const handleCardClick = () => {
     navigate(`/class/${moimId}`);
   };
+  const handleWriteReviewClick = () => {
+    navigate(`/mypage/guest/myclass/${moimId}/review/write`);
+  };
 
   return (
     <div css={moimCardLayout}>
@@ -81,7 +84,7 @@ const MoimCard = ({ guestMyClassData }: MoimCardProps) => {
         </Button>
       ) : null}
       {moimSubmissionState === 'completed' && (
-        <Button variant="xSmall" onClick={handleButtonClick}>
+        <Button variant="xSmall" onClick={handleWriteReviewClick}>
           리뷰 쓰기
         </Button>
       )}

src/pages/host/components/StepTwo/StepTwo.tsx

@@ -107,7 +107,7 @@ const StepTwo = ({ onNext }: StepProps) => {
               onChange={(e) => handleInputChange(e, 'email')}
               placeholder="ex. [email protected]"
               isValid={isEmailValid}
-              errorMessage="유효한 이메일 주소를 \n입력해 주세요."
+              errorMessage="유효한 이메일 주소를 입력해 주세요."
               isCountValue={false}
             />
           </section>