Feat : Solution Challenge Update

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "styled-components.vscode-styled-components"
   ]
 }

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['babel-plugin-styled-components'],
+};

src/components/GithubIcon/GithubIcon.jsx

@@ -0,0 +1,11 @@
+const GithubIcon = () => {
+  return (
+    <path
+      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+      fill="#000000"
+      className="octo-body"
+    ></path>
+  );
+};
+
+export default GithubIcon;

src/components/GithubIcon/index.js

@@ -0,0 +1 @@
+export { default as GithubIcon } from './GithubIcon';

src/pages/Clubs/GalleryComponent/FocusedGalleryItem/index.jsx

@@ -32,62 +32,60 @@ function FocusedGalleryItem({ focusedSectionId, focusedItem, onBlur, disabled })
   }, [isEscPressed]);
 
   return (
-    <>
-      <OverlayContainer
-        onClick={onClickOverlayContainer}
-        disabled={disabled}
-        blurvalue={blurValue}
-        brightnessvalue={brightnessValue}
-        data-scroll
-        data-scroll-sticky
-        data-scroll-target="#fixed-element-clubs-container"
-      >
-        <ProgressBar ref={progressBarRef} />
-        {focusedSectionId && (
-          <>
-            <Padding>
-              <Swiper
-                modules={[Pagination]}
-                spaceBetween={200}
-                slidesPerView={2}
-                centeredSlides
-                pagination={{ type: 'progressbar', el: progressBarRef.current }}
-                grabCursor
-                onSwiper={(swiper) => {
-                  swiper.params.pagination.el = progressBarRef.current;
-
-                  swiper.pagination.destroy();
-                  swiper.pagination.init();
-                  swiper.pagination.update();
-                }}
-              >
-                {focusedItem[0].images.map((item, idx) => {
-                  if (idx === 0) {
-                    return (
-                      <SwiperSlide key={idx}>
-                        <Image layoutId={focusedSectionId} disabled={disabled} thumbnail={item} />
-                      </SwiperSlide>
-                    );
-                  }
-
+    <OverlayContainer
+      onClick={onClickOverlayContainer}
+      disabled={disabled}
+      blurvalue={blurValue}
+      brightnessvalue={brightnessValue}
+      data-scroll
+      data-scroll-sticky
+      data-scroll-target="#fixed-element-clubs-container"
+    >
+      <ProgressBar ref={progressBarRef} />
+      {focusedSectionId && (
+        <>
+          <Padding>
+            <Swiper
+              modules={[Pagination]}
+              spaceBetween={200}
+              slidesPerView={2}
+              centeredSlides
+              pagination={{ type: 'progressbar', el: progressBarRef.current }}
+              grabCursor
+              onSwiper={(swiper) => {
+                swiper.params.pagination.el = progressBarRef.current;
+
+                swiper.pagination.destroy();
+                swiper.pagination.init();
+                swiper.pagination.update();
+              }}
+            >
+              {focusedItem[0].images.map((item, idx) => {
+                if (idx === 0) {
                   return (
                     <SwiperSlide key={idx}>
-                      <Image
-                        key={idx}
-                        disabled={disabled}
-                        thumbnail={item}
-                        initial="hidden"
-                        animate="visible"
-                      />
+                      <Image layoutId={focusedSectionId} disabled={disabled} thumbnail={item} />
                     </SwiperSlide>
                   );
-                })}
-              </Swiper>
-            </Padding>
-          </>
-        )}
-      </OverlayContainer>
-    </>
+                }
+
+                return (
+                  <SwiperSlide key={idx}>
+                    <Image
+                      key={idx}
+                      disabled={disabled}
+                      thumbnail={item}
+                      initial="hidden"
+                      animate="visible"
+                    />
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
+          </Padding>
+        </>
+      )}
+    </OverlayContainer>
   );
 }
 

src/pages/Google/Progress/index.jsx → src/pages/Google/Progress/Progress.jsx

@@ -1,18 +1,43 @@
+import { AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
 import styled from 'styled-components';
 
+import FocusedCardItem from './components/FocusedCardItem';
 import SwiperElement from './Swiper';
+import { SlideContents } from './Swiper/SlideContent';
 
 function Progress() {
+  const [focusedSectionId, setFocusedSectionId] = useState(null);
+  const isDisabled = focusedSectionId === null;
+
+  const focusedItem = SlideContents.filter((_, idx) => idx === focusedSectionId)[0];
+
+  const onClickElement = (idx) => {
+    setFocusedSectionId(idx);
+  };
+
+  const onBlurFocusedCardItem = () => {
+    setFocusedSectionId(null);
+  };
+
   return (
     <Container data-scroll-section>
       <ContentWrapper data-scroll data-scroll-speed="-10">
         <TitleWrapper>
-          <Title>...And GDSC - YS is challenging.</Title>
-          <Desc>Currently in development.</Desc>
+          <Title>...and GDSC - YS is always challenging.</Title>
+          <Desc>Congratulations to those who reached to Top 100!</Desc>
         </TitleWrapper>
         <SwpierWrapper>
-          <SwiperElement />
+          <SwiperElement onClickElement={onClickElement} />
         </SwpierWrapper>
+        <AnimatePresence>
+          <FocusedCardItem
+            focusedItem={focusedItem}
+            disabled={isDisabled}
+            focusedSectionId={focusedSectionId}
+            onBlur={onBlurFocusedCardItem}
+          />
+        </AnimatePresence>
       </ContentWrapper>
     </Container>
   );
@@ -53,8 +78,10 @@ const TitleWrapper = styled.div`
 
 const Title = styled.span`
   display: inline-block;
-  font-size: max(5vw, 28px);
   padding-left: 3vw;
+  padding-bottom: 10px;
+
+  font-size: max(5vw, 28px);
   letter-spacing: -0.5px;
 `;
 

src/pages/Google/Progress/Swiper/Slide.jsx

@@ -1,19 +1,42 @@
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
-function Slide({ name, index }) {
+function Slide({ content, index, onFocus }) {
+  const onClickSlide = () => {
+    onFocus(index);
+  };
+
   return (
-    <SlideContainer>
+    <SlideContainer
+      onClick={onClickSlide}
+      layout
+      layoutId={index + ''}
+      whileHover={{
+        borderRadius: 0,
+        transtiion: {
+          duration: 0.3,
+        },
+      }}
+      whileInView={{
+        transform: 'none',
+      }}
+    >
+      <ImageWrapper>
+        <ImageBackground>
+          <Image src={require(`/public/assets/SolutionChallenge/${content.logo}`)} />
+        </ImageBackground>
+      </ImageWrapper>
       <DescWrapper>
         <Index>{index + 1}</Index>
-        <Name>{name}</Name>
+        <Name>{content.name}</Name>
       </DescWrapper>
     </SlideContainer>
   );
 }
 
 export default Slide;
 
-const SlideContainer = styled.div`
+const SlideContainer = styled(motion.div)`
   width: 40vw;
   height: 350px;
 
@@ -25,11 +48,40 @@ const SlideContainer = styled.div`
   border-radius: 20px;
   background-color: black;
 
+  cursor: pointer;
+
   ${({ theme }) => theme.tablet`
     width: 80vw;
   `}
 `;
 
+const ImageWrapper = styled.div`
+  width: 100%;
+  flex: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ImageBackground = styled.div`
+  width: 175px;
+  height: 175px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 25px;
+
+  background-color: ${(props) => props.theme.backgroundColor.white};
+`;
+
+const Image = styled.img`
+  width: 125px;
+  height: 125px;
+`;
+
 const DescWrapper = styled.div`
   width: 100%;
   padding: 3% 10%;

src/pages/Google/Progress/Swiper/SlideContent.js

@@ -1,20 +1,55 @@
 export const SlideContents = [
   {
     name: 'GreenLight',
+    githubURL: ['gdsc-ys/GreenLight-flutter'],
+    logo: 'greenlight/logo.png',
+    description:
+      'Plogging assistant in your pocket.\nBoth picking up litter and jogging are nice, and doing both would be better!',
   },
   {
     name: 'Connecting the Dots',
+    githubURL: [
+      'gdsc-ys/dot_connect_flutter',
+      'gdsc-ys/dot-connect-server',
+      'inshining/dot-connect-python-server',
+      'snoop2head/DotT5',
+      'snoop2head/DotNeuralNet',
+      'minukHwang/dot-connect',
+    ],
+    logo: 'dots/logo.png',
+    description:
+      "'Connecting the dots' could have different meaning for someone.\nThis app would guide you the other side of the meaningful dots.",
   },
   {
-    name: 'Warning Is All You Need',
+    name: 'HearSitter',
+    githubURL: ['gdsc-ys/hearsitter-flutter'],
+    logo: 'heresitter/logo.png',
+    description:
+      "Hearsitter is designed for aiding CODA(Children Of Deaf Adult).\nDeaf parent and their children could interact 'hand in hand'.",
   },
   {
     name: 'A-Eye',
+    githubURL: ['gdsc-ys/A-EYE-mobile', 'gdsc-ys/A-eye-server'],
+    logo: 'aeye/logo.png',
+    description:
+      'A-Eye offers 3 different eyes for parents.\nWe believe that happy parents could make happy kids.',
   },
   {
-    name: '21Days',
+    name: 'GSTEP',
+    githubURL: ['gdsc-ys/GSTEP', 'yuljang/GSTEP-go', 'haaem/GSTEP-flutter'],
+    logo: 'gstep/logo.png',
+    description:
+      'One small step of protecting environment, one giant step for mankind.\nGSTEP aims for anyone who concerns about the climate change.',
   },
   {
     name: 'Golden Time',
+    githubURL: [
+      'gdsc-ys/golden-time-backend',
+      'gdsc-ys/golden-time-wearos',
+      'gdsc-ys/golden-time-android',
+    ],
+    logo: 'goldentime/logo.png',
+    description:
+      "Golden time is crucial for saving one's life in emergency.\nSending SOS to nearby neighbors would dramatically increase the saving chance.",
   },
 ];

src/pages/Google/Progress/Swiper/index.jsx

@@ -11,7 +11,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import Slide from './Slide';
 import { SlideContents } from './SlideContent';
 
-function SwiperElement() {
+function SwiperElement({ onClickElement }) {
   const { width } = useWindowSize();
 
   return (
@@ -37,7 +37,7 @@ function SwiperElement() {
           SlideContents.map((content, idx) => {
             return (
               <SwiperSlide key={idx}>
-                <Slide name={content.name} index={idx} />
+                <Slide content={content} index={idx} onFocus={onClickElement} />
               </SwiperSlide>
             );
           }),