Issue164 리뷰 이미지 업로드 기능 추가

src/api/image/sendImageUploadPostRequest.ts

@@ -0,0 +1,35 @@
+import { AxiosResponse } from "axios";
+
+import { ACCESS_TOKEN, ENDPOINTS } from "constants/api";
+
+import axiosInstance from "api/axiosInstance";
+
+interface ImageUploadResponse {
+  imageUrl: string;
+}
+
+const sendImageUploadPostRequest = async (imageFile: File) => {
+  const accessToken = window.sessionStorage.getItem(ACCESS_TOKEN);
+
+  if (!accessToken) {
+    window.sessionStorage.removeItem(ACCESS_TOKEN);
+    window.alert("다시 로그인 해주세요");
+    window.location.reload();
+    throw new Error("엑세스토큰이 유효하지 않습니다");
+  }
+
+  const response: AxiosResponse<ImageUploadResponse> = await axiosInstance.post(
+    ENDPOINTS.IMAGE_UPLOAD,
+    imageFile,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "multipart/form-data",
+      },
+    }
+  );
+
+  return response.data;
+};
+
+export default sendImageUploadPostRequest;

src/asset/index.ts

@@ -2,3 +2,4 @@ export { ReactComponent as CloseIcon } from "./close-icon.svg";
 export { ReactComponent as LogoLight } from "./logo-light.svg";
 export { ReactComponent as PlusIcon } from "./plus-icon.svg";
 export { ReactComponent as SearchIcon } from "./search-icon.svg";
+export { ReactComponent as ImageIcon } from "./image-icon.svg";

src/components/common/ImageUploadInput/ImageUploadInput.style.ts

@@ -0,0 +1,73 @@
+import styled, { css } from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacer.spacing2};
+`;
+
+export const InputWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${({ theme }) => theme.spacer.spacing2};
+`;
+
+export const Input = styled.input`
+  display: none;
+`;
+
+export const UploadedImageWrapper = styled.div`
+  position: relative;
+  height: 10rem;
+`;
+
+export const UploadedImage = styled.img`
+  width: 10rem;
+  height: 10rem;
+  object-fit: cover;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+`;
+
+export const DeleteButton = styled.button`
+  position: absolute;
+  right: 0;
+  width: 3.6rem;
+  height: 3.6rem;
+  border-radius: 0;
+  background-color: ${({ theme }) => theme.color.black};
+  border: none;
+  border-top-right-radius: ${({ theme }) => theme.borderRadius.small};
+  outline: 0;
+  transition: all 0.2s ease-in;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.gray800};
+  }
+
+  & svg {
+    width: 12px;
+    height: 12px;
+
+    & > path {
+      stroke: ${({ theme }) => theme.color.white};
+    }
+  }
+`;
+
+export const uploadButtonStyle = css`
+  height: 10rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacer.spacing2};
+
+  font-weight: normal;
+
+  transition-property: background-color, border, outline !important;
+
+  &.uploaded {
+    display: none;
+  }
+`;

src/components/common/ImageUploadInput/ImageUploadInput.tsx

@@ -0,0 +1,65 @@
+import { Button } from "../Button/Button.style";
+import { Label } from "../Label/Label.style";
+import * as S from "./ImageUploadInput.style";
+import { useRef } from "react";
+
+import { CloseIcon, ImageIcon } from "asset";
+
+interface ImageUploadInputProps {
+  label?: string;
+  imageUrl: string | null;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onRemove: () => void;
+}
+function ImageUploadInput({
+  label,
+  imageUrl,
+  onChange,
+  onRemove,
+}: ImageUploadInputProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleUploadButton = () => {
+    if (!inputRef.current) return;
+
+    inputRef.current.click();
+  };
+
+  return (
+    <S.Container>
+      {label && <Label id="image-upload">{label}</Label>}
+      <S.InputWrapper>
+        <Button
+          css={S.uploadButtonStyle}
+          type="button"
+          className={imageUrl ? "uploaded" : ""}
+          onClick={handleUploadButton}
+        >
+          <ImageIcon />
+          {!imageUrl && " 이미지를 업로드해 주세요"}
+        </Button>
+        <S.Input
+          type="file"
+          accept="image/*"
+          id="image-upload"
+          name="image-upload"
+          ref={inputRef}
+          onChange={onChange}
+        />
+        {imageUrl && (
+          <S.UploadedImageWrapper>
+            <S.UploadedImage src={imageUrl} alt="리뷰 이미지" />
+            <S.DeleteButton
+              type="button"
+              aria-label="이미지 삭제"
+              onClick={onRemove}
+            >
+              <CloseIcon />
+            </S.DeleteButton>
+          </S.UploadedImageWrapper>
+        )}
+      </S.InputWrapper>
+    </S.Container>
+  );
+}
+export default ImageUploadInput;

src/components/common/Star/Star.style.tsx

@@ -5,20 +5,20 @@ import styled, { css } from "styled-components";
 const getSizeStyling = (size: Required<StarProps>["size"]) => {
   const style = {
     lg: css`
-      width: "32px";
-      height: "32px";
+      width: 32px;
+      height: 32px;
     `,
     md: css`
-      width: "24px";
-      height: "24px";
+      width: 24px;
+      height: 24px;
     `,
     sm: css`
-      width: "20px";
-      height: "20px";
+      width: 20px;
+      height: 20px;
     `,
     xs: css`
-      width: "16px";
-      height: "16px";
+      width: 16px;
+      height: 16px;
     `,
   };
 

src/components/pages/StoreDetailPage/ReviewInputBottomSheet/ReviewInputBottomSheet.tsx

@@ -7,12 +7,14 @@ import { NETWORK } from "constants/api";
 import { MESSAGES } from "constants/messages";
 import { INPUT_MAX_LENGTH } from "constants/rules";
 
+import { useImageUpload } from "hooks/useImageUpload";
 import useLogin from "hooks/useLogin";
 
 import sendReviewPostRequest from "api/review/sendReviewPostRequest";
 
 import BottomSheet from "components/common/BottomSheet/BottomSheet";
 import Button from "components/common/Button/Button";
+import ImageUploadInput from "components/common/ImageUploadInput/ImageUploadInput";
 import Input from "components/common/Input/Input";
 import Label from "components/common/Label/Label";
 import StarRating from "components/common/StarRating/StarRating";
@@ -36,6 +38,8 @@ function ReviewInputBottomSheet({
   const [rating, setRating] = useState(DEFAULT_RATING);
   const [reviewContent, setReviewContent] = useState("");
   const [menuInput, setMenuInput] = useState("");
+  const { uploadedImageUrl, handleImageUpload, handleImageRemoval } =
+    useImageUpload();
 
   const { logout } = useLogin();
 
@@ -45,6 +49,7 @@ function ReviewInputBottomSheet({
       content: reviewContent,
       rating: rating + 1,
       menu: menuInput,
+      imageUrl: uploadedImageUrl,
     });
     closeSheet();
   };
@@ -121,6 +126,12 @@ function ReviewInputBottomSheet({
           maxLength={255}
           required
         />
+        <ImageUploadInput
+          label="이미지 업로드"
+          imageUrl={uploadedImageUrl}
+          onChange={handleImageUpload}
+          onRemove={handleImageRemoval}
+        />
         <Button variant="primary">제출</Button>
       </S.Form>
     </BottomSheet>

src/components/pages/StoreDetailPage/ReviewUpdateBottomSheet/ReviewUpdateBottomSheet.tsx

@@ -7,12 +7,14 @@ import { NETWORK } from "constants/api";
 import { MESSAGES } from "constants/messages";
 import { INPUT_MAX_LENGTH } from "constants/rules";
 
+import { useImageUpload } from "hooks/useImageUpload";
 import useLogin from "hooks/useLogin";
 
 import sendReviewItem from "api/review/sendReviewItem";
 
 import BottomSheet from "components/common/BottomSheet/BottomSheet";
 import Button from "components/common/Button/Button";
+import ImageUploadInput from "components/common/ImageUploadInput/ImageUploadInput";
 import Input from "components/common/Input/Input";
 import Label from "components/common/Label/Label";
 import StarRating from "components/common/StarRating/StarRating";
@@ -28,6 +30,7 @@ interface ReviewUpdateBottomSheetProps {
     menu: string;
     restaurantId: string;
     id: string;
+    imageUrl: string | null;
   };
   onSuccess: () => void;
 }
@@ -42,6 +45,8 @@ function ReviewUpdateBottomSheet({
     defaultReviewItem.content
   );
   const [menu, setMenu] = useState<string>(defaultReviewItem.menu);
+  const { uploadedImageUrl, handleImageUpload, handleImageRemoval } =
+    useImageUpload(defaultReviewItem.imageUrl);
 
   const { logout } = useLogin();
 
@@ -51,6 +56,7 @@ function ReviewUpdateBottomSheet({
       content: reviewContent,
       rating: rating + 1,
       menu: menu,
+      imageUrl: uploadedImageUrl,
     });
     closeSheet();
   };
@@ -133,6 +139,12 @@ function ReviewUpdateBottomSheet({
           maxLength={255}
           required
         />
+        <ImageUploadInput
+          label="이미지 업로드"
+          imageUrl={uploadedImageUrl}
+          onChange={handleImageUpload}
+          onRemove={handleImageRemoval}
+        />
         <Button variant="primary">제출</Button>
       </S.Form>
     </BottomSheet>

src/components/pages/StoreDetailPage/StoreDetailPage.tsx

@@ -94,7 +94,15 @@ function StoreDetailPage() {
               )}
               {reviews.length ? (
                 reviews.map(
-                  ({ id, author, rating, content, menu, updatable }) => (
+                  ({
+                    id,
+                    author,
+                    rating,
+                    content,
+                    menu,
+                    imageUrl,
+                    updatable,
+                  }) => (
                     <Fragment key={id}>
                       <StoreReviewItem
                         reviewInfo={{
@@ -104,6 +112,7 @@ function StoreDetailPage() {
                           rating,
                           content,
                           menu,
+                          imageUrl,
                           updatable,
                         }}
                       />

src/components/pages/StoreDetailPage/StoreReviewItem/StoreReviewItem.style.tsx

@@ -45,6 +45,7 @@ export const UserReviewInfoWrapper = styled.div`
 export const ReviewBottom = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   gap: ${({ theme }) => theme.spacer.spacing3};
 `;
 
@@ -75,6 +76,11 @@ export const DropBoxButton = styled.button`
   }
 `;
 
+export const ReviewImage = styled.img`
+  height: 10rem;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+`;
+
 export const titleTextStyle = css`
   font-weight: 600;
 `;

src/components/pages/StoreDetailPage/StoreReviewItem/StoreReviewItem.tsx

@@ -30,7 +30,7 @@ function StoreReviewItem({ reviewInfo }: { reviewInfo: ReviewInfo }) {
 
   const queryClient = useQueryClient();
 
-  const { author, rating, content, menu } = reviewInfo;
+  const { author, rating, content, menu, imageUrl } = reviewInfo;
 
   const handleMeatballButtonClick = () => setIsDropBoxOpen((prev) => !prev);
   const handleDropBoxClose = () => setIsDropBoxOpen(false);
@@ -123,6 +123,7 @@ function StoreReviewItem({ reviewInfo }: { reviewInfo: ReviewInfo }) {
             <Text css={S.bodyTextStyle} size="sm">
               {content}
             </Text>
+            {imageUrl && <S.ReviewImage src={imageUrl} alt="리뷰 이미지" />}
             <Text css={S.menuTextStyle} size="sm">
               {menu}
             </Text>

src/constants/api.tsx

@@ -16,6 +16,7 @@ export const ENDPOINTS = {
     `/restaurants/${restaurantId}/reviews/${articleId}`,
   STORE_REQUESTS: (campusId: CampusId) =>
     `/campuses/${campusId}/restaurantDemands`,
+  IMAGE_UPLOAD: "/images",
 } as const;
 
 export const NETWORK = {