11회차 과제 - 류승현

[RSH0770]

신경써서 구현한 부분

LanguageContext.js

import React, { createContext } from "react";

const LanguageContext = createContext(null);

export default LanguageContext;

• 언어 변경을 위한 context 생성

App.jsx

function App() {
  return (
    
    <LanguageProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            {/* index routes를 통해 /Home 경로를 기본 경로로 설정 */}
            <Route path="about" element={<About />} />
            <Route path="projects" element={<Project />} />
            <Route path="projects/:id" element={<ProjectDetail />} />
          </Route>
          <Route path="*" element={<NotFound />} /> {/* 404 페이지 */}
        </Routes>
      </BrowserRouter>
    </LanguageProvider>
  );
}

• 기존 라우팅 구조를 LanguageProvider로 감싸도록 수정했습니다.

Home.jsx

const Home = () => {
  const { language } = useContext(LanguageContext);

  return (
    <div>
      {language.languageIs === "English" ? (
        <div className={BackgroundCSS}>
          <h1 className={titleCSS}>Mini</h1>
          <h1 className={titleCSS}>Portfolio</h1>
          <div className={subtitleCSS}>
            <h2 className="pr-3">Computer Science</h2>
            <h2 className="pr-3">3rd</h2>
            <h2>Ryu SeungHyun</h2>
          </div>
        </div>
      ) : (
        <div className={BackgroundCSS}>
          <h1 className={titleCSS}>미니</h1>
          <h1 className={titleCSS}>포트폴리오</h1>
          <div className={subtitleCSS}>
            <h2 className="pr-3">컴퓨터공학과</h2>
            <h2 className="pr-3">3학년</h2>
            <h2>류승현</h2>
          </div>
        </div>
      )}
    </div>
  );

ProjectDetail.jsx

const ProjectDetail = () => {
  ...
  const { language } = useContext(LanguageContext);
  ...
  return (
    <div>
      {language.languageIs === "English" ? (
        <div className="min-h-screen p-25 bg-linear-to-r from-blue-600 to-pink-500">
          <div className="p-4 bg-neutral-100 border-2 rounded-xl">
            <h1 className="pb-4 text-3xl font-bold">{projects.title}</h1>
            <div className="flex flex-row">
              <p className="pr-4 text-xl">{projects.language}</p>
              <p className="text-xl">Updated {projects.last_update_En}</p>
            </div>
          </div>
        </div>
      ) : (
        <div className="min-h-screen p-25 bg-linear-to-r from-blue-600 to-pink-500">
          <div className="p-4 bg-neutral-100 border-2 rounded-xl">
            <h1 className="pb-4 text-3xl font-bold">{projects.title}</h1>
            <div className="flex flex-row">
              <p className="pr-4 text-xl">{projects.language}</p>
              <p className="text-xl">{projects.last_update_Ko}에 업데이트 됨</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

• 언어 변경을 위해 각 페이지에 useContext를 사용했습니다.
• useContext를 사용해 설정된 언어가 영어라면 텍스트를 영어로 출력하고, 한글이라면 텍스트를 한글로 된 화면을 보여주도록 만들었습니다.

완성본

• 홈 페이지
  
  

• 소개 페이지
  
  

• 프로젝트 목록 페이지
  
  

• 프로젝트 상세 페이지
  
  

새롭게 알게 된 내용

질문

[vni911]

이 부분도 삼항연산자로 추가해 주시면 좋을 것 같습니다!

[eveveev]

isChanged와 languageIs 두 값을 함께 관리한다는 점이 좋은 아이디어인 것 같습니다!

[martinkang1234]

깔끔한 코드와 상세한 pr 인상 깊게 잘 보았습니다 !