#805 회원 탈퇴 구현

packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx

@@ -68,6 +68,8 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
   const authorProfileUrl =
     "authorProfileUrl" in chats?.[0] ? chats?.[0].authorProfileUrl : "";
   const authorName = "authorName" in chats?.[0] ? chats?.[0].authorName : "";
+  const authorIsWithdrew =
+    "authorIsWithdrew" in chats?.[0] ? chats?.[0].authorIsWithdrew : false;
 
   const isBot = authorId === "bot";
   const isAlone = roomInfo.part.length === 1;
@@ -158,17 +160,26 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
               {isBot ? (
                 <TaxiIcon css={{ width: "100%", height: "100%" }} />
               ) : (
-                <ProfileImage url={authorProfileUrl} />
+                <ProfileImage
+                  url={authorProfileUrl}
+                  withdraw={authorIsWithdrew}
+                />
               )}
             </div>
           )}
         </div>
         <div css={styleMessageSection}>
-          {authorId !== userOid && (
-            <div css={styleName} className="selectable">
-              {authorName}
-            </div>
-          )}
+          {authorId !== userOid &&
+            (authorIsWithdrew ? (
+              <div css={{ ...styleName, color: theme.gray_text }}>
+                <del>{authorName}</del>
+                {" (탈퇴)"}
+              </div>
+            ) : (
+              <div css={styleName} className="selectable">
+                {authorName}
+              </div>
+            ))}
           {chats.map((chat, index) => (
             <div key={getChatUniquewKey(chat)} css={styleMessageWrap}>
               <div css={styleChat(chat.type)}>

packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess.tsx

@@ -1,6 +1,15 @@
 import theme from "@/tools/theme";
 
-const BodyAccountCancelProcess = () => {
+type BodyAccountCancelProcessProps = {
+  roomCompleted: boolean;
+};
+
+const BodyAccountCancelProcess = ({
+  roomCompleted,
+}: BodyAccountCancelProcessProps) => {
+  const isCancelAvailable = roomCompleted;
+  // TODO : 탈퇴 불가 조건이 추가되면 props 부분 손보고, 최종 조건을 여기에 반영해 주세요
+
   const styleBox = {
     padding: "0 24px 0 16px",
     borderRadius: "10px",
@@ -23,33 +32,28 @@ const BodyAccountCancelProcess = () => {
     <div style={styleBox}>
       <div style={styleSection} />
       <div style={styleContent}>
-        Taxi 서비스의 회원 탈퇴 절차는 다음과 같습니다.
-      </div>
-      <div style={styleSection}>1. 탈퇴 방법</div>
-      <div style={styleContent}>
-        현재 Taxi 서비스는 자동화된 회원 탈퇴 기능을 제공하고 있지 않습니다.
-        대신, '회원 탈퇴하기'를 통해 회원 탈퇴 의사를 밝혀주시면, Taxi팀이
-        확인한 뒤 탈퇴를 처리해 드립니다. 정산이 완료되지 않은 방이 존재하는
-        경우, 정산이 완료될 때까지 탈퇴가 불가능합니다.
-      </div>
-      <div style={styleSection}>2. 탈퇴 처리 절차</div>
-      <div style={styleContent}>
-        유효한 회원 탈퇴 요청이 접수되면, Taxi팀이 해당 요청을 확인한 날을
-        시점으로 14일간 유예 기간이 부여됩니다. 유예 기간이 지난 후에는 이름,
-        학번, 이메일 주소, 계좌번호 등 개인정보가 즉시 삭제됩니다. 유예 기간을
-        부여하는 이유는, 실제로 정산이 완료되지 않았음에도 Taxi 서비스 내의 정산
-        관련 기능을 사용한 상황에서의 탈퇴를 방지하기 위함입니다.
-      </div>
-      <div style={styleSection}>3. 삭제되지 않는 데이터</div>
-      <div style={styleContent}>
-        1. 채팅, 생성한 방, 참여한 방에 대한 데이터는 삭제되지 않습니다. 단,
-        이름 등의 개인정보는 모두 삭제되기 때문에 해당 데이터와 탈퇴한 사용자를
-        연결 짓는 것은 불가능합니다.
+        지금까지 Taxi 서비스를 이용해 주셔서 감사합니다. <br />
+        탈퇴 후에는 복구가 어려우며, 재가입 시 새로운 아이디가 생성됩니다. 탈퇴
+        전에 해야 하는 일이 있다면 반드시 확인해 주시기를 바랍니다. 참여했던
+        방의 채팅 내역 등에서 탈퇴 후에도 현재의 닉네임이 표시됩니다. 변경이
+        필요하실 경우 탈퇴 전에 변경해 주세요.
         <br />
-        2. Taxi 서비스를 탈퇴하더라도 SPARCS SSO 계정은 그대로 유지됩니다.
-        SPARCS SSO 계정 탈퇴가 필요하신 경우, SPARCS SSO를 통해 탈퇴를 진행해
-        주십시오.
+        개인정보 처리 방침에 따라, 개인정보 처리 방침 동의 후 10년까지
+        개인정보를 보존합니다.
       </div>
+      {!isCancelAvailable && (
+        <>
+          <div style={styleSection}>
+            아래의 사항을 확인하신 후에 탈퇴가 가능합니다.
+          </div>
+          {!roomCompleted && (
+            <div style={styleContent}>
+              - 참여 중인 모든 방에 대하여 정산 또는 송금을 완료해 주세요. 아직
+              출발하지 않은 방의 경우, 탑승을 취소해 주세요.
+            </div>
+          )}
+        </>
+      )}
     </div>
   );
 };

packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess2nd.tsx

@@ -0,0 +1,30 @@
+import theme from "@/tools/theme";
+
+const BodyAccountCancelProcess2nd = () => {
+  const styleBox = {
+    padding: "0 24px 0 16px",
+    borderRadius: "10px",
+    overflow: "auto",
+    minHeight: "270px",
+    height: "calc(100vh - 360px)",
+    background: theme.gray_background,
+    boxShadow: theme.shadow_gray_button_inset,
+  };
+  const styleSection = {
+    ...theme.font14_bold,
+    margin: "16px 0",
+  };
+  const styleContent = {
+    ...theme.font14,
+    lineHeight: "20px",
+    marginLeft: "8px",
+  };
+  return (
+    <div style={styleBox}>
+      <div style={styleSection}>정말 탈퇴하시겠습니까?</div>
+      <div style={styleContent}>탈퇴 후에는 복구가 어렵습니다.</div>
+    </div>
+  );
+};
+
+export default BodyAccountCancelProcess2nd;

packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx

@@ -179,42 +179,52 @@ const BodyChatReportSelectType = ({
           <User value={reportedUser} isDeparted={isDeparted} />
         </div>
       )}
-      <div css={styleText}>
-        를 어떤 사유로 신고할까요? 만약 선택지에 원하시는 사유가 없다면
-        &quot;기타 사유&quot; 선택 후 자세히 설명해주세요.
-      </div>
-      <DottedLine />
-      <div css={styleSelectWrap}>
-        사유
-        <Select
-          options={selectOptions}
-          value={type}
-          onChangeValue={setType as (v: string) => void}
-          css={styleSelect}
-        />
-      </div>
-      {type === "etc-reason" && (
-        <div ref={wrapRef} css={styleTextareaWrap}>
-          <EditRoundedIcon style={styleIcon} />
-          <textarea
-            ref={textareaRef}
-            value={etcDetail}
-            onChange={(e) => setEtcDetail(e.target.value)}
-            css={styleTextarea}
-          />
-        </div>
-      )}
-      {inValidMessage && (
-        <div css={{ ...styleText, color: theme.red_text }}>
-          {inValidMessage}
+      {!reportedUser?.withdraw ? (
+        <div css={styleText}>
+          를 어떤 사유로 신고할까요? 만약 선택지에 원하시는 사유가 없다면
+          &quot;기타 사유&quot; 선택 후 자세히 설명해주세요.
         </div>
-      )}
-      {!inValidMessage && type === "no-settlement" && (
+      ) : (
         <div css={styleText}>
-          신고하기 시 해당 사용자게에게 방 정보와 함께 송금을 재촉하는 메일이
-          자동으로 보내집니다.
+          탈퇴한 사용자에 대한 신고는 채널톡 문의하기를 이용해 주세요.
         </div>
       )}
+      {!reportedUser?.withdraw && (
+        <>
+          <DottedLine />
+          <div css={styleSelectWrap}>
+            사유
+            <Select
+              options={selectOptions}
+              value={type}
+              onChangeValue={setType as (v: string) => void}
+              css={styleSelect}
+            />
+          </div>
+          {type === "etc-reason" && (
+            <div ref={wrapRef} css={styleTextareaWrap}>
+              <EditRoundedIcon style={styleIcon} />
+              <textarea
+                ref={textareaRef}
+                value={etcDetail}
+                onChange={(e) => setEtcDetail(e.target.value)}
+                css={styleTextarea}
+              />
+            </div>
+          )}
+          {inValidMessage && (
+            <div css={{ ...styleText, color: theme.red_text }}>
+              {inValidMessage}
+            </div>
+          )}
+          {!inValidMessage && type === "no-settlement" && (
+            <div css={styleText}>
+              신고하기 시 해당 사용자에게 방 정보와 함께 송금을 재촉하는 메일이
+              자동으로 보내집니다.
+            </div>
+          )}
+        </>
+      )}
       <div css={styleButtons}>
         <Button
           type="gray"

packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx

@@ -13,6 +13,7 @@ import { dayServerToClient } from "@/tools/day";
 import theme from "@/tools/theme";
 
 import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
+import ClearRoundedIcon from "@mui/icons-material/ClearRounded";
 
 type BodyChatReportSelectUserProps = {
   roomInfo: Room;
@@ -76,12 +77,14 @@ const BodyChatReportSelectUser = ({
   return (
     <>
       <div css={styleText}>
-        택시 동승 후 송금을 하지 않았거나, 부적절한 언어 또는 상업적 광고의
-        채팅, 기타 규정 위반 등의 행위를 목격하셨다면 해당 사용자를
-        신고해주세요. SPARCS Taxi팀은 안전하고 청결한 택시 동승을 위해 최선을
-        다할 것 입니다.
+        택시 동승 후 송금을 하지 않았거나, 부적절한 언어 또는 상업적 광고, 기타
+        규정 위반 등의 행위를 목격하셨다면 해당 사용자를 신고해주세요. SPARCS
+        Taxi팀은 안전하고 쾌적한 택시 동승을 위해 최선을 다할 것 입니다.
+      </div>
+      <div css={styleText}>
+        신고할 사용자를 선택해주세요. 단, 탈퇴한 사용자에 대한 신고는 채널톡
+        문의하기를 이용해 주세요.
       </div>
-      <div css={styleText}>신고할 사용자를 선택해주세요.</div>
       <DottedLine />
       <div css={styleUsers}>
         {roomInfo.part.map(
@@ -90,7 +93,9 @@ const BodyChatReportSelectUser = ({
               <div
                 key={user._id}
                 css={styleUser}
-                onClick={() => setReportedId(user._id)}
+                onClick={
+                  user.withdraw ? () => {} : () => setReportedId(user._id)
+                }
               >
                 <div
                   css={{
@@ -101,8 +106,17 @@ const BodyChatReportSelectUser = ({
                         : theme.purple_light,
                   }}
                 >
-                  {reportedId === user._id && (
-                    <CheckRoundedIcon style={styleCheckBoxIcon} />
+                  {user.withdraw ? (
+                    <ClearRoundedIcon
+                      style={{
+                        ...styleCheckBoxIcon,
+                        fill: theme.gray_line,
+                      }}
+                    />
+                  ) : (
+                    reportedId === user._id && (
+                      <CheckRoundedIcon style={styleCheckBoxIcon} />
+                    )
                   )}
                 </div>
                 <User value={user} isDeparted={isDeparted} />