From 97b7ad0f24ab4304606fc9e20d83f9e36df2d5b0 Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Mon, 25 Mar 2024 03:44:27 +0900 Subject: [PATCH 01/69] =?UTF-8?q?feat=20:=201.=20GlobalStyle.tsx=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=202.=20=ED=97=A4=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=203.=20=EB=A9=94=EC=9D=B8=EC=BB=A8=ED=85=8C=EC=9D=B4?= =?UTF-8?q?=EB=84=88=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 163 ++++++++++++++++++++++++++++++++ package.json | 4 + public/assets/Call.png | Bin 0 -> 2114 bytes public/assets/back.png | Bin 0 -> 546 bytes public/assets/profile.png | Bin 0 -> 3828 bytes public/favicon.ico | Bin 3870 -> 0 bytes public/index.html | 51 ++-------- public/logo192.png | Bin 5347 -> 0 bytes public/logo512.png | Bin 9664 -> 0 bytes public/manifest.json | 25 ----- public/robots.txt | 3 - src/App.css | 38 -------- src/App.tsx | 18 ++-- src/components/GlobalStyle.tsx | 51 ++++++++++ src/components/main/ChatApp.tsx | 33 +++++++ src/components/main/Header.tsx | 84 ++++++++++++++++ src/index.css | 13 --- src/index.tsx | 15 ++- src/types.ts | 5 + 19 files changed, 367 insertions(+), 136 deletions(-) create mode 100644 public/assets/Call.png create mode 100644 public/assets/back.png create mode 100644 public/assets/profile.png delete mode 100644 public/favicon.ico delete mode 100644 public/logo192.png delete mode 100644 public/logo512.png delete mode 100644 public/manifest.json delete mode 100644 public/robots.txt delete mode 100644 src/App.css create mode 100644 src/components/GlobalStyle.tsx create mode 100644 src/components/main/ChatApp.tsx create mode 100644 src/components/main/Header.tsx delete mode 100644 src/index.css create mode 100644 src/types.ts diff --git a/package-lock.json b/package-lock.json index c27bbe4e..11623e7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,8 +18,12 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.8", "typescript": "^4.9.5", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@types/styled-components": "^5.1.34" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -2288,6 +2292,24 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -4103,6 +4125,16 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -4290,6 +4322,22 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/styled-components": { + "version": "5.1.34", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", + "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -5750,6 +5798,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6182,6 +6238,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6372,6 +6436,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -8953,6 +9027,21 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -15719,6 +15808,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -16260,6 +16354,70 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz", + "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.1", + "@emotion/unitless": "0.8.0", + "@types/stylis": "4.2.0", + "css-to-react-native": "3.2.0", + "csstype": "3.1.2", + "postcss": "8.4.31", + "shallowequal": "1.1.0", + "stylis": "4.3.1", + "tslib": "2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -16275,6 +16433,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", + "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", diff --git a/package.json b/package.json index ea335d36..b0d6675f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.8", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, @@ -39,5 +40,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/styled-components": "^5.1.34" } } diff --git a/public/assets/Call.png b/public/assets/Call.png new file mode 100644 index 0000000000000000000000000000000000000000..980e773be98fe59854137359a430713556007458 GIT binary patch literal 2114 zcmV-I2)*}-P)@~0drDELIAGL9O(c600d`2O+f$vv5yPV z3YI3*Gpn%J>QRq0+7HeAswm8A8HE1Z(>>iivjCAuBoc{4B9TZW5(ydseRCpjK?!3J z<-Yn8{<;8}Ea0X16C&5>Pmp7IACh9Cei{?+P{P1Dh%|#!@eU#y|AIV{2auGnLC8b) z-;pAN7wI#IcoyVG`3;oC9L&_@Mk&tVW%@k?P6EE@B8I*bIfci?QwSVC7SdIWRmyZ6 zvcvB#2u}=kT`ZInzfhKNsD3{p-zg!759w_<6BiI5Bj^H03@N6{VgLHsYv}mX@{PK9 zaP9p94&Y|-oBHV<1W0=y!n2IYH8GH%MGiNT+v@4(wSP+}3wm692LaM<%HoP~I{F=K z9LsOjT4hdLRZ~`a7}^@e-9mhcfoSKg!rgk*_{9tY!%YyJ`+bQ~aU*%A9ezFI(55ao zK@xPt9>qX16-_0{L`|OcQI(Kq@K9N0An*mj+?1$^iV*!U(<5gwDt;1wsX;RGdRm-A zAn*k-iNbn>TFjk_KcEZGbu>1wA76#S$CvjZ0C<8t(v~r%qgp+R?>bQt+9>? zadi#>z!PNeMqc|mt`B@VTG~1kX$Aqn69m&6RK7`;N8kg@{L$Q2C@WOl7xd%a$j@7NLM@B78xxc0r{zZkF9rmen%dUo%pvW;chN`s-jAhw7L zKkX0YUGOm$ww1b!wc~WF7}}Z=M#@TD9DI_}P8`PypnQvT69k(QN=qx~m&I$~VtTWJ zZ!7J-gK7_RO=NA|trgU?mFDDF$HglcIDU3eHFdFHrepYp*}G*QYw#OH{p>Mp>SD)M zP_94GS!F@{6CpDdCJ(lY(ch-eQ`|vIR24t%isFH7r2=gIytAQ-;!hByNbb>H?0Q!e zf8{+=5gb_izGg#Q$@>+=w1V2F8}6C{>-a@-$0`brH!xB9Ia=ccqaiXm=;q|HHE2}4 zZD`7y45fC`-&rRo>LF6K4&3@|wlMJWUAT=-s>n-Pcl!<^`tmzvt%Cl9PSYRg2h5GU zaM5^~-VR~<>d!)u=1=xqO*MCbi*0{<1!fNZQ435T8RFG+&6+x2`V|B@k@u}>52>Q1 z7o!Kjg(HgVl(>pnm`>DB*l%|AgEWUy-S5l({8j&gAUKualtSTp5)eleeIA$gE4(%$ zBSZ%D`CgysB6tJq5d^VEUhYnrCkl?c0FfM#4^NMy7p-G(rH4RbeS#p5)qkAs-|bHn zJ+_)^R!^@p2dzD|-VXmh}pP^dSoJ1k?P=Px;){g=rw%UYDqQ=8Wqh!dt%}2rE)*A&ScsX2S?^ru&Mk zhl|moD9##%>FDq`BM8!$C`emtsS^Sm@42Goy>Ctsq)$=I*yvj(jqhy|;wnvHd_{|U z->e`AZ=vV5c)UJ-y)a^VcJO<(26CPE`C<3e<#2_~3xe=OIfoCbM$*<{nym4mvV`TS z6!M)K@4Qorg%{yDHT!LcAP8^zvM=&Bg-#FQrX$NPFy_>?J%S*8=c)R{e(x75iTV{| zlpfRXZNQ47sS+;8_f)C-Z9CLV_oyWk;_5#9@Gomm|8@z2m=jCySeqPBlu@zRy5s+B zEwOtE>jSiXf*@E=e?GcrX)Q9~@qb%al%n?YivwV=oq|+gYmu}Z{fC%J;oBYP{bfa2 z+bsx!(Mhu?huW`TO=Htg$Eb@W2L{_O2!f*EA^p~xy7DX7g1X5m%&g!Kh^q@=uw7wq z6YSOT20~-ZpGisiJa+HEZdgb~b!NQ1&D2;6tT771wpLmUWCl!j%R*LRC-{1{7IXCa z!t(E*t2`Y0n;v${LRR7U6~tIeuJ@Msj>JBlgHMs`@~#8BYataTY52 zj@7|BhAT*g5$3hE?Z^k7x)_HqNJUdsuL~YqO2ZMP;>pLcdVrYk8iNl!_xFY;NX7p? z28C&1HQKkNlg?jcb8Xnj(rS{sOFuKVzSn#s#Ejj;?4*&oF07*qoM6N<$f;uJiMF0Q* literal 0 HcmV?d00001 diff --git a/public/assets/back.png b/public/assets/back.png new file mode 100644 index 0000000000000000000000000000000000000000..3de64192f6d7e7647d26a1057adb199bc90730a5 GIT binary patch literal 546 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/public/index.html b/public/index.html index aa069f27..4b21eb2a 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,12 @@ - - - - - - - - - - - - React App - - - -
- - + + + + + Messenger S&Y + + + +
+ diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5347 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c77..00000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc4..00000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e053..00000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.tsx b/src/App.tsx index bd79c185..cb07514f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,13 @@ -function App() { - return ( -
-

19기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~

-
- ); -} +import React from 'react'; +import ChatApp from './components/main/ChatApp'; +import GlobalStyle from './components/GlobalStyle'; +const App: React.FC = () => { + return ( +
+ + +
+ ); +}; export default App; diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx new file mode 100644 index 00000000..3a2caf00 --- /dev/null +++ b/src/components/GlobalStyle.tsx @@ -0,0 +1,51 @@ +import { createGlobalStyle } from 'styled-components'; + +const GlobalStyle = createGlobalStyle` + @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); + + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, details, figcaption, figure, + footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + ol, ul { + list-style: none; + } + blockquote, q { + quotes: none; + } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } + body { + font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + } +`; + +export default GlobalStyle; diff --git a/src/components/main/ChatApp.tsx b/src/components/main/ChatApp.tsx new file mode 100644 index 00000000..0dddbdb3 --- /dev/null +++ b/src/components/main/ChatApp.tsx @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import Header from './Header'; +import styled from 'styled-components'; + +const ChatApp: React.FC = () => { + const [userName] = useState('박사랑'); + + const handleBackButtonClick = () => { + console.log('Back button clicked'); + }; + + const handleCallButtonClick = () => { + console.log('Call button clicked'); + }; + + return ( + +
+ + ); +}; + +const AppContainer = styled.div` + background-color: #E3E4EB; + min-height: 100vh; +`; + +export default ChatApp; diff --git a/src/components/main/Header.tsx b/src/components/main/Header.tsx new file mode 100644 index 00000000..ba6ddc5d --- /dev/null +++ b/src/components/main/Header.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import styled from 'styled-components'; + +interface HeaderProps { + onBackButtonClick: () => void; + profilePic: string; + name: string; + onCallButtonClick: () => void; +} + +const Header: React.FC = ({ onBackButtonClick, profilePic, name, onCallButtonClick }) => { + return ( + + + + + + {name} + + + + + ); + }; + +const HeaderContainer = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + background-color: #F7F8FC; + color: white; + + width: 100%; + height: 53px; +`; + +const LeftContainer = styled.div` + display: flex; + align-items: center; +`; + +const BackButton = styled.img` + background: none; + border: none; + cursor: pointer; + + width: 8.5px; + height: 17px; + margin-left: 16px; + margin-right: 33.5px; + +`; + +const ProfileContainer = styled.div` + display: flex; + align-items: center; + +`; + +const ProfilePic = styled.img` + width: 37px; + height: 37px; + border-radius: 50%; + margin-right: 13px; +`; + +const Name = styled.h2` + font-size: 20px; + color: #1F1F1F; + font-weight: 600; +`; + +const CallButton = styled.img` + background: none; + border: none; + cursor: pointer; + width: 25px; + height: 25px; + margin-right: 25px; + +`; + +export default Header; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e8..00000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index d10be77d..c1f31c5f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,13 +1,10 @@ import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; +import ReactDOM from 'react-dom'; import App from './App'; -const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement -); -root.render( - - - +ReactDOM.render( + + + , + document.getElementById('root') ); diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 00000000..727a1bd5 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,5 @@ +export interface IMessage { + id: number; + user: string; + message: string; + } \ No newline at end of file From 72664bf418e5f2d8773d749777ce22ebee1b2f36 Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Mon, 25 Mar 2024 04:39:07 +0900 Subject: [PATCH 02/69] =?UTF-8?q?feat=20:=20=EB=8C=80=ED=99=94=EA=B8=B0?= =?UTF-8?q?=EB=A1=9D=20=EC=97=86=EB=8A=94=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=EB=A9=B4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/size=big.png | Bin 0 -> 10820 bytes src/components/chat/UserProfile.tsx | 44 ++++++++++++++++++++++++++++ src/components/fakedata/friends.ts | 16 ++++++++++ src/components/main/ChatApp.tsx | 19 +++++++++--- 4 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 public/assets/size=big.png create mode 100644 src/components/chat/UserProfile.tsx create mode 100644 src/components/fakedata/friends.ts diff --git a/public/assets/size=big.png b/public/assets/size=big.png new file mode 100644 index 0000000000000000000000000000000000000000..919283cc8fcc80371d6532a9a2975f217861581d GIT binary patch literal 10820 zcmXYXbzD@>_xIgpX=&+h0YOSwP(E}w(jg$Nu&jhMtbichDUC>XN{2|pBHatpDJjiw z{XWkh_jPB^%$zxM@0po%-sgmAX($rl(cl39K%lH7rvm_>rhg9(7MdbDcv6dg;lh=S zTmj&z>c0n6Ady^*CW2gb6lH*lQMw&;1!5j^qoa*i~e zO4~Z#(tWTZd)NUQaAup-BEc8j4Pk4Mc2V~C`?I*laQ%dVw@FWzM1Bc&walh^Wo}NX zki8J$Av?gY8nInr^CF>jAgxIcmXWiR`HGaQQGSeJgMr&EH7}Bm#G1*xSuA;LU|`_B zRMH$U`u*=s+}n}`*nXs0g}LOI*Ql5RP$%q#>fg@mO-ZKUqX^fD(|!n5kgy8BcFoca zuYX2MJ_eDrW4laO=;iN-d5BPtIA*NPR`I&nilp>){Ho=55ja*@z%-Gxs&W;CkFmw^ zS4|Bc;S~vp3Ddr2q!7`4`RXk4aa6IrA$b&5!d7Tf8l|BK4|bP*tApgD!q#v#N~~6{ zN|d_!rRu6M^XHc=s91-aEYCN35yd%1Qnx3=FT*N#(vATh1|9 zzUdrI!R&tmCQQpApNnTcY7mp&ykg$eCr`%fI4Q+8S1xTo7234n{?8f&!rl`8G?#kZ zqjsVn*IT(y?X0qp`O}kKhKP>^Wzlx`ur+YLtoTWweE621maO|Jd2LdbU38kXbNB^^ zqhe>5IKf8|TWng9$1MX-mZV>- zEr*i4QsFpIHa+p02 z-axA>!Cyn3Y{HpV0b<$_Y+cdET?imq1{dRo&`nBRX#~UWWaFpQb?hQ zInqLWLP)XKR9s<}Sp`COEmC-=RFq4k`{6TseAXnkJU4k7+az)5b@~!(%ZHcjQbagV zw~ZGo622zEbW;7sqy5&Hj$6B`}3+zv*_n&`f( z(ucnYTnv|AIz?lu#i(XkPB?-Ch3x*m(-CMXo<==sJ9Cf6 zRhuM%i~a2&q~jta9FVPJj$_aARCF*8L=176nOpr}G*U!v(1KEgAhah+Gdp;gY3s-> zUuKj`palj_b1O4SFxmoRlXd&#BVy=DAi;KI&X5S0&k9E*$LCSLH5n*{MEp=vm~BOH zEeaozMeH^w((M36Q zk?j8!rKYgfu@jPam{Ft`2eP3@yq+$J1Pf9XRnB~v5L21J38fJ3m6L~l4}65_FB80b z%b8J$KsjPKE;4!jPwd|^I1Mf$C%rUsye5)SmP4SFC?01OE2pF%P!TLby^&ERmExSQ zp}Q^mvz;YDHWAoQ0vE_($IZd7duk;UA^7H|{pN>X9UI6kcfMx*hp!9KEsqfdfq{XZGPOF1%T}nYrD5> zr~5}sQo!N3^n3BgnBfCQJfau`ei)iWVR88tA7Y9VObbL1yD*c$>GvO2G%F~rR30S& zRsD63ysdl~XRm5c94L zNn6G)6n&4Kk^}}euV)i4=)K=0SsU77X!JOF_WL9csep0{v{^r?g_?4hBqm@-NAfY8 zygre9iU(LQZ*(i#{{E*J@d9aOC<=!Sg(i>`Rj;b-atvFLASL{UNW!c0nW`ub!1VY* z!gYV)-lx!7?Hjn_gXakh1h^HTIy`I-;G4r`U4A#nRiC@M|2P0d)>UrR-KyD(XjLq0 z7F1x^fbqi0bbElC6zP*OSmz3Wr?Dg&>{FNV?UbAk%M(OwOFC$ z7WUGd$4bhnKhXYLGTZOSubZf$sIu>XWXQ<8t9pgNVS?YpYw3B-Fi~9+PsK5YQ}x%? zOpg_O@X<))aHQhwd2^#!MYntrq3#C1F z>xE7>8CMABGo%8`%wuYs<;8^A9C4*sgeOJ(VNS&MJe4|#D(NDuYVgz%nUVunKoSTkNg#8aL@GY);qj}@O^cIo`X$9 z%?C`v)et3zDyQW-X4ffW&OKPWfahdsb3%tCyHs$Qlb*3b*Lb?zpw_?rJKIXYf4_NR@*_>@H5%`yOs0E7yoF<|A&pnUR6Gy)L=2nDOIm!m>6&n4mNHRx zqE-4DnD5;qb9i+^A8Zmb$s?ANsluLC{-zpx(WBkxQiOH63Eeoe5Qr7eU-ZwtaNtm-d-BGuCu*-s7k|fy?iW@$X|x%(9-L>Ek*StoGLzy8pX)+ytkEq`af!&dT+Cd|BiRYazCMPcx`wD zJE~|I84lZ2Xs^Bq*Iyfq?8ng1?IqImB9G?2AI#Qy7p_dUd{ki<^$#9IQ(> z{krVwz1qF~D1&IU+Hw;*mg@uz6EJMOURyg2DuH4DETJn+dC=RUW#W(! zT0Oe-NdJF#0XtY*5B?i0oZ~HP*zAPhCXBj`wqVmUT>Ti-5cPJjZaOT@ZzIYzOu(QKqS{NkOdM_R>sM`P1qDjxdd~y?g`&Bl$8#k5|OU;4?&Zmtjnpu zbDqk!kX6#NC`+>8nVTwQO;FzeyM4ojZHOvy)blznfte!Fwel2(GyN{=o@roM+J{uz z$YUZ3EWCRzI9Y+g2mSuT>WG#vUn1_q>GZ<5_Z(_OJ4cp82eK zJ7`DaBQ55p_RVDKrpq=dJcW01U1#+=-&YBy?`$4!7?`t5B_=;LdfeK8XnsAPXok6n ztdet4B&rEoCH-N;Udb!GbJ1{gXq=cO$|r@f9864!rH&jvZC(hV7e~E4P#%5LO;^^z z%*P`(^H{x3{rgcEr_3{C2qE+v=eSzmccTDVQ#bnPFYN+j!&2Lp2{7YC^zSnq9XR?- z-H30I#rKU%7L#rw!T!?)+gd}$3{|?DkUBLt%3d>%+=&_Ve(lSXI?@jl9!(VNcA9yZ z?JWw6$FK47S}KHL3JQ;v<8t5@R2iKL#qN z^9x~oO(G0r%=1Bf%DM|-{VvamdIhnJ0?v=Kh`TB@5@lZ)J9{w$4&lvzpc@y>U z>!0*N03d?5j&Mci_|C;~(fNY&ywXN9}w;fJM-UJ$SiE;y$_) zv|EYY7jx^ca0K`%>h_8VqSSqb-#U%_X!q0j?oTUX;>Cxv3VIOGNzkkRw`T;uiQi)% z@HL3~w*;!!5w!_h*rs1}i0sc+hvh->{5|gom~|t$L>>$y5LOSg;=fzovTgK4K9R+iK=lliMx5Qi%`8bs!1 z6*5ioM&UdJCQOt*jN24$H_L!PE{ok{0q?~ZQLw$Vzv!hp`rOw#rF!RP9!5kdR}~&4Nf$4)Obtvu{&jvwN5dEY9z+P!3+ z(QtAVqmZK0tHkx9XysJ&Paa{IA%~bA+*W9Vyy0jg2`smx_xjcL(tcW^bf=&2FlcCd zDQqR1lu4zmBbPCS!rZuIOuCbR#<>`fD5*$6>c|MY38q+~kTKW#ADK{4YwEi^^{}E0 z-wh)0S$?}76ArZJn)X`m3#oRlM3_HyW%E7-B%=?){y$QVM3_?Q;080<@k?&#*@0+> z1ecVgy(SCZPoBr;->370K-+)co5Mus>c z+n8TkNOIps)U-1beg-?Kob7%x*Tf}`(;jIEH0^@0=jH1yhOJab2OehpnOUadlTLK2 z_2~M|0F~Qc=PAq2d7|1O!-bH~v-rs&tAA`h)N4d)CZ#(PdI_)L2vR_FS;Y1;UbmH$Z*Q$eNa z?KD_$f0BU-2RtvXC^5App%-MJHGLB2x=wYlQuo~7IwO2>Giu%5CtTm=p8t86usxy9Nz49l-suV;)|np&VCUy51zX~T;s1n2w847_01i|hl~cj5QnDf!w_LKXcHB( za2#+=Ez3#$HK4FB;8v*pqjU)l^sCC>K8c$MbKIJZxvc>5+a<6A8qPx7urGS8Z9=wf z4-@EmG4YAvRe^+=#4d*ua4R8EN9oQkn&6BD9MRbjM35eim?#OXiUfqcN9+P)UbNtm zM5!48L+A?AqDA$NH0WsobKy<#PuN{v=YM0jr>APF-L??A{cm=xEuH5T^X4sCIJt_!!q_1R_lk>3M!6^rxn%j0jDRT&{)+N-lJmlz>C zNXeU{I}~)qz7tnL&B!DXLYI+KUY&ivPbp1a?KPnwEqFF&hV9>Uf>lBN*y>yFDFptB zFgxRNiR-GR(l^Zgd+LrTnYXf=e%<=uHP}H z^*HPD!{mlqEBZOXPQMY<9Dbw4Ty5JicsF*t@5R9u#}(wFtWir#Xq4-W6n7~07~d(?xN+m^U07UQwVKM1u@-}UaUhg zPOS2L&15K6W&^K*sYld0byrAh(|Vd~(9hI~EUg~qg6#u5 z=XPl`YG~8IY20`!+7yz_{gNUh9}U%@T~X-HLx{&{`;nwMj)vp-A9f_-lh-%zpDy+C zJMU3~$S^F`dU{XWi$39X;mc$`BQ{kE-V(odsAqe3KoPsDv4OvF*v{{s`PvY}Key7) zC(*vIH59Tvl6ar}HsY7koK`2uYyuE}aq6#S2C51&Xkq7sel10L*?<5hjMnhhGV~Fe z20E<)fLPG$+}uEX5g!b6QI@iF0TPHzblrXDp z$^EfoC$;MpHVA;n*>P`N_Ysh15W@kW&`T#3?J(;B0IK=t)0V|N>rw#de9uVh+I(N_ zaEn_p0s@-UDhG-KOzm%RD?jw2q4^4jEcP@qxS9?aFeP7%oXGhe$ch30jT51=$;+z@ zgjGB#fGW9W9&&dzNn}jhLf`P%1pcj^G<0_8AsNS*!!f4-RB?K8nLl@E4@0tmAIE{x6p+Roo$n`UAF@XoVk zvlstO?Q-HB+~bd>#sh#wEoMzgRcC-cDLNXl$s4QZgc1F3-~q)TcP%oYUz`r;eB(5; zGAYBWGQA1_7ia?qA1mYE#8tX2ch2tkSc_89(f9yBLBmjyNO66Ii2)m1(M%LeAq6bx zSvSo7t^|1JKHHhh)BR`elzJ9un2!sf)VltCHvM83SB^lKc@LPbnV{r4^v`xq;5swB9avpLTs!(o35)L%CbGIY&Y|UOD6ntCDYIe=KT^>H3k5!%vaGq|)Y$lhbU6np4P<}3C$C8#9{ z8@j@$T<=MHi`w~p`-#Xldo1&T=`y|cs7;fJ#X#JNs7Q$PSG#Oz_IZb=8sbrrf$301 zyH4_TSHak|)liDr4))xe_v7e0fD-cmA(_j}Q(3L-=fKA@{x>Q_N9j!x!!sf8w6Qw4 zom85Xc`B1;%*cXM{r6oy^IBg`8DNf~L6o!B?1?}4-J?Vu9&bTPf4Y=0kL+ik5zxcE zOO!WAom6Ja1%~x6$BZ+3=VaVIg=GIXy;${jG^XQtI=dv-SoBgCa*c@uXYwDKwDidT& z0JB;5)=v%Y3;7pm=N9BMcs7=qQ~FkX{9D5K;T(@hX^@;XrCHplwDg})VbJIL4tp?T z*&L(8#VdU27pIeZcIzXO?dtBKvu;8XMl*Vt26twu-{k6qC#TEWUr%3uR7l!PE>NYw zj&T=Vq4M?Lt)GzQdDWxwcNY}5^TxZTVh>?8A)1$y+i+O>E^wOlox@!2tMqeabtjuF z&yB~Hp-TVb>mH$l_LH9N9`ucT5z#8%P;0Asadq^5>lcjyOSPG|v$8mTeAqbs;1F}cDDEQlV}Vx+qkMXLsg;9@Cf8Wj zkn{Bwh914K(DHa2(P2g`!%JNM7DhXdH>N&h@0n|Ky=Cvs&=pq6j3= zVA`%JObJRd*=Y%Ug&7yb0NQ$)8BVuQqddLjmJd|qdPlK1b z^ZF3gmWvWU81SgMWl_q9aH^!xg7Fbf|%H@KEI`!f9 zhH=IRmUr6R4Uc9u7vlcmS^h6vG6Aoy>kL+wSsLV%W{QGJex?{bzG|CJ{l?2ZNAU~I z-jLRD=0x%tGuee-F4~R+_KzJf3ugr_7=PY>96FQQDh#-FEfHIgGi@vGpGMgRbji5k z2XALLuy!2R`{0P?*rNCMz}>?^X;%lqEbH#By8P=du9BuR-j-dJIq#Wd6r&Jg`fNIo zk-;bAEuW3H(>{#C3zPCTPxpN>UP;4)%d=H1x15P&UDutK^?`iSAVY4bJbB8?>3PJm z_DBJ1#jbj<4q9>e^-S~JWa8^Zay*Pj{C>ati&c2dB=%mQ|)eXm(tv67~sgM2Bpl7(HG&0ZNi@T=!b3g2tFA;CBA4V<|z z{>>^cTgcXNo#b>c+0YASGEy^AcoOnT)i}(Z0Cpj2$y?$4PO^m~6>a1p+$Ia3p0BW6 zll2v|mp@Vh`(JDJX*#$0_>4cqE+tCL-hLu*Y3W!Nfl~P>Qg?!}u(1O-Kw}S==);3| z`=fc=fj{cLkPQ^33-5B)#knqDq@4L=(RMJ(TQg^l0ay^3rL=6RdO#i&#xuW`h$bmv z7T$8h<}24Kh^N9^ec4>5v-9kx;`_+b)#(?dBCUs;y z?CD))fKQ|E30XEVaMAL{TJGOoNYw0Lf4ENRz%drWoV!B?tXyTVJ&AJyk6cLlU%Ce* zH9Sd`Ev#)=axVqo6G9KSFGWKd*9@F}7#FLJNt5j(YDTH3DTi}86Nq7mg|iiYgQMZC zjx9|UJe^|H<1Zc0CY%5@74Tfw@oNIo`N<^}Zt@HoD*o#S_#rkLFJcuaB z)7izXe|>hs2&Rp-@fNi@6b+^o`hN2lJ23^iP%R zyCmCa@!GKmm486^08Kz~@!6k>u!UYy{kkW6HBF)#F)J*Kfbg#ydLhsEyJvsMQ-1cc z=wmKsb!0!Gwc=oBJwsVXuYi%^?V{U0a{8Y4K7T82jwE?0s!QaJQav1zzr+B#E@+%$8qeDK;27EFuyv>k<_ZqgiWMmHpZwp>be z%&Y$TUJ)8KdsYKdoZb#4?RMKfp%IRb>eEKl@ZD8xPKHxCl{KoRt#0*2pgH%5+UmhF z0osR-?j5g`_UcSyWw?~<6)%APVaR|~urTdJ05Y$K4xM%Pm=Z?cIO@ zY)52$$U9=^L)LOQIidN}qxqu)VmASa*u8I>rCQOt4hHV#KWvo~KFUlDA_{Qrd-XI4(Y8WZ*#C^b584oBO((&!GotLISu< zD&j^CJIH~vekB_dPOF4{)I#gp&#kI*N_C&Em}vlT1HH>b%6{R~{_Ih;TGZJ&3> zMgRX!2q{yy?H^g^P*>z8FQ^ZgD++v=03p^Tf-n7u* z_-2Vfip5O==GuJoJJ7vRf{bjGK6~4=v)DqSf~kca^PRJCPctn-ZfUJ!>mQh|9MnG3 zTz5F#KY(~OB|$Y%(dY2Y_w*Z`sTfhGxXICCyl?5RRAtJGmiph0om@*1aqC`5G_X1j z&{t`bB$FehLn+)gu-#D**=Tvoa~E;cWT)aLkMg5T`*$u&>Y{kSR~vL3D_(4HC_uCR z94`X~WrU+!k?9Z%e2GDxO??}F-L>6j6V@#Zjb6VeLgmUp0}>wLTJr1BpeIGQx(y3T z7yiWc5ohN1Iw`tQB+RKqCsc(2iE&uVECebn!Ot7l(1*1}n1F#<&g)_oSLAtaylomD zlzhW_!Iy2%OD!uSOoo5t0(^FI$^5eQb~+3QeOag` zhceW#7Wb`f7@7Mf*?OYo5}@jeL+KTCrPttMc>DS zVMlCx&RS5R@VYgUHi7SsAc!5H`=#3F&>!GD?9x=MhMh70FH1(9`IbRUqB^*X6yP)R zS}L?Tu$u|K_Z|z-M4yyC`TxSk8atM`KU1|DiK;HJI_0mI$=@y@1QKGPz6cjl7ZNyk z6G3Z_0=z^NsKBdt>I@(no`2o=X`KV5`-gIYV;$;Dir8~okXqp8vs?Yo3pu z#y~*{8k6-*347Ex_)xm8{SN017n^_Z>i~;VFFjKYG+7X(Yt^sa2I>zN(=&}m6GTwD z=!kK?t}{?0SK6fMe?q2sN(URn`ElCne5IKH2Ilx3A_v@?xWE-5u^6!=!6pQt8AL34 zs_t?SXeJn4deU8v3z`8lV|NM!o1jw!XoKkh#r=z(1A(rWkVWuqY|B`HI5%KX_+E0+ z|b8DYqUI-8`VB|9(Zi2i2&u8vsM;*ty%1~IdVj7z8l*cfxQ$}1*LW2 zxTWew8hBH5v78wy@nA3?W_|KT<85CP(BB-d+Y?p7YgzZ?mDW2WjZ4PE;%#3l&>tSJRbLQ|$7e&(=c_#eI?R7ti$k6vU$hAnCIy#_aO=V; z9Evu77Bm}RA?}LipUPv}adGg1IO$Fq$ujPpIl-eY`(H51bd%p!B|)ZHP;{%pt2hY~1Plvmbk!SpV>!jM|3Tp&DgZCV%r8{jPd#+M!(JJRGI@5E42*eOoAmO(1K)_2C z9zheFrpS{Zm|BUnCE1Tp45Qzf$OA*1~UI2xjd>@rl@55rPR%Cr6v< zD5rN&A@RDU_2{?@6AGy>d*jmbKtbndK%+w(G2Ld6> zLem}nyv6s|preYtB#SgUFHZZ#nNg_j+4m>?c{P(I!j@VPE+#Y>`fV4cHmiHcO;DwC zAiYOY%!;zeoPYg-pjCkRkK;6z{n*t<5q5+;4%D!c!gH^{c$NIq&Tw5~0gWw?uKcjc$(`V=%QK z8pQoJHUCBap<1Qnqd}R(mXlfK(-g(?J!z3%CY+i`ge>0_cYB_05X|r3JA<$M`_c_D z-V~l{m!3Z9&pTVX*8QwtLi>D*z$odW7`^&zJ`oAg0MmzS{z3I@O;HJ&j?KDZ0^x3a c``;^o+P6Zj9xpOlG_nLJ%WKG0$XEpaA0tRol>h($ literal 0 HcmV?d00001 diff --git a/src/components/chat/UserProfile.tsx b/src/components/chat/UserProfile.tsx new file mode 100644 index 00000000..5c51fd12 --- /dev/null +++ b/src/components/chat/UserProfile.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import styled from 'styled-components'; + +interface UserProfileProps { + profileImage: string; + name: string; + phoneNumber: string; +} + +const UserProfile: React.FC = ({ profileImage, name, phoneNumber }) => { + return ( + + + {name} + {phoneNumber} + + ); +}; + +const ProfileContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 26px; +`; + +const ProfileImage = styled.img` + width: 110px; + height: 110px; + margin-bottom: 25px; +`; + +const Name = styled.div` + font-size: 25px; + font-weight: bold; + margin-bottom: 10px; +`; + +const PhoneNumber = styled.div` + color: #63666A; + font-size: 15px; +`; + +export default UserProfile; diff --git a/src/components/fakedata/friends.ts b/src/components/fakedata/friends.ts new file mode 100644 index 00000000..2039b913 --- /dev/null +++ b/src/components/fakedata/friends.ts @@ -0,0 +1,16 @@ +interface Friend { + id: number; + name: string; + profileImage: string; + phoneNumber: string; + } + //친구목록 가짜데이터 ㅋㅋ + +export const friends: Friend[] = [ + { id: 1, name: '박사랑', profileImage: './assets/size=big.png', phoneNumber: '+82 010 1234 5678' }, + { id: 2, name: '석사랑', profileImage: './assets/size=big.png', phoneNumber: '+82 010 1234 5678' }, + { id: 3, name: '학사랑', profileImage: './assets/size=big.png', phoneNumber: '+82 010 1234 5678' }, + { id: 4, name: '면접중', profileImage: './assets/size=big.png', phoneNumber: '+82 010 1234 5678' }, + { id: 5, name: '취준중', profileImage: './assets/size=big.png', phoneNumber: '+82 010 1234 5678' }, + + ]; \ No newline at end of file diff --git a/src/components/main/ChatApp.tsx b/src/components/main/ChatApp.tsx index 0dddbdb3..c3b5ffd9 100644 --- a/src/components/main/ChatApp.tsx +++ b/src/components/main/ChatApp.tsx @@ -1,9 +1,15 @@ import React, { useState } from 'react'; import Header from './Header'; import styled from 'styled-components'; +import { friends }from '../fakedata/friends'; +import UserProfile from '../chat/UserProfile'; + const ChatApp: React.FC = () => { - const [userName] = useState('박사랑'); + + // 목록에서 누른 친구 상태 관리 + // 초기값: 박사랑 + const [selectedFriend, setSelectedFriend] = useState(friends[0]); const handleBackButtonClick = () => { console.log('Back button clicked'); @@ -15,12 +21,17 @@ const ChatApp: React.FC = () => { return ( -
+ ); }; From e6afb9d32adb4eac28695f83d08792bd44bdc625 Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Mon, 25 Mar 2024 05:17:58 +0900 Subject: [PATCH 03/69] =?UTF-8?q?feat=20:=20=EB=8C=80=ED=99=94=EA=B8=B0?= =?UTF-8?q?=EB=A1=9Dx=20=EC=9D=BC=20=EB=95=8C=20=ED=95=98=EB=8B=A8=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=EB=B0=94=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/icon (1).png | Bin 0 -> 2671 bytes public/assets/icon (2).png | Bin 0 -> 2165 bytes public/assets/icon (3).png | Bin 0 -> 2309 bytes public/assets/icon.png | Bin 0 -> 568 bytes src/components/chat/ChatInput.tsx | 92 ++++++++++++++++++++++++++++++ src/components/main/ChatApp.tsx | 22 ++++--- 6 files changed, 107 insertions(+), 7 deletions(-) create mode 100644 public/assets/icon (1).png create mode 100644 public/assets/icon (2).png create mode 100644 public/assets/icon (3).png create mode 100644 public/assets/icon.png create mode 100644 src/components/chat/ChatInput.tsx diff --git a/public/assets/icon (1).png b/public/assets/icon (1).png new file mode 100644 index 0000000000000000000000000000000000000000..ea63f2f01f38cf85536e4831b9d70e7558f85e96 GIT binary patch literal 2671 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 literal 0 HcmV?d00001 diff --git a/public/assets/icon (3).png b/public/assets/icon (3).png new file mode 100644 index 0000000000000000000000000000000000000000..a49721547b8cb200e742e4c9982298607416f290 GIT binary patch literal 2309 zcmV+g3HtVlP)@~0drDELIAGL9O(c600d`2O+f$vv5yPg zs54F4+9J_iu=)%EQldZtDt-^PWKx#IKNna4y9)r1$K&yMJRXn7g9v); z12~GC0v?Hd6s?Po$kKM9ECTu_v5>L*zc+HQ?@3z#;U5v-%1TLls^4qEVn zy#q_JSHM-o6AZ0JMDjO?spW8X3x^TAz|o2YYvQqGta%6{v_wlqv{OK8HiP&QiipSX z0w?Sgwy)2i`_%x7Apbw?_9G0Wx&8YF(_2+7oh}RKun30y>Tt&~dzgj?(~Jp?StME+remBKU+0uIq?P87GRW;PEa_`B_Q*K}{#4)h~@; zS198BQX>8&4xk}pQCFMS>@{k=hHf{ZlyX)!xF|>{Vbs|Pb@%%~K_TxeLh(2jEXtO_ zeF3>xebM(z7|J9WhjCrN0k(k=tcna;(neuhkG)=KKG9kV5e)0Q!HEXWPfdPja{^{2Y{qRk5}}JFtqMW2I!Qc@X8fR>ll z@iRH|v6%!J-;HwX4JL#d>;n}c^ECZsK~~S&p(Iu1td6-VQ}sA8J8*0A*zK8+>1Y32 zGfp%Z!EI1LML7B*iK1^{CFVHSjXL#v07VeyZqj-z@cQQ4=@ZRd=8xC4Cy&6f?lXv~ zFbr-hPh&0$s7p@S=F_B3rn!r^f_@%AfDTF!) z(1tv8UH(4j(e#NXQI&CHX>tYyOw=Em&v<3q!8xd@HxE5Ge;;PPqsG%@qd&k9<^xEL}m^q$H>suAdrB930K)v=+Q=vYpFO#Dc(pEZSWR<|2nG1$@y@(??8kMgYNL7M&WXwxD=ga|!VCr}k@lq>Tysjo7 zC#^#NUU{6R-981=MNeAQCV`4Xg3)UQHdV`PVnx;~lD2HZi&n-L!QSNmr;!GiIo8+Q z907^E{)N2I=fMw?=gWvVhH@o93}k^=TIvyeX0ka+qp+9R9|-S!04EhovoFlcMfS@bgL z!lhdR44`t*imBOLPCTO0z^!W61A7bywM-uqvnV1}&g}(vate{J7it1O;*B#aL^1LD zYuU?U3964Orl#};9e~`OQZlO4r_Ru8(611bAwp-UGiP-~UZ0mj(`)ytE`(lBSU3sM zh%a*;6mm)!Z++GzJ-P|eLBSzJuIryqx`hwEk9hLgszLD^W>96nH%onS{YAaZ@i5_e zM$ouEvAGL*!;CCPr$XvYZdrD`7i07Gf~hBm zX?*t0XipZAO|t$cE;4_@bxK_`H{G8%ggj~%FZ~F0v+Q_JXOXLt4$Ke#3*iV0y~YCZ z(vM*SvMEg7EIHmA%5B7BYyunDhb`Ox%x+;0K*B8(x-qD$&s)R}0g2SHd5NN|7RaQV zg&|n7EA#2)EDZLStLMf?=xu&y%jQ@12sozLc&mESokF`dZ9PZWCm>PQ8rM%`>;Cd~ z3OJ_d_NeBFGRKD&VYh%|q>wVeHiT-hUbr!C2skG7Rw<6AwRWpaV|V&^qg>={_F)xn z2{;QSop8#Xpe$I{TsjADJR8H%Yi(R#6yCzzGTaq#5jhyYX`-`np!Q;Ml|jU3xwA12 z;c}s$c~U{H;CQ4<2fK2qc`Sl2GvYX2K*#X{I*u36alC+z;{|k_|CxZnMvVPt**pO$ z=RPZ$CjHw+jRA?x6EF=R?#zjpMxJ#xu~OpZOrax8 literal 0 HcmV?d00001 diff --git a/public/assets/icon.png b/public/assets/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..bbd5ecd8f7f9ea7c7c4b48d3b16f8cc9c15c46e5 GIT binary patch literal 568 zcmeAS@N?(olHy`uVBq!ia0vp^1t8491|*L?_~H$uI14-?iy0VnfNULa#-+B?RssbX zi-X*q7}lMWc?smOq&xaLGB9lH=l+w(3Y0tR>Eakt!T9#hMc+dSA`TCuUorGN;Mmcr zy`!;T&2I9KXB<{d$~zkS7DyW~_%2nn>&TqEzh2mO`e#*@mVFHDUd~1NEh?UqK3fZH|E+Y&#YnW|9CHn}c$vbw(C&=D*UkMjCBbB$es{QHHe zJmSW!ub9i;_TE3l%JcqVfojwWy9dsn1%H2g^?{|!-nQ%g`~}xvJkJd}vpw%q-F<(# z`*BOE&i)f-rjqMp_BEuN>CVxAaOF(h{QNG9_yZef{+((3;(zSEhULb;ry9Qihdem^ czl85&FnHo}p*@H_85q$Fp00i_>zopr0Kwkm+5i9m literal 0 HcmV?d00001 diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx new file mode 100644 index 00000000..484ff6ab --- /dev/null +++ b/src/components/chat/ChatInput.tsx @@ -0,0 +1,92 @@ +import React from 'react'; +import styled from 'styled-components'; + +const plusIcon = "./assets/icon.png"; +const emojiIcon = "./assets/icon (1).png"; +const cameraIcon = "./assets/icon (2).png"; +const recordIcon = "./assets/icon (3).png"; + +const ChatInput: React.FC = () => { + return ( +
+ + + + + + + + + +
+ ); +}; + +const Footer = styled.div` + display: flex; + align-items: center; + justify-content: center; + background-color: #F7F8FC; + width: 100%; + height: 49px; +`; + +const FooterContainer = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + background-color: #ffffff; + width: 354px; + height: 29px; +`; + +const InputContainer = styled.div` + display: flex; + align-items: center; + background-color: white; + border-radius: 100px; + + width: 246px; + hegiht: 29px; +`; + +const PlusButton = styled.img` + width: 28px; + height: 28px; + cursor: pointer; +`; + +const EmojiButton = styled.img` + width: 25.31px; + height: 25px; + cursor: pointer; + margin-right: 10.12px; + +`; + +const CameraButton = styled.img` + width: 28px; + height: 28px; + cursor: pointer; +`; + +const RecordButton = styled.img` + width: 28px; + height: 28px; + cursor: pointer; +`; + +const InputBox = styled.input` + flex: 1; + hegiht: 29px; + border: none; + background-color: transparent; + + &:focus { + outline: none; + } + `; + + + +export default ChatInput; diff --git a/src/components/main/ChatApp.tsx b/src/components/main/ChatApp.tsx index c3b5ffd9..2332ebbc 100644 --- a/src/components/main/ChatApp.tsx +++ b/src/components/main/ChatApp.tsx @@ -1,12 +1,11 @@ import React, { useState } from 'react'; import Header from './Header'; import styled from 'styled-components'; -import { friends }from '../fakedata/friends'; +import { friends } from '../fakedata/friends'; import UserProfile from '../chat/UserProfile'; - +import ChatInput from '../chat/ChatInput'; const ChatApp: React.FC = () => { - // 목록에서 누른 친구 상태 관리 // 초기값: 박사랑 const [selectedFriend, setSelectedFriend] = useState(friends[0]); @@ -21,24 +20,33 @@ const ChatApp: React.FC = () => { return ( -
- + + + ); }; const AppContainer = styled.div` - background-color: #E3E4EB; - min-height: 100vh; + background-color: #E3E4EB; + min-height: 100vh; +`; + +const ChatInputWrapper = styled.div` + position: fixed; + bottom: 0; + width: 100%; `; export default ChatApp; From f4a37d12b92801d7b16e99dbcb81fd7f29f2f31b Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Mon, 25 Mar 2024 05:55:08 +0900 Subject: [PATCH 04/69] =?UTF-8?q?feat:=20Footer=20=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EB=84=88=EB=B9=84=20=ED=86=A0=EA=B8=80=20=EB=B0=8F?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/send icon.png | Bin 0 -> 2629 bytes src/components/chat/ChatInput.tsx | 127 ++++++++++++++++++++++++------ 2 files changed, 103 insertions(+), 24 deletions(-) create mode 100644 public/assets/send icon.png diff --git a/public/assets/send icon.png b/public/assets/send icon.png new file mode 100644 index 0000000000000000000000000000000000000000..8cf47caea3ea00dc10bdd3724c95aa695d01b0db GIT binary patch literal 2629 zcmV-L3cB@)P)@~0drDELIAGL9O(c600d`2O+f$vv5yPw~nSD`% zci;oyumdcu0~2+8whn^Tv(Gd9JV5Qj{}U|6w|)G4AK%B>$AZV%U?g&cJ_|x2d{Ldz8e8=UDl^#6F3nh378+Yw)X-tU>MfV5 zJY=y!%=s{CAdm&)wNi{)L5~tF5a0`~@^nNMBr0921H5JmQ77m@aug(v*qUQMG2$iez>JV@P%6dtYgX$kT-lS5R@9%EU81qQ7vMg-q)s*qKsOmS*{U2DJV;uP*HS>nCJ0xqk_U<>w=M> zlfTu``AaM>Rc4X2DG`T|-ERLg0mDorN8<=R#KNygycg57h7b~-I)9uoEWpCTy2-oI1(5lXy@u57>$wA&>ZWp`Wl6PrJ0 z*2cs|ViHs&AS)*OU4#>MJ7n{1eFJN^+h7P1lA>|hMbgbOF^7;?%W%SOhivhyIEJzh zbdR58U!VNezK}#wF^M9Hk@f60k6;v`PzR0B7}@xgSgOqcDJ*npJv2Zz2{hb)|2EwSy@3T4QPTNG6d0;la( z67#`Pij_rWx5sI_B?OD9+wuY`ib^rvw_Bk083~&9pn|CG!+K!1B{5% z=k1pGcB99kh4WB($ap27m4vFr^ulg|_2>>XSvrA z?R=rORp*7>0_)OSDQKEJh6Ww(E!8j&q=~pegS_g-{`cH+BorC>Y0rz5~yK?M~u}-S*)=do=uD zEU2812HVZyiQP_UHo2xK*zO2#?3Rhs{D+f*(vDQYb~C)mZtrb&^G{q{^+$((SBO<@ z*Au&KO+Rr_&@Fyar6^rR7>}~s?({Pk1(nHB2P(oUw(E)Ac4qBpJ$s>b!dE)G(pAdZ z?&(u6qO&#Y+1Y~rmD*|5iPAE*JKS5raXRHsg-G~uRmRdXw(EhIFfTfZ`GQiERw(0b zKPhIrC!d?WORh9@M)!h4?H1pxL>VtsV>LsO<2QO=3H%2x6T|Dp`ORWMDdPpc4;6qc zcbT2GpEz%~twraa5zB8Ul!f0eRDeY{9aA#ocy`+)dts*cd?1k>kIq(+(|w6@%i|7{e_@*Cy|8j?0G_?4arMOI zv6E&R52M>fzr5sKwX}0*`c(I3Re=#Pyjpw!>@?-}SfH#o;lHd>@!nx#95)+f#3agZ znnB}f674}iFHGDlI&S7!Z5NcR5zZ=+Bsqz|Ydh7rF3RfL+T4pyvNBXaEp$yEL@Rf@ z*1rklAi0b7(1O7FNHLFL4b@AZ&uA_=YLxrWCydSp9N9p5@$t&73P`C(6bvS6(2VF zHT-)C_B##LW~rQ~K}I?;JYYl6D}uRwAiMu zsLW$V&>@#ET4NM)KYzQQZp;cwPz&x&daKfNR-T*QFA z&cdFcL#iNbmhjM>2E1)c$ni^Yg-lr3^=gc@Xsz>bN6 { - return ( -