Merge pull request #247 from ppochaco/fix/221-profile-question

Week11/issue#221 프로필 질문 답장하기 401 에러 추가

src/pages/GroupPage/Management/CreateQuestion/index.tsx

@@ -29,6 +29,7 @@ export const GroupQuestionCreateModal = ({
   groupId,
 }: GroupQuestionCreateModalProps) => {
   const errorAlert = useDisclosure()
+
   const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<CreateQuestionFields>({

src/pages/MyPage/UserProfile/index.tsx

@@ -8,7 +8,7 @@ interface UserProfileProps {
 
 export const UserProfile = ({ profile }: UserProfileProps) => {
   return (
-    <Flex flexDirection="column" padding="0 30px">
+    <Flex flexDirection="column">
       <Box
         height="144px"
         backgroundImage={`url('${profile.backgroundImageUrl}')`}
@@ -22,12 +22,18 @@ export const UserProfile = ({ profile }: UserProfileProps) => {
           size="lg"
           position="absolute"
           bottom="-30px"
+          left="30px"
         />
       </Box>
-      <Text fontSize="xl" fontWeight="400">
+      <Text fontSize="xl" fontWeight="400" padding="0 30px">
         {profile.name}
       </Text>
-      <Flex justifyContent="space-between" alignItems="end" gap={4}>
+      <Flex
+        justifyContent="space-between"
+        alignItems="end"
+        gap={4}
+        padding="0 30px"
+      >
         <Text color="text_secondary" fontSize="md">
           {profile.description}
         </Text>

src/pages/ProfileQuestionPage/WriteReply/LoginModal/index.tsx

@@ -0,0 +1,36 @@
+import { BiError } from 'react-icons/bi'
+import { useNavigate } from 'react-router-dom'
+
+import {
+  ConfirmModal,
+  ConfirmModalButton,
+} from '@/components/Modal/ConfirmModal'
+import { Modal } from '@/types'
+
+interface LoginModalProps {
+  modal: Modal
+}
+
+export const LoginModal = ({ modal }: LoginModalProps) => {
+  const navigate = useNavigate()
+
+  return (
+    <ConfirmModal
+      isOpen={modal.isOpen}
+      onClose={modal.onClose}
+      icon={<BiError />}
+      title="로그인 후 이용해주세요"
+      description=""
+      confirmButton={
+        <ConfirmModalButton
+          onClick={() => {
+            navigate('/login')
+            modal.onClose()
+          }}
+        >
+          확인
+        </ConfirmModalButton>
+      }
+    />
+  )
+}

src/pages/ProfileQuestionPage/WriteReply/index.tsx

@@ -17,17 +17,22 @@ import {
   AnswerProfileQuestionField,
   AnswerProfileQuestionSchema,
 } from '@/schema/profile'
+import { useAuthTokenStore } from '@/stores/auth-token'
+
+import { LoginModal } from './LoginModal'
 
 interface WriteReplyProps {
   userId: number
   questionId: number
 }
 
 export default function WriteReply({ userId, questionId }: WriteReplyProps) {
+  const isLoggedIn = useAuthTokenStore((state) => state.isLoggedIn())
   const [errorMessage, setErrorMessage] = useState('')
 
   const errorAlert = useDisclosure()
   const successAlert = useDisclosure()
+  const loginModal = useDisclosure()
 
   const form = useForm<AnswerProfileQuestionField>({
     resolver: zodResolver(AnswerProfileQuestionSchema),
@@ -55,7 +60,13 @@ export default function WriteReply({ userId, questionId }: WriteReplyProps) {
   })
 
   const handleSend = form.handleSubmit(
-    () => submitReply(form.getValues()),
+    () => {
+      if (!isLoggedIn) {
+        loginModal.onOpen()
+        return
+      }
+      submitReply(form.getValues())
+    },
     (errors) => {
       const errorMessages =
         Object.values(errors).flatMap((error) => error.message)[0] || ''
@@ -135,6 +146,7 @@ export default function WriteReply({ userId, questionId }: WriteReplyProps) {
         title="답변을 성공적으로 보냈습니다!"
         description="친구들의 다른 프로필 질문에 답변을 보내보세요"
       />
+      <LoginModal modal={loginModal} />
     </Flex>
   )
 }