feat(bottle): edit profile page style

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

@@ -0,0 +1,13 @@
+'use client';
+
+import { Profile } from '@/components/profile';
+import { useMyInformationQuery } from '@/store/query/useMyInformation';
+import { spacings } from '@bottlesteam/ui';
+
+export function BasicInformation() {
+  const {
+    data: { imageUrl, age, userName },
+  } = useMyInformationQuery();
+
+  return <Profile image={imageUrl} name={userName} age={age} style={{ marginTop: spacings.xxl }} />;
+}

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { Header } from '@/components/header';
+import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge';
+import { Asset } from '@bottlesteam/ui';
+
+export function HeaderArea() {
+  const { send } = useAppBridge();
+
+  return (
+    <Header>
+      <button
+        onClick={() => send({ type: AppBridgeMessageType.WEB_VIEW_CLOSE })}
+        style={{ background: 'none', border: 'none' }}
+      >
+        <Asset type="icon-arrow-left" />
+      </button>
+    </Header>
+  );
+}

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

@@ -0,0 +1,21 @@
+'use client';
+
+import { Card } from '@/components/card';
+import { Paragraph, spacings } from '@bottlesteam/ui';
+import { introductionBoxStyle } from './profileEditStyle.css';
+import { useMyInformationQuery } from '@/store/query/useMyInformation';
+
+export function IntroductionArea() {
+  const {
+    data: { introduction },
+  } = useMyInformationQuery();
+
+  return (
+    <Card style={{ marginTop: spacings.xl }}>
+      <Paragraph color="black100" typography="st1">
+        내가 쓴 편지
+      </Paragraph>
+      <div className={introductionBoxStyle}>{introduction[0]?.answer}</div>
+    </Card>
+  );
+}

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

@@ -1,12 +1,102 @@
 'use client';
 
-import { Profile } from '@/components/profile';
+import { Card } from '@/components/card';
+import { profileItemLeftStyle, profileItemStyle } from './profileEditStyle.css';
+import { Asset, Paragraph, spacings } from '@bottlesteam/ui';
 import { useMyInformationQuery } from '@/store/query/useMyInformation';
+import { useMemo } from 'react';
 
 export function ProfileArea() {
   const {
-    data: { imageUrl, age, userName },
+    data: {
+      profileSelect: {
+        job,
+        mbti,
+        region: { city },
+        smoking,
+        alcohol,
+        keyword,
+        height,
+        interest: { culture, sports, entertainment, etc },
+        religion,
+      },
+    },
   } = useMyInformationQuery();
 
-  return <Profile image={imageUrl} name={userName} age={age} />;
+  const profileItems = useMemo(
+    () => [
+      { title: '카카오톡 아이디', description: 'dhassidu11', onRightArrowClick: () => {} },
+      {
+        title: '나의 성격',
+        description: mbti,
+        onRightArrowClick: () => {},
+      },
+      {
+        title: '나를 표현하는 키워드',
+        description: keyword.join(', '),
+        onRightArrowClick: () => {},
+      },
+      {
+        title: '푹 빠진 취미',
+        description: [
+          ...Object.values(culture),
+          ...Object.values(sports),
+          ...Object.values(entertainment),
+          ...Object.values(etc),
+        ].join(', '),
+        onRightArrowClick: () => {},
+      },
+      {
+        title: '직업 · 직무',
+        description: job,
+        onRightArrowClick: () => {},
+      },
+      {
+        title: '키',
+        description: `${height}cm`,
+        onRightArrowClick: () => {},
+      },
+      {
+        title: '흡연 스타일',
+        description: smoking,
+        onRightArrowClick: () => {},
+      },
+      {
+        title: '음주 스타일',
+        description: alcohol,
+        onRightArrowClick: () => {},
+      },
+      {
+        title: '종교',
+        description: religion,
+        onRightArrowClick: () => {},
+      },
+      {
+        title: '지역',
+        description: city,
+        onRightArrowClick: () => {},
+      },
+    ],
+    [mbti, keyword, culture, sports, entertainment, job, height, smoking, alcohol, religion, city]
+  );
+
+  return (
+    <Card asChild style={{ marginTop: spacings.sm, marginBottom: spacings.xl }}>
+      <ul>
+        {profileItems.map(({ title, description }) => (
+          <li className={profileItemStyle}>
+            <div className={profileItemLeftStyle}>
+              <Paragraph color="neutral900" typography="st2">
+                {title}
+              </Paragraph>
+              <Paragraph color="neutral600" typography="ca">
+                {description}
+              </Paragraph>
+            </div>
+            <Asset type="icon-right" />
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
 }

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

@@ -1,22 +1,28 @@
-import { Header } from '@/components/header';
-import { Asset } from '@bottlesteam/ui';
-import { ProfileArea } from './ProfileArea';
+import { BasicInformation } from './BasicInformation';
 import { Suspense } from 'react';
 import { myInformationQueryOptions } from '@/store/query/useMyInformation';
 import { getServerSideTokens } from '@/features/server/serverSideTokens';
 import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary';
+import { HeaderArea } from './HeaderArea';
+import { IntroductionArea } from './IntroductionArea';
+import { ProfileArea } from './ProfileArea';
+import { contentsContainerStyle } from './profileEditStyle.css';
 
 export default function ProfileEditPage() {
   const prefetchOptions = myInformationQueryOptions(getServerSideTokens());
 
   return (
     <>
-      <Header>{<Asset type="icon-arrow-left" />}</Header>
-      <Suspense>
-        <ServerFetchBoundary fetchOptions={prefetchOptions}>
-          <ProfileArea />
-        </ServerFetchBoundary>
-      </Suspense>
+      <HeaderArea />
+      <div className={contentsContainerStyle}>
+        <Suspense>
+          <ServerFetchBoundary fetchOptions={prefetchOptions}>
+            <BasicInformation />
+            <IntroductionArea />
+            <ProfileArea />
+          </ServerFetchBoundary>
+        </Suspense>
+      </div>
     </>
   );
 }

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

@@ -0,0 +1,41 @@
+import { HEADER_HEIGHT } from '@/features/steps/stepStyle.css';
+import { colors, radius, spacings, typography } from '@bottlesteam/ui';
+import { style } from '@vanilla-extract/css';
+
+export const contentsContainerStyle = style({
+  width: '100%',
+  height: `calc(100vh - ${HEADER_HEIGHT}px)`,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  overflow: 'scroll',
+  msOverflowStyle: 'none',
+  scrollbarWidth: 'none',
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+});
+
+export const introductionBoxStyle = style({
+  width: '100%',
+  height: 'auto',
+  padding: spacings.md,
+  borderRadius: radius.md,
+  color: colors.neutral900,
+  backgroundColor: colors.purple100,
+  ...typography.bo,
+});
+
+export const profileItemStyle = style({
+  width: '100%',
+  height: '44px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: spacings.xs,
+});
+export const profileItemLeftStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+});

apps/bottle/src/components/card/cardStyle.css.ts

@@ -9,4 +9,5 @@ export const cardStyle = style({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
+  gap: spacings.xl,
 });

apps/bottle/src/components/card/index.tsx

@@ -1,14 +1,17 @@
 import { ComponentProps, ReactNode } from 'react';
 import { cardStyle } from './cardStyle.css';
+import { Slot } from '@radix-ui/react-slot';
 
 export interface CardProps extends ComponentProps<'section'> {
   children: ReactNode;
+  asChild?: boolean;
 }
 
-export function Card({ children, ...rest }: CardProps) {
+export function Card({ children, asChild, ...rest }: CardProps) {
+  const Component = asChild ? Slot : 'section';
   return (
-    <section className={cardStyle} {...rest}>
+    <Component className={cardStyle} {...rest}>
       {children}
-    </section>
+    </Component>
   );
 }

apps/bottle/src/components/header/headerStyle.css.ts

@@ -1,4 +1,5 @@
 import { HEADER_HEIGHT } from '@/features/steps/stepStyle.css';
+import { colors } from '@bottlesteam/ui';
 import { style } from '@vanilla-extract/css';
 
 export const headerStyle = style({
@@ -9,4 +10,5 @@ export const headerStyle = style({
   top: 0,
   display: 'flex',
   alignItems: 'center',
+  backgroundColor: colors.neutral50,
 });

apps/bottle/src/components/profile/index.tsx

@@ -1,17 +1,18 @@
 import { Asset, Paragraph } from '@bottlesteam/ui';
 import { Avatar } from '../avatar';
 import { avatarAreaStyle, editButtonStyle, userInfoAreaStyle, wrapperStyle } from './profileStyle.css';
+import { ComponentProps } from 'react';
 
-interface ProfileProps {
+interface ProfileProps extends ComponentProps<'div'> {
   image: string;
   name: string;
   age: number;
   onEditClick?: () => void;
 }
 
-export function Profile({ image, name, age, onEditClick }: ProfileProps) {
+export function Profile({ image, name, age, onEditClick, ...rest }: ProfileProps) {
   return (
-    <div className={wrapperStyle}>
+    <div className={wrapperStyle} {...rest}>
       {onEditClick != null ? (
         <div className={avatarAreaStyle}>
           <Avatar src={image} size="lg" />

apps/bottle/src/store/query/useProfileQuery.ts

@@ -0,0 +1,13 @@
+import { GET, createInit } from '@/features/server';
+import { Tokens } from '@/features/server/auth';
+import { getClientSideTokens } from '@/features/server/clientSideTokens';
+import { CurrentUser } from '@/models/user';
+import { UseSuspenseQueryOptions, useSuspenseQuery } from '@tanstack/react-query';
+
+export const myInformationQueryOptions = (tokens: Tokens): UseSuspenseQueryOptions<CurrentUser> => ({
+  queryKey: ['profile'],
+  queryFn: () => GET<CurrentUser>(`/api/v1/profile`, tokens, createInit(tokens.accessToken)),
+});
+export function useMyInformationQuery() {
+  return useSuspenseQuery(myInformationQueryOptions(getClientSideTokens()));
+}