Feat: Project 내용 추가, project 내용 바뀌면 애니메이션 효과 추가

.firebase/hosting.YnVpbGQ.cache

@@ -1,32 +1,48 @@
-asset-manifest.json,1699968681132,217aaa39a9463c9fedd477644a9571744a853811ed6e47df53a73b62a825f0f8
-index.html,1699968681132,30f49d8b46fcaefa46fbad7de369626f7896d30ee634e27cc1512ea3ef6657a8
-robots.txt,1699968672647,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-images/board/snowman.png,1699968672640,9cc2e6f125dc0f5774292c6f54b1d241701fafddcc35bb73e4b78c474f47c892
-images/board/write.png,1699968672640,5473773d23481ebdd97943f540d4da1d27efddca99c7bcb522b1080ac8c0a15b
-images/intro/wave.svg,1699968672641,6151d95838f42150e8c78e0c3973747e09ccd76be9fc84af17ed6ac457bd6de1
-images/skillset/css3.svg,1699968672642,811935f4f923aaaaf32657099da4c6b2479b7223925c578d4a2c54346efee5aa
-images/skillset/arrow.png,1699968672641,f43a1625e422049c809d51f92a186fb9096a69f4fc412cf2e0330dcf804867f7
-images/skillset/django.svg,1699968672642,80a481dd97dd5c2c020e6d669c664cc600805d305156af3cd4a69f78bd2533a2
-images/skillset/figma.svg,1699968672642,429f024f6e8927d7aa6af473a8c83f56f97239788c48ecaafde378144aab6483
-images/skillset/github.svg,1699968672643,8a7e2d52d47289ea7d8aafe2ef74805aa7c0a142c2dfa3e0d26729822514e106
-images/skillset/firebase.svg,1699968672642,e72d249bc93151e9cc0d0b1759c38db6a058097269b074d46edafd674abacabc
-images/skillset/js.svg,1699968672643,59c30d67021f35934f46ba864a2a9895b9e718e58b28c1d2f8e3ec481d55782e
-images/skillset/python.svg,1699968672643,12ce1785f64589d3ff06296f4aae99507b460a780420cac766440cead01549c9
-images/skillset/html.svg,1699968672643,3f9690a7d12e4e6a9547029700af6182af5a649478f9d52ee50bb4221252adb1
-images/skillset/react.svg,1699968672644,9a6a3af9cd8950b71d5222495d285326b2e603d3bc8d10f18f3e0cfa0a434f41
-images/skillset/qnet.svg,1699968672644,13de1d298717d37cc8732ff92a94f31131b99e58b184307f18bc94a83f92e8a3
-images/skillset/styled-components.svg,1699968672645,5384e068549ad22dbfd59d421aa3434ab6c76c72d0b339f7d63fe4d9b7dd8e88
-images/skillset/slack.svg,1699968672644,b53b44465c98a16a8cb00e41ba1b74e1da7831cfebd452f937d1e1d249a55dfc
-images/skillset/ts.svg,1699968672645,1181a5aeee960fa5e8f13df3a4e2be54fa324aef32e29281fc617470f688dd29
-static/css/main.43ab9f8e.css.map,1699968681151,d5c98c9051147fa26ceca15c69e8fc1675a7387041d557b42ed6fea24b68f350
-images/skillset/zeplin.svg,1699968672645,7e318a83c540f699d820e217dfbea626f5b40f1ecea1ea85a93de8fc5b65c0a1
-static/css/main.43ab9f8e.css,1699968681151,a1f22ab015b278105326b876a18cd6941cc4a487cc1a1bb6a4257c2878e2c19c
-static/js/main.92bc8100.js.LICENSE.txt,1699968681151,78a24cfe1f25d5978ef92a1d7f46c0d40cdbd747a4d1c15168de8371b1b19a22
-images/skillset/sqld.svg,1699968672644,e2a8d0b40e96c2d3844d200d1bcebe64f97ece72800d1cd31e6413cd7c4106ac
-images/board/message_bubble.png,1699968672639,e73ba70bf7456717ad0998c131dd1f9b8b5751bdb2b3ab95c9dacdd35ebb4959
-logo.svg,1699968672646,0765f2bdc493af04ef7819d6a3395430138973cb0599cb016b0aba1f84396afe
-static/media/SUITE-Regular.680ae46430dcc1be483d.otf,1699968681151,96be007d3c4e799ae9c5b282e6c41cdcb24b8621ab9bebfb4d2d3988ea40bf8c
-static/media/SUITE-Bold.e22c698474e4f4301302.otf,1699968681151,bd924b000f9a5f9543b042cd934d0a215936249a370f2e6af6b3c31ed066cc5c
-static/js/main.92bc8100.js,1699968681150,26cd534dc68e79b6fd2c242d30d638fe72f0dc237aea5cd79828862b6d81d79f
-static/js/main.92bc8100.js.map,1699968681151,956c80b18b793c68d83b7d2573dcd76b5467dd132881ba2bc5dea5abf9f092a3
-static/media/EF_jejudoldam.d02e2b7a6d2b97821dfb.otf,1699968681150,6be32030a0f7165c88b2c3a5a0930bdaf2bae0e5450c7a9cda2af26f737d5abc
+asset-manifest.json,1700008372049,5f4f0fabca59d1d7d91c664902a8e094a2c01ea00028e55b83f3e2fcb1860f06
+index.html,1700008372049,3612a8cb27d9f3cb10009cb597009578c9fda945c48f156093bf5a049af5714a
+robots.txt,1700008363967,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+images/board/snowman.png,1700008363874,9cc2e6f125dc0f5774292c6f54b1d241701fafddcc35bb73e4b78c474f47c892
+images/intro/wave.svg,1700008363875,6151d95838f42150e8c78e0c3973747e09ccd76be9fc84af17ed6ac457bd6de1
+images/board/write.png,1700008363874,5473773d23481ebdd97943f540d4da1d27efddca99c7bcb522b1080ac8c0a15b
+images/skillset/arrow.png,1700008363955,f43a1625e422049c809d51f92a186fb9096a69f4fc412cf2e0330dcf804867f7
+images/skillset/css3.svg,1700008363955,811935f4f923aaaaf32657099da4c6b2479b7223925c578d4a2c54346efee5aa
+images/skillset/firebase.svg,1700008363956,e72d249bc93151e9cc0d0b1759c38db6a058097269b074d46edafd674abacabc
+images/skillset/figma.svg,1700008363956,429f024f6e8927d7aa6af473a8c83f56f97239788c48ecaafde378144aab6483
+images/skillset/github.svg,1700008363956,8a7e2d52d47289ea7d8aafe2ef74805aa7c0a142c2dfa3e0d26729822514e106
+images/skillset/django.svg,1700008363955,80a481dd97dd5c2c020e6d669c664cc600805d305156af3cd4a69f78bd2533a2
+images/skillset/js.svg,1700008363956,59c30d67021f35934f46ba864a2a9895b9e718e58b28c1d2f8e3ec481d55782e
+images/skillset/html.svg,1700008363956,3f9690a7d12e4e6a9547029700af6182af5a649478f9d52ee50bb4221252adb1
+images/skillset/python.svg,1700008363957,12ce1785f64589d3ff06296f4aae99507b460a780420cac766440cead01549c9
+images/skillset/slack.svg,1700008363965,b53b44465c98a16a8cb00e41ba1b74e1da7831cfebd452f937d1e1d249a55dfc
+images/skillset/react.svg,1700008363957,9a6a3af9cd8950b71d5222495d285326b2e603d3bc8d10f18f3e0cfa0a434f41
+images/skillset/ts.svg,1700008363966,1181a5aeee960fa5e8f13df3a4e2be54fa324aef32e29281fc617470f688dd29
+images/skillset/qnet.svg,1700008363957,13de1d298717d37cc8732ff92a94f31131b99e58b184307f18bc94a83f92e8a3
+images/skillset/zeplin.svg,1700008363966,7e318a83c540f699d820e217dfbea626f5b40f1ecea1ea85a93de8fc5b65c0a1
+images/skillset/styled-components.svg,1700008363965,5384e068549ad22dbfd59d421aa3434ab6c76c72d0b339f7d63fe4d9b7dd8e88
+static/css/main.43ab9f8e.css.map,1700008372066,d5c98c9051147fa26ceca15c69e8fc1675a7387041d557b42ed6fea24b68f350
+static/js/main.8d158dfd.js.LICENSE.txt,1700008372066,cd5416542907cd17a5a0433b74fd8fbe4b37e2ec21b8636c57dd54ffa5fdf267
+images/skillset/sqld.svg,1700008363965,e2a8d0b40e96c2d3844d200d1bcebe64f97ece72800d1cd31e6413cd7c4106ac
+static/css/main.43ab9f8e.css,1700008372066,a1f22ab015b278105326b876a18cd6941cc4a487cc1a1bb6a4257c2878e2c19c
+images/board/message_bubble.png,1700008363873,e73ba70bf7456717ad0998c131dd1f9b8b5751bdb2b3ab95c9dacdd35ebb4959
+logo.svg,1700008363967,0765f2bdc493af04ef7819d6a3395430138973cb0599cb016b0aba1f84396afe
+static/media/SUITE-Regular.680ae46430dcc1be483d.otf,1700008372066,96be007d3c4e799ae9c5b282e6c41cdcb24b8621ab9bebfb4d2d3988ea40bf8c
+static/media/SUITE-Bold.e22c698474e4f4301302.otf,1700008372066,bd924b000f9a5f9543b042cd934d0a215936249a370f2e6af6b3c31ed066cc5c
+static/js/main.8d158dfd.js,1700008372067,fe5602f2861c3a8946f0bb8da53ba26e958d25570700d0a9e1dbc27428dd4fb9
+images/project/portfolio/portfolio-1.png,1700008363954,20fd5479ca8fada9b60e33651a05982578ea370d8157b8671674b943169dabc3
+images/project/artistella/artistella-2.png,1700008363880,0dad5fd038e906abc21c27a83cd6e252a9d974c56602d163834f835ddbc9010b
+images/project/artistella/artistella-3.png,1700008363881,ebde0de43eb3f3d0b0e8814a64c81fe6b98f29ed1eaeaeac80c324c29a1abf5e
+images/project/hallo/hallo-7.png,1700008363907,9fdcd7800360783fa4e45795aac973a3a4deed651ce8bca3a8de8a344990d170
+images/project/hallo/hallo-6.png,1700008363905,222fa0af81c331f33c58b9b70f5038200f454b2e1b9e4b74535a84c9b967a061
+images/project/nxdflotto/lotto-5.png,1700008363952,6453834769c94fa38ad2676b6f8857e2e32d7f0f0dd7984fbde06baf2e173377
+images/project/hallo/hallo-4.png,1700008363897,a5acde0b2d0058da2824d88678f335af0da24fa47418b8943e63ec738a53b98c
+images/project/hallo/hallo-2.png,1700008363889,80a3b1d977a8bb38705658e71f64b54028a6fa31c438965b64f4ec6d902b3d09
+images/project/hallo/hallo-1.png,1700008363886,91e778d3f29245cb0f7e5587f49647f8e2c312ad7172cd5388d2e69dea87fc85
+images/project/hallo/hallo-3.png,1700008363895,9ec68e8fdf63e734ad783eb57ac06cb957f93b2969bdfdc4378b5d978d47bd37
+images/project/artistella/artistella-1.png,1700008363879,b503ddc090abb0eee498c9a6626a03b1d5d9cb83f889b105f3894ffd0e3c9523
+images/project/hallo/hallo-5.png,1700008363902,a469866cb61e92e1c388e751f65836d331e43ecfea9721e4a1179c51bea9b125
+images/project/nxdflotto/lotto-3.png,1700008363937,575dcadaee72b157d17ece976975e7fc7558335c389875c6459ec440f5332aab
+images/project/nxdflotto/lotto-4.png,1700008363945,db1cff59d358f9bdf2c9777d26a7d98fb21c88fc137b13a058502e71c8a0e69d
+images/project/nxdflotto/lotto-2.png,1700008363927,0a272cd644bd2f843a6dfce085a02eed632283887747aceee2701bec89c2391f
+images/project/nxdflotto/lotto-1.png,1700008363916,cdfb205bc93e8e94358ce1147ca6d69d5008fca2b294d349eb46932c77d447c3
+static/js/main.8d158dfd.js.map,1700008372066,cf4c2ff07fbc6413794a0eef498474d97f5e7234b8cbaf030da1798a17432d99
+static/media/EF_jejudoldam.d02e2b7a6d2b97821dfb.otf,1700008372067,6be32030a0f7165c88b2c3a5a0930bdaf2bae0e5450c7a9cda2af26f737d5abc

src/components/About/CommonInfo.tsx

@@ -4,10 +4,9 @@ export const Info=styled.div`
   width:100%;
   height:100%;
   margin: 10px 0;
+  flex-shrink:0;
   padding: 10% 10%;
-  /* position:absolute; */
-  background-color:white;
-  box-shadow: rgba(149, 160, 165, 0.2) 0px 8px 24px;
+  background-color:#7FB4E226;
   overflow:scroll;
   @media screen and (max-width:900px){
     padding: 6% 6%;

src/components/About/Descriptions.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { keyframes, styled } from 'styled-components';
+
+const SlideRightDescription=keyframes`
+  0%{
+    transform: translateX(-100%);
+  }
+  100%{
+    transform: translateX(0px);
+  }
+`
+
+const Description=styled.div`
+  font-size:2rem;
+  line-height:4rem;
+  white-space:nowrap;
+  &.startanimation{
+    animation: ${SlideRightDescription} 0.5s linear;
+  }
+  @media screen and (max-width:900px){
+    font-size:1.2rem;
+    line-height:3rem;
+  }
+`
+
+const BoldFont=styled.span`
+  font-family:"SUITE-Bold";
+`
+
+const BorderBottomGradient=styled.span`
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 30%;
+  background-image: linear-gradient(90deg, #7FB4E2 0%,#aad4e4 100%);
+`
+
+export function Descriptions() {
+    const {ref, inView}=useInView();
+    const [onAbout, setOnAbout]=useState(true);
+    useEffect(()=>{
+        if (inView){
+          setOnAbout(true)
+        }
+        else{
+          setOnAbout(false)
+        }
+      },[inView])
+
+    return (
+        <Description ref={ref} className={onAbout?"startanimation":""}>
+            <BoldFont>성취하며 느낀 행복</BoldFont>을 오랫동안 기억하고,
+            <br/>
+            <BorderBottomGradient><BoldFont>차근차근</BoldFont> 꾸준하게</BorderBottomGradient> 성장 중인
+            <br/>
+            <BoldFont>프론트엔드</BoldFont> 개발자 <BorderBottomGradient><BoldFont>이현지</BoldFont></BorderBottomGradient>입니다.
+        </Description>
+    );
+}

src/components/Board/BoardList.tsx

@@ -8,14 +8,13 @@ const BoardDiv=styled.div`
     display:grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 4%;
-    padding: 5% 5%;
     width: 100%;
     height:90%;
-    border-top-left-radius:25px;
-    border-top-right-radius:25px;
     overflow:scroll;
     background-color: white;
-    z-index:5;
+    @media screen and (max-width:500px){
+        grid-template-columns: 1fr;
+    }
 
 `
 

src/components/Board/InputMessage.tsx

@@ -9,63 +9,59 @@ const InputForm=styled.form`
     width: 100%;
     height:80px;
     display:flex;
-    z-index:5;
+    justify-content:space-between;
+    position:relative;
     /* justify-content:space-between; */
     
 `
 const ContentInput=styled.input`
     width:100%;
     height:100%;
-    /* padding: 0 1%; */
+    padding-left:1%;
+    border: none;
+    border-bottom: solid 1px gray;
     font-family:"SUITE-Regular";
-    border:none;
-    border-bottom-left-radius:25px;
-    /* border-left:solid 1px black; */
-    /* border-bottom:solid 1px black; */
-    padding-left:6%;
     &:focus{
         outline:none;
     }
 `
 const NameInput=styled.input`
     width:100%;
     height:100%;
-    /* padding: 0 1%; */
-    padding-left:6%;
+    padding-left:1%;
+    margin-bottom:5px;
     border:none;
-    /* border-left:solid 1px black; */
+    border-bottom: solid 1px gray;
     font-family:"SUITE-Regular";
     &:focus{
         outline:none;
     }
 `
 const InputDiv=styled.div`
-    width:100%;
+    width:90%;
     height: 80px;
     display:flex;
     flex-direction:column;
+    @media screen and (max-width:700px){
+        width:80%;
+    }
 
 `
 const SubmitButton=styled.button`
     width:5%;
     height:100%;
     border:none;
-    border-bottom-right-radius:25px;
-    /* border-right: solid 1px black; */
-    /* border-bottom: solid 1px black; */
+    border-radius: 5px;
     color:white;
     background-color: #87CEEB;
     @media screen and (max-width:700px){
         width:15%;
     }
 `
 
-type InputMessageProps={
-    confetti:Function
-}
 
 
-export function InputMessage(prop:InputMessageProps) {
+export function InputMessage() {
     const [inputAuthor, setInputAuthor]=useState('');
     const [inputContent, setInputContent]=useState('');
 
@@ -77,15 +73,14 @@ export function InputMessage(prop:InputMessageProps) {
     }
     const onSubmitMessage=(e:React.FormEvent<HTMLFormElement>)=>{
         e.preventDefault();
-        if (inputAuthor!='' && inputContent!=''){
+        if (inputAuthor!=='' && inputContent!==''){
             postMessage({
                 author:inputAuthor,
                 content:inputContent,
                 createdAt:Date.now()
             });
             setInputAuthor('');
             setInputContent('');
-            prop.confetti(true);
         }
         else{
             alert('내용을 입력해주세요!')

src/components/HeaderMenu.tsx

@@ -17,10 +17,10 @@ const HeaderDiv = styled.div`
     align-items:center;
     justify-content:space-between;
     font-family:'jejudoldam';
-    /* background-color:white; */
-    /* backdrop-filter:blur(3px); */
+    backdrop-filter:blur(3px);
     @media screen and (max-width:900px){
       padding:0;
+      position:sticky;
     }
     @media screen and (min-width:1200px){
       padding: 0 10%;
@@ -55,6 +55,7 @@ const MenuLi=styled.li`
 const ResponsiveMenu=styled.div`
   font-size:1.5rem;
   position: absolute;
+  
   right:5%;
   @media screen and (min-width:900px){
       display:none;
@@ -64,15 +65,16 @@ const ResponsiveMenu=styled.div`
 
 const RespMenuUnderLogo=styled.ul`
     list-style:none;
-    background-color:white;
     position:absolute;
     display:flex;
     flex-direction:column;
     justify-content:space-around;
-    width:100vw;
+    width:100%;
     height:200%;
     text-align:center;
     top:100px;
+    z-index:3;
+    /* backdrop-filter:blur(3px); */
     font-family:"SUITE-Bold";
     @media screen and (min-width:900px){
       display:none;
@@ -88,35 +90,35 @@ const HeaderMenu=(prop:HeaderMenuProps)=>{
   const onClickIntro=()=>{
     setRespMenu(false);
     if (typeof prop.menuRef[0]!=="function"){
-      console.log(prop.menuRef[0]?.current?.scrollIntoView({behavior:"smooth"}));
+      prop.menuRef[0]?.current?.scrollIntoView({behavior:"smooth"});
     }
   }
 
   const onClickAbout=()=>{
     setRespMenu(false);
     if (typeof prop.menuRef[1]!=="function"){
-      console.log(prop.menuRef[1]?.current?.scrollIntoView({behavior:"smooth"}));
+      prop.menuRef[1]?.current?.scrollIntoView({behavior:"smooth"});
     }
   }
 
   const onClickSkill=()=>{
     setRespMenu(false);
     if (typeof prop.menuRef[2]!=="function"){
-      console.log(prop.menuRef[2]?.current?.scrollIntoView({behavior:"smooth"}));
+      prop.menuRef[2]?.current?.scrollIntoView({behavior:"smooth"});
     }
   }
 
   const onClickProject=()=>{
     setRespMenu(false);
     if (typeof prop.menuRef[3]!=="function"){
-      console.log(prop.menuRef[3]?.current?.scrollIntoView({behavior:"smooth"}));
+      prop.menuRef[3]?.current?.scrollIntoView({behavior:"smooth"});
     }
   }
 
   const onClickBoard=()=>{
     setRespMenu(false);
     if (typeof prop.menuRef[4]!=="function"){
-      console.log(prop.menuRef[4]?.current?.scrollIntoView({behavior:"smooth"}));
+      prop.menuRef[4]?.current?.scrollIntoView({behavior:"smooth"});
     }
   }
     return (

src/components/Intro/Title.tsx

@@ -45,7 +45,7 @@ const translateTitleMask=(move:number)=>keyframes`
 `
 interface TitleProps{
   height:number;
-  startAnimation:boolean;
+  startanimation:boolean;
 }
 
 const TextBackgroundOnMouseMove=styled.div<TitleProps>`
@@ -56,15 +56,15 @@ const TextBackgroundOnMouseMove=styled.div<TitleProps>`
   top:0;
   overflow:hidden;
   -webkit-text-stroke: 1px black;
-  animation: ${(props)=>props.startAnimation? translateBackgroundMask(props.height) :null} 5s linear infinite;
+  animation: ${(props)=>props.startanimation? translateBackgroundMask(props.height) :null} 5s linear infinite;
   @media screen and (max-width:900px){
       height:50px;
     }
 `
 
 const TitleMask = styled.h1<TitleProps>`
   font-size:7.9rem;
-  animation: ${(props)=>props.startAnimation? translateTitleMask(-props.height) :null} 5s linear infinite;
+  animation: ${(props)=>props.startanimation? translateTitleMask(-props.height) :null} 5s linear infinite;
   @media screen and (max-width:900px){
       font-size:5rem;
     }
@@ -95,8 +95,8 @@ export function Title(){
     return(
         <TitleDiv ref={ref} className={onTitle?"startAnimation":""} id="title">
             <TitleUnmask>Frontend<br/>Portfolio</TitleUnmask>
-            <TextBackgroundOnMouseMove height={PosY} startAnimation={onTitle}>
-                <TitleMask height={PosY} startAnimation={onTitle}> Frontend<br/>Portfolio</TitleMask>
+            <TextBackgroundOnMouseMove height={PosY} startanimation={onTitle}>
+                <TitleMask height={PosY} startanimation={onTitle}> Frontend<br/>Portfolio</TitleMask>
             </TextBackgroundOnMouseMove>
         </TitleDiv>