Merge pull request #4 from hyunji-lee99/dev

Dev

.firebase/hosting.YnVpbGQ.cache

@@ -1,57 +1,58 @@
-asset-manifest.json,1700081560379,f21148f2009ad4c63cfccb73c229df874ccb01bf4591bde63736ee565710f549
-robots.txt,1700081552465,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-index.html,1700081560379,035534b484d4b580cf8e8fce9c6f10f276a5c5a4dc65f6c043e302cc38a4f241
-images/intro/wave.svg,1700081552373,6151d95838f42150e8c78e0c3973747e09ccd76be9fc84af17ed6ac457bd6de1
-images/board/write.png,1700081552373,5473773d23481ebdd97943f540d4da1d27efddca99c7bcb522b1080ac8c0a15b
-images/board/snowman.png,1700081552372,9cc2e6f125dc0f5774292c6f54b1d241701fafddcc35bb73e4b78c474f47c892
-images/skillset/arrow.png,1700081552461,f43a1625e422049c809d51f92a186fb9096a69f4fc412cf2e0330dcf804867f7
-images/skillset/css3.svg,1700081552461,811935f4f923aaaaf32657099da4c6b2479b7223925c578d4a2c54346efee5aa
-images/skillset/django.svg,1700081552461,80a481dd97dd5c2c020e6d669c664cc600805d305156af3cd4a69f78bd2533a2
-images/skillset/figma.svg,1700081552461,429f024f6e8927d7aa6af473a8c83f56f97239788c48ecaafde378144aab6483
-images/skillset/firebase.svg,1700081552461,e72d249bc93151e9cc0d0b1759c38db6a058097269b074d46edafd674abacabc
-images/skillset/html.svg,1700081552462,3f9690a7d12e4e6a9547029700af6182af5a649478f9d52ee50bb4221252adb1
-images/skillset/js.svg,1700081552462,59c30d67021f35934f46ba864a2a9895b9e718e58b28c1d2f8e3ec481d55782e
-images/skillset/github.svg,1700081552462,8a7e2d52d47289ea7d8aafe2ef74805aa7c0a142c2dfa3e0d26729822514e106
-images/skillset/python.svg,1700081552462,12ce1785f64589d3ff06296f4aae99507b460a780420cac766440cead01549c9
-images/skillset/react.svg,1700081552462,9a6a3af9cd8950b71d5222495d285326b2e603d3bc8d10f18f3e0cfa0a434f41
-images/skillset/slack.svg,1700081552463,b53b44465c98a16a8cb00e41ba1b74e1da7831cfebd452f937d1e1d249a55dfc
-images/skillset/qnet.svg,1700081552462,13de1d298717d37cc8732ff92a94f31131b99e58b184307f18bc94a83f92e8a3
-images/skillset/styled-components.svg,1700081552463,5384e068549ad22dbfd59d421aa3434ab6c76c72d0b339f7d63fe4d9b7dd8e88
-images/skillset/ts.svg,1700081552463,1181a5aeee960fa5e8f13df3a4e2be54fa324aef32e29281fc617470f688dd29
-static/css/main.43ab9f8e.css,1700081560397,a1f22ab015b278105326b876a18cd6941cc4a487cc1a1bb6a4257c2878e2c19c
-images/skillset/zeplin.svg,1700081552463,7e318a83c540f699d820e217dfbea626f5b40f1ecea1ea85a93de8fc5b65c0a1
-images/skillset/sqld.svg,1700081552463,e2a8d0b40e96c2d3844d200d1bcebe64f97ece72800d1cd31e6413cd7c4106ac
-images/board/message_bubble.png,1700081552372,e73ba70bf7456717ad0998c131dd1f9b8b5751bdb2b3ab95c9dacdd35ebb4959
-static/css/main.43ab9f8e.css.map,1700081560397,d5c98c9051147fa26ceca15c69e8fc1675a7387041d557b42ed6fea24b68f350
-static/js/main.393e30a0.js.LICENSE.txt,1700081560397,cd5416542907cd17a5a0433b74fd8fbe4b37e2ec21b8636c57dd54ffa5fdf267
-logo.svg,1700081552465,0765f2bdc493af04ef7819d6a3395430138973cb0599cb016b0aba1f84396afe
-images/project/qrcode/qrcode-3.png,1700081552455,94e6fc25fb240bc7a2f48f44568e0d547a087b26acc97a3b9ef3e3f90109d88a
-images/project/qrcode/qrcode-4.png,1700081552456,d94c0988f712fe864bfaee1042d471d817df655598d4ca37201a64ec33cc989c
-images/project/portfolio/portfolio-2.png,1700081552442,7c48f1ba3be77b880c812222ac42b7e5c46bbcc72bfa3b5852a4786076903e69
-images/project/qrcode/qrcode-6.png,1700081552460,1bcfd5dccbf4ce13a6e63e60199186273da536ebabc2355ed97081cb4e6989ae
-images/project/qrcode/qrcode-5.png,1700081552457,583565fb8241b20306afc73691c957f3b595767d2f4109c893644501ab239255
-static/media/SUITE-Regular.680ae46430dcc1be483d.otf,1700081560396,96be007d3c4e799ae9c5b282e6c41cdcb24b8621ab9bebfb4d2d3988ea40bf8c
-images/project/qrcode/qrcode-2.png,1700081552454,266ae5909a9d6a3c682e56d1e4d92152ccc981c6527ae3c85bfb9be097d4fcba
-static/media/SUITE-Bold.e22c698474e4f4301302.otf,1700081560398,bd924b000f9a5f9543b042cd934d0a215936249a370f2e6af6b3c31ed066cc5c
-images/project/portfolio/portfolio-1.png,1700081552441,20fd5479ca8fada9b60e33651a05982578ea370d8157b8671674b943169dabc3
-static/js/main.393e30a0.js,1700081560397,ee37c8d7871e7c532f94ca861c9a181072549f4ace1811e8df19f1ed9fd29c78
-images/project/portfolio/portfolio-3.png,1700081552445,3724e1895e088e4bd7359c261016e6defa222ecfed407ab0b7a3c43f3cce21c2
-images/project/artistella/artistella-2.png,1700081552378,0dad5fd038e906abc21c27a83cd6e252a9d974c56602d163834f835ddbc9010b
-images/project/artistella/artistella-3.png,1700081552380,ebde0de43eb3f3d0b0e8814a64c81fe6b98f29ed1eaeaeac80c324c29a1abf5e
-images/project/hallo/hallo-7.png,1700081552409,9fdcd7800360783fa4e45795aac973a3a4deed651ce8bca3a8de8a344990d170
-images/project/portfolio/portfolio-4.png,1700081552447,7de4cf2aa0618bf5c8324a40d5fa4ecf6fe58435028259aaab3134c4740bbd84
-images/project/hallo/hallo-6.png,1700081552405,222fa0af81c331f33c58b9b70f5038200f454b2e1b9e4b74535a84c9b967a061
-images/project/nxdflotto/lotto-5.png,1700081552439,6453834769c94fa38ad2676b6f8857e2e32d7f0f0dd7984fbde06baf2e173377
-images/project/hallo/hallo-4.png,1700081552398,a5acde0b2d0058da2824d88678f335af0da24fa47418b8943e63ec738a53b98c
-images/project/hallo/hallo-2.png,1700081552386,80a3b1d977a8bb38705658e71f64b54028a6fa31c438965b64f4ec6d902b3d09
-images/project/hallo/hallo-1.png,1700081552383,91e778d3f29245cb0f7e5587f49647f8e2c312ad7172cd5388d2e69dea87fc85
-images/project/hallo/hallo-3.png,1700081552396,9ec68e8fdf63e734ad783eb57ac06cb957f93b2969bdfdc4378b5d978d47bd37
-images/project/artistella/artistella-1.png,1700081552377,b503ddc090abb0eee498c9a6626a03b1d5d9cb83f889b105f3894ffd0e3c9523
-images/project/hallo/hallo-5.png,1700081552403,a469866cb61e92e1c388e751f65836d331e43ecfea9721e4a1179c51bea9b125
-images/project/qrcode/qrcode-1.png,1700081552451,db7354f34c689303e728ee3f5587920f194ffe0639adc76e3db75e883e0c1930
-images/project/nxdflotto/lotto-4.png,1700081552435,db1cff59d358f9bdf2c9777d26a7d98fb21c88fc137b13a058502e71c8a0e69d
-images/project/nxdflotto/lotto-3.png,1700081552429,575dcadaee72b157d17ece976975e7fc7558335c389875c6459ec440f5332aab
-images/project/nxdflotto/lotto-2.png,1700081552422,0a272cd644bd2f843a6dfce085a02eed632283887747aceee2701bec89c2391f
-images/project/nxdflotto/lotto-1.png,1700081552415,cdfb205bc93e8e94358ce1147ca6d69d5008fca2b294d349eb46932c77d447c3
-static/js/main.393e30a0.js.map,1700081560397,cebd76bfa0c42a10e6bc1d69707573a42a2562bb3553caa6b8f7e09ccbe3232f
-static/media/EF_jejudoldam.d02e2b7a6d2b97821dfb.otf,1700081560398,6be32030a0f7165c88b2c3a5a0930bdaf2bae0e5450c7a9cda2af26f737d5abc
+asset-manifest.json,1703440064670,bd95652d2b1dbcb01434b653ce9f3280291add9a95a5b8c3edad132940f1a0f4
+robots.txt,1703440056048,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+images/intro/wave.svg,1703440055963,6151d95838f42150e8c78e0c3973747e09ccd76be9fc84af17ed6ac457bd6de1
+index.html,1703440064670,a67ba09f3da372ecbe6c10ce4f208027292cd94918376988571b8e6e6a55ee0b
+images/board/write.png,1703440055962,5473773d23481ebdd97943f540d4da1d27efddca99c7bcb522b1080ac8c0a15b
+images/board/snowman.png,1703440055962,9cc2e6f125dc0f5774292c6f54b1d241701fafddcc35bb73e4b78c474f47c892
+images/skillset/arrow.png,1703440056044,f43a1625e422049c809d51f92a186fb9096a69f4fc412cf2e0330dcf804867f7
+images/skillset/css3.svg,1703440056044,811935f4f923aaaaf32657099da4c6b2479b7223925c578d4a2c54346efee5aa
+images/skillset/django.svg,1703440056044,80a481dd97dd5c2c020e6d669c664cc600805d305156af3cd4a69f78bd2533a2
+images/skillset/figma.svg,1703440056045,429f024f6e8927d7aa6af473a8c83f56f97239788c48ecaafde378144aab6483
+images/skillset/firebase.svg,1703440056045,e72d249bc93151e9cc0d0b1759c38db6a058097269b074d46edafd674abacabc
+images/skillset/html.svg,1703440056045,3f9690a7d12e4e6a9547029700af6182af5a649478f9d52ee50bb4221252adb1
+images/skillset/python.svg,1703440056045,12ce1785f64589d3ff06296f4aae99507b460a780420cac766440cead01549c9
+images/skillset/github.svg,1703440056045,8a7e2d52d47289ea7d8aafe2ef74805aa7c0a142c2dfa3e0d26729822514e106
+images/skillset/js.svg,1703440056045,59c30d67021f35934f46ba864a2a9895b9e718e58b28c1d2f8e3ec481d55782e
+images/skillset/react.svg,1703440056046,9a6a3af9cd8950b71d5222495d285326b2e603d3bc8d10f18f3e0cfa0a434f41
+images/skillset/qnet.svg,1703440056046,13de1d298717d37cc8732ff92a94f31131b99e58b184307f18bc94a83f92e8a3
+images/skillset/slack.svg,1703440056046,b53b44465c98a16a8cb00e41ba1b74e1da7831cfebd452f937d1e1d249a55dfc
+images/skillset/zeplin.svg,1703440056047,7e318a83c540f699d820e217dfbea626f5b40f1ecea1ea85a93de8fc5b65c0a1
+images/skillset/styled-components.svg,1703440056046,5384e068549ad22dbfd59d421aa3434ab6c76c72d0b339f7d63fe4d9b7dd8e88
+images/skillset/ts.svg,1703440056047,1181a5aeee960fa5e8f13df3a4e2be54fa324aef32e29281fc617470f688dd29
+images/board/message_bubble.png,1703440055961,e73ba70bf7456717ad0998c131dd1f9b8b5751bdb2b3ab95c9dacdd35ebb4959
+images/skillset/sqld.svg,1703440056046,e2a8d0b40e96c2d3844d200d1bcebe64f97ece72800d1cd31e6413cd7c4106ac
+static/css/main.43ab9f8e.css.map,1703440064691,d5c98c9051147fa26ceca15c69e8fc1675a7387041d557b42ed6fea24b68f350
+static/js/main.eb5266f4.js.LICENSE.txt,1703440064691,cd5416542907cd17a5a0433b74fd8fbe4b37e2ec21b8636c57dd54ffa5fdf267
+static/css/main.43ab9f8e.css,1703440064692,a1f22ab015b278105326b876a18cd6941cc4a487cc1a1bb6a4257c2878e2c19c
+logo.svg,1703440056048,0765f2bdc493af04ef7819d6a3395430138973cb0599cb016b0aba1f84396afe
+images/project/qrcode/qrcode-3.png,1703440056039,94e6fc25fb240bc7a2f48f44568e0d547a087b26acc97a3b9ef3e3f90109d88a
+images/project/qrcode/qrcode-4.png,1703440056040,d94c0988f712fe864bfaee1042d471d817df655598d4ca37201a64ec33cc989c
+images/project/portfolio/portfolio-2.png,1703440056026,7c48f1ba3be77b880c812222ac42b7e5c46bbcc72bfa3b5852a4786076903e69
+images/project/qrcode/qrcode-6.png,1703440056044,1bcfd5dccbf4ce13a6e63e60199186273da536ebabc2355ed97081cb4e6989ae
+static/media/SUITE-Regular.680ae46430dcc1be483d.otf,1703440064692,96be007d3c4e799ae9c5b282e6c41cdcb24b8621ab9bebfb4d2d3988ea40bf8c
+images/project/qrcode/qrcode-5.png,1703440056042,583565fb8241b20306afc73691c957f3b595767d2f4109c893644501ab239255
+images/project/qrcode/qrcode-2.png,1703440056038,266ae5909a9d6a3c682e56d1e4d92152ccc981c6527ae3c85bfb9be097d4fcba
+static/media/SUITE-Bold.e22c698474e4f4301302.otf,1703440064692,bd924b000f9a5f9543b042cd934d0a215936249a370f2e6af6b3c31ed066cc5c
+images/project/portfolio/portfolio-1.png,1703440056023,20fd5479ca8fada9b60e33651a05982578ea370d8157b8671674b943169dabc3
+static/js/main.eb5266f4.js,1703440064691,930f627226b6d15d110b7b0c21d56597b34bbcfece9c8f6ef6751c289cdf93c4
+images/project/portfolio/portfolio-3.png,1703440056027,3724e1895e088e4bd7359c261016e6defa222ecfed407ab0b7a3c43f3cce21c2
+images/project/artistella/artistella-2.png,1703440055967,0dad5fd038e906abc21c27a83cd6e252a9d974c56602d163834f835ddbc9010b
+images/project/artistella/artistella-3.png,1703440055969,ebde0de43eb3f3d0b0e8814a64c81fe6b98f29ed1eaeaeac80c324c29a1abf5e
+images/project/hallo/hallo-7.png,1703440055991,9fdcd7800360783fa4e45795aac973a3a4deed651ce8bca3a8de8a344990d170
+images/project/portfolio/portfolio-4.png,1703440056029,7de4cf2aa0618bf5c8324a40d5fa4ecf6fe58435028259aaab3134c4740bbd84
+images/project/portfolio/portfolio-5.png,1703440056031,e801fc0c009297b131a11f60278dc535fc53f70012bf8f4cd90b413bb85ce203
+images/project/hallo/hallo-6.png,1703440055989,222fa0af81c331f33c58b9b70f5038200f454b2e1b9e4b74535a84c9b967a061
+images/project/nxdflotto/lotto-5.png,1703440056021,6453834769c94fa38ad2676b6f8857e2e32d7f0f0dd7984fbde06baf2e173377
+images/project/hallo/hallo-4.png,1703440055982,a5acde0b2d0058da2824d88678f335af0da24fa47418b8943e63ec738a53b98c
+images/project/hallo/hallo-2.png,1703440055975,80a3b1d977a8bb38705658e71f64b54028a6fa31c438965b64f4ec6d902b3d09
+images/project/hallo/hallo-1.png,1703440055973,91e778d3f29245cb0f7e5587f49647f8e2c312ad7172cd5388d2e69dea87fc85
+images/project/hallo/hallo-3.png,1703440055978,9ec68e8fdf63e734ad783eb57ac06cb957f93b2969bdfdc4378b5d978d47bd37
+images/project/artistella/artistella-1.png,1703440055966,b503ddc090abb0eee498c9a6626a03b1d5d9cb83f889b105f3894ffd0e3c9523
+images/project/hallo/hallo-5.png,1703440055984,a469866cb61e92e1c388e751f65836d331e43ecfea9721e4a1179c51bea9b125
+images/project/qrcode/qrcode-1.png,1703440056036,db7354f34c689303e728ee3f5587920f194ffe0639adc76e3db75e883e0c1930
+images/project/nxdflotto/lotto-4.png,1703440056018,db1cff59d358f9bdf2c9777d26a7d98fb21c88fc137b13a058502e71c8a0e69d
+images/project/nxdflotto/lotto-3.png,1703440056011,575dcadaee72b157d17ece976975e7fc7558335c389875c6459ec440f5332aab
+images/project/nxdflotto/lotto-2.png,1703440056005,0a272cd644bd2f843a6dfce085a02eed632283887747aceee2701bec89c2391f
+images/project/nxdflotto/lotto-1.png,1703440055997,cdfb205bc93e8e94358ce1147ca6d69d5008fca2b294d349eb46932c77d447c3
+static/js/main.eb5266f4.js.map,1703440064692,4974d018e05a9ab0036ff95aaaeade115c002f2beea215b6694e6152e0c55dfa
+static/media/EF_jejudoldam.d02e2b7a6d2b97821dfb.otf,1703440064691,6be32030a0f7165c88b2c3a5a0930bdaf2bae0e5450c7a9cda2af26f737d5abc

.github/workflows/firebase-hosting-merge.yml

@@ -11,7 +11,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - run: npm run build
+      - run : npm ci
+      - run: CI='false' npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/firebase-hosting-pull-request.yml

@@ -9,7 +9,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - run: npm run build
+      - run: npm ci
+      - run: CI='false' npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

package.json

@@ -24,6 +24,7 @@
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "react-snowfall": "^1.2.1",
+    "recoil": "^0.7.7",
     "styled-components": "^6.1.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="프론트엔드 개발자 이현지의 포트폴리오 사이트 입니다!"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
     <!--

src/App.tsx

@@ -5,6 +5,7 @@ import { Project } from './pages/Project';
 import { Board } from './pages/Board';
 import HeaderMenu from './components/HeaderMenu';
 import { useRef } from 'react';
+import { RecoilRoot } from 'recoil';
 
 function App() {
   const IntroRef=useRef<HTMLDivElement>(null);
@@ -15,14 +16,14 @@ function App() {
   const RefList=[IntroRef, AboutRef, SkillRef, ProjectRef, BoardRef];
 
   return (
-        <>
+        <RecoilRoot>
           <HeaderMenu menuRef={RefList}/>
           <Intro introRef={IntroRef} nextRef={AboutRef}/>
           <About aboutRef={AboutRef} nextRef={SkillRef}/>
           <Skill skillRef={SkillRef} nextRef={ProjectRef}/>
           <Project projectRef={ProjectRef} nextRef={BoardRef}/>
           <Board boardRef={BoardRef}/>
-        </>
+        </RecoilRoot>
   );
 }
 

src/components/About/Descriptions.tsx

@@ -1,6 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { useRecoilState } from 'recoil';
 import { keyframes, styled } from 'styled-components';
+import { onDescriptionState } from '../../recoil/AboutState';
 
 const SlideRightDescription=keyframes`
   0%{
@@ -37,18 +39,18 @@ const BorderBottomGradient=styled.span`
 
 export function Descriptions() {
     const {ref, inView}=useInView();
-    const [onAbout, setOnAbout]=useState(true);
+    const [onDescription, setOnDescription]=useRecoilState(onDescriptionState);
     useEffect(()=>{
         if (inView){
-          setOnAbout(true)
+          setOnDescription(true)
         }
         else{
-          setOnAbout(false)
+          setOnDescription(false)
         }
-      },[inView])
+      },[inView, setOnDescription])
 
     return (
-        <Description ref={ref} className={onAbout?"startanimation":""}>
+        <Description ref={ref} className={onDescription?"startanimation":""}>
             <BoldFont>성취하며 느낀 행복</BoldFont>을 오랫동안 기억하고,
             <br/>
             <BorderBottomGradient><BoldFont>차근차근</BoldFont> 꾸준하게</BorderBottomGradient> 성장 중인

src/components/About/RenderContact.tsx

@@ -1,4 +1,4 @@
-import {Info, InfoContentDiv, InfoTitle, InfoContent, InfoContentDetail, InfoContentElementDiv} from "./CommonInfo";
+import {Info, InfoContentDiv, InfoTitle } from "./CommonInfo";
 import styled from "styled-components";
 
 const ContactInfoDiv=styled.div`

src/components/Board/BoardList.tsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 import { BoardContent } from './BoardContent';
 import { MessagesCollectionRef} from "../../firebase";
 import { onSnapshot, orderBy, query } from 'firebase/firestore';
+import { BoardDataState } from '../../recoil/BoardState';
+import { useRecoilState } from 'recoil';
 
 const BoardDiv=styled.div`
     display:grid;
@@ -17,27 +19,25 @@ const BoardDiv=styled.div`
 
 `
 
-type BoardType={
-    author:string,
-    content:string
-}
-
 export function BoardList() {
-    const [board, setBoard]=useState<BoardType[]>([]);
-    const getData=async()=>{
-        const q=query(MessagesCollectionRef, orderBy('createdAt','desc'));
-        const observer=onSnapshot(q,(snapshot)=>{
-            const newData=snapshot.docs.map((d)=>{            
-                return{
-                ...d.data()
-                }
+    const [board, setBoard]=useRecoilState(BoardDataState);
+
+    const getData=useCallback(async()=>{
+            const q=query(MessagesCollectionRef, orderBy('createdAt','desc'));
+            onSnapshot(q,(snapshot)=>{
+                const newData=snapshot.docs.map((d)=>{            
+                    return{
+                    ...d.data()
+                    }
+                })
+                setBoard(newData as typeof board);
             })
-            setBoard(newData as BoardType[]);
-        })
-    }
+        }
+    ,[setBoard])
+
     useEffect(()=>{
         getData()
-    },[])
+    },[getData])
 
     function RenderBoardContent(){
         const ReturnRenderBoardContentboard=board?.map((data,id)=>{