From 5bce91c3d08382a1c5f55ab80a34697e8d610cb7 Mon Sep 17 00:00:00 2001 From: JJangYunji Date: Sat, 4 May 2024 17:32:13 +0900 Subject: [PATCH 1/8] dockerfile add --- Dockerfile | 16 ++++++++++++++++ nginx.conf | 20 ++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 Dockerfile create mode 100644 nginx.conf 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; + } +} From 2c92acd283d46df49aee2d9eecebf0563b6757ba Mon Sep 17 00:00:00 2001 From: JJangYunji Date: Sat, 4 May 2024 17:33:14 +0900 Subject: [PATCH 2/8] dockerfile add --- Dockerfile | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index 357d9e5..1172b9d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,8 +9,8 @@ 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 /home/semtle/ssl/domain.crt /etc/nginx/domain.crt +COPY /home/semtle/ssl/domain.key /etc/nginx/domain.key COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 443 CMD ["nginx", "-g", "daemon off;"] From 99e618007790703b8fedcd374e51f30d72019415 Mon Sep 17 00:00:00 2001 From: JJangYunji Date: Sat, 4 May 2024 17:35:11 +0900 Subject: [PATCH 3/8] dockerfile add --- Dockerfile | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index 1172b9d..b1b36cb 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,13 +4,14 @@ WORKDIR /app COPY package*.json ./ RUN npm install COPY . ./ +COPY /home/semtle/ssl/ ./ 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 /home/semtle/ssl/domain.crt /etc/nginx/domain.crt -COPY /home/semtle/ssl/domain.key /etc/nginx/domain.key +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;"] From e5d3d31c1eac2f6482b08a8e8fd72d053673d3b8 Mon Sep 17 00:00:00 2001 From: JJangYunji Date: Sat, 4 May 2024 17:41:42 +0900 Subject: [PATCH 4/8] dockerfile add --- Dockerfile | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index b1b36cb..338b98f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -10,8 +10,8 @@ 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 /home/semtle/ssl/domain.crt /etc/nginx/domain.crt +COPY /home/semtle/ssl/domain.key /etc/nginx/domain.key COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 443 CMD ["nginx", "-g", "daemon off;"] From 12cee225990539d529a4525d42580eb418dfe98f Mon Sep 17 00:00:00 2001 From: JJangYunji Date: Sat, 4 May 2024 17:46:14 +0900 Subject: [PATCH 5/8] dockerfile add --- Dockerfile | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index 338b98f..a9d6856 100644 --- a/Dockerfile +++ b/Dockerfile @@ -10,8 +10,8 @@ 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 /home/semtle/ssl/domain.crt /etc/nginx/domain.crt -COPY /home/semtle/ssl/domain.key /etc/nginx/domain.key +COPY --from=build /app/build/domain.crt /etc/nginx/domain.crt +COPY --from=build /app/build/domain.key /etc/nginx/domain.key COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 443 CMD ["nginx", "-g", "daemon off;"] From 01a040aaf4036186b4025d964ed8d5d6189e8318 Mon Sep 17 00:00:00 2001 From: JJangYunji Date: Sat, 4 May 2024 17:51:15 +0900 Subject: [PATCH 6/8] dockerfile add --- Dockerfile | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Dockerfile b/Dockerfile index a9d6856..357d9e5 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,14 +4,13 @@ WORKDIR /app COPY package*.json ./ RUN npm install COPY . ./ -COPY /home/semtle/ssl/ ./ 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 --from=build /app/build/domain.crt /etc/nginx/domain.crt -COPY --from=build /app/build/domain.key /etc/nginx/domain.key +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;"] From 64917d6c7b5db179bd8001bc917fa0bfe229b5b7 Mon Sep 17 00:00:00 2001 From: KKangHHee Date: Sat, 4 May 2024 21:21:49 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EA=B0=9C=EB=B0=9C=ED=99=98?= =?UTF-8?q?=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=99=98=EA=B2=BD=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=20=EB=B3=80=EA=B2=BD=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 14 +++++++++----- src/setupProxy.ts | 3 +-- tsconfig.json | 17 ++++++++--------- 3 files changed, 18 insertions(+), 16 deletions(-) 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/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"] } From 8ec174e68222972505c959fbb21fe326e7777446 Mon Sep 17 00:00:00 2001 From: KKangHHee Date: Sat, 4 May 2024 21:23:08 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20board=20item=20detail=20=EC=A7=84?= =?UTF-8?q?=ED=96=89=20=EC=A4=91[1/3]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Pages/MainPage/MainPage.tsx | 1 + src/Styles/Icons.ts | 10 +- src/assets/images/ic_add_location.png | Bin 0 -> 1524 bytes src/assets/images/ic_board_sm_left.png | Bin 0 -> 731 bytes src/assets/images/ic_heartWhite.svg | 3 + src/assets/images/ic_location.png | Bin 0 -> 1147 bytes src/components/Board/components/BoardItem.tsx | 71 ++++++++++++++ src/components/Board/components/BoardText.tsx | 25 +++++ .../Board/components/styleBoardItem.ts | 92 ++++++++++++++++++ src/constants/images.ts | 37 +++---- 10 files changed, 218 insertions(+), 21 deletions(-) create mode 100644 src/assets/images/ic_add_location.png create mode 100644 src/assets/images/ic_board_sm_left.png create mode 100644 src/assets/images/ic_heartWhite.svg create mode 100644 src/assets/images/ic_location.png create mode 100644 src/components/Board/components/BoardItem.tsx create mode 100644 src/components/Board/components/BoardText.tsx create mode 100644 src/components/Board/components/styleBoardItem.ts 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 0000000000000000000000000000000000000000..a669de95b67e70771a9af6bcda5c563e20d36b78 GIT binary patch literal 1524 zcmV@~0drDELIAGL9O(c600d`2O+f$vv5yP1Rn5cXQc<0-aO1 zbT27^ab3(x;nI7V8g~;n{$^6=GwRxQ5|QpPFADUCT~}fRwX1F2+uvngWG+1;Fm{>R zQK-##FLB#KrAuGs|Au87y`EY@=C7Gc93EWT>o*w!)U{fHe(X^P{ve^fHRo#45$4wl3uo8CT|A&-;oe7V4+?gfO-kq4C#KusH24)K#k$6*iZVLG9Kd+)5t;FZ@|1 z1Yu!98_Qvq?=NV*STY?`*gat{A;9)jH1CZh2J9YTi&w@A6iB$YZu~8;y5Q=Cf;0D0 z2!}Qh^FAYvsH^C#Biqhh<1guVjR!Kj4g~(%nG1E5&eFSQ4sK|sckFXz{0W}huEHz< zJW6A2M4_}jSb*cZz<%B-W`BG+SYK%%-2G~pSd-cFbE`TDg*rB^g(H_4;^Q1U>haM2 z(6%VHYTV6w)w8FAdng77t9No1|GQHx?b zv%y`6gkh{I*FP#0V@=0}xn0A7$fLcLYgVWwilnfe`Rtu=&4Ny$P>hVM}OazD7ypp@mv9Obb0T zuRVCH{1A%dhfo|x6{;jM{v^vKBk~+si+b|`U)xcobgQcEj6XW^>?Eu|NKID-md#AN zF>SQ65vq%0DdagEHesP8e_bS6z>7buSTi zkw-^Ps$kCcpr>E29iN=YQ+eE#_MpWu(zh^jBF{npT(v)Ru$Bb@e%(Y>K{Y}#0sR_% zm+++pHFoAa?x3%YP;Av3GBB4MzG7m2%V|u#63WkW9f&Wk7gGDF+cCf6TcJD$=|&5m z*9O9u`AFtFG;i8Mv9rLlc0V6ynHv1Dy?o##l)?S-nFsYXneX*EKh)b?gI1)4f{|9- z`D?K&3cu@2ziWTcjx9NTQ(0A?1*k1P5!Z_~ugI<_eC*5tez`HbaySXVdyCS&931tc zP7z(EK~(ezFmcS_Z17jxd1k+;-A0-z_y9V{##(%8j);s0k#bW z_N^+gEnwGt$+;kGE*HMR0JfSUDHnvz<@(p)upJ|kOf6`<@BR&1|76&}9=?+@BCy5R zc%A^;sTl<(j92d3?+y1F|G~m$%9F$^*!L614;8Svpc4N8hRgS7sil?S9wzJu*NisE z2iwNQ0z=1A;|-|=4!$WH_D$Bq&r!l|;)B+N0V0hT5>OwoWrg!u?b^{wljGGM*Y5ImRY`yc|Vg-n#Byk{M$gxR9h**IljoO~O2*OU-DJ)_k z?C`;KL~0mPEX?qDri&o_?53LwWo}?6>EY=L*xOhQ_h;o)$5_Hn`XV*-5NqSVua+5d zuHKW(jUHlc5q7ZOd@Si4#5ucj*&;QJAlCdvY8X(g^x8>%L3n_EJ0i6~*a4_*k~+q6 zP!N6sYk>rhu^bfCeK$+GZx^prwfgF}}M_)$E)e-c?47?=t?T^vIy7~kG)^c8WGXnSa>y@7c<^IHe+ z4a{B(SiBDKX&e+w4IsC1T>j2 z_#m}=(;^l5<^BHcl6?02W_^An|&(c856qhDtCM)y4Hh>(k&rfa2hX5+COjaf4Crx$1K zJ~KP${PChaiL++wx@_)G{k21H|NN%D!Z59sl4qV9^)D=uJ9}p1n_7*jS9sFS#tLC33z;g5s?};{I0MKr-H{Q!Ode zU8)~Q`bz=DGsC5T;+gSMK=GIEVSPZ-KdcK#hHJSCZ~UTv+I@4m?b+=*{yL^h{7k%s zy?tL=OKn`ESnH-d&2;Jdj3bwtz6kb4L`~YZSkSxsQkqFpX5_6dHyv9K>5Cmp)g#TN zHh#%i3RJfFC0pDwxs5poOO*9D?dd*Lma?-xRATwhkQ>WhKAV?1ui#s|@?3Gh!-{jJ z*9acD?6J-?xfjt8}s7Vpb`JP!ZfepB9RhyCLBW!rC`t(DS1N*4~yb&PHd V2_JV$l$L^oJzf1=);T3K0RUDdBme*a literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..0d2e9942a93426ba129fc4fc314affc2b194736c GIT binary patch literal 1147 zcmV->1cdvEP)@~0drDELIAGL9O(c600d`2O+f$vv5yP3b(@Yhz1p;2EEaDx2b@To9&M^@I$#);O{Gn@ zlp5Bkl}%3pL|$W?gm7y_-g;szwvz})6S`}}^C-ufJXw$u`>@=;RP=x2Gd8tNg>B&e zXbRnEGF!2wec93UVja0ndu!7p#h?x0R1t@`D5Tp8H{_4&V{4oC?fYZ<|E^zluLTWb zW5fG94F&$5J+x&D#j^@D-J5|Q-i_H1v6V(-&$CPTb$NcjX*7cg4JL%p3wD&ydwivR zNUnT{3&V^efu`SoQrKfu_MjQjNQu)eT(;{`Vb_ba(o$HVYm^Ea8T-t8$VYg5XhR;# z1xmzps+#2)>sRg*4qf|E-w|{ zc@>-($i@rR$3nTfP(na9B0DV{bkoCoLA}EV=JD7F@;to16MRF45(j+WTy+^U@J!wf zaX>cF$y`V;1@+Bgo%p99&(aAlm`t^uSnnxutc^7_iwu3-Il*^KrsTz*@ydLD63h)G zUTHpX&N&IrnM^g!hri6{nM5#GNlI|tXC_&fKGJ;P7Ue~P5A=zU2>wFzf!%0xg1L}Q zW;z&vqeO6e8`9VL%6wis!EE0}^MM;CpFCVMndT&z9W{ysBcWv-22SuPq`8?;cN!;Y z(5yjoj(NLjXF^=V^^MZ!f%*LSKI^mJ&I>bfKBOGhkgds`wqCk{$8V-iCpP6(56N!f zulILomU*}}p(MQw`A%o{v7lrXKbc*J4x!!KO9fYuq1$YZ2xPxq$L+NWDnVg`1VS6~ zZI-I9k`-i3z6$}qXX&^NRne9v0`e0Iyp3pn7t$T}(M2o7It{X!9&~3ZMiY&gXHOsx zZM1n~pW>+$_UN4ec`Mkliy^wTL$Y_>Vc>hF8v65EK}C-$_Uxfc=njGh5sl`{)`)dB zhMC5;qK)F=F0c1D4Si%8guWUumJvun>{!MiC9$!MLW*Js80Q+4@=9GkH)M>jSoN)z zbJ3)~-O^pRtJ}YGYEB?%TJ@SdZnFfz!_!0AVd@)d&<_rVh)rXOX#~;fi0z0dIz6!+ z(9NYK7^HZe_8f%0!4~}Vu6MU|4K(5B4wnoKLw6vK+wWDQx@;-I8tMAlA2gf|%>~GI zGWv*idN;U-9Ra+&p}8@@%Tdo}NAa*@fR~?Xu6TIaAacJO&BG24FF#K*3kr$C%hA2- zi0Wa7!prmbZU^{9{p4@Ws6qc$Y(bw9T%K60=`(|7XVSC{+2|*O{sBgW7-G4ea}EFi N002ovPDHLkV1gpI7Bc_< literal 0 HcmV?d00001 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"), +};