Merge pull request #141 from prgrms-web-devcourse-final-project/feature/

#59

feat: ProfileRegistrationForm 컴포넌트 개발

src/components/atoms/Button/IconButton/styled.ts

@@ -2,9 +2,14 @@ import styled from "@emotion/styled";
 import { IIconButtonProps } from ".";
 
 export const IconButtonWrapper: ReturnType<
-  typeof styled.div<IIconButtonProps>
-> = styled.div<IIconButtonProps>`
-  width: fit-content;
+  typeof styled.button<IIconButtonProps>
+> = styled.button<IIconButtonProps>`
+  // 버튼 스타일 초기화
+  outline: none;
+  border: none;
+
+  //
+  //width: fit-content;
 
   display: flex;
   justify-content: center;

src/components/atoms/Button/TextButton/styled.ts

@@ -3,8 +3,13 @@ import { css } from "@emotion/react";
 import { ITextButtonProps } from ".";
 
 export const TextButtonWrapper: ReturnType<
-  typeof styled.div<ITextButtonProps>
-> = styled.div<ITextButtonProps>`
+  typeof styled.button<ITextButtonProps>
+> = styled.button<ITextButtonProps>`
+  // 버튼 스타일 초기화
+  outline: none;
+  border: none;
+
+  //
   display: inline-flex;
   align-items: center;
   justify-content: center;

src/components/atoms/Icon/styled.ts

@@ -16,5 +16,6 @@ export const IconSizes = {
  */
 export const IconWrapper: ReturnType<typeof styled.i<IIconProps>> =
   styled.i<IIconProps>`
+    line-height: 0;
     font-size: ${(props) => IconSizes[props.size!]};
   `;

src/components/organisms/ProfileRegistrationForm/index.tsx

@@ -0,0 +1,74 @@
+import { Controller, useForm } from "react-hook-form";
+import { Image, ImageUpload, Text, TextButton } from "components/atoms";
+import { LabeledInput } from "components/molecules";
+import type { IUser } from "types";
+import { ProfileImageWrapper, ProfileRegistrationFormWrapper } from "./styled";
+
+interface IProfileRegistrationFormProps {
+  /** Submit 이벤트 발생 시 실행할 함수 */
+  onSubmit: (data: IUser) => void;
+  /** User 정보 (가입 => undefined, 프로필 수정 => 로그인한 유저) */
+  user?: IUser;
+}
+
+export const ProfileRegistrationForm = ({
+  onSubmit,
+  user,
+}: IProfileRegistrationFormProps) => {
+  const { control, handleSubmit, setValue } = useForm<IUser>({
+    mode: "onChange",
+    defaultValues: {
+      nickname: user?.nickname || "",
+      profile: user?.profile,
+    },
+  });
+  return (
+    <ProfileRegistrationFormWrapper onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name="profile"
+        control={control}
+        render={({ field: { value } }) => (
+          <ProfileImageWrapper>
+            <Image type="round" url={value} alt="유저 프로필 사진" />
+            <ImageUpload
+              onFileChange={(file) =>
+                setValue("profile", URL.createObjectURL(file))
+              }
+            />
+          </ProfileImageWrapper>
+        )}
+      />
+      <Controller
+        name="nickname"
+        control={control}
+        rules={{
+          required: "닉네임은 필수 입력 항목입니다.",
+        }}
+        render={({ field: { value }, fieldState: { invalid }, formState }) => (
+          <>
+            <LabeledInput
+              id="profile-nickname"
+              label="닉네임"
+              value={value}
+              setValue={(value) => {
+                setValue("nickname", value);
+              }}
+              placeholder="닉네임을 입력해주세요."
+            />
+            {invalid && (
+              <Text
+                variant="button"
+                content={formState.errors.nickname?.message || ""}
+              />
+            )}
+          </>
+        )}
+      />
+      <TextButton
+        size="l"
+        text="등록 완료"
+        onClick={() => handleSubmit(onSubmit)}
+      />
+    </ProfileRegistrationFormWrapper>
+  );
+};

src/components/organisms/ProfileRegistrationForm/stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProfileRegistrationForm } from ".";
+
+const meta: Meta<typeof ProfileRegistrationForm> = {
+  title: "Organisms/ProfileRegistrationForm",
+  component: ProfileRegistrationForm,
+  tags: ["autodocs"],
+  decorators: (story) => (
+    <div style={{ width: "375px", height: "680px", padding: "1rem 0" }}>
+      {story()}
+    </div>
+  ),
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "유저 정보가 없는 상태의 Form입니다.",
+      },
+    },
+  },
+  args: {
+    onSubmit: (data) => {
+      console.log("onSubmit");
+      console.log(data);
+    },
+  },
+};
+
+export const HasUser: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "유저 정보가 있는 상태의 Form입니다.",
+      },
+    },
+  },
+  args: {
+    user: {
+      id: "1",
+      nickname: "ppyom",
+      profile: "https://github.com/ppyom.png",
+    },
+    onSubmit: (data) => {
+      console.log("onSubmit");
+      console.log(data);
+    },
+  },
+};
+
+export default meta;

src/components/organisms/ProfileRegistrationForm/styled.ts

@@ -0,0 +1,38 @@
+import styled from "@emotion/styled";
+import { ImageUploadWrapper } from "components/atoms/ImageUpload/styled";
+import { InputWrapper } from "components/atoms/Input/styled";
+import { TextButtonWrapper } from "components/atoms/Button/TextButton/styled";
+import { LabeledInputWrapper } from "components/molecules/LabeledInput/styled";
+
+export const ProfileImageWrapper: ReturnType<typeof styled.div> = styled.div`
+  max-width: 200px;
+  width: calc(100% - 2rem);
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  ${ImageUploadWrapper} {
+    position: absolute;
+    top: 0;
+  }
+`;
+
+export const ProfileRegistrationFormWrapper: ReturnType<typeof styled.form> =
+  styled.form`
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    ${LabeledInputWrapper} {
+      flex: 1;
+      justify-content: start;
+      width: calc(100% - 2rem);
+      ${InputWrapper} {
+        width: 100%;
+      }
+    }
+    ${TextButtonWrapper} {
+      width: calc(100% - 2rem);
+    }
+  `;

src/types/index.ts

@@ -4,3 +4,4 @@ export * from "./map";
 export * from "./selectOption";
 export * from "./navMenu";
 export * from "./notification";
+export * from "./user";

src/types/user.d.ts

@@ -0,0 +1,5 @@
+export interface IUser {
+  id: string;
+  nickname: string;
+  profile: string | undefined;
+}