[Feat] #5 - Style tech stacks list

likelion11-kangwon · Apr 15, 2023 · 4b64436 · 4b64436
1 parent a87775c
commit 4b64436
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 37 deletions.
diff --git a/WarmUpProject/src/JeongDayeon.js b/WarmUpProject/src/JeongDayeon.js
@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useState, useEffect} from 'react';
 import BGame from './components/balance_game.js';
 import Project from './components/project.js';
 import Channel from './components/channel.js';
@@ -27,7 +27,7 @@ function Profile(){
       <header>
         {/* 캐로셀 테스트용
         <img src="images/headimgtest.png"> */}
-        <h1 claaName="jdy_h1">
+        <h1 className="jdy_h1">
             안녕하세요
             <br/>이것저것 도전 중!
             <br/><span className="colored_text">정다연</span>입니다.
@@ -114,23 +114,48 @@ function Projects(){
 function TechStacks(){
   var alt="기술스택아이콘"
 
-  // 계속 반복해서 돌아가세 하고 싶은데 노가다 말곤 안 떠올라서 보류
-  const handleTransitionEnd = (event) => {
-    console.log('transition end');
-  };
+  const move={
+    transition: 'all linear 100s',
+    transform: 'translate(-6540px)'
+  }
+
+  //스크롤 위치 가져와서 tech가 보이는지 확인
+  //상대적 위치가 2.3보다 작을 때.
+  const [onSight, setonsight] = useState(false);
+  function onScroll() {
+    setonsight(document.body.scrollHeight/window.scrollY < 2.3);
+  }
+  useEffect(() => {
+    window.addEventListener("scroll", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, []); 
+
+  //stack 사진리스트 여러개로
+  var repeat=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+
   return(
     <div className='content' id="tech_stacks">
       <h2 className="jdy_h2">Tech_stacks</h2>
       <div id="tech_container">
-        <ul onTransitionEnd={handleTransitionEnd}>
-          <li><img src="images/java.svg"  alt={alt}></img></li>
-          <li><img src="images/python.svg"  alt={alt}></img></li>
-          <li><img src="images/html5.svg"  alt={alt}></img></li>
-          <li><img src="images/css3.svg"  alt={alt}></img></li>
-          <li><img src="images/js.svg"  alt={alt}></img></li>
-          <li><img src="images/nodejs.svg"  alt={alt}></img></li>
-          <li><img src="images/pugjs.svg"  alt={alt}></img></li>
-          <li><img src="images/mongodb.svg"  alt={alt}></img></li>
+        <ul style={onSight ? move : null}>
+          {
+            repeat.map(function(i){
+              return(
+                <div className='tech_stack_dummy' key={i}>
+                  <li><img src="images/java.svg"  alt={alt}></img></li>
+                  <li><img src="images/python.svg"  alt={alt}></img></li>
+                  <li><img src="images/html5.svg"  alt={alt}></img></li>
+                  <li><img src="images/css3.svg"  alt={alt}></img></li>
+                  <li><img src="images/js.svg"  alt={alt}></img></li>
+                  <li><img src="images/nodejs.svg"  alt={alt}></img></li>
+                  <li><img src="images/pugjs.svg"  alt={alt}></img></li>
+                  <li><img src="images/mongodb.svg"  alt={alt}></img></li>
+                </div>
+              )
+            })
+          }
         </ul>
       </div>
       <p>

diff --git a/WarmUpProject/src/styles/jdy.css b/WarmUpProject/src/styles/jdy.css
@@ -21,32 +21,32 @@
 #projects ul{
     list-style-type:none;
     padding: 0px;
-  }
-  #projects li{
+}
+#projects li{
     padding: 10px 0px 10px 0px;
-  }
-  #projects .proj_panel{
+}
+#projects .proj_panel{
     background-color: rgb(67, 67, 67);
     border-radius: 16px;
     width: 350px;
     height: 280px;
     overflow: hidden;
-  }
-  #projects .header{
+}
+#projects .header{
     display: grid;
     grid-template-columns: 298px 32px;
-  }
-  .proj_panel .proj_name{
+}
+.proj_panel .proj_name{
     margin: 20px 0px 0px 20px;
     font-size: 24px;
-  }
-  .proj_panel .proj_info{
+}
+.proj_panel .proj_info{
     margin-left: 20px;
     font-size: 16px;
     margin-bottom: 20px;
     font-weight: lighter;
-  }
-  .proj_panel .header button{
+}
+.proj_panel .header button{
     background: url("../../public/images/proj_panel_button_ui.svg") no-repeat center;
     margin-top: 20px;
     padding: 3px;
@@ -56,22 +56,22 @@
     cursor: pointer;
     transition: all ease 1s;
     transform: rotate(0turn);
-  
-  }
-  .proj_panel .header .turned{
+
+}
+.proj_panel .header .turned{
     transform: rotate(0.125turn);
-  }
-  .proj_content img{
+}
+.proj_content img{
     width: 350px;
     height: 188px;
-  }
-  .proj_content p{
+}
+.proj_content p{
     margin: 0px 20px 0px 20px;
     height: 120px;
     font-size: 18px;
     font-weight: lighter;
-  }
-  .proj_content a{
+}
+.proj_content a{
     display: block;
     background-color: var(--main-c);
     border-radius: 12px;
@@ -83,4 +83,26 @@
     font-size: 20px;
     text-decoration: none;
     text-align: center;
-  }
+}
+
+/* 기술스택 리스트 css */
+#tech_stacks ul{
+    list-style: none;
+    padding: 0px;
+}
+#tech_stacks .tech_stack_dummy{
+    display: inline;
+}
+#tech_stacks li{
+    display: inline;
+}
+#tech_stacks img{
+    width: 128px;
+}
+#tech_stacks #tech_container{
+    display: flex;
+    overflow: hidden;
+    margin-left: calc(-50vw + 50%);
+    width:390px;
+    white-space:nowrap;
+}