From f80bb1ba364b9d36671ac11fc67e1b803bff5bac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=98=84=EC=A7=80?= Date: Thu, 16 Nov 2023 05:52:22 +0900 Subject: [PATCH] =?UTF-8?q?Design:=20Board=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .firebase/hosting.YnVpbGQ.cache | 114 +++++++++++++------------- src/components/Board/BoardContent.tsx | 25 ++++-- src/components/Board/BoardList.tsx | 1 - src/components/Board/InputMessage.tsx | 6 ++ src/pages/Board.tsx | 2 +- 5 files changed, 80 insertions(+), 68 deletions(-) diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index b7bf4ab..72d7920 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -1,57 +1,57 @@ -asset-manifest.json,1700077262731,e5512fde9dba66f818ef45d2de1221efb1b7cc76cda02d18332cffd196707fe9 -robots.txt,1700077254900,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 -index.html,1700077262731,a0e865175967480d9c0eaffda3f8716ddda5b4cacc71764a390e7b1f8399ba67 -images/intro/wave.svg,1700077254815,6151d95838f42150e8c78e0c3973747e09ccd76be9fc84af17ed6ac457bd6de1 -images/board/write.png,1700077254814,5473773d23481ebdd97943f540d4da1d27efddca99c7bcb522b1080ac8c0a15b -images/board/snowman.png,1700077254814,9cc2e6f125dc0f5774292c6f54b1d241701fafddcc35bb73e4b78c474f47c892 -images/skillset/arrow.png,1700077254895,f43a1625e422049c809d51f92a186fb9096a69f4fc412cf2e0330dcf804867f7 -images/skillset/css3.svg,1700077254895,811935f4f923aaaaf32657099da4c6b2479b7223925c578d4a2c54346efee5aa -images/skillset/django.svg,1700077254896,80a481dd97dd5c2c020e6d669c664cc600805d305156af3cd4a69f78bd2533a2 -images/skillset/firebase.svg,1700077254896,e72d249bc93151e9cc0d0b1759c38db6a058097269b074d46edafd674abacabc -images/skillset/figma.svg,1700077254896,429f024f6e8927d7aa6af473a8c83f56f97239788c48ecaafde378144aab6483 -images/skillset/github.svg,1700077254896,8a7e2d52d47289ea7d8aafe2ef74805aa7c0a142c2dfa3e0d26729822514e106 -images/skillset/html.svg,1700077254896,3f9690a7d12e4e6a9547029700af6182af5a649478f9d52ee50bb4221252adb1 -images/skillset/python.svg,1700077254897,12ce1785f64589d3ff06296f4aae99507b460a780420cac766440cead01549c9 -images/skillset/react.svg,1700077254897,9a6a3af9cd8950b71d5222495d285326b2e603d3bc8d10f18f3e0cfa0a434f41 -images/skillset/js.svg,1700077254897,59c30d67021f35934f46ba864a2a9895b9e718e58b28c1d2f8e3ec481d55782e -images/skillset/qnet.svg,1700077254897,13de1d298717d37cc8732ff92a94f31131b99e58b184307f18bc94a83f92e8a3 -images/skillset/styled-components.svg,1700077254898,5384e068549ad22dbfd59d421aa3434ab6c76c72d0b339f7d63fe4d9b7dd8e88 -images/skillset/slack.svg,1700077254897,b53b44465c98a16a8cb00e41ba1b74e1da7831cfebd452f937d1e1d249a55dfc -static/css/main.43ab9f8e.css,1700077262749,a1f22ab015b278105326b876a18cd6941cc4a487cc1a1bb6a4257c2878e2c19c -images/skillset/zeplin.svg,1700077254898,7e318a83c540f699d820e217dfbea626f5b40f1ecea1ea85a93de8fc5b65c0a1 -images/skillset/ts.svg,1700077254898,1181a5aeee960fa5e8f13df3a4e2be54fa324aef32e29281fc617470f688dd29 -images/skillset/sqld.svg,1700077254898,e2a8d0b40e96c2d3844d200d1bcebe64f97ece72800d1cd31e6413cd7c4106ac -images/board/message_bubble.png,1700077254814,e73ba70bf7456717ad0998c131dd1f9b8b5751bdb2b3ab95c9dacdd35ebb4959 -static/css/main.43ab9f8e.css.map,1700077262749,d5c98c9051147fa26ceca15c69e8fc1675a7387041d557b42ed6fea24b68f350 -static/js/main.7d71aed7.js.LICENSE.txt,1700077262749,cd5416542907cd17a5a0433b74fd8fbe4b37e2ec21b8636c57dd54ffa5fdf267 -logo.svg,1700077254900,0765f2bdc493af04ef7819d6a3395430138973cb0599cb016b0aba1f84396afe -images/project/qrcode/qrcode-4.png,1700077254892,d94c0988f712fe864bfaee1042d471d817df655598d4ca37201a64ec33cc989c -images/project/qrcode/qrcode-3.png,1700077254890,94e6fc25fb240bc7a2f48f44568e0d547a087b26acc97a3b9ef3e3f90109d88a -images/project/portfolio/portfolio-2.png,1700077254880,7c48f1ba3be77b880c812222ac42b7e5c46bbcc72bfa3b5852a4786076903e69 -images/project/qrcode/qrcode-6.png,1700077254895,1bcfd5dccbf4ce13a6e63e60199186273da536ebabc2355ed97081cb4e6989ae -images/project/qrcode/qrcode-5.png,1700077254894,583565fb8241b20306afc73691c957f3b595767d2f4109c893644501ab239255 -images/project/qrcode/qrcode-2.png,1700077254889,266ae5909a9d6a3c682e56d1e4d92152ccc981c6527ae3c85bfb9be097d4fcba -static/media/SUITE-Regular.680ae46430dcc1be483d.otf,1700077262749,96be007d3c4e799ae9c5b282e6c41cdcb24b8621ab9bebfb4d2d3988ea40bf8c -static/media/SUITE-Bold.e22c698474e4f4301302.otf,1700077262749,bd924b000f9a5f9543b042cd934d0a215936249a370f2e6af6b3c31ed066cc5c -images/project/portfolio/portfolio-1.png,1700077254878,20fd5479ca8fada9b60e33651a05982578ea370d8157b8671674b943169dabc3 -static/js/main.7d71aed7.js,1700077262749,7dd8ba332ee1037feb149fb15657512af7d9fa7cd8bbb9fc41c5433e1360af51 -images/project/portfolio/portfolio-3.png,1700077254882,3724e1895e088e4bd7359c261016e6defa222ecfed407ab0b7a3c43f3cce21c2 -images/project/artistella/artistella-2.png,1700077254820,0dad5fd038e906abc21c27a83cd6e252a9d974c56602d163834f835ddbc9010b -images/project/artistella/artistella-3.png,1700077254823,ebde0de43eb3f3d0b0e8814a64c81fe6b98f29ed1eaeaeac80c324c29a1abf5e -images/project/hallo/hallo-7.png,1700077254845,9fdcd7800360783fa4e45795aac973a3a4deed651ce8bca3a8de8a344990d170 -images/project/portfolio/portfolio-4.png,1700077254883,7de4cf2aa0618bf5c8324a40d5fa4ecf6fe58435028259aaab3134c4740bbd84 -images/project/hallo/hallo-6.png,1700077254843,222fa0af81c331f33c58b9b70f5038200f454b2e1b9e4b74535a84c9b967a061 -images/project/nxdflotto/lotto-5.png,1700077254876,6453834769c94fa38ad2676b6f8857e2e32d7f0f0dd7984fbde06baf2e173377 -images/project/hallo/hallo-4.png,1700077254835,a5acde0b2d0058da2824d88678f335af0da24fa47418b8943e63ec738a53b98c -images/project/hallo/hallo-2.png,1700077254829,80a3b1d977a8bb38705658e71f64b54028a6fa31c438965b64f4ec6d902b3d09 -images/project/hallo/hallo-1.png,1700077254826,91e778d3f29245cb0f7e5587f49647f8e2c312ad7172cd5388d2e69dea87fc85 -images/project/hallo/hallo-3.png,1700077254831,9ec68e8fdf63e734ad783eb57ac06cb957f93b2969bdfdc4378b5d978d47bd37 -images/project/artistella/artistella-1.png,1700077254818,b503ddc090abb0eee498c9a6626a03b1d5d9cb83f889b105f3894ffd0e3c9523 -images/project/hallo/hallo-5.png,1700077254838,a469866cb61e92e1c388e751f65836d331e43ecfea9721e4a1179c51bea9b125 -images/project/qrcode/qrcode-1.png,1700077254888,db7354f34c689303e728ee3f5587920f194ffe0639adc76e3db75e883e0c1930 -images/project/nxdflotto/lotto-4.png,1700077254872,db1cff59d358f9bdf2c9777d26a7d98fb21c88fc137b13a058502e71c8a0e69d -images/project/nxdflotto/lotto-3.png,1700077254865,575dcadaee72b157d17ece976975e7fc7558335c389875c6459ec440f5332aab -images/project/nxdflotto/lotto-2.png,1700077254859,0a272cd644bd2f843a6dfce085a02eed632283887747aceee2701bec89c2391f -images/project/nxdflotto/lotto-1.png,1700077254851,cdfb205bc93e8e94358ce1147ca6d69d5008fca2b294d349eb46932c77d447c3 -static/js/main.7d71aed7.js.map,1700077262749,f1007fc5c7afa0e9de547846657fbd7884ad0f401348df3c056e27cfe86ee407 -static/media/EF_jejudoldam.d02e2b7a6d2b97821dfb.otf,1700077262749,6be32030a0f7165c88b2c3a5a0930bdaf2bae0e5450c7a9cda2af26f737d5abc +asset-manifest.json,1700079286496,d8a9c15bf1fbe14d3de98862f5a4db79ce267ff68d079e68d478139af25a1739 +robots.txt,1700079279628,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 +index.html,1700079286496,d557311accc118d4e1deb3c48d9846989658c7c7e8597fd6bc3d44b3c1320a33 +images/intro/wave.svg,1700079279591,6151d95838f42150e8c78e0c3973747e09ccd76be9fc84af17ed6ac457bd6de1 +images/board/snowman.png,1700079279590,9cc2e6f125dc0f5774292c6f54b1d241701fafddcc35bb73e4b78c474f47c892 +images/board/write.png,1700079279591,5473773d23481ebdd97943f540d4da1d27efddca99c7bcb522b1080ac8c0a15b +images/skillset/arrow.png,1700079279625,f43a1625e422049c809d51f92a186fb9096a69f4fc412cf2e0330dcf804867f7 +images/skillset/css3.svg,1700079279625,811935f4f923aaaaf32657099da4c6b2479b7223925c578d4a2c54346efee5aa +images/skillset/django.svg,1700079279625,80a481dd97dd5c2c020e6d669c664cc600805d305156af3cd4a69f78bd2533a2 +images/skillset/figma.svg,1700079279625,429f024f6e8927d7aa6af473a8c83f56f97239788c48ecaafde378144aab6483 +images/skillset/firebase.svg,1700079279625,e72d249bc93151e9cc0d0b1759c38db6a058097269b074d46edafd674abacabc +images/skillset/html.svg,1700079279626,3f9690a7d12e4e6a9547029700af6182af5a649478f9d52ee50bb4221252adb1 +images/skillset/js.svg,1700079279626,59c30d67021f35934f46ba864a2a9895b9e718e58b28c1d2f8e3ec481d55782e +images/skillset/github.svg,1700079279626,8a7e2d52d47289ea7d8aafe2ef74805aa7c0a142c2dfa3e0d26729822514e106 +images/skillset/python.svg,1700079279626,12ce1785f64589d3ff06296f4aae99507b460a780420cac766440cead01549c9 +images/skillset/react.svg,1700079279627,9a6a3af9cd8950b71d5222495d285326b2e603d3bc8d10f18f3e0cfa0a434f41 +images/skillset/slack.svg,1700079279627,b53b44465c98a16a8cb00e41ba1b74e1da7831cfebd452f937d1e1d249a55dfc +images/skillset/qnet.svg,1700079279626,13de1d298717d37cc8732ff92a94f31131b99e58b184307f18bc94a83f92e8a3 +images/skillset/ts.svg,1700079279627,1181a5aeee960fa5e8f13df3a4e2be54fa324aef32e29281fc617470f688dd29 +images/skillset/zeplin.svg,1700079279628,7e318a83c540f699d820e217dfbea626f5b40f1ecea1ea85a93de8fc5b65c0a1 +images/skillset/styled-components.svg,1700079279627,5384e068549ad22dbfd59d421aa3434ab6c76c72d0b339f7d63fe4d9b7dd8e88 +static/css/main.43ab9f8e.css,1700079286514,a1f22ab015b278105326b876a18cd6941cc4a487cc1a1bb6a4257c2878e2c19c +images/skillset/sqld.svg,1700079279627,e2a8d0b40e96c2d3844d200d1bcebe64f97ece72800d1cd31e6413cd7c4106ac +images/board/message_bubble.png,1700079279590,e73ba70bf7456717ad0998c131dd1f9b8b5751bdb2b3ab95c9dacdd35ebb4959 +static/css/main.43ab9f8e.css.map,1700079286514,d5c98c9051147fa26ceca15c69e8fc1675a7387041d557b42ed6fea24b68f350 +static/js/main.a00f9bc8.js.LICENSE.txt,1700079286514,cd5416542907cd17a5a0433b74fd8fbe4b37e2ec21b8636c57dd54ffa5fdf267 +logo.svg,1700079279628,0765f2bdc493af04ef7819d6a3395430138973cb0599cb016b0aba1f84396afe +images/project/qrcode/qrcode-3.png,1700079279623,94e6fc25fb240bc7a2f48f44568e0d547a087b26acc97a3b9ef3e3f90109d88a +images/project/qrcode/qrcode-4.png,1700079279623,d94c0988f712fe864bfaee1042d471d817df655598d4ca37201a64ec33cc989c +images/project/portfolio/portfolio-2.png,1700079279618,7c48f1ba3be77b880c812222ac42b7e5c46bbcc72bfa3b5852a4786076903e69 +images/project/qrcode/qrcode-6.png,1700079279624,1bcfd5dccbf4ce13a6e63e60199186273da536ebabc2355ed97081cb4e6989ae +images/project/qrcode/qrcode-5.png,1700079279624,583565fb8241b20306afc73691c957f3b595767d2f4109c893644501ab239255 +static/media/SUITE-Bold.e22c698474e4f4301302.otf,1700079286514,bd924b000f9a5f9543b042cd934d0a215936249a370f2e6af6b3c31ed066cc5c +images/project/qrcode/qrcode-2.png,1700079279622,266ae5909a9d6a3c682e56d1e4d92152ccc981c6527ae3c85bfb9be097d4fcba +static/media/SUITE-Regular.680ae46430dcc1be483d.otf,1700079286514,96be007d3c4e799ae9c5b282e6c41cdcb24b8621ab9bebfb4d2d3988ea40bf8c +images/project/portfolio/portfolio-1.png,1700079279618,20fd5479ca8fada9b60e33651a05982578ea370d8157b8671674b943169dabc3 +static/js/main.a00f9bc8.js,1700079286514,7ffdd000939bf3b38a8b092b37227c1e66fc22f1aecbdbd72e849d67920edfde +images/project/portfolio/portfolio-3.png,1700079279619,3724e1895e088e4bd7359c261016e6defa222ecfed407ab0b7a3c43f3cce21c2 +images/project/artistella/artistella-2.png,1700079279593,0dad5fd038e906abc21c27a83cd6e252a9d974c56602d163834f835ddbc9010b +images/project/artistella/artistella-3.png,1700079279594,ebde0de43eb3f3d0b0e8814a64c81fe6b98f29ed1eaeaeac80c324c29a1abf5e +images/project/hallo/hallo-7.png,1700079279602,9fdcd7800360783fa4e45795aac973a3a4deed651ce8bca3a8de8a344990d170 +images/project/portfolio/portfolio-4.png,1700079279620,7de4cf2aa0618bf5c8324a40d5fa4ecf6fe58435028259aaab3134c4740bbd84 +images/project/hallo/hallo-6.png,1700079279602,222fa0af81c331f33c58b9b70f5038200f454b2e1b9e4b74535a84c9b967a061 +images/project/nxdflotto/lotto-5.png,1700079279617,6453834769c94fa38ad2676b6f8857e2e32d7f0f0dd7984fbde06baf2e173377 +images/project/hallo/hallo-4.png,1700079279599,a5acde0b2d0058da2824d88678f335af0da24fa47418b8943e63ec738a53b98c +images/project/hallo/hallo-2.png,1700079279597,80a3b1d977a8bb38705658e71f64b54028a6fa31c438965b64f4ec6d902b3d09 +images/project/hallo/hallo-1.png,1700079279596,91e778d3f29245cb0f7e5587f49647f8e2c312ad7172cd5388d2e69dea87fc85 +images/project/hallo/hallo-3.png,1700079279598,9ec68e8fdf63e734ad783eb57ac06cb957f93b2969bdfdc4378b5d978d47bd37 +images/project/artistella/artistella-1.png,1700079279592,b503ddc090abb0eee498c9a6626a03b1d5d9cb83f889b105f3894ffd0e3c9523 +images/project/hallo/hallo-5.png,1700079279600,a469866cb61e92e1c388e751f65836d331e43ecfea9721e4a1179c51bea9b125 +images/project/qrcode/qrcode-1.png,1700079279622,db7354f34c689303e728ee3f5587920f194ffe0639adc76e3db75e883e0c1930 +images/project/nxdflotto/lotto-3.png,1700079279613,575dcadaee72b157d17ece976975e7fc7558335c389875c6459ec440f5332aab +images/project/nxdflotto/lotto-4.png,1700079279616,db1cff59d358f9bdf2c9777d26a7d98fb21c88fc137b13a058502e71c8a0e69d +images/project/nxdflotto/lotto-2.png,1700079279610,0a272cd644bd2f843a6dfce085a02eed632283887747aceee2701bec89c2391f +images/project/nxdflotto/lotto-1.png,1700079279606,cdfb205bc93e8e94358ce1147ca6d69d5008fca2b294d349eb46932c77d447c3 +static/js/main.a00f9bc8.js.map,1700079286514,282588fefa3a708ece1c414e07756b63e813152c900a1be32078a121611656f2 +static/media/EF_jejudoldam.d02e2b7a6d2b97821dfb.otf,1700079286513,6be32030a0f7165c88b2c3a5a0930bdaf2bae0e5450c7a9cda2af26f737d5abc diff --git a/src/components/Board/BoardContent.tsx b/src/components/Board/BoardContent.tsx index 38b2e0e..03a907d 100644 --- a/src/components/Board/BoardContent.tsx +++ b/src/components/Board/BoardContent.tsx @@ -5,30 +5,37 @@ import "../../fonts/font.css"; const ContentDiv=styled.div` width:100%; height:150px; - /* border-radius:10px; */ - padding: 5% 5%; + border-radius:10px; + display:flex; + flex-direction:column; + align-items:center; + padding: 5% 0; font-family:'SUITE-Regular'; &:nth-of-type(4n+1){ - background-color:#7FB4E2; + background-color:#95744A80; } &:nth-of-type(4n+2){ - background-color:#6F3A00; - color:white; + background-color:#6F3A0080; } &:nth-of-type(4n+3){ - background-color:#FFECCC; + background-color:#FFECCC80; } &:nth-of-type(4n+4){ - background-color:#8B7356; - color:white; + background-color:#8B735680; } ` -const Author=styled.span` +const Author=styled.div` + width:90%; + padding-bottom:2%; + border-bottom: solid 1.5px black; font-family:'SUITE-Bold'; ` const Message=styled.div` overflow:scroll; + padding-top:2%; + width:90%; + height:80%; ` type BoardContentProps={ diff --git a/src/components/Board/BoardList.tsx b/src/components/Board/BoardList.tsx index ef2d987..a6401c9 100644 --- a/src/components/Board/BoardList.tsx +++ b/src/components/Board/BoardList.tsx @@ -11,7 +11,6 @@ const BoardDiv=styled.div` width: 100%; height:90%; overflow:scroll; - background-color: white; @media screen and (max-width:500px){ grid-template-columns: 1fr; } diff --git a/src/components/Board/InputMessage.tsx b/src/components/Board/InputMessage.tsx index ac8fc0d..292ede1 100644 --- a/src/components/Board/InputMessage.tsx +++ b/src/components/Board/InputMessage.tsx @@ -22,7 +22,10 @@ const ContentInput=styled.input` height:100%; padding-left:1%; border: none; + border-radius:0; + background-color:transparent; border-bottom: solid 1px gray; + -webkit-appearance:none; font-family:"SUITE-Regular"; &:focus{ outline:none; @@ -34,8 +37,11 @@ const NameInput=styled.input` padding-left:1%; margin-bottom:5px; border:none; + border-radius:0; + background-color:transparent; border-bottom: solid 1px gray; font-family:"SUITE-Regular"; + -webkit-appearance:none; &:focus{ outline:none; } diff --git a/src/pages/Board.tsx b/src/pages/Board.tsx index 3ccbab0..e72edf1 100644 --- a/src/pages/Board.tsx +++ b/src/pages/Board.tsx @@ -23,7 +23,7 @@ const BoardWrapper=styled.div` height:100%; z-index:2; padding: 5% 5%; - background-color:white; + background-color:#ffffff80; border-radius:10px; `