Merge pull request #5 from GDSC-StreetReview/docs/#4

Docs/#4 기능 추가

package.json

@@ -61,6 +61,7 @@
       "last 1 safari version"
     ]
   },
+  "proxy": "http://semtle.catholic.ac.kr:8085/",
   "devDependencies": {
     "dotenv-cli": "^7.4.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0"

src/Pages/MainPage/MainPage.tsx

@@ -1,11 +1,11 @@
-import { useState } from "react";
-import MainToggle from "../../components/Main/MainToggle/MainToggle";
-import TopSearchBar from "../../components/Main/TopSearchBar/TopSearchBar";
+import MainToggle from "src/components/Main/components/MainToggle";
+import TopSearchBar from "src/components/Main/components/TopSearchBar";
+
 const MainPage = () => {
-  const [isOpenSideBar, setIsOpenSideBar] = useState<boolean>(false);
-  const handleIsOpenSideBar = () => {
-    setIsOpenSideBar((prer) => !prer);
-  };
+  // const [isOpenSideBar, setIsOpenSideBar] = useState<boolean>(false);
+  // const handleIsOpenSideBar = () => {
+  //   setIsOpenSideBar((prer) => !prer);
+  // };
   return (
     <>
       <TopSearchBar />

src/components/Atom/ImageModal/ImageModal.css

@@ -0,0 +1,30 @@
+.image__modal__wrapper{
+  width: 100%;
+  height: 100%;
+}
+.image__modal__content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.image__modal__content img {
+  object-fit: contain;
+}
+.image__modal__currentIndex {
+  margin-left: auto;
+}
+.image__modal__control {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+}
+.image__modal__control div {
+  cursor: pointer;
+}

src/components/Atom/ImageModal/ImageModal.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { IMAGES } from "src/constants/images";
+import { Arrow } from "../arrow/Arrow";
+import "./ImageModal.css";
+interface ImageModalProps {
+  imageList?: string[];
+}
+export const ImageModal = ({ imageList = [IMAGES.basicImg] }: ImageModalProps) => {
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [startX, setStartX] = useState<number>(0);
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    setStartX(e.touches[0].pageX);
+  };
+
+  const handleSwipe = (endX: number) => {
+    const diffX = startX - endX;
+    if (diffX > 50) {
+      handlePrevNext(-1);
+    } else if (diffX < -50) {
+      handlePrevNext(1);
+    }
+  };
+
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    handleSwipe(e.touches[0].pageX);
+  };
+  const handlePrevNext = (delta: number) => {
+    const newIndex = currentIndex + delta;
+    if (newIndex >= 0 && newIndex < imageList.length) setCurrentIndex(newIndex);
+  };
+
+  return (
+    <div
+      className="image__modal__wrapper"
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+    >
+      <div className="image__modal__content">
+        <img
+          src={encodeURI(imageList[currentIndex])}
+          alt="contentImg"
+          className="image__modal__image"
+        />
+        <div className="image__modal__control">
+          <Arrow onClick={() => handlePrevNext(-1)} isLeft={true} />
+          <Arrow onClick={() => handlePrevNext(1)} />
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Atom/arrow/Arrow.tsx

@@ -0,0 +1,27 @@
+import { IMAGES } from "src/constants/images";
+
+interface arrowProps {
+  onClick: () => void;
+  width?: string;
+  height?: string;
+  isLeft?: boolean;
+}
+
+export const Arrow = ({
+  onClick,
+  width = "0.875rem",
+  height = "1.64063rem",
+  isLeft = false,
+}: arrowProps) => {
+  const style: React.CSSProperties = {
+    transform: isLeft ? "rotate(180deg)" : "",
+    width: width,
+    height: height,
+    cursor: "pointer",
+  };
+  return (
+    <div onClick={onClick}>
+      <img src={IMAGES.arrowRight} alt="arrowLeft" style={style} />
+    </div>
+  );
+};

src/components/Atom/backgroundImg/BackgroundImg.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+
+export interface BackgroundImgProps {
+  children?: ReactNode;
+  img: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+}
+
+export function BackgroundImg({
+  children,
+  className = "",
+  img,
+  onClick,
+}: BackgroundImgProps) {
+  console.log("iiiiii",img);
+  return (
+    <div
+      style={{
+        background: `url(${encodeURI(img)}) lightgray 50% / cover
+  no-repeat`,
+      }}
+      className={className}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Atom/commentBox/CommentBox.css

@@ -0,0 +1,19 @@
+.comment-box-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.4rem;
+}
+.comment-box-user-info {
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+.comment-box-user-profile {
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 50%;
+}
+.comment-box-user-name {
+  text-align: center;
+  margin-left: 0.5rem;
+}

src/components/Atom/commentBox/CommentBox.tsx

@@ -0,0 +1,33 @@
+import { Comment } from "src/constants/interface";
+import { BackgroundImg } from "../backgroundImg/BackgroundImg";
+import { Text } from "../text/Text";
+import "./CommentBox.css";
+
+const CommentBox = ({ commentItem }: { commentItem: Comment }) => {
+  return (
+    <div className="comment-box-wrapper">
+      <div className="comment-box-user-info">
+        {commentItem.member.picture && (
+          <BackgroundImg
+            img={commentItem.member.picture}
+            // img={IMAGES.basicColorImg}
+            className="comment-box-user-profile"
+          />
+        )}
+        <Text
+          color="#000"
+          fontSize="0.75rem"
+          fontWeight="700"
+          className="comment-box-user-name"
+        >
+          {commentItem.member.nickName}
+          {/* 익명 */}
+        </Text>
+      </div>
+      <Text color="#000" fontSize="0.625rem" fontWeight="400">
+      {commentItem.replyContent}
+      </Text>
+    </div>
+  );
+};
+export default CommentBox;

src/components/Atom/customModal/CustomModal.css

@@ -0,0 +1,50 @@
+.custom-modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+.custom-modal-box {
+  width: 15.875rem;
+  height: 8.1875rem;
+  border-radius: 1.25rem;
+  background: #fff;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+}
+.custom-modal-title {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.custom-modal-box-buttom {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.custom-modal-box-yes {
+  background: #ea4335;
+  height: 2.5625rem;
+  width: 50%;
+  border-radius: 0 0 0 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.custom-modal-box-no {
+  background: #fff;
+  height: 2.5625rem;
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 1.25rem 0;
+}

src/components/Atom/customModal/CustomModal.tsx

@@ -0,0 +1,40 @@
+import { Text } from "../text/Text";
+import "./CustomModal.css";
+interface CoustomModalProps {
+  title: string;
+  content: string;
+  onClick: () => void;
+  onClose: () => void;
+}
+const CustomModal = ({
+  title,
+  content,
+  onClick,
+  onClose,
+}: CoustomModalProps) => {
+  return (
+    <div className="custom-modal-wrapper">
+      <div className="custom-modal-box">
+        <Text color="#EA4335" fontSize="1.25rem" fontWeight="700"className="custom-modal-title">
+          {title}
+        </Text>
+        <Text color="#000" fontSize="0.75rem" fontWeight="500" className="custom-modal-box-content">
+          {content}
+        </Text>
+        <div className="custom-modal-box-buttom">
+          <div onClick={onClick} className="custom-modal-box-yes">
+            <Text color="#fff" fontSize="0.75rem" fontWeight="500">
+              예
+            </Text>
+          </div>
+          <div onClick={onClose} className="custom-modal-box-no">
+            <Text color="#000" fontSize="0.75rem" fontWeight="500">
+              아니요
+            </Text>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default CustomModal;

src/components/Atom/customModal/logoutModal/LogoutModal.tsx

@@ -0,0 +1,32 @@
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { logout } from "src/store/auth/authAction";
+import CustomModal from "../CustomModal";
+import "./LogoutModal.css";
+
+interface logoutProp {
+  onClose: () => void;
+}
+const LogoutModal = ({ onClose }: logoutProp) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const handleLogout = () => {
+    //   localStorage.removeItem("token");
+    localStorage.clear();
+    dispatch(logout());
+    navigate("/");
+    onClose();
+    window.location.reload();
+  };
+  return (
+    <>
+      <CustomModal
+        title="로그아웃"
+        content="로그아웃 하시겠습니까?"
+        onClick={handleLogout}
+        onClose={onClose}
+      />
+    </>
+  );
+};
+export default LogoutModal;

src/components/Atom/mainToggleIcon/MainToggleIcon.css

@@ -0,0 +1,13 @@
+.google-login-button {
+  margin-left: 0.56rem;
+  margin-right: 1rem;
+  width: 70%;
+  border-radius: 2.5rem;
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
+    0px 0px 1px 0px rgba(0, 0, 0, 0.17);
+}
+.menu-circle-img-style {
+  width: 1.26563rem;
+  height: 1.26563rem;
+  cursor: pointer;
+}

src/components/Atom/mainToggleIcon/MainToggleIcon.tsx

@@ -0,0 +1,15 @@
+import "./MainToggleIcon.css";
+interface MainToggleIconProps {
+  onClick?: () => void;
+  imgSrc: string;
+  clasName?: string;
+}
+const MainToggleIcon = ({
+  imgSrc,
+  onClick,
+  clasName = "menu-circle-img-style",
+}: MainToggleIconProps) => {
+  return <img className={clasName} onClick={onClick} src={imgSrc} alt="Icon" />;
+};
+
+export default MainToggleIcon;

src/components/Atom/mappingImgItem/MappingImgItem.css

@@ -0,0 +1,16 @@
+.mapping__img__item__img {
+  position: relative;
+}
+.mapping__img__item__img img {
+  width: 15.125rem;
+  height: 15.125rem;
+  object-fit: cover;
+  border-radius: 0.625rem;
+}
+.mapping__img__item__remove img {
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+}