feat(bottle): edit introduction

apps/bottle/src/app/profile/edit/(items)/introduction/page.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Introduction } from '@/components/intro/introduction';
+import { useIntroductionMutation } from '@/store/mutation/useIntroductionMutation';
+import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
+import { useRouter } from 'next/navigation';
+
+export default function IntroductionEditPage() {
+  const {
+    data: { introduction },
+  } = useCurrentUserProfileQuery();
+  const router = useRouter();
+
+  const { mutate } = useIntroductionMutation({ type: 'edit' });
+
+  const initialAnswer = introduction[0]?.answer ?? '';
+
+  return (
+    <Introduction
+      initialValue={introduction}
+      onNext={introduction => {
+        if (introduction[0]?.answer === initialAnswer) {
+          router.back();
+          return;
+        }
+        mutate(introduction);
+      }}
+      ctaButtonText="완료"
+    />
+  );
+}

apps/bottle/src/app/profile/edit/IntroductionArea.tsx

@@ -2,8 +2,11 @@
 
 import { Card } from '@/components/common/card';
 import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { Paragraph, spacings } from '@bottlesteam/ui';
-import { introductionBoxStyle } from './profileEditStyle.css';
+import { Asset, Paragraph, spacings } from '@bottlesteam/ui';
+import Link from 'next/link';
+import { introductionBoxStyle, introductionTextBoxStyle } from './profileEditStyle.css';
+
+const NO_INTRODUCTION_FALLBACK_TEXT = '아직 자기소개를 작성하지 않았어요';
 
 export function IntroductionArea() {
   const {
@@ -12,10 +15,21 @@ export function IntroductionArea() {
 
   return (
     <Card style={{ marginTop: spacings.xl }}>
-      <Paragraph color="black100" typography="st1">
-        내가 쓴 편지
-      </Paragraph>
-      <div className={introductionBoxStyle}>{introduction[0]?.answer}</div>
+      <Link href="/profile/edit/introduction">
+        <div className={introductionTextBoxStyle}>
+          <Paragraph color="black100" typography="st1">
+            내가 쓴 편지
+          </Paragraph>
+          {introduction != null && (
+            <button style={{ background: 'none', border: 'none' }}>
+              <Asset type="icon-right" />
+            </button>
+          )}
+        </div>
+      </Link>
+      <div className={introductionBoxStyle}>
+        {introduction != null ? introduction[0]?.answer : NO_INTRODUCTION_FALLBACK_TEXT}
+      </div>
     </Card>
   );
 }

apps/bottle/src/app/profile/edit/profileEditStyle.css.ts

@@ -16,6 +16,13 @@ export const contentsContainerStyle = style({
   },
 });
 
+export const introductionTextBoxStyle = style({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
 export const introductionBoxStyle = style({
   width: '100%',
   height: 'auto',
@@ -34,6 +41,7 @@ export const profileItemStyle = style({
   alignItems: 'center',
   gap: spacings.xs,
 });
+
 export const profileItemLeftStyle = style({
   display: 'flex',
   flexDirection: 'column',

apps/bottle/src/components/intro/introduction/index.tsx

@@ -17,7 +17,7 @@ export function Introduction({
   onNext,
   ctaButtonText,
 }: BaseProfileComponentProps<CurrentUser['introduction']>) {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState(initialValue != null ? (initialValue[0]?.answer ?? '') : '');
   const { data } = useCurrentUserProfileQuery();
 
   const isError = value.length < MINIMUM_TEXT_LENGTH && value.length > 0;
@@ -50,6 +50,7 @@ export function Introduction({
         />
       </div>
       <ProfileLayout.FixedButton
+        disabled={isError || value.length === 0}
         onClick={() => {
           onNext([{ question: '', answer: value }]);
         }}