From 89796e38d4586104af42e8db42855e36eeb188a6 Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Wed, 13 Nov 2024 21:26:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Design:=20=EB=8B=A4=EB=A5=B8=20=EC=82=AC?=
 =?UTF-8?q?=EB=9E=8C=EC=9D=98=20=ED=94=84=EB=A1=9C=ED=95=84=20UI=20padding?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage/UserProfile/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/MyPage/UserProfile/index.tsx b/src/pages/MyPage/UserProfile/index.tsx
index 8a9e757..590c1a2 100644
--- a/src/pages/MyPage/UserProfile/index.tsx
+++ b/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>

From 9cc1523327a71232902af31ba0c253773986e95d Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Thu, 14 Nov 2024 13:53:53 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=A7=88=EB=AC=B8=20=EB=8B=B5=EB=B3=80=ED=95=98=EA=B8=B0=20401?=
 =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Management/CreateQuestion/index.tsx       |  2 +-
 .../WriteReply/LoginModal/index.tsx           | 36 +++++++++++++++++++
 .../ProfileQuestionPage/WriteReply/index.tsx  | 14 +++++++-
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/ProfileQuestionPage/WriteReply/LoginModal/index.tsx

diff --git a/src/pages/GroupPage/Management/CreateQuestion/index.tsx b/src/pages/GroupPage/Management/CreateQuestion/index.tsx
index 5dff877..7b62415 100644
--- a/src/pages/GroupPage/Management/CreateQuestion/index.tsx
+++ b/src/pages/GroupPage/Management/CreateQuestion/index.tsx
@@ -28,6 +28,7 @@ export const GroupQuestionCreateModal = ({
   groupId,
 }: GroupQuestionCreateModalProps) => {
   const errorAlert = useDisclosure()
+
   const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<CreateQuestionFields>({
@@ -81,7 +82,6 @@ export const GroupQuestionCreateModal = ({
           <CreateQuestionForm form={form} />
         </Flex>
       </FormModal>
-
       <AlertModal
         isOpen={errorAlert.isOpen}
         onClose={errorAlert.onClose}
diff --git a/src/pages/ProfileQuestionPage/WriteReply/LoginModal/index.tsx b/src/pages/ProfileQuestionPage/WriteReply/LoginModal/index.tsx
new file mode 100644
index 0000000..3e9d920
--- /dev/null
+++ b/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>
+      }
+    />
+  )
+}
diff --git a/src/pages/ProfileQuestionPage/WriteReply/index.tsx b/src/pages/ProfileQuestionPage/WriteReply/index.tsx
index 8d673f0..c1ac2c2 100644
--- a/src/pages/ProfileQuestionPage/WriteReply/index.tsx
+++ b/src/pages/ProfileQuestionPage/WriteReply/index.tsx
@@ -17,6 +17,9 @@ import {
   AnswerProfileQuestionField,
   AnswerProfileQuestionSchema,
 } from '@/schema/profile'
+import { useAuthTokenStore } from '@/stores/auth-token'
+
+import { LoginModal } from './LoginModal'
 
 interface WriteReplyProps {
   userId: number
@@ -24,10 +27,12 @@ interface WriteReplyProps {
 }
 
 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>
   )
 }