\n {text}\n \n );\n};\n\nButton.defaultProps = {\n type: DEFAULT,\n disabled: false,\n onClick: () => {},\n};\nButton.propType = {\n type: PropTyps.oneOf([DEFAULT, OUTLINE]),\n text: PropTyps.string.isRequired,\n disabled: PropTyps.bool,\n onClick: PropTyps.func,\n};\n\nexport default Button;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { img_role_po, img_role_mm, img_role_ee, img_role_gg } from \"../Assets\";\n\nconst PO = \"PO\"; // product owner\nconst MM = \"SM\"; // scrum master\"\nconst EE = \"EE\";\nconst GG = \"GG\";\nexport const ROLE_NAMES = {\n PO,\n MM,\n EE,\n GG,\n};\n\nconst UP = \"up\";\nconst DOWN = \"down\";\nexport const ROLE_DIRECTIONS = {\n UP,\n DOWN,\n};\n\nconst Role = ({ name, direction }) => {\n const getImgSrc = () => {\n let src = \"\";\n switch (name) {\n case MM:\n src = img_role_mm;\n break;\n case EE:\n src = img_role_ee;\n break;\n case GG:\n src = img_role_gg;\n break;\n case PO:\n default:\n src = img_role_po;\n break;\n }\n return src;\n };\n\n return (\n \n );\n};\n\nRole.defaultProps = {\n direction: DOWN,\n};\nRole.propTypes = {\n name: PropTypes.oneOf([PO, MM, EE, GG]).isRequired,\n direction: PropTypes.oneOf([UP, DOWN]),\n};\n\nexport default Role;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { ROLE_NAMES } from \"./Role\";\nimport classes from \"../styles.module.scss\";\nimport classNames from \"classnames/bind\";\nconst cx = classNames.bind(classes);\n\nconst GREEN = \"green\";\nconst PURPLE = \"purple\";\nconst RED = \"red\";\nconst YELLOW = \"yellow\";\nconst THEMES = {\n [ROLE_NAMES.PO]: GREEN,\n [ROLE_NAMES.MM]: PURPLE,\n [ROLE_NAMES.GG]: RED,\n [ROLE_NAMES.EE]: YELLOW,\n};\n\nconst Dialog = ({ speaker, children, isShowTriangle }) => (\n \n
{speaker}
\n {children}\n {isShowTriangle &&
}\n
\n
\n
\n
\n
\n {isDefaultScene ? (\n <>\n
\n
\n
\n
\n
深入敏捷の村一探究竟
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n ) : (\n <>\n
\n
\n \n 呦呼，歡迎進入 「SCRUM 新手村」\n ，在正式加入專案開發之前 ，需要請你先了解 Scrum\n 的流程與精神！ 請接受挑戰任務，成功通過 Scrum\n 新手村的挑戰任務吧～\n
\n \n 請接受挑戰任務，成功通過 Scrum 新手村的挑戰任務吧～\n
\n \n }\n />\n \n \n \n )}\n
{children}
;\n};\n\nconst List = ({ title, subtitle, children, theme }) => (\n \n
\n
{title}
\n
{subtitle}
\n
\n
{children}
\n
\n \\ 碰 / 我是短衝小精靈，開發 A 組的 PO 。\n PO 也就是產品負責人（Product Owner）\n ，產品負責人會負責評估產品待辦清單的價值與重要性，依序排列要執行的優先順序\n ， 對齊產品目標 。 最後排出產品待辦清單 （Product Backlog） 唷 ！\n
\n ),\n [SCENES.READY]: (\n \n 剛好我最近手邊有一個 「 人才招募系統 」 的案子 ， 我才剛列出了{\" \"}\n 「 產品需求清單 」 。 既然你都來了 ， 來試試看調整產品優先度\n ， 排出產品待辦清單吧 ！\n
\n ),\n [SCENES.DEMO]: (\n \n 在這階段我們要把需求放進產品待辦清單 ， 並調整其優先順序 。對了 ！\n 我們公司也推薦使用\n 
\n 來做任務的管理呢 ！\n
\n ),\n [SCENES.PRACTICAL]: (\n <>\n 換你來試試看吧 ！
\n 提示 ： 請把需求拖移至產品待辦清單 ， 並調整其優先順序 。
\n \n ),\n [SCENES.FINISHED]: 哇喔完成惹 ， 尼太棒ㄌ！ 我們繼續吧 ！
,\n};\n\nconst ProductBacklog = () => {\n const context = useContext(Context);\n const [nowScene, setNowScene] = useState(SCENES.INTRO);\n const [isDemoActive, setIsDemoActive] = useState(false);\n const [listItems, setListItems] = useState({\n left: [\n {\n title: \"應徵者的線上履歷編輯器\",\n id: nanoid(),\n },\n {\n title: \"後台職缺管理功能（資訊上架、下架、顯示應徵者資料）\",\n id: nanoid(),\n },\n ],\n center: [],\n right: [\n {\n title: \"會員系統（登入、註冊、權限管理）\",\n id: nanoid(),\n },\n {\n title: \"前台職缺列表、應徵\",\n id: nanoid(),\n },\n ],\n });\n\n const handleClickContinue = () => {\n if (nowScene === SCENES.INTRO) {\n setNowScene(SCENES.READY);\n }\n if (nowScene === SCENES.DEMO) {\n if (!isDemoActive) {\n window.scrollTo({\n top: 500,\n behavior: \"smooth\",\n });\n setIsDemoActive(true);\n } else {\n window.scrollTo({ top: 0 });\n setNowScene(SCENES.PRACTICAL);\n }\n }\n if (nowScene === SCENES.FINISHED) {\n context.goStep(STEPS_KEY.PLANNING);\n }\n };\n const handleClickReady = () => {\n setNowScene(SCENES.DEMO);\n };\n const handleClickFinished = () => {\n window.scrollTo({ top: 0 });\n setNowScene(SCENES.FINISHED);\n };\n const handleDragEnd = (event) => {\n const { source, destination } = event;\n\n if (!destination) {\n return;\n }\n\n let draggedItems = { ...listItems };\n const [dragTarget] = draggedItems[source.droppableId].splice(\n source.index,\n 1\n );\n draggedItems[destination.droppableId].splice(\n destination.index,\n 0,\n dragTarget\n );\n\n setListItems(draggedItems);\n };\n\n const renderContent = () => {\n switch (nowScene) {\n case SCENES.INTRO:\n return (\n \n \n
\n );\n case SCENES.READY:\n return (\n \n \n
\n );\n case SCENES.DEMO:\n return (\n \n
\n
\n 應徵者的線上履歷編輯器\n
\n
\n \n 後台職缺管理功能（資訊上架、下架、顯示應徵者資料）\n \n
\n
\n
\n \n \n \n \n
\n
\n
\n 會員系統（登入、註冊、權限管理）\n
\n
\n 前台職缺列表、應徵\n
\n
\n
\n
\n \n {(provided) => (\n \n {listItems.left.map((item, idx) => (\n \n
\n {(provided, snapshot) => (\n \n {item.title}\n \n \n {(provided) => (\n \n {listItems.center.map((item, idx) => (\n \n
\n {(provided, snapshot) => (\n \n {item.title}\n
\n \n {(provided) => (\n \n {listItems.right.map((item, idx) => (\n \n
\n {(provided, snapshot) => (\n \n {item.title}\n \n \n
\n \n );\n case SCENES.FINISHED:\n return (\n \n \n
\n );\n default:\n return null;\n }\n };\n\n return (\n \n
\n
{renderContent()}
\n
\n 產品待辦清單好了之後 ， 我們來召集 ScrumMaster 和開發團隊共同召開\n 短衝規劃會議（Sprint Planning）\n 。短衝即是一個迭代，具有固定時間限制，我們會在這個會議中，決定要完成哪些工作事項來達到商業需求，列出短衝待辦清單（Sprint\n Backlog，並由開發團隊在接下來的產品開發週期裡執行。\n
\n ),\n },\n body: {\n render: (\n \n
\n
\n
\n
\n
\n
\n
\n
\n 哦哦 ， 你是新來的前端吧 ！ 我是這次的 ScrumMaster MM ，\n 我的工作主要是促成開發團隊成員協作 、 引導團隊進行自省會議 ，\n 提升團隊成員對 Scrum 瞭解 。\n
\n ),\n },\n },\n [INTRO_RD]: {\n speaker: ROLE_NAMES.MM,\n header: {\n roles: [ROLE_NAMES.EE, ROLE_NAMES.GG],\n paragraph: null,\n },\n body: {\n render: (\n \n
\n
\n
\n
\n 這兩位是 EE 和 GG ， 是我們開發團隊的成員唷～ 我們團隊\n 一次 Sprint 週期是兩週的時間 ， 依照我的觀察 ，\n 目前團隊可以負擔的點數 (Story Point) 大約是 20 點\n 左右。\n
\n ),\n },\n },\n [STORY_POINT]: {\n speaker: ROLE_NAMES.EE,\n header: {\n roles: [ROLE_NAMES.EE, ROLE_NAMES.GG],\n paragraph: (\n \n 欸新來的 ， 你應該不知道點數是什麼意思吧ㄏㄏ ， 我來跟你介紹一下吧～{\" \"}\n Story Point 目的是為了\n 衡量速度 ， 是用大概花費的時間預估出的相對點數哦 。\n
\n ),\n },\n body: {\n render: (\n \n
\n
\n
\n {Array.from({ length: 7 }, (x, i) => i).map((item) => (\n
\n
\n
\n ))}\n
\n 以 「 費氏數列 」 的 1 、2 、3 、5 、8 、13 、21{\" \"}\n 來估算各項 Story 的分數 。 Story Point 越小 ， 表示這個 Story\n 花費時間越少 ； 越大 ， 花費時間則越多 。 如果出現了一個 21 分 ，\n 可能表示這個 Story 太龐大 ， 需要再拆分細項執行唷 ！\n
\n ),\n },\n body: {\n render: (\n \n {STORY_POINTS.map((item) => (\n
LARGEST_POINT && { className: cx(\"error\") })}\n >\n {item}\n \n 沒錯，如 EE 說的，我這邊已經把剛剛討論好的點數標上去囉～\n 你來練習把任務排到短衝待辦清單吧 ！\n
\n ),\n },\n body: {\n render: ,\n },\n footer: null,\n },\n [ENDING2]: {\n speaker: ROLE_NAMES.EE,\n header: {\n roles: [ROLE_NAMES.EE, ROLE_NAMES.GG],\n paragraph: (\n \n By the way , 我們平常管理任務是使用\n \n 這套軟體 ， 你有時間記得先去註冊和熟悉唷 !\n
\n ),\n },\n body: {\n render: (\n \n \n
\n ),\n },\n footer: null,\n },\n};\nconst SCENES_ORDER = [\n OPENING,\n INTRO_SM,\n INTRO_RD,\n STORY_POINT,\n FIBONACCI,\n ENDING,\n ENDING2,\n];\nconst defaultScene = SCENES_ORDER[0];\n\nconst Planning = () => {\n const footerRef = useRef(null);\n const context = useContext(Context);\n const [nowScene, setNowScene] = useState(defaultScene);\n\n const { header, body, footer } = SCENES[nowScene];\n const headerReverse = nowScene === OPENING || nowScene === INTRO_SM;\n\n const handleChangeScene = () => {\n if (nowScene === SCENES_ORDER[SCENES_ORDER.length - 1]) {\n context.goStep(STEPS_KEY.SPRINT_TASK);\n return;\n }\n\n if ([INTRO_RD, STORY_POINT, FIBONACCI, ENDING].includes(nowScene)) {\n window.scrollTo({ top: 0 });\n }\n if ([OPENING].includes(nowScene)) {\n window.scrollTo({ top: footerRef.current.offsetTop });\n }\n\n const index = SCENES_ORDER.findIndex((scene) => scene === nowScene);\n setNowScene(SCENES_ORDER[index + 1]);\n };\n\n return (\n \n {header && (\n
\n
\n {header.paragraph && (\n \n )}\n
\n {header.roles.map((role) => (\n
\n \n
\n ))}\n
\n )}\n
{body.render}
\n {footer && (\n
\n {footer.roles.map((role) => (\n
\n \n
\n ))}\n
\n {footer.paragraph && (\n \n )}\n
\n
\n )}\n
\n 換你來試試看吧 ！ 把 「 產品待辦清單 」 的項目拖進\n 「 開發Ａ組的短衝待辦清單 」 裡吧 ！ 提示：置入兩項以上的\n Story ， 點數總和不能超過團隊負擔上限 20 點唷！\n
\n ),\n [COMPLETE]: 噢嗚嗚 ， 太厲害ㄌ ！ 又完成了一關 ！ 還有下一關等著你 ！
,\n};\n\nconst SprintTask = () => {\n const context = useContext(Context);\n\n const [nowScene, setNowScene] = useState(DRAG);\n const [listItems, setListItems] = useState({\n [PRODUCT_BACKLOG]: {\n list: [...LIST_ITEMS],\n },\n [SPRINT_BACKLOG]: { list: [] },\n });\n\n const handleDragEnd = (event) => {\n const { source, destination } = event;\n\n if (!destination) {\n return;\n }\n\n let draggedItems = { ...listItems };\n const [dragTarget] = draggedItems[source.droppableId].list.splice(\n source.index,\n 1\n );\n draggedItems[destination.droppableId].list.splice(\n destination.index,\n 0,\n dragTarget\n );\n\n setListItems(draggedItems);\n };\n\n const handleClickComplete = () => {\n window.scrollTo({ top: 0 });\n setNowScene(COMPLETE);\n };\n const goNextStep = () => {\n if (nowScene === COMPLETE) {\n window.scrollTo({ top: 0 });\n context.goStep(STEPS_KEY.SPRINT_INTRO);\n }\n };\n\n const totalPoint = listItems[SPRINT_BACKLOG].list.reduce(\n (acc, current) => acc + current.point,\n 0\n );\n\n return (\n \n
\n
\n
\n \n \n {(provided) => (\n \n {listItems[PRODUCT_BACKLOG].list.map((item, idx) => (\n \n {(provided, snapshot) => (\n \n \n \n
{item.point}\n
{item.title}
\n
\n )}\n \n ))}\n
\n
{item.point}\n
{item.title}
\n
\n \n
\n \n {nowScene === DRAG && (\n \n MAX_POINTS ||\n listItems[SPRINT_BACKLOG].list.length < 2\n }\n onClick={handleClickComplete}\n />\n
\n )}\n \n );\n};\nexport default SprintTask;\n","import React, { useEffect, useState, useContext, useRef } from \"react\";\n\nimport { img_daily, img_review, img_retro } from \"../Assets\";\nimport Dialog from \"../Components/Dialog\";\nimport Role, { ROLE_NAMES } from \"../Components/Role\";\nimport List, { LIST_ITEM_TYPE, LIST_THEME } from \"../Components/List\";\nimport Button, { BUTTON_TYPES } from \"../Components/Button\";\nimport { Context, STEPS_KEY } from \"../Scrum2\";\n\nimport classes from \"../styles.module.scss\";\nimport classNames from \"classnames/bind\";\nconst cx = classNames.bind(classes);\n\nconst OPENING = \"opening\";\nconst INTRO = \"intro\";\nconst PROCESS = \"process\";\nconst END = \"end\";\nconst PARAGRAPH = {\n [OPENING]: (\n \n 等等等等等 ， 你都還不知道什麼是 Sprint 吧 ！ 讓我先為你介紹一下～\n
\n 仔細聽好唷 ， 等等會考考你 ！\n
\n ),\n [INTRO]: (\n \n Sprint 是一個短衝 ， 開發團隊會在這期間執行開發 。 在這段期間內 ，\n 開發團隊舉辦每日站立會議 (Daily Scrum) ，\n 追蹤成員間的工作狀況 ， 在 Sprint 的結束也會包含\n 短衝檢視會議 (Sprint Review) 以及\n 短衝自省會議 (Sprint Retrospective) 。\n
\n ),\n [PROCESS]: (\n \n 換你來試試看吧 ！ 在這經典的 Surum 流程圖中 ，\n 這些流程分別代表哪一個會議呢 ？
\n (點擊畫面任意處繼續)\n
\n ),\n [END]: 哼哼沒想到你這麼快就學會惹 ， 快結束了加油加油 ！
,\n};\nconst DAILY = \"daily\";\nconst REVIEW = \"review\";\nconst RETRO = \"retro\";\nconst INTRO_STEPS = {\n [DAILY]: {\n order: 1,\n imgSrc: img_daily,\n title: \"每日站立會議\",\n subtitle: \"Daily Scrum\",\n className: \"daily\",\n content: (\n \n 每天都要進行的會議 ， 以15分鐘為限制\n - 昨天為團隊的短衝目標 (Sprint Goal)做了那些進度
\n - 今天我會如何準備來幫助團隊達到短衝目標
\n - 過程中有遇到什麼問題、難題
\n 透過團隊分享 ， 追蹤大家的工作狀況。\n
\n ),\n },\n [REVIEW]: {\n order: 2,\n imgSrc: img_review,\n title: \"短衝檢視會議\",\n subtitle: \"Sprint Review\",\n className: \"review\",\n content: (\n 用來檢視該次短衝增量的成果 ， 以蒐集相關的回饋數據或意見 。
\n ),\n },\n [RETRO]: {\n order: 3,\n imgSrc: img_retro,\n title: \"短衝自省會議\",\n subtitle: \"Sprint Retrospective\",\n className: \"retrospective\",\n content: (\n \n 團隊在自省會議裡 , 會共同回顧該短衝歷程發生的事情\n - 好的地方
\n - 可以改進的地方
\n - 如何維持我們已有的成功經驗
\n 優化工作流程、讓團隊有變得更好的機會。\n
\n ),\n },\n};\nconst LIST_ITEMS = [\n {\n title: \"產品待辦清單\",\n subtitle: \"Product Backlog\",\n },\n {\n title: \"短衝規劃會議\",\n subtitle: \"Sprint Planing\",\n },\n {\n title: \"短衝待辦清單\",\n subtitle: \"Sprint Backlog\",\n },\n];\n\nconst SprintIntro = () => {\n const upperRef = useRef(null);\n const context = useContext(Context);\n const [nowScene, setNowScene] = useState(OPENING);\n const [introStep, setIntroStep] = useState(0);\n const [processStep, setProcessStep] = useState(0);\n\n const handleChangeScene = () => {\n switch (nowScene) {\n case OPENING:\n setNowScene(INTRO);\n break;\n case INTRO:\n if (introStep >= Object.keys(INTRO_STEPS).length) {\n setNowScene(PROCESS);\n } else {\n if (introStep === 0) {\n window.scrollTo({ top: upperRef.current.offsetHeight });\n }\n setIntroStep(introStep + 1);\n }\n break;\n case PROCESS:\n if (processStep >= 2) {\n setNowScene(END);\n return;\n }\n window.scrollTo({ top: upperRef.current.offsetHeight });\n setProcessStep(processStep + 1);\n break;\n case END:\n context.goStep(STEPS_KEY.RETRO);\n break;\n default:\n break;\n }\n };\n\n const renderContent = () => {\n switch (nowScene) {\n case INTRO:\n return (\n \n {Object.keys(INTRO_STEPS).map((key) => (\n
= INTRO_STEPS[key].order && {\n className: cx(\"show\"),\n })}\n >\n \n \n
{INTRO_STEPS[key].title}
\n
{INTRO_STEPS[key].subtitle}\n
\n
\n {LIST_ITEMS.map((item) => (\n
= 1 && \"jumping\"\n )}\n >\n {item.title}
\n {item.subtitle}\n \n ))}\n
短衝
\n sprint\n \n \n \n
\n \n \n
\n \n \n
\n \n {Object.keys(INTRO_STEPS).map((key) => (\n
= 2 && \"position_ab\"\n )}\n >\n {INTRO_STEPS[key].title}
\n {INTRO_STEPS[key].subtitle}\n \n \n
\n );\n default:\n case OPENING:\n return null;\n }\n };\n\n useEffect(() => {\n window.scrollTo({ top: 0 });\n }, [nowScene]);\n\n return (\n \n
\n
{renderContent()}
\n
\n 嗚啊啊新來的 ， 你真的很幸運 ， 今天剛好是開發 B 組的 Retro ，\n 你也來見識一下 ， 看看 Retro 都該做些什麼吧～～{\" \"}\n
\n ),\n [EXAMPLE]: (\n \n 我們會在會議裡請團隊成員提出哪些是做得好的地方 、 哪些可以繼續改善的地方\n ？ 並記錄再 Confluence 中 。 Retro 重點在於「正面表述」，\n 你也思考看看 ， 哪一些是適合 Retro 的回饋呢 ？\n
\n ),\n [END]: (\n \n 太酷ㄌ吧 ， 根本天才 ， 畢業之後不要忘記我唷!\n
\n （點擊畫面任意處繼續）\n
\n ),\n};\n\nconst Retro = () => {\n const context = useContext(Context);\n const [nowScene, setNowScene] = useState(OPENING);\n const [exampleStep, setExampleStep] = useState(0);\n\n const handleChangeScene = () => {\n switch (nowScene) {\n case OPENING:\n setNowScene(EXAMPLE);\n break;\n case EXAMPLE:\n if (exampleStep >= 3) {\n setNowScene(END);\n return;\n }\n window.scrollTo({ top: 400 });\n setExampleStep(exampleStep + 1);\n break;\n case END:\n context.goStep(STEPS_KEY.COMPLETE);\n break;\n default:\n break;\n }\n };\n\n const renderContent = () => {\n switch (nowScene) {\n case EXAMPLE:\n return (\n \n
\n
Q1.做得好的地方?
\n
\n
\n
= 1 && ROLE_NAMES.MM)}\n >\n \n \n
\n 這次我幫了很多人救火耶～\n \n
\n
\n
= 1 && ROLE_NAMES.PO)}\n >\n \n \n
\n 大家在開發上都會互相 cover ， 讓任務都有準在時間內完成 。\n \n
= 2 && \"show\")}>\n \n
\n
\n
\n
Q2.有哪些可以做得更好？
\n
\n
\n
= 1 && ROLE_NAMES.EE)}\n >\n \n \n
\n 可以記錄這次的開發時間 ， 讓預估團隊點數可以更精準 。\n \n
= 3 && \"show\")}>\n \n
\n
\n
\n
= 1 && ROLE_NAMES.GG)}\n >\n \n \n
\n 開發時間預估不準確 ， 請後端下次改進 ， 避免 delay 到我 。\n \n
\n
\n
{renderContent()}
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
恭喜你通過
\n
《 敏捷任務 - 最初の試煉 》
\n
再玩一次\n
\n
\n
\n {Object.keys(STEPS_KEY).map((key, idx) => (\n
idx + 1 && \"goaled\",\n idx + 1 === Object.keys(STEPS_KEY).length && \"lastest\"\n )}\n onClick={() => {\n handleClickStep(key);\n }}\n >\n {STEPS_KEY[key]}\n \n ))}\n
\n
\n
\n 唉呀！此版本僅能使用電腦操作…\n
\n ，請使用電腦開啟頁面。\n
\n
\n
\n Scrum 新手村\n \n \n \n \n
\n \n {isMobile() ? (\n
\n ) : (\n <>\n
\n {renderComponent()}\n \n )}\n
\n
\n
\n
The F2E 4th 互動式網頁設計
\n
\n {TABS.map((tab) => (\n {\n handleClickTab(tab.key);\n }}\n >\n {tab.text}\n \n ))}\n
\n
\n
{renderTabContent()}\n
\n
\n
\n
\n
\n {cards.map((card) => {\n const { id, imgUrl, matched } = card;\n const beChoiced = matched || firstChoice?.id === id || secondChoice?.id === id;\n return (\n
{\n handleClick(card);\n }}\n >\n \n
\n
\n
\n );\n })}\n
\n
\n
\n {Array.from({ length: COLUM }, (_, i) => i + 1).map((colX) => (\n
\n {Array.from({ length: COLUM }, (_, i) => i + 1).map((colY) => {\n let type;\n if (snake.some((el) => el.x === colX && el.y === colY)) {\n type = \"snake\";\n } else if (colX === fruit.x && colY === fruit.y) {\n type = \"fruit\";\n }\n return
;\n })}\n
\n ))}\n
\n {stop && (\n
\n
BOOM!
\n
\n
\n )}\n
\n
coming soon
\n \n );\n};\n\nexport default Minesweeper;\n","import React, { useState, useEffect } from \"react\";\nimport qs from \"qs\";\nimport { useLocation, useHistory } from \"react-router-dom\";\nimport { SiRobotframework } from \"react-icons/si\";\n\nimport GoHome from \"Component/GoHome\";\nimport CardMemory from \"./CardMemory\";\nimport Snake from \"./Snake\";\nimport Minesweeper from \"./Minesweeper\";\n\nimport classes from \"./styles.module.scss\";\nimport classNames from \"classnames/bind\";\nconst cx = classNames.bind(classes);\n\nconst CARD_MEMORY = \"cardMemory\";\nconst SNAKE = \"snake\";\nconst MINESWEEPER = \"minesweeper\";\n\nconst TABS = [\n {\n key: CARD_MEMORY,\n title: \"翻牌記憶遊戲\",\n },\n {\n key: SNAKE,\n title: \"貪吃蛇遊戲\",\n },\n {\n key: MINESWEEPER,\n title: \"踩地雷遊戲\",\n },\n];\n\nconst Games = () => {\n const location = useLocation();\n const history = useHistory();\n const querys = qs.parse(location.search, { ignoreQueryPrefix: true });\n const { tab } = querys;\n const [nowTab, setNowTab] = useState(CARD_MEMORY);\n const handleClickTab = (tab) => {\n if (tab === nowTab) return;\n\n history.push({\n pathname: location.pathname,\n search: qs.stringify({ tab }),\n });\n };\n const renderTabContent = () => {\n switch (nowTab) {\n case CARD_MEMORY:\n return ;\n case SNAKE:\n return ;\n case MINESWEEPER:\n return ;\n default:\n return null;\n }\n };\n\n useEffect(() => {\n if (tab) {\n setNowTab(tab);\n }\n }, [tab]);\n\n return (\n \n
\n {TABS.map(({ key, title }) => (\n {\n handleClickTab(key);\n }}\n >\n {nowTab === key && (\n \n \n \n )}\n\n {title}\n \n ))}\n
\n
{renderTabContent()}
\n
\n
\n
\n
\n
蘇怡姍 (Nicole Su)
\n
前端工程師
\n
\n
\n
\n
\n
\n
\n
\n
\n \n 0987-064-169\n
\n
\n \n nju6g0@gmail.com\n
\n
\n \n https://master.d91po6eifpl24.amplifyapp.com/home\n
\n
\n \n New Taipei City, Taiwan\n
\n
\n
\n
SKILLS
\n
\n - \n 工具軟體\n
\n git, Visual Studio code\n \n - \n 網頁相關\n
\n - html, css, scss
\n - bootstrap, Ant design
\n - JavaScript
\n - React JS
\n - Next.js
\n - GraphQL
\n
\n \n
\n
\n
\n
訓練及證照
\n
\n - 六角學院 2024 Vue前端新手營挑戰者證書
\n - 財團法人資訊工業策進會辦理之「前端工程師就業養成班」(受訓期間：2018年12月27日~2019年6月5日)
\n - 日本語能力試驗N3合格(測驗日期2018年12月2日)
\n - 財團法人中華民國對外貿易發展協會國際企業人材培訓中心第28期國際企業在職班(210小時)(受訓期間：2017年1月4日~2017年7月1日)
\n
\n
\n
\n
\n
\n - 4 years + Frontend Developer
\n - 熟悉 React.js 相關技術及應用
\n - 與後端工程師討論 API 規格，構想錯誤情況處理
\n - 與pm評估需求可行性
\n - 獨立開發與團隊合作能力
\n
\n
\n
\n 工作經歷\n \n
\n
\n
前端工程師 • Bonio 幫你優
\n
十月 2021 - 6月 2024
\n
\n 負責社群共學平台前端相關的開發及維護：\n - 以 React + styled-component 進行網頁前端功能開發及維護。
\n - 以 React Native 進行 APP 功能開發及維護 。
\n - 使用 Next.js + Ant Design 進行網頁後台開發及維護。
\n - 與團隊共同評估需求可行性。
\n - 與後端夥伴合作，制定、串接 API(GraphQL)。
\n
\n
\n
\n
前端工程師 • 和泰聯網股份有限公司
\n
三月 2021 - 七月 2021
\n
以React規劃及開發企業簽單後台管理系統，並與後端工程師溝通合作串接API。
\n
\n
\n
前端工程師 • 緯創軟體股份有限公司
\n
三月 2020 - 三月 2021
\n
\n 參與電競社群平台專案，使用 React 進行網頁維護及需求開發，與 UI/UX 設計師及後端工程師溝通合作，套用版面與實作並串接後端 API。\n
\n
\n
\n
前端工程師 • 精誠資訊股份有限公司
\n
七月 2019 - 三月 2020
\n
以 angular 撰寫銀行端末系統前端頁面(系統翻新)。
\n
\n
\n
\n
\n 學歷\n \n
\n
\n
國立臺北大學
\n
企業管理學系碩士 2009 - 2011
\n
\n
\n
\n
\n
\n