From 7601b406fb414ad3192da50a31b1b79bf12b1030 Mon Sep 17 00:00:00 2001
From: stakbucks <dhassidu11@gmail.com>
Date: Sun, 15 Sep 2024 19:19:49 +0900
Subject: [PATCH] feat(bottle): open web view on profile edit

---
 .../src/app/profile/edit/BasicInformation.tsx | 15 +++++++-
 .../src/app/profile/edit/ProfileArea.tsx      | 35 ++++++++++++-------
 apps/bottle/src/components/profile/index.tsx  |  2 +-
 .../components/profile/profileStyle.css.ts    |  9 ++---
 apps/bottle/src/features/app-bridge/utils.ts  |  6 ++++
 5 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/apps/bottle/src/app/profile/edit/BasicInformation.tsx b/apps/bottle/src/app/profile/edit/BasicInformation.tsx
index bb01a35..e885eec 100644
--- a/apps/bottle/src/app/profile/edit/BasicInformation.tsx
+++ b/apps/bottle/src/app/profile/edit/BasicInformation.tsx
@@ -1,13 +1,26 @@
 'use client';
 
 import { Profile } from '@/components/profile';
+import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge';
+import { buildWebViewUrl } from '@/features/app-bridge/utils';
 import { useMyInformationQuery } from '@/store/query/useMyInformation';
 import { spacings } from '@bottlesteam/ui';
 
 export function BasicInformation() {
+  const { send } = useAppBridge();
   const {
     data: { imageUrl, age, userName },
   } = useMyInformationQuery();
 
-  return <Profile image={imageUrl} name={userName} age={age} style={{ marginTop: spacings.xxl }} />;
+  return (
+    <Profile
+      image={imageUrl}
+      name={userName}
+      age={age}
+      style={{ marginTop: spacings.xxl }}
+      onEditClick={() => {
+        send({ type: AppBridgeMessageType.OPEN_WEB_VIEW, payload: { href: buildWebViewUrl('/profile/edit/image') } });
+      }}
+    />
+  );
 }
diff --git a/apps/bottle/src/app/profile/edit/ProfileArea.tsx b/apps/bottle/src/app/profile/edit/ProfileArea.tsx
index 0c70505..b01afb3 100644
--- a/apps/bottle/src/app/profile/edit/ProfileArea.tsx
+++ b/apps/bottle/src/app/profile/edit/ProfileArea.tsx
@@ -1,12 +1,15 @@
 'use client';
 
 import { Card } from '@/components/card';
+import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge';
+import { buildWebViewUrl } from '@/features/app-bridge/utils';
 import { useMyInformationQuery } from '@/store/query/useMyInformation';
 import { Asset, Paragraph, spacings } from '@bottlesteam/ui';
 import { useMemo } from 'react';
 import { profileItemLeftStyle, profileItemStyle } from './profileEditStyle.css';
 
 export function ProfileArea() {
+  const { send } = useAppBridge();
   const {
     data: {
       profileSelect: {
@@ -23,18 +26,18 @@ export function ProfileArea() {
     },
   } = useMyInformationQuery();
 
-  const profileItems = useMemo(
+  const editProfileItems = useMemo(
     () => [
-      { title: '카카오톡 아이디', description: 'dhassidu11', onRightArrowClick: () => {} },
+      { title: '카카오톡 아이디', description: 'dhassidu11', endpoint: '/profile/edit/kakaoId' },
       {
         title: '나의 성격',
         description: mbti,
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/mbti',
       },
       {
         title: '나를 표현하는 키워드',
         description: keyword.join(', '),
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/keyword',
       },
       {
         title: '푹 빠진 취미',
@@ -44,37 +47,37 @@ export function ProfileArea() {
           ...Object.values(entertainment),
           ...Object.values(etc),
         ].join(', '),
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/interest',
       },
       {
         title: '직업 · 직무',
         description: job,
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/job',
       },
       {
         title: '키',
         description: `${height}cm`,
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/height',
       },
       {
         title: '흡연 스타일',
         description: smoking,
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/smoking',
       },
       {
         title: '음주 스타일',
         description: alcohol,
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/alcohol',
       },
       {
         title: '종교',
         description: religion,
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/religion',
       },
       {
         title: '지역',
         description: city,
-        onRightArrowClick: () => {},
+        endpoint: '/profile/edit/region',
       },
     ],
     [mbti, keyword, culture, sports, entertainment, job, height, smoking, alcohol, religion, city, etc]
@@ -83,8 +86,14 @@ export function ProfileArea() {
   return (
     <Card asChild style={{ marginTop: spacings.sm, marginBottom: spacings.xl }}>
       <ul>
-        {profileItems.map(({ title, description }) => (
-          <li key={title} className={profileItemStyle}>
+        {editProfileItems.map(({ title, description, endpoint }) => (
+          <li
+            key={title}
+            className={profileItemStyle}
+            onClick={() => {
+              send({ type: AppBridgeMessageType.OPEN_WEB_VIEW, payload: { href: buildWebViewUrl(endpoint) } });
+            }}
+          >
             <div className={profileItemLeftStyle}>
               <Paragraph color="neutral900" typography="st2">
                 {title}
diff --git a/apps/bottle/src/components/profile/index.tsx b/apps/bottle/src/components/profile/index.tsx
index 262b58e..428bc3e 100644
--- a/apps/bottle/src/components/profile/index.tsx
+++ b/apps/bottle/src/components/profile/index.tsx
@@ -14,7 +14,7 @@ export function Profile({ image, name, age, onEditClick, ...rest }: ProfileProps
   return (
     <div className={wrapperStyle} {...rest}>
       {onEditClick != null ? (
-        <div className={avatarAreaStyle}>
+        <div onClick={onEditClick} className={avatarAreaStyle}>
           <Avatar src={image} size="lg" />
           <button className={editButtonStyle}>
             <Asset type="icon-pencil" />
diff --git a/apps/bottle/src/components/profile/profileStyle.css.ts b/apps/bottle/src/components/profile/profileStyle.css.ts
index 9a291f0..8a299a1 100644
--- a/apps/bottle/src/components/profile/profileStyle.css.ts
+++ b/apps/bottle/src/components/profile/profileStyle.css.ts
@@ -1,4 +1,4 @@
-import { spacings } from '@bottlesteam/ui';
+import { colors, spacings } from '@bottlesteam/ui';
 import { style } from '@vanilla-extract/css';
 
 export const wrapperStyle = style({
@@ -19,11 +19,12 @@ export const avatarAreaStyle = style({
 export const editButtonStyle = style({
   width: '24px',
   height: '24px',
+  borderRadius: '50%',
+  border: `1px solid ${colors.neutral300}`,
   position: 'absolute',
   bottom: 0,
-  right: 5,
-  background: 'none',
-  border: 'none',
+  right: -5,
+  backgroundColor: colors.white100,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
diff --git a/apps/bottle/src/features/app-bridge/utils.ts b/apps/bottle/src/features/app-bridge/utils.ts
index 3054e71..a75d36d 100644
--- a/apps/bottle/src/features/app-bridge/utils.ts
+++ b/apps/bottle/src/features/app-bridge/utils.ts
@@ -1,3 +1,4 @@
+import { getClientSideTokens } from '../server/clientSideTokens';
 import { AppBridgeMessage, ToastMessage } from './interface';
 
 export function isToastMessage(message: AppBridgeMessage): message is ToastMessage {
@@ -7,3 +8,8 @@ export function isToastMessage(message: AppBridgeMessage): message is ToastMessa
 export function hasPayload(message: AppBridgeMessage) {
   return 'payload' in message;
 }
+
+export function buildWebViewUrl(endpoint: string) {
+  const { accessToken, refreshToken } = getClientSideTokens();
+  return `https://bottle.bottles.asia/${endpoint}?accessToken=${accessToken}&refreshToken=${refreshToken}`;
+}