모달창이 잘 뜨다가 갑자기 안떠서 질문 남겨요...

[하지민]

import * as S from './Modal.style';
import { ReactComponent as GitHubIcon } from '../../images/socials/github.svg';
import { ReactComponent as LinkedInIcon } from '../../images/socials/linkedin.svg';
import { ReactComponent as TstoryIcon } from '../../images/socials/tstory.svg';
import { ReactComponent as VelogIcon } from '../../images/socials/velog.svg';
import { ReactComponent as Divider } from '../../images/icons/divider.svg';
import { ReactComponent as CloseIcon } from '../../images/icons/x_orange.svg';

export default function Modal({ member, closeModal }) {
  const questions = [
    '자기소개 부탁드립니다!',
    'APPS 활동 중 가장 기억에 남았던 순간은?',
    'APPS 이전과 이후, 나의 변화 이야기를 들려주세요!',
  ];

  return (
    <S.ModalWrapper>
      <S.Modal>
        <S.MemberDetailWrapper>
          <S.MemberCard>
            <S.MemberImage
              src={require(`../../images/memberProfiles/${member.image}`)}
              alt={member.name}
            />
            <S.InfoWrapper>
              <S.NameAndPositionWrapper>
                <S.MemberName>{member.name}</S.MemberName>
                <S.MemberPositionInfo>{member.position}</S.MemberPositionInfo>
              </S.NameAndPositionWrapper>
              <S.MemberInfo>{member.title}</S.MemberInfo>
            </S.InfoWrapper>
          </S.MemberCard>

          <S.MemberDetailSection>
            <S.TechStackSection>
              {member.techStack?.map((tech, index) => (
                <S.TechItem key={index}>{tech}</S.TechItem>
              ))}
            </S.TechStackSection>

            <S.SNSSection>
              {member.snsLinks && (
                <>
                  {member.snsLinks.github && (
                    <a
                      href={member.snsLinks.github}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <GitHubIcon />
                    </a>
                  )}
                  {member.snsLinks.linkedin && (
                    <a
                      href={member.snsLinks.linkedin}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <LinkedInIcon />
                    </a>
                  )}
                  {member.snsLinks.tstory && (
                    <a
                      href={member.snsLinks.tstory}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <TstoryIcon />
                    </a>
                  )}
                  {member.snsLinks.velog && (
                    <a
                      href={member.snsLinks.velog}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <VelogIcon />
                    </a>
                  )}
                </>
              )}
            </S.SNSSection>
          </S.MemberDetailSection>
        </S.MemberDetailWrapper>

        <Divider />

        <S.QASection>
          {questions.map((question, index) => (
            <S.QuestionWrapper key={index}>
              <S.QuestionLabel>Q{index + 1}</S.QuestionLabel>
              <S.Question>{question}</S.Question>
              <S.Answer>{member.answers[index]}</S.Answer>
            </S.QuestionWrapper>
          ))}
        </S.QASection>

        <S.CloseButton onClick={closeModal}>
          <CloseIcon />
        </S.CloseButton>
      </S.Modal>
    </S.ModalWrapper>
  );
} //Modal.jsx

import styled from 'styled-components';

export const ModalWrapper = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999px;
`;

export const Modal = styled.div`
  background: gray;
  width: 1100px;
  height: 680px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
`;

export const CloseButton = styled.button`
  position: absolute;
  top: 60px;
  right: 70px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const MemberCard = styled.div`
  position: absolute;
  top: 97px;
  left: 70px;
  display: flex;
  align-items: center;
  position: relative;
  width: 294px;
  height: 142px;
  border-radius: 20px;
  background-color: #ff5400;
`;

export const MemberImage = styled.img`
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 100%;
  background-color: #373737;
  margin-left: 23px;
`;

export const MemberDetailWrapper = styled.div`
  display: flex;
  flex-direction: row;
`;

export const InfoWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-left: 24px;
  align-items: flex-start;
`;

export const NameAndPositionWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 7px;
`;

export const MemberName = styled.h2`
  color: #fff;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
`;

export const MemberPositionInfo = styled.p`
  color: #fff;
  margin: 0;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.8px;
`;

export const MemberInfo = styled.h3`
  color: var(--orange_sub, #ffe0b8);
  margin: 0;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.8px;
`;

export const MemberDetailSection = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
`;

export const TechStackSection = styled.div`
  position: absolute;
  top: 97px;
  left: 394px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
`;

export const TechItem = styled.div`
  display: inline-block;
  padding: 5px 16px;
  background-color: #fff;
  color: #ff5400;
  border-radius: 20px;
  font-size: 14px;
`;

export const SNSSection = styled.div`
  position: absolute;
  top: 187px;
  left: 394px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 0;
  margin-bottom: 0;
`;

export const Divider = styled.div`
  position: absolute;
  top: 279px;
  left: 70px;
  width: 960px;
  height: 0;
  border-top: 1px solid #ff5400;
  flex-shrink: 0;
`;

export const QASection = styled.div`
  position: absolute;
  top: 316px;
  left: 128px;
  text-align: left;
`;

export const QuestionWrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin-bottom: 46px;
`;

export const QuestionLabel = styled.strong`
  color: var(--orange, #ff5400);
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1px;
`;

export const Question = styled.p`
  color: #fff;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1px;
  margin-bottom: 4px;
`;

export const Answer = styled.div`
  color: #fff;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.7px;
  margin: 0;
`; //Modal.style.jsx

import React, { useState } from 'react';
import * as S from './AboutAppsPage.style';
import ActivityCard from '../../components/ActivityCard/ActivityCard';
import { activitiesArr } from '../../database/activity_list';
import MemberCard from '../../components/MemberCard/MemberCard';
import members from '../../database/members';
import Modal from '../../components/Modal/Modal';

export default function AboutAppsPage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedMember, setSelectedMember] = useState(null);

  const openModal = (member) => {
    console.log('Opening modal for:', member);
    setSelectedMember(member);
    setIsModalOpen(true);
  };

  const closeModal = () => {
    console.log('Closing modal');
    setSelectedMember(null);
    setIsModalOpen(false);
  };
  return (
    <S.Root>
      <S.TopToIntroContainer>
        <S.Top>
          <S.PageTitleWrapper>
            <S.PageTitle>ABOUT</S.PageTitle>
            <S.IconTitle></S.IconTitle>
          </S.PageTitleWrapper>
        </S.Top>
        <S.IntroAPPSTitle>INTRODUCTION</S.IntroAPPSTitle>
        <S.IntroAPPSContent>
          APPS는 모바일 앱&웹 프로그래밍 동아리로,
          <br />
          기술과 아이디어를 통해 프로젝트를 진행하며
          <br />
          개발 능력을 향상시키고 커뮤니티 내에서 성장합니다.
          <br />
          활발한 소통과 피드백을 통해 개인과 공동체 발전을 촉진합니다.
        </S.IntroAPPSContent>
        <S.IntroToActLine></S.IntroToActLine>
      </S.TopToIntroContainer>

      <S.ActivitiesContainer>
        <S.ActivitiesTitleWrapper>
          <S.ActivitiesTitle>ACTIVITIES</S.ActivitiesTitle>
          <S.ActivitiesDescription>
            APPS에서 정기적으로 진행하는 다양한 활동들이 있어요
          </S.ActivitiesDescription>
        </S.ActivitiesTitleWrapper>
        <S.ActivitiesCardWrapper>
          {activitiesArr.map((activity) => {
            return (
              <ActivityCard
                activityName={activity.name}
                activityIntro={activity.intro}
                activityImg={activity.img}
              />
            );
          })}
        </S.ActivitiesCardWrapper>
      </S.ActivitiesContainer>
      <S.TeamContainer>
        <S.TeamIntroWrapper>
          <S.TeamIntroTitle>APPS와 함께하는 사람들</S.TeamIntroTitle>
          <S.TeamIntroContent>
            APPS 동아리 내 동아리 부원들을 소개할게요
            <br />
            카드를 클릭하여 APPS 부원들의 인터뷰를 만나보세요!
          </S.TeamIntroContent>
        </S.TeamIntroWrapper>
        <S.MemberList>
          {members.map((member, index) => (
            <MemberCard
              key={index}
              image={require(`../../images/memberProfiles/${member.image}`)}
              name={member.name}
              title={member.title}
              position={member.position}
              backgroundColor={
                index % 8 === 0 ||
                index % 8 === 3 ||
                index % 8 === 5 ||
                index % 8 === 6
                  ? '#2051FF'
                  : '#3F69FF'
              }
              onClick={() => openModal(member)}
            />
          ))}
        </S.MemberList>
      </S.TeamContainer>
      {isModalOpen && <Modal member={selectedMember} closeModal={closeModal} />}
    </S.Root>
  );
} //AboutAppsPage.jsx

개인프로젝트 중인데 오늘 하루종일 해봤는데 도저히 모르겠어서 질문 남겨요.

[codingapple]

모달창 보여주는 state 잘변하고 있는거 맞으면
개발자도구에서 모달창 css때문에 안보이는건가 확인해봅시다

[하지민]

덕분에 해결했습니다 너무 감사합니다!

[글쓴이]

글