Feat: #136 회원가입 (온보딩) 리팩토링 (#137)

Kernel360 · May 10, 2024 · e64a4bc · e64a4bc
1 parent 74b49a0
commit e64a4bc
Show file tree

Hide file tree

Showing 30 changed files with 632 additions and 237 deletions.
diff --git a/assets/images/loadingLogo.png b/assets/images/loadingLogo.png
diff --git a/src/app/_components/buttons/Button.tsx b/src/app/_components/buttons/Button.tsx
@@ -6,6 +6,7 @@ interface ButtonProps {
   submit?: boolean;
   outline?: boolean;
   disabled?: boolean;
+  weight?: string;
   onClick?: () => void;
 }
 
@@ -16,10 +17,12 @@ function Button({
   submit,
   outline,
   disabled,
+  weight,
 }: ButtonProps) {
-  const buttonClassName = clsx('w-full rounded-xl h-12', {
+  const buttonClassName = clsx(`w-full rounded-xl h-12 font-${weight}`, {
     [`border-2 border-${color} text-${color}`]: outline,
-    [`bg-${color} border-none text-white`]: !outline,
+    [`bg-${color} border-none text-white`]: !outline && !disabled,
+    [`border-none text-white`]: !outline && disabled,
     'disabled:pointer-events-none bg-disabled': disabled,
   });
 

diff --git a/src/app/_components/common/Header.tsx b/src/app/_components/common/Header.tsx
@@ -19,7 +19,6 @@ import {
   Plus,
 } from 'lucide-react';
 import { usePostsState } from '@/store/community/postsStore';
-import { MODAL } from '@/constants/ui/common/modal';
 import { useDebouncedCallback } from 'use-debounce';
 import { useToast } from '@/app/_components/ui/use-toast';
 import { COLOR } from '@/styles/color';
@@ -34,6 +33,7 @@ function Header({ ...props }: Partial<HeaderProps>) {
     onEdit,
     onExit,
     onSearch,
+    onBack,
     routeTo,
   } = props;
   const { toast } = useToast();
@@ -77,7 +77,7 @@ function Header({ ...props }: Partial<HeaderProps>) {
     <header className="sticky top-0 flex items-center justify-center h-12 bg-white z-10 relative">
       <button
         type="button"
-        onClick={onBackHandler}
+        onClick={onBack || onBackHandler}
         className={buttonClassName(isBack)}
       >
         {isBack && <ChevronLeft />}

diff --git a/src/app/_components/common/Tabs.tsx b/src/app/_components/common/Tabs.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import clsx from 'clsx';
-import TABS from '@/constants/community/tabs';
-import { usePostsState } from '@/store/community/postsStore';
+import { TabsProps } from '@/types/common/tabs';
 
-function Tabs() {
-  const { categoryId, setCategoryId } = usePostsState();
+function Tabs({ tabs, useStateHook }: TabsProps) {
+  const { categoryId, setCategoryId } = useStateHook();
 
   const liClassName = (id: number) => {
     return clsx('flex rounded-xl transition duration-500 ease-in-out', {
@@ -25,7 +24,7 @@ function Tabs() {
 
   return (
     <ul className="grid grid-cols-3 h-10 mx-4 bg-grey-100 rounded-xl">
-      {Object.values(TABS).map(tab => (
+      {Object.values(tabs).map(tab => (
         <li key={tab.title} className={liClassName(tab.id)}>
           <button
             type="button"

diff --git a/src/app/_components/common/UserProfileImage.tsx b/src/app/_components/common/UserProfileImage.tsx
@@ -0,0 +1,97 @@
+import Image from 'next/image';
+import * as D from '@/app/_components/ui/dropdown-menu';
+import defaultImage from '$/images/defaultUserProfile.jpg';
+
+import { Camera } from 'lucide-react';
+import { COLOR } from '@/styles/color';
+import { useRef } from 'react';
+import { UserProfileImageProps } from '@/types/common/profileImage';
+import { getFormData } from '@/utils/getFormData';
+
+function UserProfileImage({ ...props }: UserProfileImageProps) {
+  const { profileImage, setProfileImage } = props;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleChangeButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  // 프로필 이미지를 특정 이미지로 변경 핸들러 함수 (기본 이미지 => 특정 이미지)
+  const handleProfileImageChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const { files } = event.target;
+
+    if (files) {
+      const targetImage = files[0];
+      setProfileImage(targetImage);
+
+      // 더미 값 설정
+      event.target.value = '';
+    }
+  };
+
+  // 프로필 이미지를 기본 이미지로 변경 핸들러 함수 (특정 이미지 => 기본 이미지)
+  const handleChangeDefaultImage = () => {
+    setProfileImage(defaultImage);
+  };
+
+  const isDefaultImage = profileImage === defaultImage;
+
+  return (
+    <div className="flex justify-center mt-16">
+      <div className="w-24 h-24 relative">
+        <Image
+          src={
+            isDefaultImage
+              ? profileImage
+              : URL.createObjectURL(profileImage as File)
+          }
+          alt="프로필 이미지"
+          priority
+          fill
+          className="rounded-full"
+        />
+
+        <label
+          htmlFor="userProfileImage"
+          className="flex justify-center items-center w-9 h-9 absolute right-0 bottom-0 bg-primary rounded-full cursor-pointer border-4 border-white"
+        >
+          <D.DropdownMenu>
+            <D.DropdownMenuTrigger>
+              <Camera
+                size={20}
+                stroke={COLOR.primary}
+                strokeWidth={1.5}
+                fill={COLOR.white}
+              />
+            </D.DropdownMenuTrigger>
+            <D.DropdownMenuContent className="bg-white">
+              <D.DropdownMenuLabel className="text-grey-600 text-xs boder-b border-b-2">
+                프로필 이미지 변경
+              </D.DropdownMenuLabel>
+              <D.DropdownMenuSeparator />
+              <D.DropdownMenuItem onClick={handleChangeButtonClick}>
+                프로필 이미지 변경하기
+              </D.DropdownMenuItem>
+              <D.DropdownMenuItem onClick={handleChangeDefaultImage}>
+                기본 이미지로 변경
+              </D.DropdownMenuItem>
+            </D.DropdownMenuContent>
+          </D.DropdownMenu>
+        </label>
+      </div>
+
+      <input
+        type="file"
+        id="userProfileImage"
+        accept="image/*"
+        onChange={handleProfileImageChange}
+        className="hidden"
+        ref={fileInputRef}
+      />
+    </div>
+  );
+}
+
+export default UserProfileImage;
diff --git a/src/app/service/community/_components/PostForm.tsx b/src/app/service/community/_components/PostForm.tsx
@@ -63,16 +63,13 @@ function PostForm({ ...props }: FormType) {
   });
 
   const onSubmit = useDebouncedCallback(async (data: FormSchemaType) => {
-    console.log(isPost);
-
     if (isPost && setIsSheetOpen) {
       const formData = getFormData({
         jsonData: JSON.stringify(data),
         images: newImages,
       });
 
       const message = await post(formData);
-      console.log(message);
 
       await mutate();
       setIsSheetOpen(false);

diff --git a/src/app/sign-in/kakao/page.tsx b/src/app/sign-in/kakao/page.tsx
@@ -43,10 +43,20 @@ function Page() {
         case STATUS_CODE.ok:
           router.push(service + map);
           setId(response.data.id);
+          toast({
+            variant: 'default',
+            description: response?.message || SIGN_UP_ERROR_MESSAGES.default,
+            duration: 2000,
+          });
           break;
 
         case invalidEmail:
           router.push(home);
+          toast({
+            variant: 'default',
+            description: response?.message || SIGN_UP_ERROR_MESSAGES.default,
+            duration: 2000,
+          });
           break;
 
         case noAccount:
@@ -68,18 +78,17 @@ function Page() {
 
         case haveAnotherAccount:
           router.push(home);
+          toast({
+            variant: 'default',
+            description: response?.message || SIGN_UP_ERROR_MESSAGES.default,
+            duration: 2000,
+          });
           break;
 
         default:
           router.push(home);
           break;
       }
-
-      toast({
-        variant: 'default',
-        description: response?.message || SIGN_UP_ERROR_MESSAGES.default,
-        duration: 2000,
-      });
     };
 
     signIn();

diff --git a/src/app/sign-up/_components/Banner.tsx b/src/app/sign-up/_components/Banner.tsx
diff --git a/src/app/sign-up/_components/ProgressBar.tsx b/src/app/sign-up/_components/ProgressBar.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+function ProgressBar({ currentStep }: { currentStep: number }) {
+  const isLastStep = currentStep === 2;
+
+  const leftBarClassName = clsx(
+    'w-1/2 transition-all duration-500 bg-primary',
+    isLastStep && 'w-full bg-primary',
+  );
+
+  return (
+    <div className="flex h-[6px]">
+      <div className={leftBarClassName}></div>
+      {!isLastStep && <div className="w-1/2 bg-grey-100" />}
+    </div>
+  );
+}
+
+export default ProgressBar;