Merge pull request #2 from GDSC-StreetReview/feat/#1

[Feat] board item detail 진행 중[1/3]

Dockerfile

@@ -0,0 +1,16 @@
+# Stage 1: Build the React app
+FROM node:14 AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . ./
+RUN npm run build
+
+# Stage 2: Serve the app with Nginx
+FROM nginx:stable-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+COPY domain.crt /etc/nginx/domain.crt
+COPY domain.key /etc/nginx/domain.key
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 443
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,20 @@
+server {
+    listen 80;
+    server_name semtle.catholic.ac.kr;
+
+    return 301 https://$server_name$request_uri;
+}
+
+server {
+    listen 443 ssl;
+    server_name semtle.catholic.ac.kr;
+
+    ssl_certificate /etc/nginx/domain.crt;
+    ssl_certificate_key /etc/nginx/domain.key;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri /index.html;
+    }
+}

package.json

@@ -13,6 +13,7 @@
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
     "axios": "^1.6.3",
+    "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -37,10 +38,10 @@
     "workbox-streams": "^6.6.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "cross-env NODE_ENV=development dotenv -e .env react-scripts start",
+    "build": "cross-env NODE_ENV=production dotenv -e .env.production react-scripts build",
+    "test": "cross-env NODE_ENV=development react-scripts test",
+    "eject": "cross-env NODE_ENV=production react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -60,5 +61,8 @@
       "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

@@ -14,6 +14,7 @@ const MainPage = () => {
         isOpenSideBar={isOpenSideBar}
         handleIsOpenSideBar={handleIsOpenSideBar}
       /> */}
+      {/* <BoardItem /> */}
       <MainToggle />
     </>
   );

src/Styles/Icons.ts

@@ -1,15 +1,17 @@
-import userIcon from "../assets/Icons/user.svg";
-import commentIcon from "../assets/Icons/comment.svg";
 import commentHeartIcon from "../assets/Icons/comment-heart.svg";
-import removeIcon from "../assets/Icons/user-remove.svg";
+import commentIcon from "../assets/Icons/comment.svg";
+import reviewWriteIcon from "../assets/Icons/map-marker-plus.svg";
 import reviewIcon from "../assets/Icons/review.svg";
 import requestIcon from "../assets/Icons/terrace.svg";
-import reviewWriteIcon from "../assets/Icons/map-marker-plus.svg";
+import removeIcon from "../assets/Icons/user-remove.svg";
+import userIcon from "../assets/Icons/user.svg";
 
+import IconHeart from "../assets/images/ic_heartWhite.svg";
 const Icons = {
   user: userIcon,
   comment: commentIcon,
   heart: commentHeartIcon,
+  boardHeart: IconHeart,
   remove: removeIcon,
   review: reviewIcon,
   request: requestIcon,

src/components/Board/components/BoardItem.tsx

@@ -0,0 +1,71 @@
+import { ReactComponent as IconHeart } from "../../../assets/images/ic_heartWhite.svg";
+import { IMAGES } from "../../../constants/images";
+import { BoardContentText, BoardTitleText } from "./BoardText";
+import * as W from "./styleBoardItem";
+const IconStyle: React.CSSProperties = {
+  width: "1.5625rem",
+  marginTop: "0.81rem",
+};
+const lacationIconStyle: React.CSSProperties = {
+  width: "0.9375rem",
+  height: "1.25rem",
+  marginRight: "0.19rem",
+};
+const moreIconStyle: React.CSSProperties = {
+  width: "2.1875rem",
+  height: "2.1875rem",
+};
+const textArr = {
+  title: "한남동 핫플 카페",
+  content:
+    "로제도 다녀간 이번주 핫 한 카페임당 모두들 아인슈페너 시키시기를....        또간집에서 여기 나오면 나 이제 못가.. 다들 그러기전에 얼른ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd",
+  tag: ["한남동", "카페", "블랙핑크"],
+  address: "마포구 마포대로 181 1층 구띠커피와인하우스",
+};
+const BoardItem = () => {
+  const MAX_CONTENT_LENGTH = 100;
+  const truncatedContent =
+    textArr.content.length > MAX_CONTENT_LENGTH
+      ? textArr.content.slice(0, MAX_CONTENT_LENGTH) + "  ...더보기"
+      : textArr.content;
+  return (
+    <W.BoardItemBackGournd>
+      <W.BoardItemBackBox background={IMAGES.groupColorBlue}>
+        <W.BoardItemTop>
+          <img src={IMAGES.moreLeft} alt="more" style={moreIconStyle} />
+        </W.BoardItemTop>
+        <W.BoardItemBottom>
+          <W.BoardItemContentBox>
+            <BoardTitleText title={textArr.title} />
+            <BoardContentText content={truncatedContent} />
+          </W.BoardItemContentBox>
+          <W.BoardItemMenuBox>
+            <IconHeart fill="#DFF5FF" stroke="#DFF5FF" style={IconStyle} />
+            <img src={IMAGES.addLocation} alt="add" style={IconStyle} />
+            <img src={IMAGES.myCommentWhite} alt="comment" style={IconStyle} />
+          </W.BoardItemMenuBox>
+        </W.BoardItemBottom>
+        <W.BoardItemBottomInfo>
+          <W.BoardItemTagBox>
+            {textArr.tag.map((idx, item) => (
+              <BoardContentText key={idx} content={`#${item}`} />
+            ))}
+          </W.BoardItemTagBox>
+          <W.BoardItemAddreessBox>
+            <img
+              src={IMAGES.location}
+              alt="location"
+              style={lacationIconStyle}
+            />
+            <BoardContentText content={textArr.address} />
+          </W.BoardItemAddreessBox>
+          <W.BoardItemUserInfoBox>
+            <W.BoardItemUserInfoProflie proflie={IMAGES.myCommentWhite} />
+            <W.BoardItemUserInfoName>rkdgml</W.BoardItemUserInfoName>
+          </W.BoardItemUserInfoBox>
+        </W.BoardItemBottomInfo>
+      </W.BoardItemBackBox>
+    </W.BoardItemBackGournd>
+  );
+};
+export default BoardItem;

src/components/Board/components/BoardText.tsx

@@ -0,0 +1,25 @@
+const titleStyle: React.CSSProperties = {
+  color: "#FFF",
+  fontFamily: "Plus Jakarta Sans",
+  fontSize: "0.75rem",
+  fontStyle: "normal",
+  fontWeight: 700,
+  lineHeight: "normal",
+  marginBottom: "0.5rem",
+};
+const contentStyle: React.CSSProperties = {
+  color: "#FFF",
+  fontFamily: "Plus Jakarta Sans",
+  fontSize: "0.75rem",
+  fontStyle: "normal",
+  fontWeight: 400,
+  lineHeight: "normal",
+};
+
+export const BoardTitleText = ({ title }: { title: string }) => {
+  return <div style={titleStyle}>{title}</div>;
+};
+
+export const BoardContentText = ({ content }: { content: string }) => {
+  return <div style={contentStyle}>{content}</div>;
+};

src/components/Board/components/styleBoardItem.ts

@@ -0,0 +1,92 @@
+import styled from "styled-components";
+
+export const BoardItemBackGournd = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+`;
+export const BoardItemBackBox = styled.div<{ background: string }>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 28.875rem;
+  height: 37.4375rem;
+  border-radius: 1.25rem;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  background: url(${(props) => props.background}) lightgray 50% / cover
+    no-repeat;
+`;
+
+export const BoardItemTop = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding-right: 1.38rem;
+  margin-top: 1rem;
+`;
+export const BoardItemBottom = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  padding: 1.38rem;
+`;
+
+export const BoardItemContentBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+`;
+export const BoardItemMenuBox = styled.div`
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+`;
+export const BoardItemBottomInfo = styled.div`
+  width: 100%;
+  display: flex;
+  padding: 0.62rem 1.38rem;
+
+  flex-direction: column;
+`;
+export const BoardItemTagBox = styled.div`
+  width: 100%;
+  display: flex;
+  margin-bottom: 0.5rem;
+`;
+export const BoardItemAddreessBox = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const BoardItemUserInfoBox = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 0.5rem;
+`;
+
+export const BoardItemUserInfoProflie = styled.div<{ proflie?: string }>`
+  width: 3.125rem;
+  height: 3.125rem;
+  border-radius: 50%;
+  background: url(${(props) => props.proflie}) lightgray 50% / cover no-repeat;
+`;
+export const BoardItemUserInfoName = styled.div`
+  color: #fff;
+  text-align: center;
+  font-family: "Plus Jakarta Sans";
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-left: 0.5rem;
+`;

src/constants/images.ts

@@ -1,21 +1,24 @@
 export const IMAGES = {
-    mylocation: require("../assets/images/ic_my_location.png"),
-    //Logo
-    logoTripview: require("../assets/images/ic_logo_TRIPVIEW.png"),
-    searchIcon: require("../assets/images/ic_search.png"),
-    //Login
-    GoogleLogin: require("../assets/images/ic_googleLogin.png"),
-    // Main
-    groupColorBlue: require("../assets/images/ic_main_menu_group.png"),
-    groupColorWhite: require("../assets/images/ic_main_menu_group_white.png"),
+  mylocation: require("../assets/images/ic_my_location.png"),
+  //Logo
+  logoTripview: require("../assets/images/ic_logo_TRIPVIEW.png"),
+  searchIcon: require("../assets/images/ic_search.png"),
+  //Login
+  GoogleLogin: require("../assets/images/ic_googleLogin.png"),
+  // Main
+  groupColorBlue: require("../assets/images/ic_main_menu_group.png"),
+  groupColorWhite: require("../assets/images/ic_main_menu_group_white.png"),
 
+  commentBlack: require("../assets/images/ic_comment_black.png"),
+  heartColor: require("../assets/images/ic_heart_color.png"),
 
-    commentBlack: require("../assets/images/ic_comment_black.png"),
-    heartColor: require("../assets/images/ic_heart_color.png"),
+  location: require("../assets/images/ic_location.png"),
+  addLocation: require("../assets/images/ic_add_location.png"),
+  moreLeft: require("../assets/images/ic_board_sm_left.png"),
 
-    // My page
-    myReviewWhite: require("../assets/images/ic_my_review.png"),
-    myCommentWhite: require("../assets/images/ic_my_comment.png"),
-    myHeartWhite: require("../assets/images/ic_my_comment_heart.png"),
-    myRemveWhite: require("../assets/images/ic_user_remove.png"),
-}
+  // My page
+  myReviewWhite: require("../assets/images/ic_my_review.png"),
+  myCommentWhite: require("../assets/images/ic_my_comment.png"),
+  myHeartWhite: require("../assets/images/ic_my_comment_heart.png"),
+  myRemveWhite: require("../assets/images/ic_user_remove.png"),
+};

src/setupProxy.ts

@@ -1,10 +1,9 @@
 const { createProxyMiddleware } = require("http-proxy-middleware");
-
 module.exports = function (app: any) {
   app.use(
     "/api",
     createProxyMiddleware({
-      target: "http://semtle.catholic.ac.kr:8085",
+      target: process.env.REACT_APP_PROXY,
       changeOrigin: true,
     })
   );

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,9 +15,12 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "typeRoots" : ["node_modules/@types"]
+    "typeRoots": ["node_modules/@types"],
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["*"]
+    }
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "exclude": ["node_modules"]
 }