Merge branch 'develop' of https://github.com/bodyBudy/bodyBuddy into …

…develop
bodyBudy · Jul 6, 2022 · a5672a3 · a5672a3
2 parents 81f1f3b + 6903314
commit a5672a3
Show file tree

Hide file tree

Showing 24 changed files with 846 additions and 290 deletions.
diff --git a/components/common/button/index.tsx b/components/common/button/index.tsx
@@ -90,20 +90,15 @@ export const TopButton = ({ containerRef }: TopButtonProps) => {
   const button = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
+    if (!containerRef || !button) return;
     const HandleScroll = throttle(() => {
       if (!button.current) return;
       button.current.style.display = containerRef?.current.scrollTop > 100 ? 'block' : 'none';
     }, 300);
 
     const GoToTop = () => containerRef.current.scroll({ top: 0, behavior: 'smooth' });
-
     containerRef.current.addEventListener('scroll', HandleScroll);
     button.current?.addEventListener('click', GoToTop);
-
-    return () => {
-      containerRef.current.removeEventListener('scroll', HandleScroll);
-      button.current?.removeEventListener('click', GoToTop);
-    };
   }, []);
 
   return (

diff --git a/components/common/buttongroup/buttonGroup.d.ts b/components/common/buttongroup/buttonGroup.d.ts
@@ -1,7 +1,35 @@
+interface post {
+  content: string;
+  creationDate: Date;
+  fieldId: string;
+  images: string | string[];
+  title: string;
+  totalComments: number;
+  userId: string;
+}
+
+interface review {
+  content: string;
+  creationDate: Date;
+  isActivation: boolean;
+  rating: number;
+  userId: string;
+  trainerInfo: trainer;
+}
+
+interface trainer {
+  trainerId: string;
+  image: string;
+  name: string;
+  fieldId: string;
+  introduction: string;
+}
+
 interface EditorGroupProps {
   selectedItem: string;
   className: string;
-  leftUrl?: string;
+  EditorURL?: string;
+  lastEdited?: reveiw | post;
   onChangeEditingMode?: Dispatch<SetStateAction<boolean>>;
   onChangeDeleteMode: Dispatch<SetStateAction<boolean>>;
 }
diff --git a/components/common/buttongroup/index.tsx b/components/common/buttongroup/index.tsx
@@ -4,7 +4,8 @@ import { ButtonContainer } from './styledButtonGroup';
 const EditorGroup = ({
   selectedItem,
   className,
-  leftUrl,
+  EditorURL,
+  lastEdited,
   onChangeEditingMode,
   onChangeDeleteMode,
 }: EditorGroupProps) => {
@@ -16,7 +17,13 @@ const EditorGroup = ({
   return (
     <ButtonContainer className={className}>
       {className !== 'comment' ? (
-        <Link href={leftUrl ? leftUrl : '/'}>
+        <Link
+          href={{
+            pathname: EditorURL ? EditorURL : '/',
+            query: { edited: JSON.stringify(lastEdited) },
+          }}
+          as={EditorURL}
+        >
           <a>수정</a>
         </Link>
       ) : (

diff --git a/components/common/profile/index.tsx b/components/common/profile/index.tsx
@@ -0,0 +1,27 @@
+import Image from 'next/image';
+import { ChangeEvent } from 'react';
+import { StyledImageUploader } from './styledProfile';
+
+export const ProfileUploader = ({ profile, setProfile }: ProfileProps) => {
+  const uploadImage = (e: ChangeEvent<HTMLInputElement>) => {
+    e.target.files && setProfile(URL.createObjectURL(e.target.files[0]));
+  };
+
+  return (
+    <StyledImageUploader>
+      <div className={profile ? 'uploaded' : ''}>
+        {profile ? (
+          <>
+            <Image src={profile} alt="프로필" width={'125px'} height={'125px'} />
+            <button onClick={() => setProfile('')}></button>
+          </>
+        ) : (
+          <>
+            <label htmlFor="profile"></label>
+            <input type="file" id="profile" name="file" onChange={uploadImage} />
+          </>
+        )}
+      </div>
+    </StyledImageUploader>
+  );
+};
diff --git a/components/common/profile/profile.d.ts b/components/common/profile/profile.d.ts
@@ -0,0 +1,4 @@
+interface ProfileProps {
+  profile: string;
+  setProfile: Dispatch<SetStateAction<string>>;
+}
diff --git a/components/common/profile/styledProfile.tsx b/components/common/profile/styledProfile.tsx
@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+export const StyledImageUploader = styled.div`
+  margin: 0 auto;
+  width: 125px;
+
+  .uploaded {
+    position: relative;
+  }
+
+  button {
+    position: absolute;
+    right: -10px;
+    top: -10px;
+    width: 25px;
+    height: 25px;
+    background: url('/assets/common/button-delete.svg') no-repeat;
+    cursor: pointer;
+  }
+
+  label {
+    display: inline-block;
+    cursor: pointer;
+    background: center url('/assets/common/profile.svg') no-repeat;
+    width: 125px;
+    height: 125px;
+    border-radius: 50%;
+  }
+
+  input[type='file'] {
+    display: none;
+  }
+`;
diff --git a/components/common/rating/index.tsx b/components/common/rating/index.tsx
@@ -1,53 +1,74 @@
 import styled from '@emotion/styled';
 import Image from 'next/image';
+import { useMemo } from 'react';
 
-interface RatingGroupProps {
-  isEditingMode: boolean;
-  width: number;
-  height: number;
-}
 const RatingGroupContainer = styled.div`
-  display: inline-block;
+  &.edit {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 50%;
+    margin: 0 auto;
+  }
 
   input {
     display: none;
   }
   label {
-    background: url('/assets/common/star.svg') no-repeat;
+    background: url('/assets/common/star-blank.svg') no-repeat;
     background-size: 30px;
     background-position: center;
     width: 40px;
     height: 40px;
     display: inline-block;
     cursor: pointer;
   }
+  & :checked ~ label {
+    background: url('/assets/common/star.svg') no-repeat;
+    background-size: 30px;
+    background-position: center;
+  }
 `;
 
-const RatingGroup = ({ isEditingMode, width, height }: RatingGroupProps) => {
+const RatingGroup = ({ isEditingMode, onChangeRating, star, width, height }: RatingGroupProps) => {
+  const StarFill = useMemo(
+    () =>
+      [1, 2, 3, 4, 5].map((v, index) => (
+        <Image
+          key={index}
+          src={star < v ? '/assets/common/star-blank.svg' : '/assets/common/star.svg'}
+          alt={v + ''}
+          width={width}
+          height={height}
+        />
+      )),
+    [star]
+  );
+
+  const RatingGroup = useMemo(
+    () => (
+      <>
+        {' '}
+        <input type="radio" id="5-stars" name="rating" value="5" />
+        <label htmlFor="5-stars"></label>
+        <input type="radio" id="4-stars" name="rating" value="4" />
+        <label htmlFor="4-stars"></label>
+        <input type="radio" id="3-stars" name="rating" value="3" />
+        <label htmlFor="3-stars"></label>
+        <input type="radio" id="2-stars" name="rating" value="2" />
+        <label htmlFor="2-stars"></label>
+        <input type="radio" id="1-stars" name="rating" value="1" />
+        <label htmlFor="1-stars"></label>
+      </>
+    ),
+    []
+  );
+
   return (
-    <RatingGroupContainer className="rating-container">
-      {isEditingMode ? (
-        <>
-          <input type="radio" id="5-stars" name="rating" value="5" />
-          <label htmlFor="5-stars"></label>
-          <input type="radio" id="4-stars" name="rating" value="4" />
-          <label htmlFor="4-stars"></label>
-          <input type="radio" id="3-stars" name="rating" value="3" />
-          <label htmlFor="3-stars"></label>
-          <input type="radio" id="2-stars" name="rating" value="2" />
-          <label htmlFor="2-stars"></label>
-          <input type="radio" id="1-stars" name="rating" value="1" />
-          <label htmlFor="1-stars"></label>
-        </>
-      ) : (
-        <>
-          <Image src="/assets/common/star.svg" alt="1" width={width} height={height} />
-          <Image src="/assets/common/star.svg" alt="2" width={width} height={height} />
-          <Image src="/assets/common/star.svg" alt="3" width={width} height={height} />
-          <Image src="/assets/common/star.svg" alt="3" width={width} height={height} />
-          <Image src="/assets/common/star-blank.svg" alt="5" width={width} height={height} />
-        </>
-      )}
+    <RatingGroupContainer
+      className={isEditingMode ? 'edit' : 'none'}
+      onChange={(e) => onChangeRating(e)}
+    >
+      {isEditingMode ? <>{RatingGroup}</> : <>{StarFill}</>}
     </RatingGroupContainer>
   );
 };

diff --git a/components/common/rating/rating.d.ts b/components/common/rating/rating.d.ts
@@ -0,0 +1,7 @@
+interface RatingGroupProps {
+  isEditingMode: boolean;
+  onChangeRating?: ChangeEvent<HTMLInputElement>;
+  star?: number;
+  width: number;
+  height: number;
+}
diff --git a/components/common/uploader/index.tsx b/components/common/uploader/index.tsx
@@ -1,9 +1,7 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent } from 'react';
 import { StyledImageUploader } from './styledUploader';
 
-export const ImageUploader = () => {
-  const [url, setImageUrl] = useState<string[]>(['', '', '']);
-
+export const ImageUploader = ({ url, setImageUrl }: ImageUploaderProps) => {
   const uploadImage = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files === null) return;
     const tempUrl = URL.createObjectURL(e.target.files[0]);

diff --git a/components/common/uploader/uploader.d.ts b/components/common/uploader/uploader.d.ts
@@ -0,0 +1,4 @@
+interface ImageUploaderProps {
+  url: string[];
+  setImageUrl: Dispatch<SetStateAction<string[]>>;
+}