diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..357d9e5 --- /dev/null +++ b/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;"] diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..1e52292 --- /dev/null +++ b/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; + } +} diff --git a/package.json b/package.json index b841326..91e7af1 100644 --- a/package.json +++ b/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" + } } diff --git a/src/Pages/MainPage/MainPage.tsx b/src/Pages/MainPage/MainPage.tsx index 05dffb4..32223a5 100644 --- a/src/Pages/MainPage/MainPage.tsx +++ b/src/Pages/MainPage/MainPage.tsx @@ -14,6 +14,7 @@ const MainPage = () => { isOpenSideBar={isOpenSideBar} handleIsOpenSideBar={handleIsOpenSideBar} /> */} + {/* */} ); diff --git a/src/Styles/Icons.ts b/src/Styles/Icons.ts index 4b43cc4..56cb191 100644 --- a/src/Styles/Icons.ts +++ b/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, diff --git a/src/assets/images/ic_add_location.png b/src/assets/images/ic_add_location.png new file mode 100644 index 0000000..a669de9 Binary files /dev/null and b/src/assets/images/ic_add_location.png differ diff --git a/src/assets/images/ic_board_sm_left.png b/src/assets/images/ic_board_sm_left.png new file mode 100644 index 0000000..a555194 Binary files /dev/null and b/src/assets/images/ic_board_sm_left.png differ diff --git a/src/assets/images/ic_heartWhite.svg b/src/assets/images/ic_heartWhite.svg new file mode 100644 index 0000000..38c5d7f --- /dev/null +++ b/src/assets/images/ic_heartWhite.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/ic_location.png b/src/assets/images/ic_location.png new file mode 100644 index 0000000..0d2e994 Binary files /dev/null and b/src/assets/images/ic_location.png differ diff --git a/src/components/Board/components/BoardItem.tsx b/src/components/Board/components/BoardItem.tsx new file mode 100644 index 0000000..d7d2b35 --- /dev/null +++ b/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 ( + + + + more + + + + + + + + + add + comment + + + + + {textArr.tag.map((idx, item) => ( + + ))} + + + location + + + + + rkdgml + + + + + ); +}; +export default BoardItem; diff --git a/src/components/Board/components/BoardText.tsx b/src/components/Board/components/BoardText.tsx new file mode 100644 index 0000000..bda513c --- /dev/null +++ b/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
{title}
; +}; + +export const BoardContentText = ({ content }: { content: string }) => { + return
{content}
; +}; diff --git a/src/components/Board/components/styleBoardItem.ts b/src/components/Board/components/styleBoardItem.ts new file mode 100644 index 0000000..af57f12 --- /dev/null +++ b/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; +`; diff --git a/src/constants/images.ts b/src/constants/images.ts index e9edd25..06b8ed9 100644 --- a/src/constants/images.ts +++ b/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"), -} \ No newline at end of file + // 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"), +}; diff --git a/src/setupProxy.ts b/src/setupProxy.ts index b728618..01c53c7 100644 --- a/src/setupProxy.ts +++ b/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, }) ); diff --git a/tsconfig.json b/tsconfig.json index ce9021d..10edae2 100644 --- a/tsconfig.json +++ b/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"] }