feat(마이페이지): 내 정보 조회 및 수정 페이지 UI 통일 (#60)

Author: CreatiCoding

frontend/.vscode/settings.json

@@ -9,5 +9,8 @@
   "editor.defaultFormatter": "biomejs.biome",
   "editor.codeActionsOnSave": {
     "quickfix.biome": "explicit"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

frontend/packages/ui/src/components/Input/Input.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
 import { Input } from './Input';
 
 const meta = {
@@ -11,9 +10,10 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {},
   args: {
-    onClickSearch: fn(),
-    type: 'search',
-    placeholder: '검색어를 입력하세요',
+    id: 'nickname',
+    type: 'text',
+    placeholder: '크레코',
+    label: '닉네임',
   },
 } satisfies Meta<typeof Input>;
 

frontend/packages/ui/src/components/Input/Input.tsx

@@ -1,42 +1,28 @@
-'use client';
-
 import { cn } from '@ui/lib/utils';
-import React, { useState } from 'react';
-import { Icon } from '../Icon';
+import React from 'react';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  onClickSearch?: (value: string) => void;
-}
+const labelStyle = "font-['Roboto'] font-normal block text-left text-[14px] leading-[22px]";
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, onClickSearch, ...props }, ref) => {
-    const [value, setValue] = useState<string>('');
+const inputStyle =
+  'w-full box-border flex-row align-center p-[13px] gap-[10px] bg-[#FFFFFF] border-[1px] border-[#C6C6C6] rounded-[20px]';
 
-    if (type === 'search') {
-      props.placeholder = '검색어를 입력하세요';
-    }
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+  type?: string;
+  label?: string;
+  className?: string;
+  inputClassName?: string;
+}
 
+export const Input = React.forwardRef<HTMLInputElement, Props>(
+  (
+    { id, type, className, disabled, required, defaultValue, label, placeholder, inputClassName = '', ...props }: Props,
+    ref,
+  ) => {
     return (
-      <div className="relative" style={{ width: props.width ? `${props.width}px` : '200px' }}>
-        <input
-          ref={ref}
-          type={type}
-          className={cn(
-            'flex h-[44px] w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 pr-[44px]',
-            className,
-          )}
-          onChange={(e) => setValue(e.target.value)}
-          value={value}
-          {...props}
-        />
-        {type === 'search' ? (
-          <Icon
-            name="search"
-            className="absolute top-0 right-0 mr-4 mt-[10px]"
-            onClick={() => onClickSearch?.(value)}
-          />
-        ) : null}
-      </div>
+      <p className={cn(className, 'mb-[15px]')}>
+        {label && <label className={labelStyle}>{label}</label>}
+        <input ref={ref} id={id} className={cn(inputStyle, inputClassName)} type={type} {...props} />
+      </p>
     );
   },
 );

frontend/packages/ui/src/components/Input/SearchInput.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { SearchInput } from './SearchInput';
+
+const meta = {
+  title: 'Zicdding-UI/SearchInput',
+  component: SearchInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    onClickSearch: fn(),
+    type: 'search',
+    placeholder: '검색어를 입력하세요',
+  },
+} satisfies Meta<typeof SearchInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

frontend/packages/ui/src/components/Input/SearchInput.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { cn } from '@ui/lib/utils';
+import React, { useState } from 'react';
+import { Icon } from '../Icon';
+
+export interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  onClickSearch?: (value: string) => void;
+}
+
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ className, onClickSearch, ...props }, ref) => {
+    const [value, setValue] = useState<string>('');
+
+    return (
+      <div className="relative" style={{ width: props.width ? `${props.width}px` : '200px' }}>
+        <input
+          ref={ref}
+          type="search"
+          className={cn(
+            'flex h-[44px] w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 pr-[44px]',
+            className,
+          )}
+          onChange={(e) => setValue(e.target.value)}
+          value={value}
+          placeholder="검색어를 입력하세요"
+          {...props}
+        />
+        <Icon name="search" className="absolute top-0 right-0 mr-4 mt-[10px]" onClick={() => onClickSearch?.(value)} />
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = 'SearchInput';

frontend/packages/ui/src/components/Input/index.ts

@@ -1 +1,2 @@
+export { SearchInput } from './SearchInput';
 export { Input } from './Input';

frontend/packages/ui/src/index.ts

@@ -1,5 +1,5 @@
 export * from './components/Button/Button';
-export * from './components/Input/Input';
+export * from './components/Input/SearchInput';
 export * from './components/Typography/Typography';
 export * from './components/Calendar/Calendar';
 export * from './components/Card/Card';

frontend/zicdding-class.com/app/(test)/test/input/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Input } from '@zicdding-web/ui/Input';
+import { SearchInput } from '@zicdding-web/ui/Input';
 import { useState } from 'react';
 
 export default function TestPage() {
@@ -10,7 +10,7 @@ export default function TestPage() {
       <h1>테스트 페이지</h1>
       <div>
         입력된 값: {value}
-        <Input width="200" type="search" value={value} onChange={(e) => setValue(e.target.value)} />
+        <SearchInput width="200" type="search" value={value} onChange={(e: any) => setValue(e.target.value)} />
       </div>
     </>
   );

frontend/zicdding-class.com/app/(user)/my/_components/MyInfo.tsx

@@ -1,84 +1,101 @@
 'use client';
 
 import { useUser } from '@/app/_hooks';
+import { Button } from '@zicdding-web/ui';
+import { Input } from '@zicdding-web/ui/Input';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 
-export function MyInfo() {
-  const { user, isLogged } = useUser();
+export function MyInfo({ mode }: { mode: 'view' | 'modify' }) {
   const router = useRouter();
+  const { user } = useUser();
+  const { register, setValue } = useForm<{
+    nickname: string;
+    email: string;
+    password: string;
+    phoneNumber: string;
+  }>();
 
   useEffect(() => {
-    if (!isLogged) {
-      router.push('/login');
+    if (user == null) {
+      return;
     }
-  }, [isLogged, router]);
+
+    setValue('nickname', user.nickname);
+    setValue('email', user.email);
+    setValue('phoneNumber', user.phone_num);
+  }, [user, setValue]);
 
   return (
     <div className="space-y-4 w-[420px] mx-auto my-0">
-      <div className="grid grid-cols-2 gap-4 items-center">
-        <label htmlFor="nickname" className="text-gray-700 font-bold">
-          닉네임
-        </label>
-        <input
-          id="nickname"
-          type="text"
-          value={user?.nickname || ''}
-          readOnly
-          className="form-input w-full border-gray-300"
-        />
-      </div>
+      <div className="w-[200px] flex justify-center ml-auto mr-auto mb-8 flex-col">
+        <img src="/my/default-profile.png" alt="Profile" width="205" className="bg-gray-200 mb-10" />
 
-      <div className="grid grid-cols-2 gap-4 items-center">
-        <label htmlFor="email" className="text-gray-700 font-bold">
-          Email
-        </label>
-        <input
-          id="email"
-          type="email"
-          value={user?.email || ''}
-          readOnly
-          className="form-input w-full border-gray-300"
-        />
+        <Button className="w-full rounded-[20px]" onClick={() => alert('업로드 버튼이 눌렸습니다.')}>
+          업로드
+        </Button>
       </div>
 
-      <div className="grid grid-cols-2 gap-4 items-center">
-        <label htmlFor="password" className="text-gray-700 font-bold">
-          비밀번호
-        </label>
-        <input
-          id="password"
-          type="password"
-          value={isLogged ? '********' : ''}
-          readOnly
-          className="form-input w-full border-gray-300"
-        />
-      </div>
+      <Input
+        id="nickname"
+        label="닉네임"
+        disabled={mode === 'view'}
+        required={true}
+        inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : 'bg-[#F4F4F4] text-[#959595]'}
+        {...register('nickname')}
+      />
 
-      <div className="grid grid-cols-2 gap-4 items-center">
-        <label htmlFor="phoneNumber" className="text-gray-700 font-bold">
-          전화번호
-        </label>
-        <input
-          id="phoneNumber"
-          type="tel"
-          value={user?.phone_num || ''}
-          readOnly
-          className="form-input w-full border-gray-300"
-        />
-      </div>
+      <Input
+        label="Email"
+        id="email"
+        type="email"
+        disabled={true}
+        inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : ''}
+        {...register('email')}
+      />
 
-      <div className="h-[80px]">{}</div>
+      <Input
+        defaultValue="**********"
+        label="비밀번호"
+        id="password"
+        type="password"
+        disabled={true}
+        inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : ''}
+        {...register('password')}
+      />
 
-      <div className="flex justify-center ">
-        <button
-          type="button"
-          className="bg-black text-white py-2 px-4 rounded font-bold text-lg w-[200px]"
-          onClick={() => router.push('/my/modify')}
+      <Input
+        label="전화번호"
+        id="phoneNumber"
+        type="tel"
+        disabled={mode === 'view'}
+        {...register('phoneNumber')}
+        inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : 'bg-[#F4F4F4]'}
+        placeholder="010-0000-0000"
+      />
+
+      <div className="mb-20 w-full h-1" />
+
+      {mode === 'modify' ? (
+        <div className="flex justify-evenly">
+          <Button className="w-full mr-8 rounded-[20px]" onClick={() => alert('수정 버튼이 눌려졌습니다.')}>
+            수정하기
+          </Button>
+          <Button className="w-full rounded-[20px]" onClick={() => router.back()}>
+            취소
+          </Button>
+        </div>
+      ) : (
+        <Button
+          className="w-full rounded-[20px]"
+          onClick={() => {
+            router.push('/my/modify');
+          }}
         >
           개인정보 수정
-        </button>
-      </div>
+        </Button>
+      )}
     </div>
   );
 }